type(ux): Updated exp runs in usage section and refactored the target application code (#2945)

* Fixed label selection and workflow settings

Signed-off-by: Amit Kumar Das <amit@chaosnative.com>

* Updated subject, context and fixed the experiment runs in usage section

Signed-off-by: Amit Kumar Das <amit@chaosnative.com>

* Get pre-defined workflow manifest of selected hub

Signed-off-by: Amit Kumar Das <amit@chaosnative.com>

litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/General.tsx

@@ -39,21 +39,8 @@ const General: React.FC<GeneralProps> = ({ gotoStep, isCustom }) => {
     ) {
       return engineYAML.metadata.labels.context;
     }
-    /**
-     * Split the experiments according to - in their names
-     * For index 0 to n-1 concat the experiment words with _
-     * For final index do not concat the _
-     * Adding Namespace to the front of the concatenated Exp Name
-     * to form the context
-     * */
 
-    experimentName.split('-').map((name, i) => {
+    context = `${experimentName}_${namespace}`;
-      if (i < experimentName.split('-').length - 1)
-        context = `${context + name}_`;
-      else context += name;
-      return null;
-    });
-    context = `${namespace}_${context}`;
     return context;
   };
 

litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/TargetApplication.tsx

@@ -35,6 +35,7 @@ import {
 } from '../../../../models/graphql/createWorkflowData';
 import { KUBE_OBJ } from '../../../../graphql';
 import { constants } from '../../../../constants';
+import { gvrData } from './data';
 
 interface AppInfoData {
   namespace: string;
@@ -103,34 +104,6 @@ const TargetApplication: React.FC<TargetApplicationProp> = ({
   });
   const [appLabel, setAppLabel] = useState<string[]>([]);
 
-  /**
-   *
-   * Variable required for Menu List
-   */
-  const applicationKind: string[] = [
-    constants.deployment,
-    constants.statefulset,
-    constants.daemonset,
-    constants.deploymentconfig,
-    constants.rollout,
-  ];
-  /**
-   * Function to filter the lables according to the namespace provided
-   */
-  const handleLabelChange = () => {
-    const applabel: string[] = [];
-    if (appinfoData !== undefined) {
-      appinfoData.forEach((appinfo) => {
-        if (appinfo.namespace === targetApp.appns) {
-          appinfo.appLabel.forEach((label) => applabel.push(label));
-        }
-      });
-    }
-    return applabel.length > 0
-      ? setAppLabel(applabel)
-      : setAppLabel(['No resource available']);
-  };
-
   /**
    * Function for handling AnnotationCheck toggle button
    */
@@ -203,35 +176,41 @@ const TargetApplication: React.FC<TargetApplicationProp> = ({
         },
       },
     },
-    onSubscriptionComplete: () => {
-      handleLabelChange();
-    },
     fetchPolicy: 'network-only',
   });
 
   /**
-   * This useEffect is used to populate the namespace and
+   * UseEffect to filter the labels according to the namespace provided
-   * all the labels present in that particular namespace.
    */
   useEffect(() => {
     if (data !== undefined) {
       const appinfo: AppInfoData[] = [];
       try {
+        /**
+         * Parse the kubeObject data
+         */
         const kubeData: KubeObjData[] = JSON.parse(data.getKubeObject.kube_obj);
         kubeData.forEach((obj: KubeObjData) => {
-          const applabel: string[] = [];
+          const applabels: string[] = [];
           if (obj.data != null) {
             obj.data.forEach((objData: KubeObjResource) => {
               if (objData.labels != null) {
+                /**
+                 * Get the labels from the key value pairs
+                 * example - app=mongo
+                 */
                 Object.entries(objData.labels).map(([key, value]) =>
-                  applabel.push(`${key}=${value}`)
+                  applabels.push(`${key}=${value}`)
                 );
               }
             });
           }
+          /**
+           * Push these labels corresponding to their namespaces
+           */
           appinfo.push({
             namespace: obj.namespace,
-            appLabel: applabel,
+            appLabel: applabels,
           });
         });
       } catch (err) {
@@ -242,51 +221,38 @@ const TargetApplication: React.FC<TargetApplicationProp> = ({
         });
       }
       setAppInfoData(appinfo);
-    }
-  }, [data]);
 
+      /**
+       * Filter the labels according to their namespace
+       */
+      if (appinfoData !== undefined) {
+        const filteredAppLabel: string[] = [];
+        appinfo.forEach((appinfos) => {
+          if (appinfos.namespace === targetApp.appns) {
+            appinfos.appLabel.forEach((label) => filteredAppLabel.push(label));
+          }
+        });
+        if (filteredAppLabel.length > 0) {
+          setAppLabel(filteredAppLabel);
+        } else {
+          setAppLabel(['No resource available']);
+        }
+      }
+    }
+  }, [data, targetApp.appns]);
   /**
    * This useEffect is called on the first render to fetch the
    * kubeObj data and populate it in the AutoComplete textfields
    */
   useEffect(() => {
-    if (targetApp.appkind === constants.deployment) {
+    gvrData.forEach((gvr) => {
-      setGVRObj({
+      if (gvr.resource === targetApp.appkind)
-        group: constants.apps,
+        setGVRObj({
-        version: constants.v1,
+          group: gvr.group,
-        resource: constants.deployments,
+          version: gvr.version,
-      });
+          resource: `${gvr.resource}s`,
-    } else if (targetApp.appkind === constants.statefulset) {
+        });
-      setGVRObj({
+    });
-        group: constants.apps,
-        version: constants.v1,
-        resource: constants.statefulsets,
-      });
-    } else if (targetApp.appkind === constants.daemonset) {
-      setGVRObj({
-        group: constants.apps,
-        version: constants.v1,
-        resource: constants.daemonsets,
-      });
-    } else if (targetApp.appkind === constants.deploymentconfig) {
-      setGVRObj({
-        group: constants.openshift,
-        version: constants.v1,
-        resource: constants.deploymentconfigs,
-      });
-    } else if (targetApp.appkind === constants.rollout) {
-      setGVRObj({
-        group: constants.argoproj,
-        version: constants.v1alpha1,
-        resource: constants.rollouts,
-      });
-    } else {
-      setGVRObj({
-        group: '',
-        version: '',
-        resource: '',
-      });
-    }
   }, []);
 
   return (
@@ -373,7 +339,6 @@ const TargetApplication: React.FC<TargetApplicationProp> = ({
                     ...targetApp,
                     appns: v,
                   });
-                  handleLabelChange();
                 }}
                 renderInput={(params) => (
                   <InputField
@@ -420,54 +385,23 @@ const TargetApplication: React.FC<TargetApplicationProp> = ({
                       ...targetApp,
                       appkind: event.target.value as string,
                     });
-                    handleLabelChange();
+                    gvrData.forEach((gvr) => {
-                    if (event.target.value === constants.deployment) {
+                      if (gvr.resource === (event.target.value as string)) {
-                      setGVRObj({
+                        setGVRObj({
-                        group: constants.apps,
+                          group: gvr.group,
-                        version: constants.v1,
+                          version: gvr.version,
-                        resource: constants.deployments,
+                          resource: `${gvr.resource}s`,
-                      });
+                        });
-                    } else if (event.target.value === constants.statefulset) {
+                      }
-                      setGVRObj({
+                    });
-                        group: constants.apps,
-                        version: constants.v1,
-                        resource: constants.statefulsets,
-                      });
-                    } else if (event.target.value === constants.daemonset) {
-                      setGVRObj({
-                        group: constants.apps,
-                        version: constants.v1,
-                        resource: constants.daemonsets,
-                      });
-                    } else if (
-                      event.target.value === constants.deploymentconfig
-                    ) {
-                      setGVRObj({
-                        group: constants.openshift,
-                        version: constants.v1,
-                        resource: constants.deploymentconfigs,
-                      });
-                    } else if (event.target.value === constants.rollout) {
-                      setGVRObj({
-                        group: constants.argoproj,
-                        version: constants.v1alpha1,
-                        resource: constants.rollouts,
-                      });
-                    } else {
-                      setGVRObj({
-                        group: '',
-                        version: '',
-                        resource: '',
-                      });
-                    }
                   }}
                   label={constants.appKind}
                 >
                   <MenuItem aria-label="None" value="" />
-                  {applicationKind.map((kind) => {
+                  {gvrData.map((gvr) => {
                     return (
-                      <MenuItem key={kind} value={kind}>
+                      <MenuItem key={gvr.resource} value={gvr.resource}>
-                        {kind}
+                        {gvr.resource}
                       </MenuItem>
                     );
                   })}

litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/data.ts

@@ -0,0 +1,29 @@
+import { constants } from '../../../../constants';
+
+export const gvrData = [
+  {
+    group: constants.apps,
+    version: constants.v1,
+    resource: constants.deployment,
+  },
+  {
+    group: constants.apps,
+    version: constants.v1,
+    resource: constants.statefulset,
+  },
+  {
+    group: constants.apps,
+    version: constants.v1,
+    resource: constants.daemonset,
+  },
+  {
+    group: constants.openshift,
+    version: constants.v1,
+    resource: constants.deploymentconfig,
+  },
+  {
+    group: constants.argoproj,
+    version: constants.v1alpha1,
+    resource: constants.rollout,
+  },
+];

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

@@ -18,7 +18,6 @@ import { useSelector } from 'react-redux';
 import { v4 as uuidv4 } from 'uuid';
 import YAML from 'yaml';
 import YamlEditor from '../../../components/YamlEditor/Editor';
-import { constants } from '../../../constants';
 import Row from '../../../containers/layouts/Row';
 import Width from '../../../containers/layouts/Width';
 import {
@@ -278,16 +277,16 @@ const TuneWorkflow = forwardRef((_, ref) => {
    * Index DB Fetching for extracting selected Button and Workflow Details
    */
   const getSelectedWorkflowDetails = () => {
-    localforage.getItem('workflow').then((workflow) => {
-      if (workflow) {
-        setWorkflow({
-          name: (workflow as WorkflowDetailsProps).name,
-          crd: (workflow as WorkflowDetailsProps).CRDLink,
-          description: (workflow as WorkflowDetailsProps).description,
-        });
-      }
-    });
     localforage.getItem('selectedScheduleOption').then((value) => {
+      localforage.getItem('workflow').then((wfDetails) => {
+        if (wfDetails) {
+          setWorkflow({
+            name: (wfDetails as WorkflowDetailsProps).name,
+            crd: (wfDetails as WorkflowDetailsProps).CRDLink,
+            description: (wfDetails as WorkflowDetailsProps).description,
+          });
+        }
+      });
       /**
        * Setting default data when MyHub is selected
        */
@@ -298,16 +297,21 @@ const TuneWorkflow = forwardRef((_, ref) => {
             (value as WorkflowDetailsProps).CRDLink !== '' &&
             manifest === ''
           )
-            getPredefinedExperimentYaml({
+            /**
-              variables: {
+             * Get Pre-defined experiment YAML of the selected hub
-                experimentInput: {
+             */
-                  ProjectID: selectedProjectID,
+            localforage.getItem('selectedHub').then((hub) => {
-                  ChartName: '',
+              getPredefinedExperimentYaml({
-                  ExperimentName: (value as WorkflowDetailsProps).CRDLink,
+                variables: {
-                  HubName: constants.chaosHub,
+                  experimentInput: {
-                  FileType: '',
+                    ProjectID: selectedProjectID,
+                    ChartName: '',
+                    ExperimentName: (value as WorkflowDetailsProps).CRDLink,
+                    HubName: hub as string,
+                    FileType: '',
+                  },
                 },
-              },
+              });
             });
         });
       }

litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx

@@ -105,14 +105,14 @@ const VerifyCommit = forwardRef(
             crd: (workflow as WorkflowDetailsProps).CRDLink,
           });
           setSubject(
-            `${(workflow as WorkflowDetailsProps).name}-${
+            `${(workflow as WorkflowDetailsProps).name}_${
               workflowData.namespace
             }`
           );
           const parsedManifest = YAML.parse(manifest);
           delete parsedManifest.metadata.generateName;
           parsedManifest.metadata['labels'] = {
-            subject: `${(workflow as WorkflowDetailsProps).name}-${
+            subject: `${(workflow as WorkflowDetailsProps).name}_${
               workflowData.namespace
             }`,
           };

litmus-portal/frontend/src/views/UsageStatistics/UsageTable/index.tsx

@@ -375,7 +375,7 @@ const UsageTable = () => {
                       {project.Workflows.Runs}
                     </TableCell>
                     <TableCell align="center">
-                      {project.Workflows.Runs}
+                      {project.Workflows.ExpRuns}
                     </TableCell>
                     <TableCell align="center">
                       {project.Members.Total}