litmuschaos
/
litmus
mirror of https://github.com/litmuschaos/litmus.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Ishan Gupta 2021-03-13 12:06:33 +05:30 committed by GitHub
parent d8abba9b62
commit 22f1306496
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
48 changed files with 407 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
litmus-portal/frontend/public/icons/addAgent.svg → litmus-portal/frontend/public/icons/addDashboard.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 773 B

After

Width:  |  Height:  |  Size: 773 B

5
litmus-portal/frontend/public/locales/en/translation.yaml
View File

@ -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

2
litmus-portal/frontend/src/components/BreadCrumbs/index.tsx
View File

@ -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;

3
litmus-portal/frontend/src/components/BreadCrumbs/styles.tsx
View File

@ -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;

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

@ -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,
},
},
},

9
litmus-portal/frontend/src/components/CheckBox/index.tsx Normal file
View File

@ -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;

4
litmus-portal/frontend/src/components/InfoFilled/index.tsx
View File

@ -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,

2
litmus-portal/frontend/src/components/InfoFilled/styles.ts
View File

@ -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: {

14
litmus-portal/frontend/src/components/WorkflowCard/styles.ts
View File

@ -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: {

2
litmus-portal/frontend/src/components/WorkflowStepper/styles.ts
View File

@ -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),

55
litmus-portal/frontend/src/components/YamlEditor/Editor.tsx
View File

@ -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<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.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<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.color = '#FFFFFF';
nodeStyleActive.backgroundColor = palette.primary.main;
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"
width="25px"
height="25px"
margin-right="25px"
color={palette.secondary.contrastText}
className={classes.fullScreenIcon}
/>
}
/>

10
litmus-portal/frontend/src/components/YamlEditor/styles.ts
View File

@ -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,
},
}));

1
litmus-portal/frontend/src/containers/app/App.tsx
View File

@ -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" />

6
litmus-portal/frontend/src/models/dashboardsData.ts
View File

@ -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;
}

10
litmus-portal/frontend/src/pages/AnalyticsDashboards/index.tsx
View File

@ -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}>
<DataSourceTable />
</div>
</TabPanel>
<TabPanel value={analyticsTabValue} index={3}>
<DataSourceTable />
</TabPanel>
</Scaffold>
);

3
litmus-portal/frontend/src/pages/AnalyticsDashboards/styles.ts
View File

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

8
litmus-portal/frontend/src/pages/Community/styles.ts
View File

@ -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',
},
},

10
litmus-portal/frontend/src/pages/HomePage/index.tsx
View File

@ -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>

34
litmus-portal/frontend/src/pages/HomePage/style.ts
View File

@ -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',
},
}));

4
litmus-portal/frontend/src/pages/MonitoringDashboardPage/index.tsx
View File

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

4
litmus-portal/frontend/src/pages/MonitoringDashboardPage/styles.ts
View File

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

31
litmus-portal/frontend/src/pages/SelectAndConfigureDashboards/Configure.tsx
View File

@ -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({
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<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.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<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

4
litmus-portal/frontend/src/pages/SelectAndConfigureDashboards/styles.ts
View File

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

2
litmus-portal/frontend/src/pages/SelectAndConfigureDataSource/Configure.tsx
View File

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

5
litmus-portal/frontend/src/pages/SelectAndConfigureDataSource/styles.ts
View File

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

16
litmus-portal/frontend/src/pages/Settings/index.tsx
View File

@ -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>

12
litmus-portal/frontend/src/utils/promUtils.ts
View File

@ -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;

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

@ -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}

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

@ -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;

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

@ -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 ? (

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

@ -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) => ({

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

@ -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({
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<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(
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<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(
(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<TableDataProps> = ({ 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<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 ? (

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

@ -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) => ({

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

@ -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,
},

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

@ -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 />

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

@ -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 />

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

@ -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,
});
});

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

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

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

@ -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'),

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

@ -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({
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<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(
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<TableDashboardData> = ({
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<TableDashboardData> = ({
};
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,

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

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

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

@ -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),

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

@ -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>
<div className={classes.plot}>
<Plot
data={[
{
type: 'scatter',
x: data.x,
y: data.y,
mode: 'lines',
name: 'Operator Installs',
line: { color: '#109B67' },
<Plot
className={classes.plot}
data={[
{
type: 'scatter',
x: data.x,
y: data.y,
mode: 'lines',
name: 'Operator Installs',
line: { color: palette.secondary.main },
},
{
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,
},
{
type: 'scatter',
x: data.x,
y: data.y2,
mode: 'lines',
name: 'Experiment Runs',
yaxis: 'y2',
line: { color: '#858CDD' },
},
]}
layout={{
autosize: true,
width: 920,
height: 650,
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: '#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>
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);
}
}}
/>
</div>
);
};

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

@ -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),
},
}));

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

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

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

@ -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;

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

@ -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

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

@ -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;