CSS and other bug fixes for 2.0 beta 1 (#2535)

* bug fixes for beta 1

Signed-off-by: ishangupta-ds <ishan@chaosnative.com>

* modal bug fixes for beta 1

Signed-off-by: ishangupta-ds <ishan@chaosnative.com>

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

@@ -46,6 +46,7 @@ quickActionCard:
   quickSurvey: Take a quick survey
   readDocs: Read the Litmus docs
   readAPIDocs: Read the Litmus Portal API docs
+  addDashboard: Add a Dashboard
   addDataSource: Add a Data Source
   addAgent: Add an agent
   connectNewAgent: Connect a new agent
@@ -207,7 +208,7 @@ analyticsDashboard:
   overviewTabdataSourceTable: Connected Data Sources
   applicationDashboard: Application Dashboards
   connectedDataSources: Connected Data Sources
-  datasource: Data source
+  dataSource: Data sources
   dataSourceTable:
     tableHead1: Status
     tableHead2: Data Source Name
@@ -845,4 +846,4 @@ customWorkflow:
   viewYAML:
     view: View the YAML here
   backBtn:
-    back: Back
+    back: Back

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

@@ -14,7 +14,7 @@ const CustomBreadcrumbs: React.FC<CustomBreadcrumbsProps> = ({ location }) => {
   const classes = useStyles();
 
   return (
-    <Breadcrumbs aria-label="breadcrumb">
+    <Breadcrumbs aria-label="breadcrumb" className={classes.marker}>
       {pathname.map((path) => {
         if (path) {
           intermediateRoutes += path;

litmus-portal/frontend/src/components/BreadCrumbs/styles.tsx

@@ -6,6 +6,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     textDecoration: 'none',
     color: theme.palette.text.primary,
   },
+  marker: {
+    color: theme.palette.text.disabled,
+  },
 }));
 
 export default useStyles;

litmus-portal/frontend/src/components/Button/BinarySwitch/index.tsx

@@ -18,8 +18,8 @@ const AntSwitch = withStyles((theme: Theme) =>
         color: theme.palette.common.white,
         '& + $track': {
           opacity: 1,
-          backgroundColor: theme.palette.secondary.dark,
+          backgroundColor: theme.palette.primary.main,
-          borderColor: theme.palette.secondary.dark,
+          borderColor: theme.palette.primary.main,
         },
       },
     },

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

@@ -0,0 +1,9 @@
+import { Checkbox, withStyles } from '@material-ui/core';
+
+const CheckBox = withStyles((theme) => ({
+  root: {
+    color: theme.palette.text.hint,
+  },
+}))(Checkbox);
+
+export default CheckBox;

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

@@ -37,13 +37,13 @@ const InfoFilledWrap: React.FC = () => {
       statType: 'Total Experiments',
     },
     {
-      color: theme.palette.primary.dark,
+      color: theme.palette.secondary.main,
       value: parseInt(communityData.google.operatorInstalls, 10),
       statType: 'Operator Installed',
       plus: true,
     },
     {
-      color: theme.palette.primary.light,
+      color: theme.palette.primary.main,
       value: parseInt(communityData.google.totalRuns, 10),
       statType: 'Total Experiment Runs',
       plus: true,

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

@@ -10,7 +10,7 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(3),
     borderRadius: 3,
     [theme.breakpoints.down('sm')]: {
-      width: theme.spacing(40),
+      width: '15rem',
     },
   },
   infoFilledWrap: {

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

@@ -42,16 +42,16 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(1),
     textAlign: 'center',
     cursor: 'pointer',
-    border: `1px solid ${theme.palette.text.hint}`,
+    border: `1px solid ${theme.palette.border.main}`,
     boxSizing: 'border-box',
     '&:hover': {
-      border: `1px solid ${theme.palette.secondary.dark}`,
+      border: `1px solid ${theme.palette.primary.main}`,
       boxShadow: `0px 4px 4px ${theme.palette.primary.light}`,
     },
   },
 
   cardFocused: {
-    border: `1px solid ${theme.palette.secondary.dark}`,
+    border: `1px solid ${theme.palette.primary.main}`,
     boxShadow: `0px 4px 4px ${theme.palette.primary.light}`,
   },
 
@@ -64,7 +64,7 @@ const useStyles = makeStyles((theme) => ({
     margin: '0 auto',
     textAlign: 'center',
     cursor: 'pointer',
-    border: `1px solid ${theme.palette.secondary.dark}`,
+    border: `1px solid ${theme.palette.primary.main}`,
     boxSizing: 'border-box',
   },
 
@@ -134,7 +134,7 @@ const useStyles = makeStyles((theme) => ({
   },
 
   totalRunsSelected: {
-    color: theme.palette.secondary.dark,
+    color: theme.palette.primary.main,
     fontSize: '0.875rem',
     fontWeight: 500,
     marginTop: theme.spacing(0.375),
@@ -155,7 +155,7 @@ const useStyles = makeStyles((theme) => ({
   },
 
   expCountSelected: {
-    backgroundColor: theme.palette.secondary.dark,
+    backgroundColor: theme.palette.primary.main,
     color: theme.palette.secondary.contrastText,
     borderRadius: 3,
     paddingTop: theme.spacing(0.275),
@@ -173,7 +173,7 @@ const useStyles = makeStyles((theme) => ({
   },
 
   moreDetails: {
-    color: theme.palette.primary.dark,
+    color: theme.palette.primary.main,
   },
 
   horizontalLine: {

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

@@ -7,6 +7,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   stepper: {
     marginTop: theme.spacing(5),
+    paddingTop: theme.spacing(10),
   },
   backButton: {
     marginRight: theme.spacing(1),
@@ -16,6 +17,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     flexDirection: 'row',
     gap: '1rem',
     marginLeft: '9%',
+    paddingBottom: theme.spacing(3),
   },
   yamlError: {
     marginTop: theme.spacing(1.5),

litmus-portal/frontend/src/components/YamlEditor/Editor.tsx

@@ -1,23 +1,19 @@
 /* eslint-disable no-param-reassign */
-import React, { useEffect, useState } from 'react';
+import { Box, Button, Typography, useTheme } from '@material-ui/core';
-import { Typography, Button, Box } from '@material-ui/core';
 import Divider from '@material-ui/core/Divider';
-import GetAppTwoToneIcon from '@material-ui/icons/GetAppTwoTone';
+import Fade from '@material-ui/core/Fade';
+import Tooltip from '@material-ui/core/Tooltip';
+import ErrorTwoToneIcon from '@material-ui/icons/ErrorTwoTone';
 import FileCopyTwoToneIcon from '@material-ui/icons/FileCopyTwoTone';
 import FindInPageTwoToneIcon from '@material-ui/icons/FindInPageTwoTone';
 import FindReplaceTwoToneIcon from '@material-ui/icons/FindReplaceTwoTone';
-import UndoTwoToneIcon from '@material-ui/icons/UndoTwoTone';
+import GetAppTwoToneIcon from '@material-ui/icons/GetAppTwoTone';
 import RedoTwoToneIcon from '@material-ui/icons/RedoTwoTone';
+import SelectAllTwoToneIcon from '@material-ui/icons/SelectAllTwoTone';
+import UndoTwoToneIcon from '@material-ui/icons/UndoTwoTone';
 import UnfoldLessTwoToneIcon from '@material-ui/icons/UnfoldLessTwoTone';
 import UnfoldMoreTwoToneIcon from '@material-ui/icons/UnfoldMoreTwoTone';
-import SelectAllTwoToneIcon from '@material-ui/icons/SelectAllTwoTone';
-import ErrorTwoToneIcon from '@material-ui/icons/ErrorTwoTone';
-import Tooltip from '@material-ui/core/Tooltip';
-import Fade from '@material-ui/core/Fade';
 import AceEditor from 'react-ace';
-import 'brace/mode/yaml';
-import 'brace/theme/cobalt';
-import 'ace-builds/src-min-noconflict/ext-searchbox';
 import 'ace-builds/src-min-noconflict/ext-beautify';
 import 'ace-builds/src-min-noconflict/ext-code_lens';
 import 'ace-builds/src-min-noconflict/ext-elastic_tabstops_lite';
@@ -30,6 +26,7 @@ import 'ace-builds/src-min-noconflict/ext-modelist';
 import 'ace-builds/src-min-noconflict/ext-options';
 import 'ace-builds/src-min-noconflict/ext-prompt';
 import 'ace-builds/src-min-noconflict/ext-rtl';
+import 'ace-builds/src-min-noconflict/ext-searchbox';
 import 'ace-builds/src-min-noconflict/ext-spellcheck';
 import 'ace-builds/src-min-noconflict/ext-split';
 import 'ace-builds/src-min-noconflict/ext-static_highlight';
@@ -37,11 +34,14 @@ import 'ace-builds/src-min-noconflict/ext-statusbar';
 import 'ace-builds/src-min-noconflict/ext-textarea';
 import 'ace-builds/src-min-noconflict/ext-themelist';
 import 'ace-builds/src-min-noconflict/ext-whitespace';
+import 'brace/mode/yaml';
+import 'brace/theme/cobalt';
+import React, { useEffect, useState } from 'react';
 import YAML from 'yaml';
-import { AceValidations, parseYamlValidations } from './Validations';
-import useStyles from './styles';
 import useActions from '../../redux/actions';
 import * as WorkflowActions from '../../redux/actions/workflow';
+import useStyles from './styles';
+import { AceValidations, parseYamlValidations } from './Validations';
 
 interface YamlEditorProps {
   id: string;
@@ -61,6 +61,7 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
   readOnly,
 }) => {
   const classes = useStyles();
+  const { palette } = useTheme();
 
   const workflow = useActions(WorkflowActions);
 
@@ -105,7 +106,7 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
         'ace_gutter-cell'
       )[stateObject.annotations[0].row - 1] as any).style;
       nodeStyleError.background = 'red';
-      nodeStyleError.color = '#FFFFFF';
+      nodeStyleError.color = palette.secondary.contrastText;
     } else {
       setIsValid(true);
       setErrors({
@@ -118,8 +119,10 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
         'ace_gutter-cell'
       );
       for (let i = 0; i < nodeStyleErrorList.length; i += 1) {
-        (nodeStyleErrorList[i] as any).style.backgroundColor = '#1C1C1C';
+        (nodeStyleErrorList[i] as any).style.backgroundColor =
-        (nodeStyleErrorList[i] as any).style.color = 'rgba(255, 255, 255, 0.4)';
+          palette.common.black;
+        (nodeStyleErrorList[i] as any).style.color =
+          palette.secondary.contrastText;
       }
     }
     setModifiedYaml(value);
@@ -496,14 +499,14 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
                 editor.setAnimatedScroll(true);
                 editor.setShowInvisibles(false);
                 editor.setFontSize('0.98rem');
-                editor.container.style.background = '#1C1C1C';
+                editor.container.style.background = palette.common.black;
                 editor.container.style.lineHeight = '160%';
                 const nodeStyle = (document.getElementsByClassName(
                   'ace_gutter'
                 )[0] as any).style;
-                nodeStyle.color = 'rgba(255, 255, 255, 0.4)';
+                nodeStyle.color = palette.secondary.contrastText;
                 nodeStyle.borderRight = 0;
-                nodeStyle.background = '#1C1C1C';
+                nodeStyle.background = palette.common.black;
               }}
               onCursorChange={(selection) => {
                 (YamlAce.current!.editor as any).setOptions({
@@ -516,9 +519,9 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
                 );
                 for (let i = 0; i < nodeStyleActiveList.length; i += 1) {
                   (nodeStyleActiveList[i] as any).style.backgroundColor =
-                    '#1C1C1C';
+                    palette.common.black;
                   (nodeStyleActiveList[i] as any).style.color =
-                    'rgba(255, 255, 255, 0.4)';
+                    palette.secondary.contrastText;
                 }
 
                 if (
@@ -529,8 +532,8 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
                   const nodeStyleActive = (document.getElementsByClassName(
                     'ace_gutter-cell'
                   )[selection.cursor.row] as any).style;
-                  nodeStyleActive.backgroundColor = '#5B44BA';
+                  nodeStyleActive.backgroundColor = palette.primary.main;
-                  nodeStyleActive.color = '#FFFFFF';
+                  nodeStyleActive.color = palette.secondary.contrastText;
                 }
               }}
               annotations={editorState.annotations}
@@ -553,10 +556,8 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
                   <img
                     src="/icons/fullscreen.svg"
                     alt="Full Screen"
-                    color="#FFFFFF"
+                    color={palette.secondary.contrastText}
-                    width="25px"
+                    className={classes.fullScreenIcon}
-                    height="25px"
-                    margin-right="25px"
                   />
                 }
               />

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

@@ -67,7 +67,7 @@ const useStyles = makeStyles((theme: Theme) => ({
       webkitBoxShadow: `inset 0 0 6px ${theme.palette.common.black}`,
     },
     '&::-webkit-scrollbar-thumb': {
-      backgroundColor: theme.palette.secondary.dark,
+      backgroundColor: theme.palette.primary.main,
     },
     [theme.breakpoints.down('xl')]: {
       height: '84vh',
@@ -259,11 +259,17 @@ const useStyles = makeStyles((theme: Theme) => ({
     width: '100%',
   },
 
+  fullScreenIcon: {
+    width: '1.5625rem',
+    height: '1.5625rem',
+    marginRight: '1.5625rem',
+  },
+
   // Validations
 
   validationError: {
     position: 'absolute',
-    background: 'rgba(202, 44, 44, 0.2)',
+    background: theme.palette.error.light,
   },
 }));
 

litmus-portal/frontend/src/containers/app/App.tsx

@@ -144,7 +144,6 @@ const Routes: React.FC<RoutesProps> = ({ isOwner, isProjectAvailable }) => {
         <Redirect exact path="/login" to="/" />
         <Redirect exact path="/workflows/schedule" to="/workflows" />
         <Redirect exact path="/workflows/template" to="/workflows" />
-        <Redirect exact path="/workflows/analytics" to="/workflows" />
 
         <Redirect exact path="/analytics/overview" to="/analytics" />
         <Redirect exact path="/analytics/litmusdashboard" to="/analytics" />

litmus-portal/frontend/src/models/dashboardsData.ts

@@ -29,8 +29,8 @@ export interface DashboardDetails {
   panelGroups?: PanelGroupResponse[];
 }
 
-export interface ChaosEngineNamesAndNamespacesMap {
+export interface ChaosResultNamesAndNamespacesMap {
-  engineName: string;
+  resultName: string;
-  engineNamespace: string;
+  resultNamespace: string;
   workflowName: string;
 }

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

@@ -62,6 +62,10 @@ const AnalyticsDashboard = () => {
             label={t('analyticsDashboard.applicationDashboard')}
             data-cy="kubernetesDashboard"
           />
+          <StyledTab
+            label={t('analyticsDashboard.dataSource')}
+            data-cy="data source"
+          />
         </Tabs>
       </AppBar>
 
@@ -73,9 +77,9 @@ const AnalyticsDashboard = () => {
       </TabPanel>
       <TabPanel value={analyticsTabValue} index={2}>
         <DashboardTable />
-        <div className={classes.dataSourceTable}>
+      </TabPanel>
-          <DataSourceTable />
+      <TabPanel value={analyticsTabValue} index={3}>
-        </div>
+        <DataSourceTable />
       </TabPanel>
     </Scaffold>
   );

litmus-portal/frontend/src/pages/AnalyticsDashboards/styles.ts

@@ -16,9 +16,6 @@ const useStyles = makeStyles((theme) => ({
     boxShadow: 'none',
     paddingLeft: theme.spacing(1.5),
   },
-  dataSourceTable: {
-    marginTop: theme.spacing(10),
-  },
 }));
 
 export default useStyles;

litmus-portal/frontend/src/pages/Community/styles.ts

@@ -44,7 +44,6 @@ const useStyles = makeStyles((theme) => ({
     [theme.breakpoints.down('sm')]: {
       display: 'flex',
       flexDirection: 'column',
-      marginLeft: theme.spacing(8),
     },
   },
   paper: {
@@ -137,7 +136,9 @@ const useStyles = makeStyles((theme) => ({
 
   quickActionCard: {
     height: '21.25rem',
-    width: '20rem',
+    width: '15rem',
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(7),
     [theme.breakpoints.down('md')]: {
       display: 'flex',
       width: '15rem',
@@ -145,8 +146,9 @@ const useStyles = makeStyles((theme) => ({
     },
     [theme.breakpoints.down('sm')]: {
       display: 'flex',
+      margin: 0,
       marginTop: theme.spacing(5),
-      width: '25rem',
+      width: '20rem',
       flexDirection: 'column',
     },
   },

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

@@ -4,7 +4,6 @@ import { useQuery } from '@apollo/client';
 import { CardActionArea, Typography, useTheme } from '@material-ui/core';
 import Backdrop from '@material-ui/core/Backdrop/Backdrop';
 import IconButton from '@material-ui/core/IconButton';
-import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 import { ButtonFilled, LitmusCard } from 'litmus-ui';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -29,6 +28,7 @@ import * as UserActions from '../../redux/actions/user';
 import * as WorkflowActions from '../../redux/actions/workflow';
 import configureStore, { history } from '../../redux/configureStore';
 import { RootState } from '../../redux/reducers';
+import { ReactComponent as Arrow } from '../../svg/arrow.svg';
 import { getUsername } from '../../utils/auth';
 import ReturningHome from '../../views/Home/ReturningHome';
 import useStyles from './style';
@@ -66,7 +66,7 @@ const CreateWorkflowCard: React.FC = () => {
           <Typography className={classes.createWorkflowTitle}>
             {t('home.workflow.info')}
           </Typography>
-          <ArrowForwardIcon className={classes.arrowForwardIcon} />
+          <Arrow className={classes.arrowForwardIconCard} />
         </CardActionArea>
       </div>
     </LitmusCard>
@@ -193,7 +193,7 @@ const HomePage: React.FC = () => {
                       <img src="icons/applause.png" alt="Applause icon" />
                     </div>
                   </div>
-                  <div>
+                  <div className={classes.workflowCardDiv}>
                     <CreateWorkflowCard data-cy="CreateWorkflowCard" />
                   </div>
                 </div>
@@ -207,6 +207,8 @@ const HomePage: React.FC = () => {
                       </Typography>
                       <IconButton
                         className={classes.seeAllBtn}
+                        disableRipple
+                        disableFocusRipple
                         onClick={(event) => {
                           event.preventDefault();
                           history.push('/community');
@@ -216,7 +218,7 @@ const HomePage: React.FC = () => {
                           <Typography className={classes.btnText}>
                             {t('home.analytics.moreInfo')}
                           </Typography>
-                          <img src="icons/next.png" alt="next" />
+                          <Arrow className={classes.arrowForwardIcon} />
                         </div>
                       </IconButton>
                     </div>

litmus-portal/frontend/src/pages/HomePage/style.ts

@@ -26,8 +26,19 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     flexDirection: 'row',
     flexGrow: 1,
+    marginRight: theme.spacing(6.5),
     [theme.breakpoints.down('sm')]: {
-      width: '20rem',
+      width: '95%',
+      flexDirection: 'column',
+    },
+  },
+
+  workflowCardDiv: {
+    marginRight: theme.spacing(10),
+    [theme.breakpoints.down('sm')]: {
+      marginTop: theme.spacing(3),
+      height: '20rem',
+      width: '95%',
     },
   },
 
@@ -67,6 +78,13 @@ const useStyles = makeStyles((theme) => ({
   },
 
   arrowForwardIcon: {
+    color: theme.palette.primary.main,
+    marginLeft: theme.spacing(1),
+    height: '1.65rem',
+    width: '1.65rem',
+  },
+
+  arrowForwardIconCard: {
     color: theme.palette.primary.main,
     marginLeft: theme.spacing(22.5),
     position: 'absolute',
@@ -105,19 +123,22 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'row',
     marginTop: theme.spacing(3.75),
     marginBottom: theme.spacing(2),
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down(1150)]: {
       display: 'flex',
       flexDirection: 'column',
     },
   },
 
   statDiv: {
-    width: '50rem',
+    width: '70%',
     flexGrow: 1,
     backgroundColor: theme.palette.cards.background,
     borderRadius: 3,
+    [theme.breakpoints.down(1150)]: {
+      width: '90%',
+    },
     [theme.breakpoints.down('sm')]: {
-      width: '18rem',
+      width: '95%',
     },
   },
 
@@ -164,6 +185,8 @@ const useStyles = makeStyles((theme) => ({
     marginTop: theme.spacing(1.5),
     marginRight: theme.spacing(6),
     marginLeft: 'auto',
+    backgroundColor: 'transparent !important',
+    cursor: 'pointer',
     [theme.breakpoints.down('sm')]: {
       marginTop: theme.spacing(0.2),
       marginBottom: theme.spacing(1),
@@ -179,7 +202,8 @@ const useStyles = makeStyles((theme) => ({
   btnText: {
     paddingRight: theme.spacing(1.25),
     textDecoration: 'none',
-    color: theme.palette.secondary.dark,
+    color: theme.palette.primary.main,
+    fontSize: '1rem',
   },
 }));
 

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

@@ -279,8 +279,8 @@ const DashboardPage: React.FC = () => {
         </div>
       </div>
       {dataSourceStatus !== 'ACTIVE' ? (
-        <Modal open onClose={() => {}}>
+        <Modal open onClose={() => {}} width="60%">
-          <div>
+          <div className={classes.modal}>
             <Typography align="center">
               <CrossMarkIcon className={classes.icon} />
             </Typography>

litmus-portal/frontend/src/pages/MonitoringDashboardPage/styles.ts

@@ -106,6 +106,10 @@ const useStyles = makeStyles((theme) => ({
   loader: {
     padding: '22%',
   },
+
+  modal: {
+    padding: theme.spacing(15, 0),
+  },
 }));
 
 export default useStyles;

litmus-portal/frontend/src/pages/SelectAndConfigureDashboards/Configure.tsx

@@ -19,7 +19,7 @@ import {
   WorkflowYaml,
 } from '../../models/chaosWorkflowYaml';
 import {
-  ChaosEngineNamesAndNamespacesMap,
+  ChaosResultNamesAndNamespacesMap,
   DashboardDetails,
 } from '../../models/dashboardsData';
 import {
@@ -124,7 +124,7 @@ const DashboardConfigurePage: React.FC<DashboardConfigurePageProps> = ({
 
   const getPanelGroups = () => {
     if (configure === false) {
-      const chaosEngineNamesAndNamespacesMap: ChaosEngineNamesAndNamespacesMap[] = [];
+      const chaosResultNamesAndNamespacesMap: ChaosResultNamesAndNamespacesMap[] = [];
       workflowSchedules?.getScheduledWorkflows.forEach(
         (schedule: ScheduleWorkflow) => {
           if (
@@ -178,13 +178,13 @@ const DashboardConfigurePage: React.FC<DashboardConfigurePageProps> = ({
                       engineNamespace = parsedEmbeddedYaml.metadata.namespace;
                     }
                     let matchIndex: number = -1;
-                    const check: number = chaosEngineNamesAndNamespacesMap.filter(
+                    const check: number = chaosResultNamesAndNamespacesMap.filter(
                       (data, index) => {
                         if (
-                          data.engineName.includes(
+                          data.resultName.includes(
                             parsedEmbeddedYaml.metadata.name
                           ) &&
-                          data.engineNamespace === engineNamespace
+                          data.resultNamespace === engineNamespace
                         ) {
                           matchIndex = index;
                           return true;
@@ -193,15 +193,15 @@ const DashboardConfigurePage: React.FC<DashboardConfigurePageProps> = ({
                       }
                     ).length;
                     if (check === 0) {
-                      chaosEngineNamesAndNamespacesMap.push({
+                      chaosResultNamesAndNamespacesMap.push({
-                        engineName: `${parsedEmbeddedYaml.metadata.name}-${parsedEmbeddedYaml.spec.experiments[0].name}`,
+                        resultName: `${parsedEmbeddedYaml.metadata.name}-${parsedEmbeddedYaml.spec.experiments[0].name}`,
-                        engineNamespace,
+                        resultNamespace: engineNamespace,
                         workflowName: workflowYaml.metadata.name,
                       });
                     } else {
-                      chaosEngineNamesAndNamespacesMap[
+                      chaosResultNamesAndNamespacesMap[
                         matchIndex
-                      ].workflowName = `${chaosEngineNamesAndNamespacesMap[matchIndex].workflowName}, \n${workflowYaml.metadata.name}`;
+                      ].workflowName = `${chaosResultNamesAndNamespacesMap[matchIndex].workflowName}, \n${workflowYaml.metadata.name}`;
                     }
                   }
                 });
@@ -217,16 +217,16 @@ const DashboardConfigurePage: React.FC<DashboardConfigurePageProps> = ({
           const selectedPanels: Panel[] = [];
           panelGroup.panels.forEach((panel) => {
             const selectedPanel: Panel = panel;
-            chaosEngineNamesAndNamespacesMap.forEach((keyValue) => {
+            chaosResultNamesAndNamespacesMap.forEach((keyValue) => {
               selectedPanel.prom_queries.push({
                 queryid: uuidv4(),
                 prom_query_name: generateChaosQuery(
                   DashboardList[DashboardTemplateID ?? 0]
                     .chaosEventQueryTemplate,
-                  keyValue.engineName,
+                  keyValue.resultName,
-                  keyValue.engineNamespace
+                  keyValue.resultNamespace
                 ),
-                legend: `${keyValue.workflowName}- \n${keyValue.engineName}`,
+                legend: `${keyValue.workflowName}- \n${keyValue.resultName}`,
                 resolution: '1/1',
                 minstep: '1',
                 line: false,
@@ -376,6 +376,7 @@ const DashboardConfigurePage: React.FC<DashboardConfigurePageProps> = ({
       <Modal
         open={open}
         onClose={() => setOpen(false)}
+        width="60%"
         modalActions={
           <ButtonOutlined
             className={classes.closeButton}
@@ -385,7 +386,7 @@ const DashboardConfigurePage: React.FC<DashboardConfigurePageProps> = ({
           </ButtonOutlined>
         }
       >
-        <div>
+        <div className={classes.modal}>
           <Typography align="center">
             {success === true ? (
               <img

litmus-portal/frontend/src/pages/SelectAndConfigureDashboards/styles.ts

@@ -95,6 +95,10 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'row',
     justifyContent: 'space-evenly',
   },
+
+  modal: {
+    padding: theme.spacing(15, 0),
+  },
 }));
 
 export default useStyles;

litmus-portal/frontend/src/pages/SelectAndConfigureDataSource/Configure.tsx

@@ -225,7 +225,7 @@ const DataSourceConfigurePage: React.FC<DataSourceConfigurePageProps> = ({
       <Modal
         open={open}
         onClose={() => setOpen(false)}
-        width="55%"
+        width="60%"
         modalActions={
           <ButtonOutlined
             className={classes.closeButton}

litmus-portal/frontend/src/pages/SelectAndConfigureDataSource/styles.ts

@@ -52,10 +52,7 @@ const useStyles = makeStyles((theme) => ({
   },
 
   modal: {
-    [theme.breakpoints.up('lg')]: {
+    padding: theme.spacing(15, 0),
-      padding: theme.spacing(20),
-    },
-    padding: theme.spacing(10),
   },
 
   modalHeading: {

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

@@ -77,16 +77,18 @@ const Settings: React.FC = () => {
         >
           <Tab data-cy="my-account" label="My Account" {...tabProps(0)} />
           <Tab data-cy="teaming" label="Team" {...tabProps(1)} />
-          {role === 'admin' ? (
+          {role === 'admin' && (
             <Tab
               data-cy="user-management"
               label="User Management"
               {...tabProps(2)}
             />
-          ) : (
-            <></>
           )}
-          <Tab data-cy="gitOps" label="GitOps" {...tabProps(3)} />
+          <Tab
+            data-cy="gitOps"
+            label="GitOps"
+            {...tabProps(role === 'admin' ? 3 : 2)}
+          />
         </Tabs>
       </Paper>
       <TabPanel value={settingsTabValue} index={0}>
@@ -97,15 +99,13 @@ const Settings: React.FC = () => {
           <TeamingTab />
         </TabPanel>
       </div>
-      {role === 'admin' ? (
+      {role === 'admin' && (
         <TabPanel value={settingsTabValue} index={2}>
           <UserManagement />
         </TabPanel>
-      ) : (
-        <></>
       )}
       <div data-cy="GitOpsPanel">
-        <TabPanel value={settingsTabValue} index={3}>
+        <TabPanel value={settingsTabValue} index={role === 'admin' ? 3 : 2}>
           <GitOpsTab />
         </TabPanel>
       </div>

litmus-portal/frontend/src/utils/promUtils.ts

@@ -1,13 +1,13 @@
-import { ChaosEngineNamesAndNamespacesMap } from '../models/dashboardsData';
+import { ChaosResultNamesAndNamespacesMap } from '../models/dashboardsData';
 
-const getEngineNameAndNamespace = (chaosQueryString: string) => {
+const getResultNameAndNamespace = (chaosQueryString: string) => {
-  const parsedChaosInfoMap: ChaosEngineNamesAndNamespacesMap = {
+  const parsedChaosInfoMap: ChaosResultNamesAndNamespacesMap = {
-    engineName: chaosQueryString
+    resultName: chaosQueryString
       .split(',')[0]
       .trim()
       .split('=')[1]
       .slice(1, -1),
-    engineNamespace: chaosQueryString
+    resultNamespace: chaosQueryString
       .split(',')[1]
       .trim()
       .split('=')[1]
@@ -17,4 +17,4 @@ const getEngineNameAndNamespace = (chaosQueryString: string) => {
   return parsedChaosInfoMap;
 };
 
-export default getEngineNameAndNamespace;
+export default getResultNameAndNamespace;

litmus-portal/frontend/src/views/AnalyticsDashboard/DataSource/Forms/prometheus.tsx

@@ -10,6 +10,7 @@ import Divider from '@material-ui/core/Divider';
 import { InputField } from 'litmus-ui';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import CheckBox from '../../../../components/CheckBox';
 import { LIST_DATASOURCE } from '../../../../graphql';
 import { DataSourceDetails } from '../../../../models/dataSourceData';
 import {
@@ -23,7 +24,7 @@ import {
   validateTextEmpty,
   validateTimeInSeconds,
 } from '../../../../utils/validate';
-import useStyles, { StyledCheckbox } from './styles';
+import useStyles from './styles';
 
 interface ConfigurePrometheusProps {
   configure: boolean;
@@ -256,7 +257,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
           <div className={classes.inputDivCheckBox}>
             <FormControlLabel
               control={
-                <StyledCheckbox
+                <CheckBox
                   color="primary"
                   checked={dataSourceDetails.noAuth}
                   onChange={handleAuthChange}
@@ -268,7 +269,7 @@ const ConfigurePrometheus: React.FC<ConfigurePrometheusProps> = ({
             <FormControlLabel
               className={classes.basicAuth}
               control={
-                <StyledCheckbox
+                <CheckBox
                   color="primary"
                   disabled
                   checked={dataSourceDetails.basicAuth}

litmus-portal/frontend/src/views/AnalyticsDashboard/DataSource/Forms/styles.ts

@@ -1,4 +1,4 @@
-import { Checkbox, makeStyles, withStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -65,11 +65,4 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export const StyledCheckbox = withStyles((theme) => ({
-  root: {
-    color: theme.palette.text.hint,
-  },
-  checked: {},
-}))(Checkbox);
-
 export default useStyles;

litmus-portal/frontend/src/views/AnalyticsDashboard/DataSource/Table/TableData.tsx

@@ -136,6 +136,7 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
           setOpen(false);
           setConfirm(false);
         }}
+        width="60%"
         modalActions={
           <ButtonOutlined
             className={classes.closeButton}
@@ -148,7 +149,7 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
           </ButtonOutlined>
         }
       >
-        <div>
+        <div className={classes.modal}>
           {confirm === true ? (
             <Typography align="center">
               {success === true ? (

litmus-portal/frontend/src/views/AnalyticsDashboard/DataSource/Table/styles.ts

@@ -220,9 +220,14 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'row',
     justifyContent: 'space-evenly',
   },
+
   buttonOutlineWarning: {
     borderColor: theme.palette.error.dark,
   },
+
+  modal: {
+    padding: theme.spacing(15, 0),
+  },
 }));
 
 export const useOutlinedInputStyles = makeStyles((theme: Theme) => ({

litmus-portal/frontend/src/views/AnalyticsDashboard/KubernetesDashboards/Table/TableData.tsx

@@ -22,7 +22,7 @@ import {
   Template,
   WorkflowYaml,
 } from '../../../../models/chaosWorkflowYaml';
-import { ChaosEngineNamesAndNamespacesMap } from '../../../../models/dashboardsData';
+import { ChaosResultNamesAndNamespacesMap } from '../../../../models/dashboardsData';
 import {
   DeleteDashboardInput,
   ListDashboardResponse,
@@ -127,7 +127,7 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
   };
 
   const reSyncChaosQueries = () => {
-    const chaosEngineNamesAndNamespacesMap: ChaosEngineNamesAndNamespacesMap[] = [];
+    const chaosResultNamesAndNamespacesMap: ChaosResultNamesAndNamespacesMap[] = [];
     workflowSchedules?.getScheduledWorkflows.forEach(
       (schedule: ScheduleWorkflow) => {
         if (schedule.cluster_id === data.cluster_id && !schedule.isRemoved) {
@@ -178,13 +178,13 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
                     engineNamespace = parsedEmbeddedYaml.metadata.namespace;
                   }
                   let matchIndex: number = -1;
-                  const check: number = chaosEngineNamesAndNamespacesMap.filter(
+                  const check: number = chaosResultNamesAndNamespacesMap.filter(
                     (data, index) => {
                       if (
-                        data.engineName.includes(
+                        data.resultName.includes(
                           parsedEmbeddedYaml.metadata.name
                         ) &&
-                        data.engineNamespace === engineNamespace
+                        data.resultNamespace === engineNamespace
                       ) {
                         matchIndex = index;
                         return true;
@@ -193,15 +193,15 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
                     }
                   ).length;
                   if (check === 0) {
-                    chaosEngineNamesAndNamespacesMap.push({
+                    chaosResultNamesAndNamespacesMap.push({
-                      engineName: `${parsedEmbeddedYaml.metadata.name}-${parsedEmbeddedYaml.spec.experiments[0].name}`,
+                      resultName: `${parsedEmbeddedYaml.metadata.name}-${parsedEmbeddedYaml.spec.experiments[0].name}`,
-                      engineNamespace,
+                      resultNamespace: engineNamespace,
                       workflowName: workflowYaml.metadata.name,
                     });
                   } else {
-                    chaosEngineNamesAndNamespacesMap[
+                    chaosResultNamesAndNamespacesMap[
                       matchIndex
-                    ].workflowName = `${chaosEngineNamesAndNamespacesMap[matchIndex].workflowName}, \n${workflowYaml.metadata.name}`;
+                    ].workflowName = `${chaosResultNamesAndNamespacesMap[matchIndex].workflowName}, \n${workflowYaml.metadata.name}`;
                   }
                 }
               });
@@ -212,7 +212,7 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
     );
 
     const isChaosQueryPresent: number[] = Array(
-      chaosEngineNamesAndNamespacesMap.length
+      chaosResultNamesAndNamespacesMap.length
     ).fill(0);
 
     data.panel_groups[0].panels[0].prom_queries.forEach(
@@ -222,20 +222,20 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
             'litmuschaos_awaited_experiments'
           )
         ) {
-          const chaosDetails: ChaosEngineNamesAndNamespacesMap = getEngineNameAndNamespace(
+          const chaosDetails: ChaosResultNamesAndNamespacesMap = getEngineNameAndNamespace(
             existingPromQuery.prom_query_name
           );
-          chaosEngineNamesAndNamespacesMap.forEach(
+          chaosResultNamesAndNamespacesMap.forEach(
             (
-              chaosDetailsFomSchedule: ChaosEngineNamesAndNamespacesMap,
+              chaosDetailsFomSchedule: ChaosResultNamesAndNamespacesMap,
               index: number
             ) => {
               if (
-                chaosDetailsFomSchedule.engineName.includes(
+                chaosDetailsFomSchedule.resultName.includes(
-                  chaosDetails.engineName
+                  chaosDetails.resultName
                 ) &&
-                chaosDetailsFomSchedule.engineNamespace ===
+                chaosDetailsFomSchedule.resultNamespace ===
-                  chaosDetails.engineNamespace
+                  chaosDetails.resultNamespace
               ) {
                 isChaosQueryPresent[index] = 1;
               }
@@ -259,17 +259,17 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
           if (
             query.prom_query_name.startsWith('litmuschaos_awaited_experiments')
           ) {
-            const chaosDetails: ChaosEngineNamesAndNamespacesMap = getEngineNameAndNamespace(
+            const chaosDetails: ChaosResultNamesAndNamespacesMap = getEngineNameAndNamespace(
               query.prom_query_name
             );
-            chaosEngineNamesAndNamespacesMap.forEach(
+            chaosResultNamesAndNamespacesMap.forEach(
-              (chaosDetailsFomSchedule: ChaosEngineNamesAndNamespacesMap) => {
+              (chaosDetailsFomSchedule: ChaosResultNamesAndNamespacesMap) => {
                 if (
-                  chaosDetailsFomSchedule.engineName.includes(
+                  chaosDetailsFomSchedule.resultName.includes(
-                    chaosDetails.engineName
+                    chaosDetails.resultName
                   ) &&
-                  chaosDetailsFomSchedule.engineNamespace ===
+                  chaosDetailsFomSchedule.resultNamespace ===
-                    chaosDetails.engineNamespace &&
+                    chaosDetails.resultNamespace &&
                   !query.legend.includes(chaosDetailsFomSchedule.workflowName)
                 ) {
                   updatedLegend = `${chaosDetailsFomSchedule.workflowName}, \n${query.legend}`;
@@ -288,17 +288,17 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
           };
           updatedQueries.push(updatedQuery);
         });
-        chaosEngineNamesAndNamespacesMap.forEach(
+        chaosResultNamesAndNamespacesMap.forEach(
-          (keyValue: ChaosEngineNamesAndNamespacesMap, index: number) => {
+          (keyValue: ChaosResultNamesAndNamespacesMap, index: number) => {
             if (isChaosQueryPresent[index] === 0) {
               updatedQueries.push({
                 queryid: uuidv4(),
                 prom_query_name: generateChaosQuery(
                   DashboardList[dashboardTemplateID].chaosEventQueryTemplate,
-                  keyValue.engineName,
+                  keyValue.resultName,
-                  keyValue.engineNamespace
+                  keyValue.resultNamespace
                 ),
-                legend: `${keyValue.workflowName}- \n${keyValue.engineName}`,
+                legend: `${keyValue.workflowName}- \n${keyValue.resultName}`,
                 resolution: '1/1',
                 minstep: '1',
                 line: false,
@@ -527,6 +527,7 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
           setConfirm(false);
           setOpenModal(false);
         }}
+        width="60%"
         modalActions={
           <ButtonOutlined
             className={classes.closeButton}
@@ -539,7 +540,7 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
           </ButtonOutlined>
         }
       >
-        <div>
+        <div className={classes.modal}>
           {confirm === true ? (
             <Typography align="center">
               {success === true ? (

litmus-portal/frontend/src/views/AnalyticsDashboard/KubernetesDashboards/Table/styles.ts

@@ -226,9 +226,14 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'row',
     justifyContent: 'space-evenly',
   },
+
   buttonOutlineWarning: {
     borderColor: theme.palette.error.dark,
   },
+
+  modal: {
+    padding: theme.spacing(15, 0),
+  },
 }));
 
 export const useOutlinedInputStyles = makeStyles((theme: Theme) => ({

litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonPlot/style.ts

@@ -9,7 +9,7 @@ const useStyles = makeStyles((theme) => ({
       marginLeft: theme.spacing(3),
     },
     height: '1.5rem',
-    width: '17.5rem',
+    width: '15rem',
   },
 
   selectText: {
@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme) => ({
     margin: 'auto',
     marginLeft: theme.spacing(6),
     justifyContent: 'space-between',
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       display: 'flex',
       flexDirection: 'column',
       height: '100%',
@@ -65,7 +65,7 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'column',
     marginLeft: theme.spacing(5),
     marginTop: theme.spacing(5),
-    width: '17.5rem',
+    width: '15rem',
     [theme.breakpoints.down('sm')]: {
       marginLeft: 0,
     },

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

@@ -1,9 +1,10 @@
-import { Checkbox, IconButton, Typography } from '@material-ui/core';
+import { IconButton, Typography } from '@material-ui/core';
 import ExpandMoreTwoToneIcon from '@material-ui/icons/ExpandMoreTwoTone';
 import cronstrue from 'cronstrue';
 import moment from 'moment';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import CheckBox from '../../../../components/CheckBox';
 import { Workflow } from '../../../../models/graphql/workflowListData';
 import { history } from '../../../../redux/configureStore';
 import useStyles, { StyledTableCell } from './styles';
@@ -35,10 +36,9 @@ const TableData: React.FC<TableDataProps> = ({
     <>
       <StyledTableCell padding="checkbox" className={classes.checkbox}>
         {comparisonState === false ? (
-          <Checkbox
+          <CheckBox
             checked={itemSelectionStatus}
             inputProps={{ 'aria-labelledby': labelIdentifier }}
-            className={classes.checkBoxStyle}
           />
         ) : (
           <div />

litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/TableHeader.tsx

@@ -1,8 +1,9 @@
-import { Checkbox, IconButton, TableHead, TableRow } from '@material-ui/core';
+import { IconButton, TableHead, TableRow } from '@material-ui/core';
 import ExpandLessTwoToneIcon from '@material-ui/icons/ExpandLessTwoTone';
 import ExpandMoreTwoToneIcon from '@material-ui/icons/ExpandMoreTwoTone';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import CheckBox from '../../../../components/CheckBox';
 import useStyles, { StyledTableCell } from './styles';
 
 interface SortData {
@@ -48,12 +49,11 @@ const TableHeader: React.FC<TableHeaderProps> = ({
       <TableRow className={classes.tableHead}>
         <StyledTableCell padding="checkbox" className={classes.checkbox}>
           {comparisonState === false ? (
-            <Checkbox
+            <CheckBox
               indeterminate={numSelected > 0 && numSelected < rowCount}
               checked={rowCount > 0 && numSelected === rowCount}
               onChange={onSelectAllClick}
               inputProps={{ 'aria-label': 'select all desserts' }}
-              className={classes.checkBoxStyle}
             />
           ) : (
             <div />

litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/index.tsx

@@ -450,7 +450,9 @@ const WorkflowComparisonTable = () => {
           run_date: run.run_date,
           tests_passed: run.tests_passed.toString(),
           tests_failed: run.tests_failed.toString(),
-          resilience_score: run.resilience_score.toString(),
+          resilience_score: `${parseFloat(run.resilience_score as string)
+            .toFixed(2)
+            .toString()}%`,
           test_details_string: detail_string,
         });
       });

litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/styles.ts

@@ -294,10 +294,6 @@ const useStyles = makeStyles((theme) => ({
     overflow: 'hidden',
   },
 
-  checkBoxStyle: {
-    color: theme.palette.border.main,
-  },
-
   rangeSelectorIcon: {
     width: '0.625rem',
     height: '0.625rem',

litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/OverviewQuickActionCard/index.tsx

@@ -7,14 +7,26 @@ import { history } from '../../../../redux/configureStore';
 const AnalyticsQuickActionCard: React.FC = () => {
   const { t } = useTranslation();
   const quickActionDataAnalytics = [
+    {
+      src: './icons/addDashboard.svg',
+      alt: 'dashboard',
+      onClick: () => history.push('/analytics/dashboard/select'),
+      text: t('quickActionCard.addDashboard'),
+    },
     {
       src: './icons/addDataSource.svg',
-      alt: 'source',
+      alt: 'data source',
       onClick: () => history.push('/analytics/datasource/select'),
       text: t('quickActionCard.addDataSource'),
     },
     {
-      src: './icons/addAgent.svg',
+      src: './icons/calendarWorkflowIcon.svg',
+      alt: 'workflow',
+      onClick: () => history.push('/create-workflow'),
+      text: t('quickActionCard.scheduleWorkflow'),
+    },
+    {
+      src: './icons/target.svg',
       alt: 'agent',
       onClick: () => history.push('/agent-connect'),
       text: t('quickActionCard.addAgent'),

litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/Tables/dashboardData.tsx

@@ -26,7 +26,7 @@ import {
   Template,
   WorkflowYaml,
 } from '../../../../models/chaosWorkflowYaml';
-import { ChaosEngineNamesAndNamespacesMap } from '../../../../models/dashboardsData';
+import { ChaosResultNamesAndNamespacesMap } from '../../../../models/dashboardsData';
 import {
   ListDashboardResponse,
   Panel,
@@ -95,7 +95,7 @@ const TableDashboardData: React.FC<TableDashboardData> = ({
   // reSyncChaos
 
   const reSyncChaosQueries = (data: ListDashboardResponse) => {
-    const chaosEngineNamesAndNamespacesMap: ChaosEngineNamesAndNamespacesMap[] = [];
+    const chaosResultNamesAndNamespacesMap: ChaosResultNamesAndNamespacesMap[] = [];
     schedulesData?.getScheduledWorkflows.forEach(
       (schedule: ScheduleWorkflow) => {
         if (schedule.cluster_id === data.cluster_id && !schedule.isRemoved) {
@@ -146,13 +146,13 @@ const TableDashboardData: React.FC<TableDashboardData> = ({
                     engineNamespace = parsedEmbeddedYaml.metadata.namespace;
                   }
                   let matchIndex: number = -1;
-                  const check: number = chaosEngineNamesAndNamespacesMap.filter(
+                  const check: number = chaosResultNamesAndNamespacesMap.filter(
                     (data, index) => {
                       if (
-                        data.engineName.includes(
+                        data.resultName.includes(
                           parsedEmbeddedYaml.metadata.name
                         ) &&
-                        data.engineNamespace === engineNamespace
+                        data.resultNamespace === engineNamespace
                       ) {
                         matchIndex = index;
                         return true;
@@ -161,15 +161,15 @@ const TableDashboardData: React.FC<TableDashboardData> = ({
                     }
                   ).length;
                   if (check === 0) {
-                    chaosEngineNamesAndNamespacesMap.push({
+                    chaosResultNamesAndNamespacesMap.push({
-                      engineName: `${parsedEmbeddedYaml.metadata.name}-${parsedEmbeddedYaml.spec.experiments[0].name}`,
+                      resultName: `${parsedEmbeddedYaml.metadata.name}-${parsedEmbeddedYaml.spec.experiments[0].name}`,
-                      engineNamespace,
+                      resultNamespace: engineNamespace,
                       workflowName: workflowYaml.metadata.name,
                     });
                   } else {
-                    chaosEngineNamesAndNamespacesMap[
+                    chaosResultNamesAndNamespacesMap[
                       matchIndex
-                    ].workflowName = `${chaosEngineNamesAndNamespacesMap[matchIndex].workflowName}, \n${workflowYaml.metadata.name}`;
+                    ].workflowName = `${chaosResultNamesAndNamespacesMap[matchIndex].workflowName}, \n${workflowYaml.metadata.name}`;
                   }
                 }
               });
@@ -180,7 +180,7 @@ const TableDashboardData: React.FC<TableDashboardData> = ({
     );
 
     const isChaosQueryPresent: number[] = Array(
-      chaosEngineNamesAndNamespacesMap.length
+      chaosResultNamesAndNamespacesMap.length
     ).fill(0);
 
     data.panel_groups[0].panels[0].prom_queries.forEach(
@@ -190,20 +190,20 @@ const TableDashboardData: React.FC<TableDashboardData> = ({
             'litmuschaos_awaited_experiments'
           )
         ) {
-          const chaosDetails: ChaosEngineNamesAndNamespacesMap = getEngineNameAndNamespace(
+          const chaosDetails: ChaosResultNamesAndNamespacesMap = getEngineNameAndNamespace(
             existingPromQuery.prom_query_name
           );
-          chaosEngineNamesAndNamespacesMap.forEach(
+          chaosResultNamesAndNamespacesMap.forEach(
             (
-              chaosDetailsFomSchedule: ChaosEngineNamesAndNamespacesMap,
+              chaosDetailsFomSchedule: ChaosResultNamesAndNamespacesMap,
               index: number
             ) => {
               if (
-                chaosDetailsFomSchedule.engineName.includes(
+                chaosDetailsFomSchedule.resultName.includes(
-                  chaosDetails.engineName
+                  chaosDetails.resultName
                 ) &&
-                chaosDetailsFomSchedule.engineNamespace ===
+                chaosDetailsFomSchedule.resultNamespace ===
-                  chaosDetails.engineNamespace
+                  chaosDetails.resultNamespace
               ) {
                 isChaosQueryPresent[index] = 1;
               }
@@ -227,17 +227,17 @@ const TableDashboardData: React.FC<TableDashboardData> = ({
           if (
             query.prom_query_name.startsWith('litmuschaos_awaited_experiments')
           ) {
-            const chaosDetails: ChaosEngineNamesAndNamespacesMap = getEngineNameAndNamespace(
+            const chaosDetails: ChaosResultNamesAndNamespacesMap = getEngineNameAndNamespace(
               query.prom_query_name
             );
-            chaosEngineNamesAndNamespacesMap.forEach(
+            chaosResultNamesAndNamespacesMap.forEach(
-              (chaosDetailsFomSchedule: ChaosEngineNamesAndNamespacesMap) => {
+              (chaosDetailsFomSchedule: ChaosResultNamesAndNamespacesMap) => {
                 if (
-                  chaosDetailsFomSchedule.engineName.includes(
+                  chaosDetailsFomSchedule.resultName.includes(
-                    chaosDetails.engineName
+                    chaosDetails.resultName
                   ) &&
-                  chaosDetailsFomSchedule.engineNamespace ===
+                  chaosDetailsFomSchedule.resultNamespace ===
-                    chaosDetails.engineNamespace &&
+                    chaosDetails.resultNamespace &&
                   !query.legend.includes(chaosDetailsFomSchedule.workflowName)
                 ) {
                   updatedLegend = `${chaosDetailsFomSchedule.workflowName}, \n${query.legend}`;
@@ -256,18 +256,18 @@ const TableDashboardData: React.FC<TableDashboardData> = ({
           };
           updatedQueries.push(updatedQuery);
         });
-        chaosEngineNamesAndNamespacesMap.forEach(
+        chaosResultNamesAndNamespacesMap.forEach(
-          (keyValue: ChaosEngineNamesAndNamespacesMap, index: number) => {
+          (keyValue: ChaosResultNamesAndNamespacesMap, index: number) => {
             if (isChaosQueryPresent[index] === 0) {
               updatedQueries.push({
                 queryid: uuidv4(),
                 prom_query_name: generateChaosQuery(
                   DashboardTemplatesList[dashboardTemplateID]
                     .chaosEventQueryTemplate,
-                  keyValue.engineName,
+                  keyValue.resultName,
-                  keyValue.engineNamespace
+                  keyValue.resultNamespace
                 ),
-                legend: `${keyValue.workflowName}- \n${keyValue.engineName}`,
+                legend: `${keyValue.workflowName}- \n${keyValue.resultName}`,
                 resolution: '1/1',
                 minstep: '1',
                 line: false,

litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/Tables/dataSource.tsx

@@ -43,7 +43,7 @@ const TableDataSource: React.FC<TableDataSourceProps> = ({
               <IconButton
                 className={classes.seeAllArrowBtn}
                 onClick={() => {
-                  tabs.changeAnalyticsDashboardTabs(1);
+                  tabs.changeAnalyticsDashboardTabs(3);
                   history.push('/analytics');
                 }}
               >

litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/styles.ts

@@ -108,6 +108,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     height: '1.75rem',
   },
   seeAllArrowBtn: {
+    backgroundColor: 'transparent !important',
+    cursor: 'pointer',
     display: 'flex',
     '& p': {
       paddingRight: theme.spacing(2),

litmus-portal/frontend/src/views/Community/CommunityTimeSeriesPlot/index.tsx

@@ -1,7 +1,13 @@
 /* eslint-disable no-empty-pattern */
 /* eslint-disable no-return-assign */
 /* eslint-disable no-param-reassign */
-import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  useTheme,
+} from '@material-ui/core';
 import Plotly from 'plotly.js';
 import { string } from 'prop-types';
 import React, { useEffect } from 'react';
@@ -14,6 +20,7 @@ const Plot = createPlotlyComponent(Plotly);
 
 const CommunityAnalyticsPlot: React.FC = () => {
   const classes = useStyles();
+  const { palette } = useTheme();
 
   const { communityData } = useSelector(
     (state: RootState) => state.communityData
@@ -178,6 +185,16 @@ const CommunityAnalyticsPlot: React.FC = () => {
 
   useEffect(() => {
     processData();
+    try {
+      const nodeStyle = (document.getElementsByClassName(
+        'modebar'
+      )[0] as HTMLElement).style;
+      nodeStyle.left = '29%';
+      nodeStyle.width = 'fit-content';
+      nodeStyle.backgroundColor = palette.background.paper;
+    } catch (err) {
+      console.error(err);
+    }
   }, [currentPlotType, currentGranularityType]);
 
   return (
@@ -232,91 +249,99 @@ const CommunityAnalyticsPlot: React.FC = () => {
           <MenuItem value="Monthly">Monthly</MenuItem>
         </Select>
       </FormControl>
-
+      <Plot
-      <div className={classes.plot}>
+        className={classes.plot}
-        <Plot
+        data={[
-          data={[
+          {
-            {
+            type: 'scatter',
-              type: 'scatter',
+            x: data.x,
-              x: data.x,
+            y: data.y,
-              y: data.y,
+            mode: 'lines',
-              mode: 'lines',
+            name: 'Operator Installs',
-              name: 'Operator Installs',
+            line: { color: palette.secondary.main },
-              line: { color: '#109B67' },
+          },
+          {
+            type: 'scatter',
+            x: data.x,
+            y: data.y2,
+            mode: 'lines',
+            name: 'Experiment Runs',
+            yaxis: 'y2',
+            line: { color: palette.primary.main },
+          },
+        ]}
+        layout={{
+          autosize: true,
+          height: 800,
+          margin: {
+            l: 60,
+            r: 60,
+            b: 10,
+            t: 5,
+            pad: 10,
+          },
+          xaxis: {
+            rangeselector: selectorOptions as any,
+            rangeslider: { visible: true },
+          },
+          yaxis: {
+            title: 'Operators',
+            side: 'left',
+            showgrid: false,
+          },
+          yaxis2: {
+            title: 'Experiments',
+            side: 'right',
+            overlaying: 'y',
+          },
+          legend: {
+            x: 0,
+            y: 1,
+            traceorder: 'normal',
+            font: {
+              family: 'ubuntu',
+              size: 12,
+              color: palette.text.primary,
             },
-            {
+            bgcolor: palette.background.paper,
-              type: 'scatter',
+            bordercolor: palette.background.paper,
-              x: data.x,
+            borderwidth: 0,
-              y: data.y2,
+          },
-              mode: 'lines',
+        }}
-              name: 'Experiment Runs',
+        useResizeHandler
-              yaxis: 'y2',
+        style={{
-              line: { color: '#858CDD' },
+          margin: 'auto',
-            },
+        }}
-          ]}
+        config={{
-          layout={{
+          displaylogo: false,
-            autosize: true,
+          autosizable: true,
-            width: 920,
+          responsive: true,
-            height: 650,
+          frameMargins: 0.2,
-            margin: {
+          showAxisDragHandles: true,
-              l: 60,
+          showAxisRangeEntryBoxes: true,
-              r: 60,
+          showTips: true,
-              b: 10,
+          displayModeBar: true,
-              t: 5,
+          toImageButtonOptions: {
-              pad: 10,
+            format: 'png',
-            },
+            filename: 'Litmus_Community_Stats',
-            xaxis: {
+            width: 1920,
-              rangeselector: selectorOptions as any,
+            height: 1080,
-              rangeslider: { visible: true },
+            scale: 2,
-            },
+          },
-            yaxis: {
+        }}
-              title: 'Operators',
+        onInitialized={() => {
-              side: 'left',
+          try {
-              showgrid: false,
+            const nodeStyle = (document.getElementsByClassName(
-            },
+              'modebar'
-            yaxis2: {
+            )[0] as HTMLElement).style;
-              title: 'Experiments',
+            nodeStyle.left = '29%';
-              side: 'right',
+            nodeStyle.width = 'fit-content';
-              overlaying: 'y',
+            nodeStyle.backgroundColor = palette.background.paper;
-            },
+          } catch (err) {
-            legend: {
+            console.error(err);
-              x: 0,
+          }
-              y: 1,
+        }}
-              traceorder: 'normal',
+      />
-              font: {
-                family: 'ubuntu',
-                size: 12,
-                color: '#000',
-              },
-              bgcolor: '#E2E2E2',
-              bordercolor: '#FFFFFF',
-              borderwidth: 0,
-            },
-          }}
-          useResizeHandler
-          style={{
-            width: 'fit-content',
-            margin: 'auto',
-          }}
-          config={{
-            displaylogo: false,
-            autosizable: true,
-            responsive: true,
-            frameMargins: 0.2,
-            showAxisDragHandles: true,
-            showAxisRangeEntryBoxes: true,
-            showTips: true,
-            displayModeBar: true,
-            toImageButtonOptions: {
-              format: 'png',
-              filename: 'Litmus_Community_Stats',
-              width: 1920,
-              height: 1080,
-              scale: 2,
-            },
-          }}
-        />
-      </div>
     </div>
   );
 };

litmus-portal/frontend/src/views/Community/CommunityTimeSeriesPlot/styles.ts

@@ -6,17 +6,25 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(0.5),
     height: '2.5rem',
     width: '19.375rem',
+    [theme.breakpoints.down('sm')]: {
+      width: '15rem',
+    },
   },
+
   plotCard: {
     paddingTop: theme.spacing(2),
     paddingBottom: theme.spacing(2),
   },
+
   root: {
     height: '2.5rem',
     padding: theme.spacing(0.5),
   },
 
   plot: {
+    margin: 'auto',
+    width: '150%',
+    paddingLeft: '4.5%',
     marginTop: theme.spacing(2),
   },
 }));

litmus-portal/frontend/src/views/Community/GeoMap/index.tsx

@@ -8,11 +8,7 @@ const GeoMap = () => {
   const [showCountry, setShowCountry] = useState<boolean>(true);
   const classes = useStyles();
   return (
-    <div
+    <div className={classes.map}>
-      className={`${classes.map} ${
-        showCountry ? classes.countryMap : classes.cityMap
-      }`}
-    >
       {showCountry ? <CountryMap /> : <CityMap />}
       <br />
       <br />
@@ -20,8 +16,8 @@ const GeoMap = () => {
         <BinarySwitch
           handleChange={() => setShowCountry(!showCountry)}
           checked={showCountry}
-          leftLabel="Country View"
+          leftLabel="City View"
-          rightLabel="City View"
+          rightLabel="Country View"
         />
       </div>
     </div>

litmus-portal/frontend/src/views/Community/GeoMap/styles.ts

@@ -29,8 +29,11 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   cityMapComposableMap: {
-    width: '54rem',
+    width: '45vw',
-    height: '40rem',
+    height: '30rem',
+    [theme.breakpoints.down('sm')]: {
+      height: '25rem',
+    },
   },
   countryMapchartStyle: {
     display: 'flex',
@@ -38,25 +41,23 @@ const useStyles = makeStyles((theme) => ({
     paddingTop: theme.spacing(2),
   },
   countryMapchartContentStyle: {
-    width: '54rem',
+    width: '45vw',
-    height: '40rem',
+    height: '30rem',
+    [theme.breakpoints.down('sm')]: {
+      height: '25rem',
+    },
   },
   map: {
     flexGrow: 1,
     textAlign: 'center',
     color: theme.palette.text.primary,
+    backgroundColor: theme.palette.cards.background,
     [theme.breakpoints.down('sm')]: {
       display: 'flex',
       width: '100%',
       flexDirection: 'column',
     },
   },
-  cityMap: {
-    backgroundColor: theme.palette.cards.background,
-  },
-  countryMap: {
-    backgroundColor: theme.palette.cards.background,
-  },
 }));
 
 export default useStyles;

litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx

@@ -1,7 +1,7 @@
 import { Divider, IconButton, Typography } from '@material-ui/core';
 import EditIcon from '@material-ui/icons/Edit';
 import cronstrue from 'cronstrue';
-import { EditableText, Modal, ButtonOutlined } from 'litmus-ui';
+import { ButtonOutlined, EditableText, Modal } from 'litmus-ui';
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -281,7 +281,9 @@ const VerifyCommit: React.FC<VerifyCommitProps> = ({
         onClose={handleClose}
         width="60%"
         modalActions={
-          <ButtonOutlined onClick={handleClose}>&#x2715;</ButtonOutlined>
+          <ButtonOutlined onClick={handleClose} className={classes.closeBtn}>
+            &#x2715;
+          </ButtonOutlined>
         }
       >
         <YamlEditor

litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/styles.ts

@@ -149,5 +149,10 @@ const useStyles = makeStyles((theme: Theme) => ({
   buttomPad: {
     paddingBottom: theme.spacing(3.75),
   },
+  closeBtn: {
+    color: theme.palette.secondary.contrastText,
+    marginTop: theme.spacing(-6),
+    marginRight: theme.spacing(-2.5),
+  },
 }));
 export default useStyles;