chore(litmus-portal): Editor update with time-stamp based workflow ma…

…pping. (#2021) Refractor and update Editor as per new designs and add UNIX time-stamp to name as replacement of generateName. Signed-off-by: ishangupta-ds <[email protected]>
litmuschaos · Sep 10, 2020 · c481a57 · c481a57
1 parent c86dfe9
commit c481a57
Show file tree

Hide file tree

Showing 10 changed files with 436 additions and 277 deletions.
diff --git a/litmus-portal/frontend/package-lock.json b/litmus-portal/frontend/package-lock.json
diff --git a/litmus-portal/frontend/public/index.html b/litmus-portal/frontend/public/index.html
@@ -33,6 +33,10 @@
     <link rel="mask-icon" href="./safari-pinned-tab.svg" color="#5bbad5" />
 
     <!-- Cross Platform Ubuntu Font -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
+      rel="stylesheet"
+    />
     <link
       href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
       rel="stylesheet"

diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ChooseWorkflow/index.tsx b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ChooseWorkflow/index.tsx
@@ -67,8 +67,11 @@ const ChooseWorkflow: React.FC = () => {
 
   const selectWorkflow = (index: number) => {
     setVisible(false);
+    const timeStampBasedWorkflowName: string = `argowf-chaos-${
+      workflowsList[index].title
+    }-${Math.round(new Date().getTime() / 1000)}`;
     workflow.setWorkflowDetails({
-      name: workflowsList[index].title,
+      name: timeStampBasedWorkflowName,
       link: workflowsList[index].chaosWkfCRDLink,
       id: workflowsList[index].workflowID,
       yaml: 'none',
@@ -77,7 +80,7 @@ const ChooseWorkflow: React.FC = () => {
     });
 
     setWorkflowData({
-      workflowName: workflowsList[index].title,
+      workflowName: timeStampBasedWorkflowName,
       workflowDesc: workflowsList[index].description,
     });
 

diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Typography } from '@material-ui/core';
 import Divider from '@material-ui/core/Divider';
 import { useSelector } from 'react-redux';
+import YAML from 'yaml';
 import useStyles from './styles';
 import { WorkflowData } from '../../../../models/workflow';
 import { RootState } from '../../../../redux/reducers';
@@ -29,11 +30,15 @@ const TuneWorkflow: React.FC = () => {
     fetch(link)
       .then((data) => {
         data.text().then((yamlText) => {
-          setYamlFile(yamlText);
+          const parsedYaml = YAML.parse(yamlText);
+          delete parsedYaml.metadata.generateName;
+          parsedYaml.metadata.name = workflowData.name;
+          const nameMappedYaml = YAML.stringify(parsedYaml);
+          setYamlFile(nameMappedYaml);
           workflow.setWorkflowDetails({
             name,
             link,
-            yaml: yamlText,
+            yaml: nameMappedYaml,
             id,
             description,
           });
@@ -84,7 +89,6 @@ const TuneWorkflow: React.FC = () => {
           id={id}
           description={description}
           readOnly={false}
-          optionsDisplay
         />
       </div>
     </div>

diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx
@@ -247,29 +247,6 @@ const VerifyCommit: React.FC<VerifyCommitProps> = ({ gotoStep }) => {
         */}
       </div>
 
-      {/* <Modal open={open} onClose={handleClose}>
-        <div className={classes.modalContainer}>
-          <div className={classes.modalContainerClose}>
-            <Button
-              variant="outlined"
-              color="secondary"
-              className={classes.closeButtonStyle}
-              onClick={handleClose}
-            >
-              &#x2715;
-            </Button>
-          </div>
-          <YamlEditor
-            content={yaml}
-            filename={name}
-            yamlLink={link}
-            id={id}
-            description={description}
-            readOnly
-            optionsDisplay={false}
-          />
-        </div>
-      </Modal> */}
       <Unimodal
         isOpen={open}
         handleClose={handleClose}
@@ -284,7 +261,6 @@ const VerifyCommit: React.FC<VerifyCommitProps> = ({ gotoStep }) => {
           id={id}
           description={description}
           readOnly
-          optionsDisplay={false}
         />
       </Unimodal>
     </div>