diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/index.tsx index 6daa918b8..9a99ae0f1 100644 --- a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/index.tsx +++ b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/index.tsx @@ -1,5 +1,5 @@ import { useLazyQuery, useQuery } from '@apollo/client'; -import { Typography, useTheme } from '@material-ui/core'; +import { RadioGroup, Typography, useTheme } from '@material-ui/core'; import { LitmusCard, RadioButton, Search } from 'litmus-ui'; import React, { forwardRef, @@ -215,32 +215,38 @@ const ChooseWorkflowAgent = forwardRef((_, ref) => { /> {/* Cluster Data */} -
- {filteredCluster.map((cluster) => ( - - handleChange(e)} + handleChange(e)} + > +
+ {filteredCluster.map((cluster) => ( + - {cluster.cluster_name}
- {cluster.cluster_id} - -
- ))} -
+ +
+ {cluster.cluster_name} + {cluster.cluster_id} +
+
+
+ ))} +
+ ); diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/styles.ts index a87eb9f1a..8ff0e8153 100644 --- a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/styles.ts +++ b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/styles.ts @@ -43,12 +43,13 @@ const useStyles = makeStyles((theme: Theme) => ({ // Agent Div agentWrapperDiv: { marginTop: theme.spacing(5), - display: 'grid', - gridTemplateColumns: '1fr 1fr', - gridGap: '1.5rem', + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', }, litmusCard: { background: theme.palette.cards.background, + margin: theme.spacing(2, 2, 2, 0), }, agentRadioButton: { marginTop: theme.spacing(1), diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/AddProbe/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/AddProbe/index.tsx index 86b9c548d..c63e4625c 100644 --- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/AddProbe/index.tsx +++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/AddProbe/index.tsx @@ -247,7 +247,7 @@ const AddProbe: React.FC = ({
- {t('createWorkflow.tuneWorkflow.addProbe.labels.timeout')}(ms) + {t('createWorkflow.tuneWorkflow.addProbe.labels.timeout')}(sec) = ({
- {t('createWorkflow.tuneWorkflow.addProbe.labels.interval')}(ms) + {t('createWorkflow.tuneWorkflow.addProbe.labels.interval')}(sec) = ({
- {t('createWorkflow.tuneWorkflow.addProbe.labels.polling')}(ms) + {t('createWorkflow.tuneWorkflow.addProbe.labels.polling')}(sec) = ({
{t('createWorkflow.tuneWorkflow.addProbe.labels.initialDelay')} - (ms) + (sec) = ({ closeStepper, isCustom, }) => { - const { t } = useTranslation(); const classes = useStyles(); // State variable to handle Stepper Steps @@ -73,76 +65,6 @@ const ConfigurationStepper: React.FC = ({ const gotoStep = (page: number) => { setActiveStep(page); }; - const workflow = useActions(WorkflowActions); - const manifest: WorkflowManifest = useSelector( - (state: RootState) => state.workflowManifest - ); - - const deleteExperiment = () => { - /** - * Workflow manifest saved in redux state - */ - const wfManifest = YAML.parse(manifest.manifest); - - /** - * Get template name according to the experiment index - */ - const templateName = wfManifest.spec.templates[experimentIndex].name; - - /** - * Get the workflow name according to the experiment index - */ - const wfName = YAML.parse(manifest.engineYAML).metadata.generateName; - - /** - * if the template is a revert-chaos template - * the engine name is removed from the - * revert-chaos template args - */ - if ( - wfManifest.spec.templates[ - wfManifest.spec.templates.length - 1 - ].name.includes('revert-') - ) { - const argument = wfManifest.spec.templates[ - wfManifest.spec.templates.length - 1 - ].container.args[0].replace(wfName, ''); - wfManifest.spec.templates[ - wfManifest.spec.templates.length - 1 - ].container.args[0] = argument; - } - - /** - * Remove the experiment name from steps - */ - wfManifest.spec.templates[0].steps.forEach( - (data: any, stepIndex: number) => { - data.forEach((step: any, index: number) => { - if (step.name === templateName) { - data.splice(index, 1); - } - }); - if (data.length === 0) { - wfManifest.spec.templates[0].steps.splice(stepIndex, 1); - } - } - ); - - /** - * Remove the chaos engine from the overall manifest - * according to the experiment index - */ - wfManifest.spec.templates.splice(experimentIndex, 1); - - /** - * Set the updated manifest to redux state - */ - workflow.setWorkflowManifest({ - manifest: YAML.stringify(wfManifest), - engineYAML: '', - }); - closeStepper(); - }; return (
@@ -151,26 +73,6 @@ const ConfigurationStepper: React.FC = ({ ✕
-
- - {t('createWorkflow.tuneWorkflow.verticalStepper.editExp')} - - { - deleteExperiment(); - }} - className={classes.deleteBtn} - > - delete - - {t('createWorkflow.tuneWorkflow.verticalStepper.deleteExp')} - - -
{steps.map((label, index) => ( diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowTable.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowTable.tsx index cbc6faf6b..cd9f56a26 100644 --- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowTable.tsx +++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowTable.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-const-assign */ -import { Typography, useTheme } from '@material-ui/core'; +import { IconButton, Typography, useTheme } from '@material-ui/core'; import Paper from '@material-ui/core/Paper'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; @@ -224,6 +224,75 @@ const WorkflowTable = forwardRef( }); }, [manifest]); + const deleteExperiment = (experimentIndex: number) => { + /** + * Workflow manifest saved in redux state + */ + const wfManifest = YAML.parse(manifest); + + /** + * Get template name according to the experiment index + */ + const templateName = wfManifest.spec.templates[experimentIndex].name; + + /** + * Get instance_id of Chaos Engines + */ + const selectedEngine = + wfManifest.spec.templates[experimentIndex].inputs.artifacts[0]; + const { instance_id } = YAML.parse( + selectedEngine.raw.data + ).metadata.labels; + + /** + * if the template is a revert-chaos template + * the engine name is removed from the + * revert-chaos template args + */ + if ( + wfManifest.spec.templates[ + wfManifest.spec.templates.length - 1 + ].name.includes('revert-') + ) { + const argument = wfManifest.spec.templates[ + wfManifest.spec.templates.length - 1 + ].container.args[0].replace(`${instance_id}, `, ''); + wfManifest.spec.templates[ + wfManifest.spec.templates.length - 1 + ].container.args[0] = argument; + } + + /** + * Remove the experiment name from steps + */ + wfManifest.spec.templates[0].steps.forEach( + (data: any, stepIndex: number) => { + data.forEach((step: any, index: number) => { + if (step.name === templateName) { + data.splice(index, 1); + } + }); + if (data.length === 0) { + wfManifest.spec.templates[0].steps.splice(stepIndex, 1); + } + } + ); + + /** + * Remove the chaos engine from the overall manifest + * according to the experiment index + */ + wfManifest.spec.templates.splice(experimentIndex, 1); + + /** + * Set the updated manifest to redux state + */ + workflow.setWorkflowManifest({ + manifest: YAML.stringify(wfManifest), + engineYAML: '', + }); + }; + function onNext() { if (experiments.length === 0) { return false; // Should show alert @@ -264,26 +333,29 @@ const WorkflowTable = forwardRef( {t('createWorkflow.chooseWorkflow.table.head5')} + {experiments.length > 0 ? ( experiments.map((experiment: ChaosCRDTable, index) => ( - { - setDisplayStepper(true); - setEngineIndex(experiment.StepIndex); - workflow.setWorkflowManifest({ - engineYAML: experiment.ChaosEngine, - }); - }} - className={classes.selection} - > + {index + 1} - {experiment.Name} + { + setDisplayStepper(true); + setEngineIndex(experiment.StepIndex); + workflow.setWorkflowManifest({ + engineYAML: experiment.ChaosEngine, + }); + }} + > + {experiment.Name} + {experiment.Namespace} @@ -291,6 +363,18 @@ const WorkflowTable = forwardRef( {experiment.Application} {experiment.Probes} + + + deleteExperiment(experiment.StepIndex) + } + > + delete experiment + + )) ) : (