chore(litmus-portal): Updated the Linear ProgressBar component and some minor bug fixes (#2595)

* Updated the Linear Progressbar component and minor change
* Minor bug fixes and updated RR score for running phase
* Minor translation fix
* Updated image during custom chaos generation
Signed-off-by: Amit Kumar Das <amitkumar.das@mayadata.io>

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

@@ -278,6 +278,7 @@ error:
 workflowDetails:
   detailedLog: Click on Info to see details of your workflow
   fetchError: An error has occurred while fetching the data
+  overallRR: 'Overall RR: '
 
 ######################################
 ############    Views    #############

litmus-portal/frontend/src/components/AdjustedWeights/index.tsx

@@ -65,8 +65,8 @@ const AdjustedWeights: React.FC<AdjustedWeightsProps> = ({
         )}
       </div>
 
-      <div>
+      <div className={classes.progressbarDiv}>
-        <LinearProgressBar width={1} value={testValue} />
+        <LinearProgressBar width={0.2} value={testValue} />
       </div>
     </div>
   );

litmus-portal/frontend/src/components/AdjustedWeights/styles.ts

@@ -24,6 +24,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     justifyContent: 'space-between',
   },
+  progressbarDiv: {
+    marginRight: theme.spacing(1.25),
+  },
 }));
 
 export default useStyles;

litmus-portal/frontend/src/components/ProgressBar/AnalyticsLinearProgressBar/index.tsx

@@ -21,24 +21,25 @@ const AnalyticsLinearProgressBar: React.FC<LinearProgressBarProps> = ({
     <LinearProgress
       variant="determinate"
       value={resultValue}
-      classes={
+      style={{
-        isInTable
+        height: '0.2rem',
+      }}
+      classes={{
+        colorPrimary: isInTable
           ? resultValue > 60
-            ? {
+            ? classes.greenColorSecondary
-                root: classes.root,
-                barColorPrimary: classes.greenColorPrimary,
-              }
             : resultValue > 30
-            ? {
+            ? classes.yellowColorSecondary
-                root: classes.root,
+            : classes.redColorSecondary
-                barColorPrimary: classes.yellowColorPrimary,
+          : classes.greenColorSecondary,
-              }
+        barColorPrimary: isInTable
-            : {
+          ? resultValue > 60
-                root: classes.root,
+            ? classes.greenColorPrimary
-                barColorPrimary: classes.redColorPrimary,
+            : resultValue > 30
-              }
+            ? classes.yellowColorPrimary
-          : {}
+            : classes.redColorPrimary
-      }
+          : classes.greenColorSecondary,
+      }}
     />
   );
 };

litmus-portal/frontend/src/components/ProgressBar/AnalyticsLinearProgressBar/styles.ts

@@ -3,17 +3,25 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 const useStyle = makeStyles((theme: Theme) => ({
   root: {
     borderRadius: '5rem',
-    height: '1rem',
   },
   redColorPrimary: {
     backgroundColor: theme.palette.error.main,
   },
+  redColorSecondary: {
+    backgroundColor: theme.palette.error.light,
+  },
   greenColorPrimary: {
     backgroundColor: theme.palette.success.main,
   },
+  greenColorSecondary: {
+    backgroundColor: theme.palette.success.light,
+  },
   yellowColorPrimary: {
     backgroundColor: theme.palette.warning.main,
   },
+  yellowColorSecondary: {
+    backgroundColor: theme.palette.warning.light,
+  },
 }));
 
 export default useStyle;

litmus-portal/frontend/src/components/ProgressBar/LinearProgressBar/index.tsx

@@ -21,25 +21,26 @@ const LinearProgressBar: React.FC<LinearProgressBarProps> = ({
     <LinearProgress
       variant="determinate"
       value={resultValue}
-      classes={
+      style={{
-        isDefault
+        height: `${width}rem`,
-          ? resultValue > 60
+        borderRadius: '5rem',
-            ? {
+      }}
-                root: classes.root,
+      classes={{
-                barColorPrimary: classes.greenColorPrimary,
+        colorPrimary: isDefault
-              }
+          ? classes.greenColorSecondary
+          : resultValue > 60
+          ? classes.greenColorSecondary
           : resultValue > 30
-            ? {
+          ? classes.yellowColorSecondary
-                root: classes.root,
+          : classes.redColorSecondary,
-                barColorPrimary: classes.yellowColorPrimary,
+        barColorPrimary: isDefault
-              }
+          ? classes.greenColorPrimary
-            : {
+          : resultValue > 60
-                root: classes.root,
+          ? classes.greenColorPrimary
-                barColorPrimary: classes.redColorPrimary,
+          : resultValue > 30
-              }
+          ? classes.yellowColorPrimary
-          : {}
+          : classes.redColorPrimary,
-      }
+      }}
-      style={{ height: `${width}rem`, borderRadius: '5rem' }}
     />
   );
 };

litmus-portal/frontend/src/components/ProgressBar/LinearProgressBar/styles.ts

@@ -3,17 +3,25 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 const useStyle = makeStyles((theme: Theme) => ({
   root: {
     borderRadius: '5rem',
-    height: '1rem',
   },
   redColorPrimary: {
     backgroundColor: theme.palette.error.main,
   },
+  redColorSecondary: {
+    backgroundColor: theme.palette.error.light,
+  },
   greenColorPrimary: {
     backgroundColor: theme.palette.success.main,
   },
+  greenColorSecondary: {
+    backgroundColor: theme.palette.success.light,
+  },
   yellowColorPrimary: {
     backgroundColor: theme.palette.warning.main,
   },
+  yellowColorSecondary: {
+    backgroundColor: theme.palette.warning.light,
+  },
 }));
 
 export default useStyle;

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

@@ -145,9 +145,6 @@ const MyHub: React.FC = () => {
             <Typography variant="h3" gutterBottom>
               {t('myhub.mainPage.header')}
             </Typography>
-            <Typography variant="h4">
-              <strong>{t('myhub.mainPage.github')}</strong>
-            </Typography>
           </div>
           {/* Charts Div */}
           <div className={classes.mainDiv}>

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

@@ -31,7 +31,7 @@ const WorkflowDetails: React.FC = () => {
   const tabs = useActions(TabActions);
   const { pathname } = useLocation();
   // Getting the workflow nome from the pathname
-  const workflowRunId = pathname.split('/')[3];
+  const workflowRunId = pathname.split('/')[2];
   const { t } = useTranslation();
 
   // get ProjectID

litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowRunDetailsTable/TableData.tsx

@@ -66,7 +66,7 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
         <div className={classes.reliabiltyData}>
           <Typography>{data.resulting_points} Points</Typography>
           <div className={classes.progressBar}>
-            <LinearProgressBar width={2} value={data.resulting_points ?? 0} />
+            <LinearProgressBar width={0.2} value={data.resulting_points ?? 0} />
           </div>
         </div>
       </StyledTableCell>

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

@@ -21,7 +21,7 @@ const ExperimentPoints: React.FC<ExperimentPointsProps> = ({
           {weight === 1 || 0 ? `${weight} point` : `${weight} points`}
         </Typography>
       </div>
-      <LinearProgressBar width={1} value={weight} />
+      <LinearProgressBar width={0.2} value={weight} />
     </>
   );
 };

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

@@ -27,7 +27,6 @@ import * as TabActions from '../../../redux/actions/tabs';
 import * as WorkflowActions from '../../../redux/actions/workflow';
 import { history } from '../../../redux/configureStore';
 import { ReactComponent as CrossMarkIcon } from '../../../svg/crossmark.svg';
-import { getUserRole } from '../../../utils/auth';
 import { getProjectID, getProjectRole } from '../../../utils/getSearchParams';
 import ExperimentPoints from './ExperimentPoints';
 import useStyles from './styles';
@@ -41,7 +40,6 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
-  const userRole = getUserRole();
   const projectID = getProjectID();
   const projectRole = getProjectRole();
 
@@ -238,7 +236,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
           <div className={classes.weightDiv}>
             {data.weightages.map((expData) => {
               return (
-                <div style={{ marginBottom: 8 }}>
+                <div style={{ marginBottom: 20 }}>
                   <ExperimentPoints
                     expName={expData.experiment_name}
                     weight={expData.weightage}
@@ -284,7 +282,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
           ) : (
             <></>
           )}
-          {data.cronSyntax === '' ? (
+          {projectRole !== 'Viewer' && data.cronSyntax === '' ? (
             <MenuItem value="Rerun_Schedule" onClick={() => reRunSchedule()}>
               <div className={classes.expDiv}>
                 <ReplayIcon className={classes.rerunBtn} />
@@ -312,7 +310,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
               </Typography>
             </div>
           </MenuItem>
-          {userRole !== 'Viewer' ? (
+          {projectRole !== 'Viewer' ? (
             <MenuItem value="Analysis" onClick={() => setIsModalOpen(true)}>
               <div className={classes.expDiv}>
                 <img

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

@@ -177,7 +177,7 @@ const useStyles = makeStyles((theme) => ({
   weightInfo: {
     display: 'flex',
     flexDirection: 'row',
-    paddingBottom: theme.spacing(0.625),
+    paddingBottom: theme.spacing(1),
   },
   points: {
     marginLeft: 'auto',

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

@@ -7,6 +7,7 @@ import {
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import LinearProgressBar from '../../../components/ProgressBar/LinearProgressBar';
 import {
   ExecutionData,
@@ -28,6 +29,8 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
   const projectID = getProjectID();
   const projectRole = getProjectRole();
 
+  const { t } = useTranslation();
+
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
@@ -74,22 +77,29 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
       </TableCell>
       <TableCell>
         <div className={classes.reliabiltyData}>
-          {exeData.phase === 'Failed' || exeData.phase === '' ? (
+          {exeData.finishedAt.length === 0 ? (
+            <Typography>
+              {t('workflowDetails.overallRR')}
+              <span className={classes.failed}>NA</span>
+            </Typography>
+          ) : exeData.phase === 'Failed' || exeData.phase === '' ? (
             <>
               <Typography>
-                Overall RR: <span className={classes.failed}>0%</span>
+                {t('workflowDetails.overallRR')}
+                <span className={classes.failed}>0%</span>
               </Typography>
               <div className={classes.progressBar}>
-                <LinearProgressBar width={2} value={0} />
+                <LinearProgressBar width={0.1} value={0} />
               </div>
             </>
           ) : (
             <>
               <Typography>
-                Overall RR: <span className={classes.success}>100%</span>
+                {t('workflowDetails.overallRR')}
+                <span className={classes.success}>100%</span>
               </Typography>
               <div className={classes.progressBar}>
-                <LinearProgressBar width={2} value={100} />
+                <LinearProgressBar width={0.1} value={10} />
               </div>
             </>
           )}

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

@@ -101,6 +101,7 @@ const useStyles = makeStyles((theme) => ({
   },
   progressBar: {
     width: '6.5rem',
+    marginTop: theme.spacing(2),
   },
   steps: {
     marginLeft: theme.spacing(5.625),
@@ -135,6 +136,9 @@ const useStyles = makeStyles((theme) => ({
   success: {
     color: theme.palette.success.main,
   },
+  warning: {
+    color: theme.palette.warning.main,
+  },
   // Menu option with icon
   expDiv: {
     display: 'flex',

litmus-portal/frontend/src/views/CreateWorkflow/CustomWorkflow/ScheduleWorkflow/index.tsx

@@ -189,7 +189,7 @@ const ScheduleCustomWorkflow: React.FC<VerifyCommitProps> = ({ gotoStep }) => {
       container: {
         args: [`${installAllExp}sleep 30`],
         command: ['sh', '-c'],
-        image: 'alpine/k8s:1.18.2',
+        image: 'litmuschaos/k8s:latest',
       },
     };
     workflows.forEach((data) => {
@@ -242,7 +242,7 @@ const ScheduleCustomWorkflow: React.FC<VerifyCommitProps> = ({ gotoStep }) => {
             `kubectl delete chaosengine ${removeChaosEngine} -n {{workflow.parameters.adminModeNamespace}}`,
           ],
           command: ['sh', '-c'],
-          image: 'alpine/k8s:1.18.2',
+          image: 'litmuschaos/k8s:latest',
         },
       };
     }

litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/ResultTable.tsx

@@ -116,7 +116,7 @@ const ResultTable: React.FC<ResultModalProps> = ({ testValue, testNames }) => {
                     {t('createWorkflow.reliabilityScore.resultTable.points')}
                     <br />
                     <div className={classes.progressBar}>
-                      <LinearProgressBar width={2} value={row.weight} />
+                      <LinearProgressBar width={0.2} value={row.weight} />
                     </div>
                   </TableCell>
                   <TableCell align="left" className={classes.tablePoints}>
@@ -125,7 +125,7 @@ const ResultTable: React.FC<ResultModalProps> = ({ testValue, testNames }) => {
                     {t('createWorkflow.reliabilityScore.resultTable.points')}
                     <br />
                     <div className={classes.progressBar}>
-                      <LinearProgressBar width={2} value={row.points} />
+                      <LinearProgressBar width={0.2} value={row.points} />
                     </div>
                   </TableCell>
                 </TableRow>