type(ux): Added delete option in experiment table, fixed agent select radio buttons and minor ux changes (#2862)

* Added delete option in exp table, fixed select agent radio buttons and minor ux change * Minor Radio Group Fix * Minor CSS change Signed-off-by: Amit Kumar Das <amit@chaosnative.com>
2021-06-09 12:48:48 +05:30 · 2021-06-09 12:48:48 +05:30 · 89f29a2a74
parent ed36c9c16a
commit 89f29a2a74
5 changed files with 137 additions and 144 deletions
--- 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,12 +215,17 @@ const ChooseWorkflowAgent = forwardRef((_, ref) => {
        />

        {/* Cluster Data */}
+        <RadioGroup
+          name="Agent Selection"
+          value={currentlySelectedAgent}
+          onChange={(e) => handleChange(e)}
+        >
          <div className={classes.agentWrapperDiv} data-cy="AgentsRadioGroup">
            {filteredCluster.map((cluster) => (
              <LitmusCard
                key={cluster.cluster_id}
                glow={currentlySelectedAgent === cluster.cluster_id}
-              width="100%"
+                width="40%"
                height="4rem"
                className={classes.litmusCard}
                borderColor={
@ -230,17 +235,18 @@ const ChooseWorkflowAgent = forwardRef((_, ref) => {
                }
              >
                <RadioButton
-                data-cy="AgentRadioButtons"
                  value={cluster.cluster_id}
                  className={classes.agentRadioButton}
-                onChange={(e) => handleChange(e)}
                >
-                {cluster.cluster_name} <br />
-                {cluster.cluster_id}
+                  <div>
+                    <Typography>{cluster.cluster_name}</Typography>
+                    <Typography>{cluster.cluster_id}</Typography>
+                  </div>
                </RadioButton>
              </LitmusCard>
            ))}
          </div>
+        </RadioGroup>
      </div>
    </div>
  );
--- 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),
--- 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<AddProbeProps> = ({
          <div className={classes.detailContainer}>
            <div className={classes.formField}>
              <InputLabel className={classes.formLabel} htmlFor="timeout">
-                {t('createWorkflow.tuneWorkflow.addProbe.labels.timeout')}(ms)
+                {t('createWorkflow.tuneWorkflow.addProbe.labels.timeout')}(sec)
              </InputLabel>
              <InputField
                variant="primary"
@ -279,7 +279,7 @@ const AddProbe: React.FC<AddProbeProps> = ({
          <div className={classes.detailContainer}>
            <div className={classes.formField}>
              <InputLabel className={classes.formLabel} htmlFor="interval">
-                {t('createWorkflow.tuneWorkflow.addProbe.labels.interval')}(ms)
+                {t('createWorkflow.tuneWorkflow.addProbe.labels.interval')}(sec)
              </InputLabel>
              <InputField
                variant="primary"
@ -294,7 +294,7 @@ const AddProbe: React.FC<AddProbeProps> = ({
            </div>
            <div className={classes.formField}>
              <InputLabel className={classes.formLabel} htmlFor="polling">
-                {t('createWorkflow.tuneWorkflow.addProbe.labels.polling')}(ms)
+                {t('createWorkflow.tuneWorkflow.addProbe.labels.polling')}(sec)
              </InputLabel>
              <InputField
                variant="primary"
@ -310,7 +310,7 @@ const AddProbe: React.FC<AddProbeProps> = ({
          <div className={classes.formField}>
            <InputLabel className={classes.formLabel} htmlFor="initial-delay">
              {t('createWorkflow.tuneWorkflow.addProbe.labels.initialDelay')}
-              (ms)
+              (sec)
            </InputLabel>
            <InputField
              variant="primary"
--- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/ConfigurationStepper/ConfigurationStepper.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/ConfigurationStepper/ConfigurationStepper.tsx
@ -5,17 +5,10 @@ import StepLabel from '@material-ui/core/StepLabel';
 import StepContent from '@material-ui/core/StepContent';
 import Typography from '@material-ui/core/Typography';
 import { ButtonOutlined } from 'litmus-ui';
-import { useSelector } from 'react-redux';
-import YAML from 'yaml';
-import { useTranslation } from 'react-i18next';
 import General from '../TuneWorkflowSteps/General';
 import SteadyState from '../TuneWorkflowSteps/SteadyState';
 import TargetApplication from '../TuneWorkflowSteps/TargetApplication';
 import useStyles from './styles';
-import * as WorkflowActions from '../../../../redux/actions/workflow';
-import { WorkflowManifest } from '../../../../models/redux/workflow';
-import { RootState } from '../../../../redux/reducers';
-import useActions from '../../../../redux/actions';

 interface ConfigurationStepperProps {
  experimentIndex: number;
@ -57,7 +50,6 @@ const ConfigurationStepper: React.FC<ConfigurationStepperProps> = ({
  closeStepper,
  isCustom,
 }) => {
-  const { t } = useTranslation();
  const classes = useStyles();

  // State variable to handle Stepper Steps
@ -73,76 +65,6 @@ const ConfigurationStepper: React.FC<ConfigurationStepperProps> = ({
  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 (
    <div className={classes.root}>
@ -151,26 +73,6 @@ const ConfigurationStepper: React.FC<ConfigurationStepperProps> = ({
          &#x2715;
        </ButtonOutlined>
      </div>
-      <div className={classes.deleteExpDiv}>
-        <Typography className={classes.editExpText}>
-          {t('createWorkflow.tuneWorkflow.verticalStepper.editExp')}
-        </Typography>
-        <ButtonOutlined
-          onClick={() => {
-            deleteExperiment();
-          }}
-          className={classes.deleteBtn}
-        >
-          <img
-            src="./icons/delete-exp.svg"
-            alt="delete"
-            className={classes.deleteIcon}
-          />
-          <Typography color="error" className={classes.deleteExpText}>
-            {t('createWorkflow.tuneWorkflow.verticalStepper.deleteExp')}
-          </Typography>
-        </ButtonOutlined>
-      </div>
      <Stepper activeStep={activeStep} orientation="vertical">
        {steps.map((label, index) => (
          <Step key={label}>
--- 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,13 +333,19 @@ const WorkflowTable = forwardRef(
                    <TableCell align="left">
                      {t('createWorkflow.chooseWorkflow.table.head5')}
                    </TableCell>
+                    <TableCell />
                  </TableRow>
                </TableHead>
                <TableBody>
                  {experiments.length > 0 ? (
                    experiments.map((experiment: ChaosCRDTable, index) => (
-                      <TableRow
-                        key={experiment.Name}
+                      <TableRow key={experiment.Name}>
+                        <TableCell component="th" scope="row">
+                          {index + 1}
+                        </TableCell>
+                        <TableCell
+                          className={classes.selection}
+                          align="left"
                          onClick={() => {
                            setDisplayStepper(true);
                            setEngineIndex(experiment.StepIndex);
@ -278,12 +353,9 @@ const WorkflowTable = forwardRef(
                              engineYAML: experiment.ChaosEngine,
                            });
                          }}
-                        className={classes.selection}
                        >
-                        <TableCell component="th" scope="row">
-                          {index + 1}
+                          {experiment.Name}
                        </TableCell>
-                        <TableCell align="left">{experiment.Name}</TableCell>
                        <TableCell align="left">
                          {experiment.Namespace}
                        </TableCell>
@ -291,6 +363,18 @@ const WorkflowTable = forwardRef(
                          {experiment.Application}
                        </TableCell>
                        <TableCell align="left">{experiment.Probes}</TableCell>
+                        <TableCell>
+                          <IconButton
+                            onClick={() =>
+                              deleteExperiment(experiment.StepIndex)
+                            }
+                          >
+                            <img
+                              src="./icons/bin-red.svg"
+                              alt="delete experiment"
+                            />
+                          </IconButton>
+                        </TableCell>
                      </TableRow>
                    ))
                  ) : (