chore(litmus-portal): Added parallel and serial sequencing of experiments for workflow creation

litmus-portal/frontend/package.json

@@ -48,6 +48,7 @@
     "rc-progress": "^3.0.0",
     "react": "^16.9.0",
     "react-ace": "^9.2.1",
+    "react-beautiful-dnd": "^13.1.0",
     "react-date-range": "^1.0.3",
     "react-dom": "^16.9.0",
     "react-google-charts": "^3.0.15",
@@ -102,6 +103,7 @@
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "^5.1.3",
     "@types/react-simple-maps": "^1.0.3",
+    "@types/react-beautiful-dnd": "^11.0.1",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^3.5.0",
     "@typescript-eslint/parser": "^3.5.0",

litmus-portal/frontend/public/locales/en/translation.yaml

@@ -783,6 +783,7 @@ createWorkflow:
     selectExp: Select An Experiment
     done: Done
     editSequence: Edit Sequence
+    dragndrop: Drag and drop an experiment as per your desire for scheduling
     addANewExperiment: Add a new experiment
     confirmText: Are you sure you want to continue without saving?
     back: Back
@@ -1117,3 +1118,7 @@ customWorkflow:
     addExp: Add experiment
   viewYAML:
     view: View the YAML here
+  sequence:
+    dragexp: Drag the selected experiment between the rows or to the end of rows to make it sequential experiment or drag into the rows to make it parallel experiment.
+    saveChanges: Save changes
+    discard: Discard changes

litmus-portal/frontend/src/utils/yamlUtils.ts

@@ -47,7 +47,7 @@ export const updateEngineName = (parsedYaml: any) => {
               // Edge Case: Condition to check the appns
               // Required because while parsing the chaos engine
               // '{{workflow.parameters.adminModeNamespace}}' changes to a JSON object
-              if (chaosEngine.spec.appinfo)
+              if (chaosEngine.spec.appinfo && chaosEngine.spec.appinfo.appns)
                 if (typeof chaosEngine.spec.appinfo.appns === 'object') {
                   // Removes any whitespace in '{{workflow.parameters.adminModeNamespace}}'
                   const appns = Object.keys(

litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowSequence/index.tsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  DragDropContext,
+  Draggable,
+  DraggableProvided,
+  Droppable,
+} from 'react-beautiful-dnd';
+import YAML from 'yaml';
+import { Typography } from '@material-ui/core';
+import { ButtonFilled } from 'litmus-ui';
+import { useTranslation } from 'react-i18next';
+import { RootState } from '../../../../redux/reducers';
+import { reorderSteps } from './reorder';
+import trimString from '../../../../utils/trim';
+import * as WorkflowActions from '../../../../redux/actions/workflow';
+import useActions from '../../../../redux/actions';
+import useStyles from './styles';
+
+interface ManifestSteps {
+  name: string;
+  template: string;
+}
+
+interface StepType {
+  [key: string]: ManifestSteps[];
+}
+
+interface ExperimentSequenceProps {
+  handleSequenceModal: (sequenceState: boolean) => void;
+}
+
+const WorkflowSequence: React.FC<ExperimentSequenceProps> = ({
+  handleSequenceModal,
+}) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+  const manifest = useSelector(
+    (state: RootState) => state.workflowManifest.manifest
+  );
+  const workflow = useActions(WorkflowActions);
+  const manifestSteps = YAML.parse(manifest).spec.templates[0].steps;
+
+  const [steps, setSteps] = useState<StepType>({});
+
+  /**
+   * handleStepsChange updates the steps in the main manifest
+   */
+  const handleStepsChange = () => {
+    const updatedSteps: Array<ManifestSteps[]> = [];
+    Object.entries(steps).forEach(([, value]) => {
+      if ((value as ManifestSteps[]).length !== 0) {
+        updatedSteps.push(value as ManifestSteps[]);
+      }
+    });
+    const updatedManifest = YAML.parse(manifest);
+    delete updatedManifest.spec.templates[0].steps;
+    updatedManifest.spec.templates[0].steps = updatedSteps;
+
+    workflow.setWorkflowManifest({
+      manifest: YAML.stringify(updatedManifest),
+    });
+    handleSequenceModal(false);
+  };
+
+  /**
+   * useEffect to save the state in StepType format
+   * on the first render
+   */
+  useEffect(() => {
+    const modifiedSteps: StepType = {};
+    manifestSteps.forEach((step: any, index: number) => {
+      modifiedSteps[`stepname${index}`] = step;
+    });
+    setSteps(modifiedSteps);
+  }, []);
+
+  return (
+    <div>
+      <DragDropContext
+        onDragEnd={({ destination, source }) => {
+          /**
+           * If the item is dropped outside the list
+           */
+          if (!destination) {
+            return;
+          }
+          setSteps(reorderSteps(steps, source, destination));
+        }}
+      >
+        <div className={classes.dragdropDiv}>
+          {Object.entries(steps).map(([key, value]) => {
+            return (
+              <Droppable
+                droppableId={key}
+                type="CARD"
+                direction="horizontal"
+                isCombineEnabled={false}
+                isDropDisabled={key === 'stepname0'}
+              >
+                {(dropProvided) => (
+                  <div {...dropProvided.droppableProps}>
+                    <div>
+                      <div>
+                        <div
+                          className={classes.droppableDiv}
+                          ref={dropProvided.innerRef}
+                        >
+                          {(value as ManifestSteps[]).map(
+                            (step: ManifestSteps, index: number) => {
+                              return (
+                                <Draggable
+                                  key={step.name}
+                                  draggableId={step.name}
+                                  index={index}
+                                  isDragDisabled={key === 'stepname0'}
+                                >
+                                  {(dragProvided: DraggableProvided) => (
+                                    <div
+                                      ref={dragProvided.innerRef}
+                                      {...dragProvided.draggableProps}
+                                      {...dragProvided.dragHandleProps}
+                                    >
+                                      <div className={classes.draggableDiv}>
+                                        <img
+                                          className={classes.expImg}
+                                          src="./icons/sequencing-exp.svg"
+                                          alt={step.name}
+                                        />
+                                        <Typography className={classes.expName}>
+                                          {trimString(step.name, 15)}
+                                        </Typography>
+                                      </div>
+                                    </div>
+                                  )}
+                                </Draggable>
+                              );
+                            }
+                          )}
+                          {dropProvided.placeholder}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </Droppable>
+            );
+          })}
+        </div>
+      </DragDropContext>
+      <Typography className={classes.sequencingHeader}>
+        {t('customWorkflow.createWorkflow.selectAnExp')}
+      </Typography>
+      <Typography className={classes.sequencingDesc}>
+        {t('customWorkflow.sequence.dragexp')}
+      </Typography>
+      <div className={classes.buttonDiv}>
+        <ButtonFilled
+          variant="error"
+          onClick={() => handleSequenceModal(false)}
+          className={classes.discard}
+        >
+          {t('customWorkflow.sequence.discard')}
+        </ButtonFilled>
+        <ButtonFilled onClick={handleStepsChange}>
+          {t('customWorkflow.sequence.saveChanges')}
+        </ButtonFilled>
+      </div>
+    </div>
+  );
+};
+
+export default WorkflowSequence;

litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowSequence/reorder.ts

@@ -0,0 +1,57 @@
+import { DraggableLocation } from 'react-beautiful-dnd';
+
+interface ManifestSteps {
+  name: string;
+  template: string;
+}
+
+interface StepType {
+  [key: string]: ManifestSteps[];
+}
+
+/**
+ * Function for reordering the result
+ */
+export const reorder = (
+  list: ManifestSteps[],
+  startIndex: number,
+  endIndex: number
+): ManifestSteps[] => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+
+  return result;
+};
+
+export const reorderSteps = (
+  steps: StepType,
+  source: DraggableLocation,
+  destination: DraggableLocation
+) => {
+  const current = [...steps[source.droppableId]];
+  const next = [...steps[destination.droppableId]];
+  const target = current[source.index];
+  /**
+   * Moving data to same list
+   */
+  if (source.droppableId === destination.droppableId) {
+    const reordered = reorder(current, source.index, destination.index);
+    return {
+      ...steps,
+      [source.droppableId]: reordered,
+    };
+  }
+
+  /**
+   * Moving to different list
+   */
+  current.splice(source.index, 1); // Remove from original list
+  next.splice(destination.index, 0, target); // Insert into the new list
+
+  return {
+    ...steps,
+    [source.droppableId]: current,
+    [destination.droppableId]: next,
+  };
+};