Added fixes for handling edge cases in Workflow Visualisation Screen (#2660)

* Added Fix for some edge cases and replaced Status Succeeded with Completed for workflow and Nodes.
* Added required changes

Signed-off-by: Jonsy13 <vedant.shrotria@chaosnative.com>

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

@@ -324,9 +324,8 @@ error:
   goBack: Go back
 
 workflowDetails:
-  detailedLog: Click on Info to see details of your workflow
+  workflowNotStarted: Please check the configuration, the workflow was not able to start
   fetchError: An error has occurred while fetching the data
-  overallRR: 'Overall RR: '
 
 ######################################
 ############    Views    #############
@@ -602,6 +601,7 @@ workflowDetailsView:
   workflowInfo:
     header: Overall Workflow Description
     resilienceScore: Resilience Score
+    Completed: Completed
     runTime:
       runTimeHeader: Run Time
       startTime: 'Start Time :'

litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx

@@ -36,7 +36,6 @@ import {
 } from '../../models/graphql/scheduleData';
 import * as NodeSelectionActions from '../../redux/actions/nodeSelection';
 import useStyles from './styles';
-import { FAILED } from '../../views/WorkflowDetails/workflowConstants';
 
 const WorkflowDetails: React.FC = () => {
   const theme = useTheme();
@@ -78,13 +77,13 @@ const WorkflowDetails: React.FC = () => {
   )[0];
 
   // Apollo query to get the scheduled data
-  const { data: SchedulesData } = useQuery<Schedules, ScheduleDataVars>(
-    SCHEDULE_DETAILS,
-    {
-      variables: { projectID },
-      fetchPolicy: 'cache-and-network',
-    }
-  );
+  const { data: SchedulesData, loading } = useQuery<
+    Schedules,
+    ScheduleDataVars
+  >(SCHEDULE_DETAILS, {
+    variables: { projectID },
+    fetchPolicy: 'cache-and-network',
+  });
 
   // Using subscription to get realtime data
   useEffect(() => {
@@ -147,8 +146,7 @@ const WorkflowDetails: React.FC = () => {
   useEffect(() => {
     if (workflow && pod_name === '') {
       if (
-        (JSON.parse(workflow.execution_data as string) as ExecutionData)
-          .phase !== FAILED
+        Object.keys(JSON.parse(workflow.execution_data as string).nodes).length
       ) {
         const firstNodeId = JSON.parse(workflow.execution_data as string).nodes[
           Object.keys(JSON.parse(workflow.execution_data as string).nodes)[0]
@@ -170,7 +168,7 @@ const WorkflowDetails: React.FC = () => {
           <BackButton />
         </div>
         {/* If workflow data is present then display the workflow details */}
-        {workflow && pod_name !== '' ? (
+        {workflow && pod_name !== '' && !loading ? (
           <div>
             <Typography data-cy="wfName" className={classes.title}>
               {t('workflowDetailsView.headerDesc')} {workflow.workflow_name}
@@ -268,8 +266,10 @@ const WorkflowDetails: React.FC = () => {
               />
             </TabPanel>
           </div>
-        ) : error || isWorkflowFailed ? (
+        ) : error ? (
           <Typography>{t('workflowDetails.fetchError')}</Typography>
+        ) : isWorkflowFailed ? (
+          <Typography>{t('workflowDetails.workflowNotStarted')}</Typography>
         ) : (
           <Loader />
         )}

litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/Status.tsx

@@ -1,5 +1,7 @@
 import { Typography } from '@material-ui/core';
 import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SUCCEEDED } from '../../WorkflowDetails/workflowConstants';
 import useStyles from './styles';
 
 interface StatusProps {
@@ -8,6 +10,7 @@ interface StatusProps {
 
 const CustomStatus: React.FC<StatusProps> = ({ status }) => {
   const classes = useStyles();
+  const { t } = useTranslation();
   const [label, setLabel] = React.useState(' ');
   useEffect(() => {
     if (status === 'Succeeded') {
@@ -22,7 +25,11 @@ const CustomStatus: React.FC<StatusProps> = ({ status }) => {
   return (
     <>
       <div className={label}>
-        <Typography className={classes.statusFont}>{status}</Typography>
+        <Typography className={classes.statusFont}>
+          {status === SUCCEEDED
+            ? `${t('workflowDetailsView.workflowInfo.Completed')}`
+            : status}
+        </Typography>
       </div>
     </>
   );

litmus-portal/frontend/src/views/WorkflowDetails/WorkflowStatus/index.tsx

@@ -1,5 +1,7 @@
 import { Typography } from '@material-ui/core';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { RUNNING, SUCCEEDED, PENDING, FAILED } from '../workflowConstants';
 import useStyles from './styles';
 
 interface WorkflowStatusProps {
@@ -9,18 +11,19 @@ interface WorkflowStatusProps {
 const WorkflowStatus: React.FC<WorkflowStatusProps> = ({ phase }) => {
   const classes = useStyles();
 
+  const { t } = useTranslation();
   function getStatus(phase: string) {
     switch (phase) {
-      case 'Succeeded':
-        return classes.succeeded;
-      case 'Running':
-        return classes.running;
-      case 'Failed':
-        return classes.failed;
-      case 'Pending':
-        return classes.pending;
+      case SUCCEEDED:
+        return `${classes.textBold} ${classes.succeeded}`;
+      case RUNNING:
+        return `${classes.textBold} ${classes.running}`;
+      case FAILED:
+        return `${classes.textBold} ${classes.failed}`;
+      case PENDING:
+        return `${classes.textBold} ${classes.pending}`;
       default:
-        return classes.pending;
+        return `${classes.textBold} ${classes.pending}`;
     }
   }
 
@@ -28,16 +31,16 @@ const WorkflowStatus: React.FC<WorkflowStatusProps> = ({ phase }) => {
     <div className={classes.status}>
       <span className={classes.icon}>
         <img
-          className={
-            phase.toLowerCase() === 'running' ? classes.runningSmallIcon : ''
-          }
+          className={phase === RUNNING ? classes.runningSmallIcon : ''}
           src={`/icons/${phase.toLowerCase()}.svg`}
           alt="status"
         />
       </span>
       <Typography>
         <span className={getStatus(phase)}>
-          <strong>{phase}</strong>
+          {phase === SUCCEEDED
+            ? `${t('workflowDetailsView.workflowInfo.Completed')}`
+            : phase}
         </span>
       </Typography>
     </div>

litmus-portal/frontend/src/views/WorkflowDetails/WorkflowStatus/styles.ts

@@ -18,6 +18,10 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.text.primary,
   },
 
+  textBold: {
+    fontWeight: 'bold',
+  },
+
   status: {
     display: 'flex',
     flexDirection: 'row',

litmus-portal/frontend/src/views/WorkflowDetails/WorkflowTable/TableData.tsx

@@ -120,7 +120,9 @@ const TableData: React.FC<TableDataProps> = ({
                           key={index.toString()}
                           className={classes.popoverItems}
                         >
-                          {key} : {YAML.parse(embeddedYAML).spec.appinfo[key]}
+                          <span className={classes.boldText}>{key} :</span>
+                          &nbsp;
+                          {YAML.parse(embeddedYAML).spec.appinfo[key]}
                         </Typography>
                       );
                     }

litmus-portal/frontend/src/views/WorkflowDetails/WorkflowTable/styles.ts

@@ -79,16 +79,16 @@ const useStyles = makeStyles((theme) => ({
   },
 
   popover: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '5rem',
-    padding: theme.spacing(0, 1, 0, 1),
+    padding: theme.spacing(2),
   },
 
   popoverItems: {
     textAlign: 'left',
-    marginTop: 'auto',
-    marginBottom: 'auto',
+    margin: theme.spacing(1, 'auto'),
+  },
+
+  boldText: {
+    fontWeight: 'bold',
   },
 }));
 

litmus-portal/frontend/src/views/WorkflowDetails/workflowConstants.ts

@@ -1,4 +1,4 @@
 export const FAILED: string = 'Failed';
 export const RUNNING: string = 'Running';
 export const PENDING: string = 'Pending';
-export const SUCCEEDED: string = 'Succeded';
+export const SUCCEEDED: string = 'Succeeded';