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>
2021-03-25 13:09:54 +05:30 · 2021-03-25 13:09:54 +05:30 · 2e2b309813
parent 17799da808
commit 2e2b309813
17 changed files with 91 additions and 60 deletions
--- a/litmus-portal/frontend/public/locales/en/translation.yaml
+++ b/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    #############
--- a/litmus-portal/frontend/src/components/AdjustedWeights/index.tsx
+++ b/litmus-portal/frontend/src/components/AdjustedWeights/index.tsx
@ -65,8 +65,8 @@ const AdjustedWeights: React.FC<AdjustedWeightsProps> = ({
        )}
      </div>

-      <div>
-        <LinearProgressBar width={1} value={testValue} />
+      <div className={classes.progressbarDiv}>
+        <LinearProgressBar width={0.2} value={testValue} />
      </div>
    </div>
  );
--- a/litmus-portal/frontend/src/components/AdjustedWeights/styles.ts
+++ b/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;
--- a/litmus-portal/frontend/src/components/ProgressBar/AnalyticsLinearProgressBar/index.tsx
+++ b/litmus-portal/frontend/src/components/ProgressBar/AnalyticsLinearProgressBar/index.tsx
@ -21,24 +21,25 @@ const AnalyticsLinearProgressBar: React.FC<LinearProgressBarProps> = ({
    <LinearProgress
      variant="determinate"
      value={resultValue}
-      classes={
-        isInTable
+      style={{
+        height: '0.2rem',
+      }}
+      classes={{
+        colorPrimary: isInTable
          ? resultValue > 60
-            ? {
-                root: classes.root,
-                barColorPrimary: classes.greenColorPrimary,
-              }
+            ? classes.greenColorSecondary
            : resultValue > 30
-            ? {
-                root: classes.root,
-                barColorPrimary: classes.yellowColorPrimary,
-              }
-            : {
-                root: classes.root,
-                barColorPrimary: classes.redColorPrimary,
-              }
-          : {}
-      }
+            ? classes.yellowColorSecondary
+            : classes.redColorSecondary
+          : classes.greenColorSecondary,
+        barColorPrimary: isInTable
+          ? resultValue > 60
+            ? classes.greenColorPrimary
+            : resultValue > 30
+            ? classes.yellowColorPrimary
+            : classes.redColorPrimary
+          : classes.greenColorSecondary,
+      }}
    />
  );
 };
--- a/litmus-portal/frontend/src/components/ProgressBar/AnalyticsLinearProgressBar/styles.ts
+++ b/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;
--- a/litmus-portal/frontend/src/components/ProgressBar/LinearProgressBar/index.tsx
+++ b/litmus-portal/frontend/src/components/ProgressBar/LinearProgressBar/index.tsx
@ -21,25 +21,26 @@ const LinearProgressBar: React.FC<LinearProgressBarProps> = ({
    <LinearProgress
      variant="determinate"
      value={resultValue}
-      classes={
-        isDefault
-          ? resultValue > 60
-            ? {
-                root: classes.root,
-                barColorPrimary: classes.greenColorPrimary,
-              }
+      style={{
+        height: `${width}rem`,
+        borderRadius: '5rem',
+      }}
+      classes={{
+        colorPrimary: isDefault
+          ? classes.greenColorSecondary
+          : resultValue > 60
+          ? classes.greenColorSecondary
          : resultValue > 30
-            ? {
-                root: classes.root,
-                barColorPrimary: classes.yellowColorPrimary,
-              }
-            : {
-                root: classes.root,
-                barColorPrimary: classes.redColorPrimary,
-              }
-          : {}
-      }
-      style={{ height: `${width}rem`, borderRadius: '5rem' }}
+          ? classes.yellowColorSecondary
+          : classes.redColorSecondary,
+        barColorPrimary: isDefault
+          ? classes.greenColorPrimary
+          : resultValue > 60
+          ? classes.greenColorPrimary
+          : resultValue > 30
+          ? classes.yellowColorPrimary
+          : classes.redColorPrimary,
+      }}
    />
  );
 };
--- a/litmus-portal/frontend/src/components/ProgressBar/LinearProgressBar/styles.ts
+++ b/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;
--- a/litmus-portal/frontend/src/pages/MyHub/index.tsx
+++ b/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}>
--- a/litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx
+++ b/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
--- a/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowRunDetailsTable/TableData.tsx
+++ b/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>
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/ExperimentPoints.tsx
+++ b/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} />
    </>
  );
 };
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx
+++ b/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
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts
+++ b/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',
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx
+++ b/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>
            </>
          )}
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts
+++ b/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',
--- a/litmus-portal/frontend/src/views/CreateWorkflow/CustomWorkflow/ScheduleWorkflow/index.tsx
+++ b/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',
        },
      };
    }
--- a/litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/ResultTable.tsx
+++ b/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>