Added workflow rerun functionality in frontend (#2474)

Signed-off-by: Amit Kumar Das <amitkumar.das@mayadata.io>

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

@@ -341,7 +341,7 @@ settings:
     disconnect: Are you sure you want to disconnect?
     save: Save Locally
     repo: Git Repository
-    desc: If there are any active workflows, then the configuration of such workflows will be moved to this repository
+    desc: '* Any existing or active workflows saved locally will not be synced into the git repository'
     connect: Connect
     branch: Branch
     URL: Git URL

litmus-portal/frontend/src/graphql/mutations.ts

@@ -162,3 +162,9 @@ export const DISABLE_GITOPS = gql`
     disableGitOps(project_id: $data)
   }
 `;
+
+export const RERUN_CHAOS_WORKFLOW = gql`
+  mutation rerunChaosWorkflow($data: String!) {
+    reRunChaosWorkFlow(workflowID: $data)
+  }
+`;

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx

@@ -18,7 +18,11 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import YAML from 'yaml';
+import ReplayIcon from '@material-ui/icons/Replay';
+import { useMutation } from '@apollo/client';
 import ButtonOutline from '../../../components/Button/ButtonOutline';
+import { RERUN_CHAOS_WORKFLOW } from '../../../graphql/mutations';
+import * as TabActions from '../../../redux/actions/tabs';
 import { ScheduleWorkflow } from '../../../models/graphql/scheduleData';
 import useActions from '../../../redux/actions';
 import * as WorkflowActions from '../../../redux/actions/workflow';
@@ -33,11 +37,6 @@ interface TableDataProps {
   deleteRow: (wfid: string) => void;
 }
 
-interface Weights {
-  experimentName: string;
-  weight: number;
-}
-
 const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
   const classes = useStyles();
   const { t } = useTranslation();
@@ -47,7 +46,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
     null
   );
   const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
-
+  const tabs = useActions(TabActions);
   const open = Boolean(anchorEl);
   const isOpen = Boolean(popAnchorEl);
   const id = isOpen ? 'simple-popover' : undefined;
@@ -107,6 +106,20 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
     });
   }
 
+  const [reRunChaosWorkFlow] = useMutation(RERUN_CHAOS_WORKFLOW, {
+    onCompleted: () => {
+      tabs.changeWorkflowsTabs(0);
+    },
+  });
+
+  const reRunSchedule = () => {
+    reRunChaosWorkFlow({
+      variables: {
+        data: data.workflow_id,
+      },
+    });
+  };
+
   return (
     <>
       <TableCell className={classes.workflowNameData}>
@@ -242,6 +255,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
         >
           <MoreVertIcon />
         </IconButton>
+
         <Menu
           id="long-menu"
           anchorEl={anchorEl}
@@ -265,6 +279,18 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
           ) : (
             <></>
           )}
+          {data.cronSyntax === '' ? (
+            <MenuItem value="Rerun_Schedule" onClick={() => reRunSchedule()}>
+              <div className={classes.expDiv}>
+                <ReplayIcon className={classes.rerunBtn} />
+                <Typography data-cy="reRunSchedule" className={classes.btnText}>
+                  Re-Run Schedule
+                </Typography>
+              </div>
+            </MenuItem>
+          ) : (
+            <></>
+          )}
           <MenuItem
             value="Download"
             onClick={() =>

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts

@@ -160,6 +160,12 @@ const useStyles = makeStyles((theme) => ({
     width: '1.2rem',
     height: '1.2rem',
   },
+  rerunBtn: {
+    marginTop: theme.spacing(0.1),
+    marginLeft: theme.spacing(-0.375),
+    width: '1.2rem',
+    height: '1.2rem',
+  },
   // Experiment Weights PopOver Property
   weightDiv: {
     width: '15.1875rem',

litmus-portal/frontend/src/views/Settings/GitOpsTab/styles.ts

@@ -43,8 +43,9 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   infoText: {
     maxWidth: '25rem',
-    color: theme.palette.warning.main,
+    color: theme.palette.error.main,
     fontSize: '0.75rem',
+    marginLeft: theme.spacing(2),
   },
   gitInfo: {
     marginTop: theme.spacing(1.5),