From 22f130649607ac5b72d156edf29d2280110dbf19 Mon Sep 17 00:00:00 2001 From: Ishan Gupta Date: Sat, 13 Mar 2021 12:06:33 +0530 Subject: [PATCH] CSS and other bug fixes for 2.0 beta 1 (#2535) * bug fixes for beta 1 Signed-off-by: ishangupta-ds * modal bug fixes for beta 1 Signed-off-by: ishangupta-ds --- .../icons/{addAgent.svg => addDashboard.svg} | 0 .../public/locales/en/translation.yaml | 5 +- .../src/components/BreadCrumbs/index.tsx | 2 +- .../src/components/BreadCrumbs/styles.tsx | 3 + .../components/Button/BinarySwitch/index.tsx | 4 +- .../src/components/CheckBox/index.tsx | 9 + .../src/components/InfoFilled/index.tsx | 4 +- .../src/components/InfoFilled/styles.ts | 2 +- .../src/components/WorkflowCard/styles.ts | 14 +- .../src/components/WorkflowStepper/styles.ts | 2 + .../src/components/YamlEditor/Editor.tsx | 55 ++--- .../src/components/YamlEditor/styles.ts | 10 +- .../frontend/src/containers/app/App.tsx | 1 - .../frontend/src/models/dashboardsData.ts | 6 +- .../src/pages/AnalyticsDashboards/index.tsx | 10 +- .../src/pages/AnalyticsDashboards/styles.ts | 3 - .../frontend/src/pages/Community/styles.ts | 8 +- .../frontend/src/pages/HomePage/index.tsx | 10 +- .../frontend/src/pages/HomePage/style.ts | 34 ++- .../pages/MonitoringDashboardPage/index.tsx | 4 +- .../pages/MonitoringDashboardPage/styles.ts | 4 + .../Configure.tsx | 31 +-- .../SelectAndConfigureDashboards/styles.ts | 4 + .../Configure.tsx | 2 +- .../SelectAndConfigureDataSource/styles.ts | 5 +- .../frontend/src/pages/Settings/index.tsx | 16 +- litmus-portal/frontend/src/utils/promUtils.ts | 12 +- .../DataSource/Forms/prometheus.tsx | 7 +- .../DataSource/Forms/styles.ts | 9 +- .../DataSource/Table/TableData.tsx | 3 +- .../DataSource/Table/styles.ts | 5 + .../KubernetesDashboards/Table/TableData.tsx | 63 +++--- .../KubernetesDashboards/Table/styles.ts | 5 + .../WorkflowComparisonPlot/style.ts | 6 +- .../WorkflowComparisonTable/TableData.tsx | 6 +- .../WorkflowComparisonTable/TableHeader.tsx | 6 +- .../WorkflowComparisonTable/index.tsx | 4 +- .../WorkflowComparisonTable/styles.ts | 4 - .../OverviewQuickActionCard/index.tsx | 16 +- .../Overview/Tables/dashboardData.tsx | 60 +++--- .../Overview/Tables/dataSource.tsx | 2 +- .../AnalyticsDashboard/Overview/styles.ts | 2 + .../CommunityTimeSeriesPlot/index.tsx | 195 ++++++++++-------- .../CommunityTimeSeriesPlot/styles.ts | 8 + .../src/views/Community/GeoMap/index.tsx | 10 +- .../src/views/Community/GeoMap/styles.ts | 21 +- .../CreateWorkflow/VerifyCommit/index.tsx | 6 +- .../CreateWorkflow/VerifyCommit/styles.ts | 5 + 48 files changed, 407 insertions(+), 296 deletions(-) rename litmus-portal/frontend/public/icons/{addAgent.svg => addDashboard.svg} (100%) create mode 100644 litmus-portal/frontend/src/components/CheckBox/index.tsx diff --git a/litmus-portal/frontend/public/icons/addAgent.svg b/litmus-portal/frontend/public/icons/addDashboard.svg similarity index 100% rename from litmus-portal/frontend/public/icons/addAgent.svg rename to litmus-portal/frontend/public/icons/addDashboard.svg diff --git a/litmus-portal/frontend/public/locales/en/translation.yaml b/litmus-portal/frontend/public/locales/en/translation.yaml index 600564617..ed8ea7a23 100644 --- a/litmus-portal/frontend/public/locales/en/translation.yaml +++ b/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 \ No newline at end of file diff --git a/litmus-portal/frontend/src/components/BreadCrumbs/index.tsx b/litmus-portal/frontend/src/components/BreadCrumbs/index.tsx index b4f1058bd..12576818d 100644 --- a/litmus-portal/frontend/src/components/BreadCrumbs/index.tsx +++ b/litmus-portal/frontend/src/components/BreadCrumbs/index.tsx @@ -14,7 +14,7 @@ const CustomBreadcrumbs: React.FC = ({ location }) => { const classes = useStyles(); return ( - + {pathname.map((path) => { if (path) { intermediateRoutes += path; diff --git a/litmus-portal/frontend/src/components/BreadCrumbs/styles.tsx b/litmus-portal/frontend/src/components/BreadCrumbs/styles.tsx index c82b07487..638a5933d 100644 --- a/litmus-portal/frontend/src/components/BreadCrumbs/styles.tsx +++ b/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; diff --git a/litmus-portal/frontend/src/components/Button/BinarySwitch/index.tsx b/litmus-portal/frontend/src/components/Button/BinarySwitch/index.tsx index 9a0ad8224..e36b53b1e 100644 --- a/litmus-portal/frontend/src/components/Button/BinarySwitch/index.tsx +++ b/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, - borderColor: theme.palette.secondary.dark, + backgroundColor: theme.palette.primary.main, + borderColor: theme.palette.primary.main, }, }, }, diff --git a/litmus-portal/frontend/src/components/CheckBox/index.tsx b/litmus-portal/frontend/src/components/CheckBox/index.tsx new file mode 100644 index 000000000..af9936aea --- /dev/null +++ b/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; diff --git a/litmus-portal/frontend/src/components/InfoFilled/index.tsx b/litmus-portal/frontend/src/components/InfoFilled/index.tsx index 63683fe48..fc608091d 100644 --- a/litmus-portal/frontend/src/components/InfoFilled/index.tsx +++ b/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, diff --git a/litmus-portal/frontend/src/components/InfoFilled/styles.ts b/litmus-portal/frontend/src/components/InfoFilled/styles.ts index be7ffeedb..ab8c1e3b3 100644 --- a/litmus-portal/frontend/src/components/InfoFilled/styles.ts +++ b/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: { diff --git a/litmus-portal/frontend/src/components/WorkflowCard/styles.ts b/litmus-portal/frontend/src/components/WorkflowCard/styles.ts index e852947c5..d0a4659f8 100644 --- a/litmus-portal/frontend/src/components/WorkflowCard/styles.ts +++ b/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: { diff --git a/litmus-portal/frontend/src/components/WorkflowStepper/styles.ts b/litmus-portal/frontend/src/components/WorkflowStepper/styles.ts index d8dd336a7..06251d7bc 100644 --- a/litmus-portal/frontend/src/components/WorkflowStepper/styles.ts +++ b/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), diff --git a/litmus-portal/frontend/src/components/YamlEditor/Editor.tsx b/litmus-portal/frontend/src/components/YamlEditor/Editor.tsx index a8790f5ed..0513c5cca 100644 --- a/litmus-portal/frontend/src/components/YamlEditor/Editor.tsx +++ b/litmus-portal/frontend/src/components/YamlEditor/Editor.tsx @@ -1,23 +1,19 @@ /* eslint-disable no-param-reassign */ -import React, { useEffect, useState } from 'react'; -import { Typography, Button, Box } from '@material-ui/core'; +import { Box, Button, Typography, useTheme } 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 = ({ readOnly, }) => { const classes = useStyles(); + const { palette } = useTheme(); const workflow = useActions(WorkflowActions); @@ -105,7 +106,7 @@ const YamlEditor: React.FC = ({ '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 = ({ 'ace_gutter-cell' ); for (let i = 0; i < nodeStyleErrorList.length; i += 1) { - (nodeStyleErrorList[i] as any).style.backgroundColor = '#1C1C1C'; - (nodeStyleErrorList[i] as any).style.color = 'rgba(255, 255, 255, 0.4)'; + (nodeStyleErrorList[i] as any).style.backgroundColor = + palette.common.black; + (nodeStyleErrorList[i] as any).style.color = + palette.secondary.contrastText; } } setModifiedYaml(value); @@ -496,14 +499,14 @@ const YamlEditor: React.FC = ({ 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 = ({ ); 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 = ({ const nodeStyleActive = (document.getElementsByClassName( 'ace_gutter-cell' )[selection.cursor.row] as any).style; - nodeStyleActive.backgroundColor = '#5B44BA'; - nodeStyleActive.color = '#FFFFFF'; + nodeStyleActive.backgroundColor = palette.primary.main; + nodeStyleActive.color = palette.secondary.contrastText; } }} annotations={editorState.annotations} @@ -553,10 +556,8 @@ const YamlEditor: React.FC = ({ Full Screen } /> diff --git a/litmus-portal/frontend/src/components/YamlEditor/styles.ts b/litmus-portal/frontend/src/components/YamlEditor/styles.ts index 89a60df1d..21c1cdc7d 100644 --- a/litmus-portal/frontend/src/components/YamlEditor/styles.ts +++ b/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, }, })); diff --git a/litmus-portal/frontend/src/containers/app/App.tsx b/litmus-portal/frontend/src/containers/app/App.tsx index 0220fed89..705443136 100644 --- a/litmus-portal/frontend/src/containers/app/App.tsx +++ b/litmus-portal/frontend/src/containers/app/App.tsx @@ -144,7 +144,6 @@ const Routes: React.FC = ({ isOwner, isProjectAvailable }) => { - diff --git a/litmus-portal/frontend/src/models/dashboardsData.ts b/litmus-portal/frontend/src/models/dashboardsData.ts index 921eb0e21..5de74ce81 100644 --- a/litmus-portal/frontend/src/models/dashboardsData.ts +++ b/litmus-portal/frontend/src/models/dashboardsData.ts @@ -29,8 +29,8 @@ export interface DashboardDetails { panelGroups?: PanelGroupResponse[]; } -export interface ChaosEngineNamesAndNamespacesMap { - engineName: string; - engineNamespace: string; +export interface ChaosResultNamesAndNamespacesMap { + resultName: string; + resultNamespace: string; workflowName: string; } diff --git a/litmus-portal/frontend/src/pages/AnalyticsDashboards/index.tsx b/litmus-portal/frontend/src/pages/AnalyticsDashboards/index.tsx index 839ead61a..e42cf72ab 100644 --- a/litmus-portal/frontend/src/pages/AnalyticsDashboards/index.tsx +++ b/litmus-portal/frontend/src/pages/AnalyticsDashboards/index.tsx @@ -62,6 +62,10 @@ const AnalyticsDashboard = () => { label={t('analyticsDashboard.applicationDashboard')} data-cy="kubernetesDashboard" /> + @@ -73,9 +77,9 @@ const AnalyticsDashboard = () => { -
- -
+ + + ); diff --git a/litmus-portal/frontend/src/pages/AnalyticsDashboards/styles.ts b/litmus-portal/frontend/src/pages/AnalyticsDashboards/styles.ts index a77fab666..80be81781 100644 --- a/litmus-portal/frontend/src/pages/AnalyticsDashboards/styles.ts +++ b/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; diff --git a/litmus-portal/frontend/src/pages/Community/styles.ts b/litmus-portal/frontend/src/pages/Community/styles.ts index 9ef4a7874..0bccd0638 100644 --- a/litmus-portal/frontend/src/pages/Community/styles.ts +++ b/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', }, }, diff --git a/litmus-portal/frontend/src/pages/HomePage/index.tsx b/litmus-portal/frontend/src/pages/HomePage/index.tsx index 3067866f3..5e0e008e5 100644 --- a/litmus-portal/frontend/src/pages/HomePage/index.tsx +++ b/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 = () => { {t('home.workflow.info')} - + @@ -193,7 +193,7 @@ const HomePage: React.FC = () => { Applause icon -
+
@@ -207,6 +207,8 @@ const HomePage: React.FC = () => { { event.preventDefault(); history.push('/community'); @@ -216,7 +218,7 @@ const HomePage: React.FC = () => { {t('home.analytics.moreInfo')} - next + diff --git a/litmus-portal/frontend/src/pages/HomePage/style.ts b/litmus-portal/frontend/src/pages/HomePage/style.ts index fa4d1732f..0af205c91 100644 --- a/litmus-portal/frontend/src/pages/HomePage/style.ts +++ b/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', }, })); diff --git a/litmus-portal/frontend/src/pages/MonitoringDashboardPage/index.tsx b/litmus-portal/frontend/src/pages/MonitoringDashboardPage/index.tsx index 10bffa1e7..b9b1c5136 100644 --- a/litmus-portal/frontend/src/pages/MonitoringDashboardPage/index.tsx +++ b/litmus-portal/frontend/src/pages/MonitoringDashboardPage/index.tsx @@ -279,8 +279,8 @@ const DashboardPage: React.FC = () => { {dataSourceStatus !== 'ACTIVE' ? ( - {}}> -
+ {}} width="60%"> +
diff --git a/litmus-portal/frontend/src/pages/MonitoringDashboardPage/styles.ts b/litmus-portal/frontend/src/pages/MonitoringDashboardPage/styles.ts index 602d2f0d4..aeb9cd4ac 100644 --- a/litmus-portal/frontend/src/pages/MonitoringDashboardPage/styles.ts +++ b/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; diff --git a/litmus-portal/frontend/src/pages/SelectAndConfigureDashboards/Configure.tsx b/litmus-portal/frontend/src/pages/SelectAndConfigureDashboards/Configure.tsx index a395aa013..34895466f 100644 --- a/litmus-portal/frontend/src/pages/SelectAndConfigureDashboards/Configure.tsx +++ b/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 = ({ 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 = ({ 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 = ({ } ).length; if (check === 0) { - chaosEngineNamesAndNamespacesMap.push({ - engineName: `${parsedEmbeddedYaml.metadata.name}-${parsedEmbeddedYaml.spec.experiments[0].name}`, - engineNamespace, + chaosResultNamesAndNamespacesMap.push({ + resultName: `${parsedEmbeddedYaml.metadata.name}-${parsedEmbeddedYaml.spec.experiments[0].name}`, + 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 = ({ 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.engineNamespace + keyValue.resultName, + 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 = ({ setOpen(false)} + width="60%" modalActions={ = ({ } > -
+
{success === true ? ( ({ flexDirection: 'row', justifyContent: 'space-evenly', }, + + modal: { + padding: theme.spacing(15, 0), + }, })); export default useStyles; diff --git a/litmus-portal/frontend/src/pages/SelectAndConfigureDataSource/Configure.tsx b/litmus-portal/frontend/src/pages/SelectAndConfigureDataSource/Configure.tsx index 86afcdbca..17db03ddd 100644 --- a/litmus-portal/frontend/src/pages/SelectAndConfigureDataSource/Configure.tsx +++ b/litmus-portal/frontend/src/pages/SelectAndConfigureDataSource/Configure.tsx @@ -225,7 +225,7 @@ const DataSourceConfigurePage: React.FC = ({ setOpen(false)} - width="55%" + width="60%" modalActions={ ({ }, modal: { - [theme.breakpoints.up('lg')]: { - padding: theme.spacing(20), - }, - padding: theme.spacing(10), + padding: theme.spacing(15, 0), }, modalHeading: { diff --git a/litmus-portal/frontend/src/pages/Settings/index.tsx b/litmus-portal/frontend/src/pages/Settings/index.tsx index c1823a441..177feeac5 100644 --- a/litmus-portal/frontend/src/pages/Settings/index.tsx +++ b/litmus-portal/frontend/src/pages/Settings/index.tsx @@ -77,16 +77,18 @@ const Settings: React.FC = () => { > - {role === 'admin' ? ( + {role === 'admin' && ( - ) : ( - <> )} - + @@ -97,15 +99,13 @@ const Settings: React.FC = () => {
- {role === 'admin' ? ( + {role === 'admin' && ( - ) : ( - <> )}
- +
diff --git a/litmus-portal/frontend/src/utils/promUtils.ts b/litmus-portal/frontend/src/utils/promUtils.ts index 26b6bd422..d97e4eef3 100644 --- a/litmus-portal/frontend/src/utils/promUtils.ts +++ b/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 parsedChaosInfoMap: ChaosEngineNamesAndNamespacesMap = { - engineName: chaosQueryString +const getResultNameAndNamespace = (chaosQueryString: string) => { + const parsedChaosInfoMap: ChaosResultNamesAndNamespacesMap = { + 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; diff --git a/litmus-portal/frontend/src/views/AnalyticsDashboard/DataSource/Forms/prometheus.tsx b/litmus-portal/frontend/src/views/AnalyticsDashboard/DataSource/Forms/prometheus.tsx index 80bf98f52..52bf28a1a 100644 --- a/litmus-portal/frontend/src/views/AnalyticsDashboard/DataSource/Forms/prometheus.tsx +++ b/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 = ({
= ({ ({ 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; diff --git a/litmus-portal/frontend/src/views/AnalyticsDashboard/DataSource/Table/TableData.tsx b/litmus-portal/frontend/src/views/AnalyticsDashboard/DataSource/Table/TableData.tsx index fc5a08252..6fb68f9f5 100644 --- a/litmus-portal/frontend/src/views/AnalyticsDashboard/DataSource/Table/TableData.tsx +++ b/litmus-portal/frontend/src/views/AnalyticsDashboard/DataSource/Table/TableData.tsx @@ -136,6 +136,7 @@ const TableData: React.FC = ({ data }) => { setOpen(false); setConfirm(false); }} + width="60%" modalActions={ = ({ data }) => { } > -
+
{confirm === true ? ( {success === true ? ( diff --git a/litmus-portal/frontend/src/views/AnalyticsDashboard/DataSource/Table/styles.ts b/litmus-portal/frontend/src/views/AnalyticsDashboard/DataSource/Table/styles.ts index 3916436c9..e00fb89ad 100644 --- a/litmus-portal/frontend/src/views/AnalyticsDashboard/DataSource/Table/styles.ts +++ b/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) => ({ diff --git a/litmus-portal/frontend/src/views/AnalyticsDashboard/KubernetesDashboards/Table/TableData.tsx b/litmus-portal/frontend/src/views/AnalyticsDashboard/KubernetesDashboards/Table/TableData.tsx index 2ca6a4882..a63e38fa9 100644 --- a/litmus-portal/frontend/src/views/AnalyticsDashboard/KubernetesDashboards/Table/TableData.tsx +++ b/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 = ({ 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 = ({ 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 = ({ data }) => { } ).length; if (check === 0) { - chaosEngineNamesAndNamespacesMap.push({ - engineName: `${parsedEmbeddedYaml.metadata.name}-${parsedEmbeddedYaml.spec.experiments[0].name}`, - engineNamespace, + chaosResultNamesAndNamespacesMap.push({ + resultName: `${parsedEmbeddedYaml.metadata.name}-${parsedEmbeddedYaml.spec.experiments[0].name}`, + 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 = ({ 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 = ({ 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( - chaosDetails.engineName + chaosDetailsFomSchedule.resultName.includes( + chaosDetails.resultName ) && - chaosDetailsFomSchedule.engineNamespace === - chaosDetails.engineNamespace + chaosDetailsFomSchedule.resultNamespace === + chaosDetails.resultNamespace ) { isChaosQueryPresent[index] = 1; } @@ -259,17 +259,17 @@ const TableData: React.FC = ({ data }) => { if ( query.prom_query_name.startsWith('litmuschaos_awaited_experiments') ) { - const chaosDetails: ChaosEngineNamesAndNamespacesMap = getEngineNameAndNamespace( + const chaosDetails: ChaosResultNamesAndNamespacesMap = getEngineNameAndNamespace( query.prom_query_name ); - chaosEngineNamesAndNamespacesMap.forEach( - (chaosDetailsFomSchedule: ChaosEngineNamesAndNamespacesMap) => { + chaosResultNamesAndNamespacesMap.forEach( + (chaosDetailsFomSchedule: ChaosResultNamesAndNamespacesMap) => { if ( - chaosDetailsFomSchedule.engineName.includes( - chaosDetails.engineName + chaosDetailsFomSchedule.resultName.includes( + chaosDetails.resultName ) && - chaosDetailsFomSchedule.engineNamespace === - chaosDetails.engineNamespace && + chaosDetailsFomSchedule.resultNamespace === + chaosDetails.resultNamespace && !query.legend.includes(chaosDetailsFomSchedule.workflowName) ) { updatedLegend = `${chaosDetailsFomSchedule.workflowName}, \n${query.legend}`; @@ -288,17 +288,17 @@ const TableData: React.FC = ({ data }) => { }; updatedQueries.push(updatedQuery); }); - chaosEngineNamesAndNamespacesMap.forEach( - (keyValue: ChaosEngineNamesAndNamespacesMap, index: number) => { + chaosResultNamesAndNamespacesMap.forEach( + (keyValue: ChaosResultNamesAndNamespacesMap, index: number) => { if (isChaosQueryPresent[index] === 0) { updatedQueries.push({ queryid: uuidv4(), prom_query_name: generateChaosQuery( DashboardList[dashboardTemplateID].chaosEventQueryTemplate, - keyValue.engineName, - keyValue.engineNamespace + keyValue.resultName, + 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 = ({ data }) => { setConfirm(false); setOpenModal(false); }} + width="60%" modalActions={ = ({ data }) => { } > -
+
{confirm === true ? ( {success === true ? ( diff --git a/litmus-portal/frontend/src/views/AnalyticsDashboard/KubernetesDashboards/Table/styles.ts b/litmus-portal/frontend/src/views/AnalyticsDashboard/KubernetesDashboards/Table/styles.ts index dc0f37c0b..e3124d841 100644 --- a/litmus-portal/frontend/src/views/AnalyticsDashboard/KubernetesDashboards/Table/styles.ts +++ b/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) => ({ diff --git a/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonPlot/style.ts b/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonPlot/style.ts index 2f98db8aa..1a1169647 100644 --- a/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonPlot/style.ts +++ b/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, }, diff --git a/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/TableData.tsx b/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/TableData.tsx index 53f997aab..9d0a1a0a1 100644 --- a/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/TableData.tsx +++ b/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 = ({ <> {comparisonState === false ? ( - ) : (
diff --git a/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/TableHeader.tsx b/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/TableHeader.tsx index 0f0fc6989..ac4a417a7 100644 --- a/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/TableHeader.tsx +++ b/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 = ({ {comparisonState === false ? ( - 0 && numSelected < rowCount} checked={rowCount > 0 && numSelected === rowCount} onChange={onSelectAllClick} inputProps={{ 'aria-label': 'select all desserts' }} - className={classes.checkBoxStyle} /> ) : (
diff --git a/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/index.tsx b/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/index.tsx index 7713a717a..4998bcf22 100644 --- a/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/index.tsx +++ b/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, }); }); diff --git a/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/styles.ts b/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/styles.ts index 54725d1be..7b4b7bb52 100644 --- a/litmus-portal/frontend/src/views/AnalyticsDashboard/LitmusDashboard/WorkflowComparisonTable/styles.ts +++ b/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', diff --git a/litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/OverviewQuickActionCard/index.tsx b/litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/OverviewQuickActionCard/index.tsx index 4472b7b5b..5f27bcc82 100644 --- a/litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/OverviewQuickActionCard/index.tsx +++ b/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'), diff --git a/litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/Tables/dashboardData.tsx b/litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/Tables/dashboardData.tsx index 7c1131e22..c559d03cd 100644 --- a/litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/Tables/dashboardData.tsx +++ b/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 = ({ // 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 = ({ 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 = ({ } ).length; if (check === 0) { - chaosEngineNamesAndNamespacesMap.push({ - engineName: `${parsedEmbeddedYaml.metadata.name}-${parsedEmbeddedYaml.spec.experiments[0].name}`, - engineNamespace, + chaosResultNamesAndNamespacesMap.push({ + resultName: `${parsedEmbeddedYaml.metadata.name}-${parsedEmbeddedYaml.spec.experiments[0].name}`, + 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 = ({ ); 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 = ({ '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( - chaosDetails.engineName + chaosDetailsFomSchedule.resultName.includes( + chaosDetails.resultName ) && - chaosDetailsFomSchedule.engineNamespace === - chaosDetails.engineNamespace + chaosDetailsFomSchedule.resultNamespace === + chaosDetails.resultNamespace ) { isChaosQueryPresent[index] = 1; } @@ -227,17 +227,17 @@ const TableDashboardData: React.FC = ({ if ( query.prom_query_name.startsWith('litmuschaos_awaited_experiments') ) { - const chaosDetails: ChaosEngineNamesAndNamespacesMap = getEngineNameAndNamespace( + const chaosDetails: ChaosResultNamesAndNamespacesMap = getEngineNameAndNamespace( query.prom_query_name ); - chaosEngineNamesAndNamespacesMap.forEach( - (chaosDetailsFomSchedule: ChaosEngineNamesAndNamespacesMap) => { + chaosResultNamesAndNamespacesMap.forEach( + (chaosDetailsFomSchedule: ChaosResultNamesAndNamespacesMap) => { if ( - chaosDetailsFomSchedule.engineName.includes( - chaosDetails.engineName + chaosDetailsFomSchedule.resultName.includes( + chaosDetails.resultName ) && - chaosDetailsFomSchedule.engineNamespace === - chaosDetails.engineNamespace && + chaosDetailsFomSchedule.resultNamespace === + chaosDetails.resultNamespace && !query.legend.includes(chaosDetailsFomSchedule.workflowName) ) { updatedLegend = `${chaosDetailsFomSchedule.workflowName}, \n${query.legend}`; @@ -256,18 +256,18 @@ const TableDashboardData: React.FC = ({ }; updatedQueries.push(updatedQuery); }); - chaosEngineNamesAndNamespacesMap.forEach( - (keyValue: ChaosEngineNamesAndNamespacesMap, index: number) => { + chaosResultNamesAndNamespacesMap.forEach( + (keyValue: ChaosResultNamesAndNamespacesMap, index: number) => { if (isChaosQueryPresent[index] === 0) { updatedQueries.push({ queryid: uuidv4(), prom_query_name: generateChaosQuery( DashboardTemplatesList[dashboardTemplateID] .chaosEventQueryTemplate, - keyValue.engineName, - keyValue.engineNamespace + keyValue.resultName, + keyValue.resultNamespace ), - legend: `${keyValue.workflowName}- \n${keyValue.engineName}`, + legend: `${keyValue.workflowName}- \n${keyValue.resultName}`, resolution: '1/1', minstep: '1', line: false, diff --git a/litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/Tables/dataSource.tsx b/litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/Tables/dataSource.tsx index 2272fc9fd..290f63af2 100644 --- a/litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/Tables/dataSource.tsx +++ b/litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/Tables/dataSource.tsx @@ -43,7 +43,7 @@ const TableDataSource: React.FC = ({ { - tabs.changeAnalyticsDashboardTabs(1); + tabs.changeAnalyticsDashboardTabs(3); history.push('/analytics'); }} > diff --git a/litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/styles.ts b/litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/styles.ts index 7279ad35f..f499864a5 100644 --- a/litmus-portal/frontend/src/views/AnalyticsDashboard/Overview/styles.ts +++ b/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), diff --git a/litmus-portal/frontend/src/views/Community/CommunityTimeSeriesPlot/index.tsx b/litmus-portal/frontend/src/views/Community/CommunityTimeSeriesPlot/index.tsx index 93df4b7db..4d6ef6439 100644 --- a/litmus-portal/frontend/src/views/Community/CommunityTimeSeriesPlot/index.tsx +++ b/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 = () => { Monthly - -
- -
+ bgcolor: palette.background.paper, + bordercolor: palette.background.paper, + borderwidth: 0, + }, + }} + useResizeHandler + style={{ + 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, + }, + }} + onInitialized={() => { + 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); + } + }} + />
); }; diff --git a/litmus-portal/frontend/src/views/Community/CommunityTimeSeriesPlot/styles.ts b/litmus-portal/frontend/src/views/Community/CommunityTimeSeriesPlot/styles.ts index 2d180b62b..941f59d37 100644 --- a/litmus-portal/frontend/src/views/Community/CommunityTimeSeriesPlot/styles.ts +++ b/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), }, })); diff --git a/litmus-portal/frontend/src/views/Community/GeoMap/index.tsx b/litmus-portal/frontend/src/views/Community/GeoMap/index.tsx index 2a4b8add6..2940a0fb3 100644 --- a/litmus-portal/frontend/src/views/Community/GeoMap/index.tsx +++ b/litmus-portal/frontend/src/views/Community/GeoMap/index.tsx @@ -8,11 +8,7 @@ const GeoMap = () => { const [showCountry, setShowCountry] = useState(true); const classes = useStyles(); return ( -
+
{showCountry ? : }

@@ -20,8 +16,8 @@ const GeoMap = () => { setShowCountry(!showCountry)} checked={showCountry} - leftLabel="Country View" - rightLabel="City View" + leftLabel="City View" + rightLabel="Country View" />
diff --git a/litmus-portal/frontend/src/views/Community/GeoMap/styles.ts b/litmus-portal/frontend/src/views/Community/GeoMap/styles.ts index 6901e19cf..4dd9db16d 100644 --- a/litmus-portal/frontend/src/views/Community/GeoMap/styles.ts +++ b/litmus-portal/frontend/src/views/Community/GeoMap/styles.ts @@ -29,8 +29,11 @@ const useStyles = makeStyles((theme) => ({ }, }, cityMapComposableMap: { - width: '54rem', - height: '40rem', + width: '45vw', + 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', - height: '40rem', + width: '45vw', + 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; diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx index 8d78243d1..000b8b8c7 100644 --- a/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx +++ b/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 = ({ onClose={handleClose} width="60%" modalActions={ - ✕ + + ✕ + } > ({ buttomPad: { paddingBottom: theme.spacing(3.75), }, + closeBtn: { + color: theme.palette.secondary.contrastText, + marginTop: theme.spacing(-6), + marginRight: theme.spacing(-2.5), + }, })); export default useStyles;