chore(litmus-portal): Home Page Stats for Litmus Portal. (litmuschaos…

…#2053)

This commit removes two outdated test cases from the cypress test suite of PassedVsFailed component

Signed-off-by: ishangupta-ds <ishan.gupta@mayadata.io>

litmus-portal/frontend/cypress/component/LinearProgressBar.spec.tsx

@@ -1,7 +1,7 @@
 /// <reference types="Cypress" />
 import { mount } from 'cypress-react-unit-test';
 import React from 'react';
-import LinearProgressBar from '../../src/views/ReturningHome/ProgressBar/LinearProgressBar';
+import LinearProgressBar from '../../src/components/ProgressBar/LinearProgressBar';
 
 describe('Linear Progressbar Testing', () => {
   it('Progressbar stroke for value 3', () => {

litmus-portal/frontend/cypress/component/passedVsFailed.spec.tsx

@@ -2,7 +2,7 @@
 
 import { mount } from 'cypress-react-unit-test';
 import React from 'react';
-import PassedVsFailed from '../../src/views/ReturningHome/PassedVsFailed/index';
+import PassedVsFailed from '../../src/views/Home/PassedVsFailed';
 
 // Test Suite - Passing props -> passed: 75, failed: 25
 describe('Passed Vs Failed: props -> passed: 75, failed: 25', () => {
@@ -14,20 +14,6 @@ describe('Passed Vs Failed: props -> passed: 75, failed: 25', () => {
     expect(wrapper.props.failed).to.equal(25);
   });
 
-  it('Pass Icon is present', () => {
-    mount(wrapper);
-    cy.get('[data-cy=passIcon]')
-      .should('have.attr', 'src')
-      .should('include', './icons/Pass.png');
-  });
-
-  it('Fail Icon is present', () => {
-    mount(wrapper);
-    cy.get('[data-cy=failedIcon]')
-      .should('have.attr', 'src')
-      .should('include', './icons/Fail.png');
-  });
-
   it('Passed Value is 75 or not', () => {
     mount(wrapper);
     cy.get('[data-cy=passedValueID]').then((text) => {
@@ -53,20 +39,6 @@ describe('Passed Vs Failed: props -> passed: 20, failed: 80', () => {
     expect(wrapper.props.failed).to.equal(80);
   });
 
-  it('Pass Icon is present', () => {
-    mount(wrapper);
-    cy.get('[data-cy=passIcon]')
-      .should('have.attr', 'src')
-      .should('include', './icons/Pass.png');
-  });
-
-  it('Fail Icon is present', () => {
-    mount(wrapper);
-    cy.get('[data-cy=failedIcon]')
-      .should('have.attr', 'src')
-      .should('include', './icons/Fail.png');
-  });
-
   it('Passed Value is 20 or not', () => {
     mount(wrapper);
     cy.get('[data-cy=passedValueID]').then((text) => {
@@ -92,16 +64,6 @@ describe('Passed Vs Failed: props -> passed: 0, failed: 0', () => {
     expect(wrapper.props.failed).to.equal(0);
   });
 
-  it('Pass Icon is not present', () => {
-    mount(wrapper);
-    cy.get('[data-cy=passIcon]').should('not.exist');
-  });
-
-  it('Fail Icon is not present', () => {
-    mount(wrapper);
-    cy.get('[data-cy=failedIcon]').should('not.exist');
-  });
-
   it('Passed Value is 0 or not', () => {
     mount(wrapper);
     cy.get('[data-cy=passedValueID]').then((text) => {

litmus-portal/frontend/cypress/component/semiCircularProgressBar.spec.tsx

@@ -2,7 +2,7 @@
 
 import { mount } from 'cypress-react-unit-test';
 import React from 'react';
-import SemiCircularProgressBar from '../../src/views/ReturningHome/ProgressBar/SemiCircularProgressBar';
+import SemiCircularProgressBar from '../../src/components/ProgressBar/SemiCircularProgressBar';
 
 // Test Suite -
 // Progress Bar props -> value = 50, 10, 100

litmus-portal/frontend/package.json

@@ -29,6 +29,7 @@
     "js-yaml": "^3.14.0",
     "jsonwebtoken": "^8.5.1",
     "localforage": "^1.7.3",
+    "lodash": "^4.17.20",
     "moment": "^2.27.0",
     "plotly.js": "^1.54.6",
     "prop-types": "^15.7.2",
@@ -92,6 +93,7 @@
     "@typescript-eslint/eslint-plugin": "^3.5.0",
     "@typescript-eslint/parser": "^3.5.0",
     "cross-env": "^5.2.0",
+    "@types/lodash": "^4.14.161",
     "cypress": "^4.11.0",
     "cypress-react-unit-test": "^4.11.2",
     "eslint": "^6.8.0",

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

@@ -1,7 +1,7 @@
 import { Typography } from '@material-ui/core';
 import React from 'react';
 import capitalize from '../../utils/capitalize';
-import LinearProgressBar from '../../views/ReturningHome/ProgressBar/LinearProgressBar';
+import LinearProgressBar from '../ProgressBar/LinearProgressBar';
 import useStyles from './styles';
 
 interface AdjustedWeightsProps {

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

@@ -0,0 +1,31 @@
+import { Line } from 'rc-progress';
+import React from 'react';
+import { useTheme } from '@material-ui/core/styles';
+
+interface LinearProgressBarProps {
+  value: number;
+  maxValue: number;
+  isInTable: boolean;
+}
+
+const AnalyticsLinearProgressBar: React.FC<LinearProgressBarProps> = ({
+  value,
+  maxValue,
+  isInTable,
+}) => {
+  const width: number = 2;
+  const resultValue = ((value as number) / (maxValue as number)) * 100;
+
+  const { palette } = useTheme();
+
+  return (
+    <Line
+      percent={resultValue}
+      strokeWidth={width}
+      trailWidth={width}
+      strokeColor={isInTable ? palette.primary.dark : palette.secondary.dark}
+    />
+  );
+};
+
+export default AnalyticsLinearProgressBar;

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

@@ -24,6 +24,7 @@ import * as UserActions from '../../redux/actions/user';
 import configureStore, { history } from '../../redux/configureStore';
 import { RootState } from '../../redux/reducers';
 import useStyles from './style';
+import ReturningHome from '../../views/Home/ReturningHome/index';
 
 const CreateWorkflowCard: React.FC = () => {
   const { t } = useTranslation();
@@ -80,15 +81,14 @@ const HomePage: React.FC = () => {
     setIsOpen(false);
   };
 
+  const [secondLogin, setSecondLogin] = useState<boolean>(true);
+
   useEffect(() => {
     if (data?.getUser.username === userData.username) {
       setIsOpen(false);
       if (userData.selectedProjectID === '') {
-        let isOwnerOfProject = {
-          id: '',
-          name: '',
-        };
-        const projectList: Project[] = data?.getUser.projects;
+        let isOwnerOfProject = { id: '', name: '' };
+        const projectList: Project[] = data?.getUser.projects ?? [];
         projectList.forEach((project) => {
           const memberList: Member[] = project.members;
           memberList.forEach((member) => {
@@ -127,39 +127,48 @@ const HomePage: React.FC = () => {
                 {t('home.heading')}
                 <strong>{` ${name}`}</strong>
               </Typography>
-              <div className={classes.headingDiv}>
-                <div className={classes.mainDiv}>
-                  <div>
-                    <Typography className={classes.mainHeading}>
-                      <strong>{t('home.subHeading1')}</strong>
-                    </Typography>
-                    <Typography className={classes.mainResult}>
-                      <strong>{t('home.subHeading2')}</strong>
-                    </Typography>
-                    <Typography className={classes.mainDesc}>
-                      {t('home.subHeading3')}
-                    </Typography>
-                    <Button
-                      variant="contained"
-                      className={classes.predefinedBtn}
-                      onClick={() => {
-                        tabs.changeWorkflowsTabs(2);
-                        history.push('/workflows');
-                      }}
-                    >
-                      <Typography variant="subtitle1">
-                        {t('home.button1')}
+              {secondLogin ? (
+                <ReturningHome
+                  callbackToSetSecondlogin={(secondLogin: boolean) => {
+                    setSecondLogin(secondLogin);
+                  }}
+                  currentStatus={secondLogin}
+                />
+              ) : (
+                <div className={classes.headingDiv}>
+                  <div className={classes.mainDiv}>
+                    <div>
+                      <Typography className={classes.mainHeading}>
+                        <strong>{t('home.subHeading1')}</strong>
                       </Typography>
-                    </Button>
+                      <Typography className={classes.mainResult}>
+                        <strong>{t('home.subHeading2')}</strong>
+                      </Typography>
+                      <Typography className={classes.mainDesc}>
+                        {t('home.subHeading3')}
+                      </Typography>
+                      <Button
+                        variant="contained"
+                        className={classes.predefinedBtn}
+                        onClick={() => {
+                          tabs.changeWorkflowsTabs(2);
+                          history.push('/workflows');
+                        }}
+                      >
+                        <Typography variant="subtitle1">
+                          {t('home.button1')}
+                        </Typography>
+                      </Button>
+                    </div>
+                    <div className={classes.imageDiv}>
+                      <img src="icons/applause.png" alt="Applause icon" />
+                    </div>
                   </div>
-                  <div className={classes.imageDiv}>
-                    <img src="icons/applause.png" alt="Applause icon" />
+                  <div>
+                    <CreateWorkflowCard data-cy="CreateWorkflowCard" />
                   </div>
                 </div>
-                <div>
-                  <CreateWorkflowCard data-cy="CreateWorkflowCard" />
-                </div>
-              </div>
+              )}
               <div className={classes.contentDiv}>
                 <div className={classes.statDiv}>
                   <div className={classes.btnHeaderDiv}>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Typography } from '@material-ui/core';
 import useStyles from './styles';
-import LinearProgressBar from '../../ReturningHome/ProgressBar/LinearProgressBar';
+import LinearProgressBar from '../../../components/ProgressBar/LinearProgressBar';
 
 interface ExperimentPointsProps {
   expName: string;

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

@@ -13,7 +13,7 @@ import {
 } from '../../../models/graphql/workflowData';
 import { history } from '../../../redux/configureStore';
 import timeDifferenceForDate from '../../../utils/datesModifier';
-import LinearProgressBar from '../../ReturningHome/ProgressBar/LinearProgressBar';
+import LinearProgressBar from '../../../components/ProgressBar/LinearProgressBar';
 import CustomStatus from '../CustomStatus/Status';
 import useStyles from './styles';
 

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

@@ -8,7 +8,7 @@ import TableRow from '@material-ui/core/TableRow';
 import React from 'react';
 import InfoTooltip from '../../../components/InfoTooltip';
 import Center from '../../../containers/layouts/Center';
-import LinearProgressBar from '../../ReturningHome/ProgressBar/LinearProgressBar';
+import LinearProgressBar from '../../../components/ProgressBar/LinearProgressBar';
 import ToggleComponent from '../ToggleComponent';
 import useStyles from './styles';