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

Updated Litmus-UI and added minor UI fixes (#2883) 

* Updated Litmus-UI and added minor UI fixes
Signed-off-by: Sayan Mondal <sayan@chaosnative.com>
This commit is contained in:
Sayan Mondal 2021-06-11 16:24:10 +05:30 committed by GitHub
parent ac00e474f3
commit 98129e963a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 709 additions and 813 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1291
litmus-portal/frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
litmus-portal/frontend/package.json
View File

@ -39,7 +39,7 @@
"jsonwebtoken": "^8.5.1",
"jspdf": "^2.1.1",
"jspdf-autotable": "^3.5.13",
"litmus-ui": "^1.1.7",
"litmus-ui": "1.2.0",
"localforage": "^1.7.3",
"lodash": "^4.17.20",
"moment": "^2.27.0",
@ -97,13 +97,13 @@
"@types/lodash": "^4.14.161",
"@types/plotly.js": "^1.50.15",
"@types/react": "^16.9.19",
"@types/react-beautiful-dnd": "^11.0.1",
"@types/react-date-range": "^0.95.1",
"@types/react-dom": "^16.9.5",
"@types/react-plotly.js": "^2.2.4",
"@types/react-redux": "^7.1.7",
"@types/react-router-dom": "^5.1.3",
"@types/react-simple-maps": "^1.0.3",
"@types/react-beautiful-dnd": "^11.0.1",
"@types/uuid": "^8.3.0",
"@typescript-eslint/eslint-plugin": "^3.5.0",
"@typescript-eslint/parser": "^3.5.0",

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

@ -22,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) => ({
},
headerButtonWrapper: {
display: 'flex',
width: '10rem',
width: '13rem',
justifyContent: 'space-between',
},
bottomButtonWrapper: {

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

@ -1,4 +1,4 @@
import { EventMetric, GraphMetric } from 'litmus-ui';
import { GraphMetric } from 'litmus-ui';
import { PanelGroupResponse, PanelResponse } from './graphql/dashboardsDetails';
export interface PanelGroupMap {
@ -54,7 +54,7 @@ export interface GraphPanelGroupProps extends PanelGroupResponse {
export interface ParsedPrometheusData {
seriesData: Array<GraphMetric>;
chaosData: Array<EventMetric>;
chaosData: Array<GraphMetric>;
}
export interface RunWiseChaosMetrics {
runIndex: number;

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

@ -11,7 +11,7 @@ import {
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import { ButtonFilled } from 'litmus-ui';
import { ButtonFilled, LightPills } from 'litmus-ui';
import React from 'react';
import { useTranslation } from 'react-i18next';
import TimePopOver from '../../../components/TimePopOver';
@ -30,7 +30,6 @@ import * as NodeSelectionActions from '../../../redux/actions/nodeSelection';
import { history } from '../../../redux/configureStore';
import { getProjectID, getProjectRole } from '../../../utils/getSearchParams';
import ExperimentPoints from '../BrowseSchedule/ExperimentPoints';
import CustomStatus from '../CustomStatus/Status';
import useStyles from './styles';
interface TableDataProps {
@ -141,6 +140,19 @@ const TableData: React.FC<TableDataProps> = ({ data, refetchQuery }) => {
return timeDifference;
};
const getVariant = (variant: string | undefined) => {
switch (variant) {
case 'succeeded':
return 'success';
case 'failed':
return 'danger';
case 'running':
return 'warning';
default:
return undefined;
}
};
return (
<>
{/* Table cell for warning (if the workflow is in running state from 20 mins) */}
@ -225,7 +237,10 @@ const TableData: React.FC<TableDataProps> = ({ data, refetchQuery }) => {
</Popover>
</TableCell>
<TableCell>
<CustomStatus status={data.phase ?? ''} />
<LightPills
variant={getVariant(data.phase?.toLowerCase())}
label={data.phase ?? ''}
/>
</TableCell>
<TableCell
className={classes.workflowNameData}

6
litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts
View File

@ -121,13 +121,13 @@ const useStyles = makeStyles((theme) => ({
// Colors for Resilency score and Experiments passed
less: {
color: theme.palette.status.failed,
color: theme.palette.status.workflow.failed,
},
medium: {
color: theme.palette.status.pending,
color: theme.palette.status.workflow.pending,
},
high: {
color: theme.palette.status.completed,
color: theme.palette.status.workflow.completed,
},
// Menu option with icon

40
litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/Status.tsx
View File

@ -1,40 +0,0 @@
import { Typography } from '@material-ui/core';
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { SUCCEEDED } from '../../WorkflowDetails/workflowConstants';
import useStyles from './styles';
interface StatusProps {
status: string;
}
const CustomStatus: React.FC<StatusProps> = ({ status }) => {
const classes = useStyles();
const { t } = useTranslation();
const [label, setLabel] = React.useState(' ');
useEffect(() => {
if (status === 'Succeeded') {
return setLabel(`${classes.status} ${classes.completed}`);
}
if (status === 'Running' || status === 'Pending') {
return setLabel(`${classes.status} ${classes.running}`);
}
if (status === 'NotAvailable') {
return setLabel(`${classes.naStatus} ${classes.notAvailable}`);
}
return setLabel(`${classes.status} ${classes.failed}`);
}, [status]);
return (
<>
<div className={label}>
<Typography data-testid="status" className={classes.statusFont}>
{status === SUCCEEDED
? `${t('workflowDetailsView.workflowInfo.Completed')}`
: status}
</Typography>
</div>
</>
);
};
export default CustomStatus;

28
litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/__tests__/CustomStatus.test.tsx
View File

@ -1,28 +0,0 @@
/* eslint-disable */
import '@testing-library/jest-dom';
import React from 'react';
import { render } from '../../../../testHelpers/test-util';
import CustomStatus from '../Status';
/**
* Test to check the custom status
*/
describe('Custom Status', () => {
it('Renders Succeeded Status', () => {
const { getByTestId } = render(<CustomStatus status="Succeeded" />);
const status = getByTestId('status');
expect(status!.innerHTML).toEqual(
'workflowDetailsView.workflowInfo.Completed'
);
});
it('Renders Running Status', () => {
const { getByTestId } = render(<CustomStatus status="Running" />);
const status = getByTestId('status');
expect(status!.innerHTML).toEqual('Running');
});
it('Renders Failed Status', () => {
const { getByTestId } = render(<CustomStatus status="Failed" />);
const status = getByTestId('status');
expect(status!.innerHTML).toEqual('Failed');
});
});

39
litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/styles.ts
View File

@ -1,39 +0,0 @@
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
status: {
width: '3.9125rem',
textAlign: 'center',
borderRadius: 3,
paddingTop: theme.spacing(0.375),
paddingBottom: theme.spacing(0.375),
},
naStatus: {
width: '4.8rem',
textAlign: 'center',
borderRadius: 3,
paddingTop: theme.spacing(0.375),
paddingBottom: theme.spacing(0.375),
},
notAvailable: {
color: theme.palette.text.secondary,
backgroundColor: theme.palette.status.pending,
},
completed: {
color: theme.palette.success.main,
backgroundColor: theme.palette.success.light,
},
running: {
color: theme.palette.warning.main,
backgroundColor: theme.palette.warning.light,
},
failed: {
color: theme.palette.status.failed,
backgroundColor: theme.palette.status.failed,
},
statusFont: {
fontSize: '0.725rem',
},
}));
export default useStyles;

3
litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/styles.ts
View File

@ -76,7 +76,7 @@ const useStyles = makeStyles((theme: Theme) => ({
// Accordion Expanded Body [Content]
predefinedWorkflowDiv: {
maxHeight: '15rem',
overflowY: 'scroll',
overflowY: 'auto',
padding: theme.spacing(3, 0, 3, 0),
},
MuiAccordionroot: {
@ -239,7 +239,6 @@ const useStyles = makeStyles((theme: Theme) => ({
},
formControl: {
minWidth: '9rem',
marginLeft: theme.spacing(1),
},
label: {
color: theme.palette.common.black,

8
litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowPreview/styles.ts
View File

@ -18,7 +18,7 @@ const useStyles = makeStyles((theme: Theme) => ({
cursor: 'pointer',
fill: 'none',
'& circle': {
fill: theme.palette.status.completed,
fill: theme.palette.status.experiment.completed,
},
'& g.label g': {
transform: (props: StyleProps) =>
@ -36,15 +36,15 @@ const useStyles = makeStyles((theme: Theme) => ({
`scale(1.8) translate(-5px, ${props.horizontal ? -3.6 : -1}px)`,
},
'& g.StepGroup.Succeeded': {
fill: theme.palette.status.completed,
fill: theme.palette.status.experiment.completed,
},
},
// Styles for edges
'& g g.edgePaths': {
'& g.succeeded': {
fill: theme.palette.status.completed,
stroke: theme.palette.status.completed,
fill: theme.palette.status.experiment.completed,
stroke: theme.palette.status.experiment.completed,
},
},
},

9
litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/styles.ts
View File

@ -107,6 +107,7 @@ const useStyles = makeStyles((theme) => ({
addExpModal: {
textAlign: 'left',
padding: theme.spacing(5),
height: '100%',
display: 'flex',
flexDirection: 'column',
@ -126,9 +127,9 @@ const useStyles = makeStyles((theme) => ({
},
},
doneBtn: {
marginLeft: 'auto',
marginTop: theme.spacing(2.5),
marginRight: theme.spacing(2),
position: 'absolute',
bottom: '1rem',
right: '3rem',
},
inputDiv: {
display: 'flex',
@ -212,7 +213,7 @@ const useStyles = makeStyles((theme) => ({
radioList: {
width: '100%',
alignItems: 'center',
height: '26rem',
height: '75%',
overflowY: 'auto',
},
experimentCard: {

23
litmus-portal/frontend/src/views/Targets/BrowseCluster/TableData.tsx
View File

@ -1,5 +1,5 @@
import { IconButton, TableCell, Tooltip, Typography } from '@material-ui/core';
import { ButtonFilled, ButtonOutlined, Modal } from 'litmus-ui';
import { ButtonFilled, ButtonOutlined, LightPills, Modal } from 'litmus-ui';
import moment from 'moment';
import React from 'react';
import { useTranslation } from 'react-i18next';
@ -42,17 +42,20 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
<>
<TableCell className={classes.tableDataStatus}>
{data.is_cluster_confirmed === false ? (
<Typography className={`${classes.check} ${classes.pending}`}>
{t('workflowCluster.header.formControl.menu6')}
</Typography>
<LightPills
variant="warning"
label={t('workflowCluster.header.formControl.menu6')}
/>
) : data.is_cluster_confirmed === true && data.is_active ? (
<Typography className={`${classes.check} ${classes.active}`}>
{t('workflowCluster.header.formControl.menu1')}
</Typography>
<LightPills
variant="success"
label={t('workflowCluster.header.formControl.menu1')}
/>
) : (
<Typography className={`${classes.check} ${classes.notactive}`}>
{t('workflowCluster.header.formControl.menu2')}
</Typography>
<LightPills
variant="danger"
label={t('workflowCluster.header.formControl.menu2')}
/>
)}
</TableCell>
<TableCell className={classes.workflowNameData}>

20
litmus-portal/frontend/src/views/Targets/BrowseCluster/styles.ts
View File

@ -160,26 +160,6 @@ const useStyles = makeStyles((theme) => ({
color: theme.palette.secondary.dark,
},
// Table status
check: {
width: '5.9125rem',
textAlign: 'center',
borderRadius: 3,
paddingTop: theme.spacing(0.375),
paddingBottom: theme.spacing(0.375),
color: theme.palette.primary.dark,
},
active: {
color: theme.palette.status.completed,
background: theme.palette.success.light,
},
notactive: {
color: theme.palette.error.dark,
backgroundColor: theme.palette.error.light,
},
pending: {
background: theme.palette.warning.light,
color: theme.palette.warning.main,
},
statusFont: {
fontSize: '0.725rem',
},

10
litmus-portal/frontend/src/views/WorkflowDetails/ArgoWorkflow/styles.ts
View File

@ -107,11 +107,11 @@ const useStyles = makeStyles((theme: Theme) => ({
},
'& g.Failed': {
'& circle': {
fill: theme.palette.status.failed,
fill: theme.palette.status.experiment.failed,
},
'& circle.selected': {
strokeDasharray: '5,2',
stroke: theme.palette.status.failed,
stroke: theme.palette.status.experiment.failed,
fill: 'none',
strokeWidth: '1.5',
},
@ -150,7 +150,7 @@ const useStyles = makeStyles((theme: Theme) => ({
},
},
'& g.StepGroup': {
fill: theme.palette.status.completed,
fill: theme.palette.status.experiment.completed,
cursor: 'default',
'& rect': {
x: '-1.5px',
@ -166,8 +166,8 @@ const useStyles = makeStyles((theme: Theme) => ({
// Styles for edges
'& g g.edgePaths': {
'& g.link': {
fill: theme.palette.status.completed,
stroke: theme.palette.status.completed,
fill: theme.palette.status.experiment.completed,
stroke: theme.palette.status.experiment.completed,
},
},
},

14
litmus-portal/frontend/src/views/WorkflowDetails/WorkflowStatus/styles.ts
View File

@ -3,31 +3,31 @@ import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
// Status Text Colors
running: {
color: theme.palette.status.running,
color: theme.palette.status.experiment.running,
},
failed: {
color: theme.palette.status.failed,
color: theme.palette.status.experiment.failed,
},
succeeded: {
color: theme.palette.status.completed,
color: theme.palette.status.experiment.completed,
},
pending: {
color: theme.palette.status.completed,
color: theme.palette.status.experiment.pending,
},
error: {
color: '#FFA600',
color: theme.palette.status.experiment.error,
},
skipped: {
color: '#0098DD',
color: theme.palette.status.experiment.skipped,
},
omitted: {
color: '#A93DDB',
color: theme.palette.status.experiment.omitted,
},
textBold: {