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

Adding data-cy for E2E and fixing Edit Scheduile View YAML (#2977) 

Signed-off-by: Sayan Mondal <sayan@chaosnative.com>
This commit is contained in:
Sayan Mondal 2021-07-08 12:23:35 +05:30 committed by GitHub
parent f03647b772
commit cae6574234
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 213 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
litmus-portal/frontend/src/pages/EditSchedule/Schedule.tsx
View File

@ -493,6 +493,7 @@ const ScheduleWorkflow = () => {
<div className={classes.innerRecurring}> <div className={classes.innerRecurring}>
<FormControl component="fieldset"> <FormControl component="fieldset">
<RadioGroup <RadioGroup
data-cy="RecurringSchedule"
aria-label="instanceDef" aria-label="instanceDef"
name="instanceDef" name="instanceDef"
value={valueDef} value={valueDef}
@ -750,6 +751,7 @@ const ScheduleWorkflow = () => {
Cancel Cancel
</ButtonOutlined> </ButtonOutlined>
<ButtonFilled <ButtonFilled
data-cy="VerifyButton"
onClick={() => onClick={() =>
history.push({ history.push({
pathname: `/workflows/schedule/${getProjectID()}/${fetchWorkflowNameFromManifest( pathname: `/workflows/schedule/${getProjectID()}/${fetchWorkflowNameFromManifest(

290
litmus-portal/frontend/src/pages/EditSchedule/index.tsx
View File

@ -67,6 +67,7 @@ const EditSchedule: React.FC = () => {
}, },
]); ]);
const [yamlOpen, setYAMLOpen] = React.useState(false);
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const [finishModalOpen, setFinishModalOpen] = useState(false); const [finishModalOpen, setFinishModalOpen] = useState(false);
const [errorModal, setErrorModal] = useState(false); const [errorModal, setErrorModal] = useState(false);
@ -204,7 +205,7 @@ const EditSchedule: React.FC = () => {
const handleEditOpen = () => { const handleEditOpen = () => {
setModified(false); setModified(false);
setOpen(true); setYAMLOpen(true);
}; };
const handleEditClose = () => { const handleEditClose = () => {
@ -253,136 +254,180 @@ const EditSchedule: React.FC = () => {
</Typography> </Typography>
<div className={classes.root}> <div className={classes.root}>
<div className={classes.innerContainer}> <div className={classes.innerContainer}>
<Typography className={classes.sumText}> {yamlOpen ? (
{t('createWorkflow.verifyCommit.summary.header')} <div className={classes.editorWrapper}>
</Typography> <div className={`${classes.flex} ${classes.additional}`}>
<div className={classes.flex}>
<div className={classes.outerSum}> <img
<div className={classes.summaryDiv}> style={{ width: '2rem' }}
<div className={classes.innerSumDiv}> src="/icons/terminal.svg"
<Typography className={classes.col1}> alt="Terminal Icon"
{t('createWorkflow.verifyCommit.summary.workflowName')}: />
</Typography> <Typography className={classes.name}>
</div> {fetchWorkflowNameFromManifest(manifest)}.yaml
<div className={classes.col2} data-cy="WorkflowName">
<Typography>
{fetchWorkflowNameFromManifest(manifest)}
</Typography>
</div>
</div>
<div className={classes.summaryDiv}>
<div className={classes.innerSumDiv}>
<Typography className={classes.col1}>
{t('createWorkflow.verifyCommit.summary.clustername')}:
</Typography>
</div>
<Typography className={classes.schCol2}>
{clustername}
</Typography>
</div>
<div className={classes.summaryDiv}>
<div className={classes.innerSumDiv}>
<Typography className={classes.col1}>
{t('createWorkflow.verifyCommit.summary.desc')}:
</Typography>
</div>
<div className={classes.col2}>
<Typography>{workflow.description}</Typography>
</div>
</div>
<div className={classes.summaryDiv}>
<div className={classes.innerSumDiv}>
<Typography className={classes.col1}>
{t('createWorkflow.verifyCommit.summary.schedule')}:
</Typography>
</div>
<div className={classes.schCol2}>
{cronSyntax === '' ? (
<Typography>
{t('createWorkflow.verifyCommit.summary.schedulingNow')}
</Typography> </Typography>
) : ( </div>
<Typography>{cronstrue.toString(cronSyntax)}</Typography>
)}
<ButtonOutlined <ButtonOutlined
className={classes.editButton} onClick={() => setYAMLOpen(false)}
onClick={() => className={classes.editorCloseBtn}
history.push({
pathname: `/workflows/schedule/${projectID}/${fetchWorkflowNameFromManifest(
manifest
)}/set`,
search: `?projectID=${projectID}&projectRole=${userRole}`,
})
}
> >
<EditIcon className={classes.editIcon} data-cy="edit" /> x
{t('editSchedule.edit')}
</ButtonOutlined> </ButtonOutlined>
</div> </div>
<YamlEditor
content={manifest}
filename={workflow.name}
readOnly
/>
</div> </div>
<div className={classes.summaryDiv}> ) : (
<div className={classes.innerSumDiv}> <>
<Typography className={classes.col1}> <Typography className={classes.sumText}>
{t('createWorkflow.verifyCommit.summary.adjustedWeights')} {t('createWorkflow.verifyCommit.summary.header')}
: </Typography>
</Typography>
</div> <div className={classes.outerSum}>
{weights.length === 0 ? ( <div className={classes.summaryDiv}>
<div> <div className={classes.innerSumDiv}>
<Typography className={classes.col2}> <Typography className={classes.col1}>
{t('createWorkflow.verifyCommit.error')} {t(
</Typography> 'createWorkflow.verifyCommit.summary.workflowName'
</div> )}
) : ( :
<div className={classes.adjWeights}> </Typography>
<div className={classes.progress}> </div>
{weights.map((Test) => ( <div className={classes.col2} data-cy="WorkflowName">
<AdjustedWeights <Typography>
key={Test.weight} {fetchWorkflowNameFromManifest(manifest)}
testName={`${Test.experimentName} ${t( </Typography>
'createWorkflow.verifyCommit.test'
)}`}
testValue={Test.weight}
spacing={false}
icon={false}
/>
))}
</div> </div>
</div> </div>
)}
</div> <div className={classes.summaryDiv}>
<div className={classes.summaryDiv}> <div className={classes.innerSumDiv}>
<div className={classes.innerSumDiv}> <Typography className={classes.col1}>
<Typography className={classes.col1}> {t('createWorkflow.verifyCommit.summary.clustername')}
{t('createWorkflow.verifyCommit.YAML')} :
</Typography> </Typography>
</div> </div>
<div className={classes.yamlFlex}> <Typography className={classes.schCol2}>
{weights.length === 0 ? ( {clustername}
<Typography className={classes.spacingHorizontal}>
{t('createWorkflow.verifyCommit.errYaml')}
</Typography> </Typography>
) : ( </div>
<Typography>
<b>{yamlStatus}</b> <div className={classes.summaryDiv}>
<span className={classes.spacingHorizontal}> <div className={classes.innerSumDiv}>
{t('createWorkflow.verifyCommit.youCanMoveOn')} <Typography className={classes.col1}>
</span> {t('createWorkflow.verifyCommit.summary.desc')}:
</Typography> </Typography>
)} </div>
<br /> <div className={classes.col2}>
<ButtonFilled <Typography>{workflow.description}</Typography>
className={classes.verifyYAMLButton} </div>
onClick={handleEditOpen} </div>
> <div className={classes.summaryDiv}>
{t('createWorkflow.verifyCommit.button.viewYaml')} <div className={classes.innerSumDiv}>
</ButtonFilled> <Typography className={classes.col1}>
{t('createWorkflow.verifyCommit.summary.schedule')}:
</Typography>
</div>
<div className={classes.schCol2}>
{cronSyntax === '' ? (
<Typography>
{t(
'createWorkflow.verifyCommit.summary.schedulingNow'
)}
</Typography>
) : (
<Typography>
{cronstrue.toString(cronSyntax)}
</Typography>
)}
<ButtonOutlined
className={classes.editButton}
onClick={() =>
history.push({
pathname: `/workflows/schedule/${projectID}/${fetchWorkflowNameFromManifest(
manifest
)}/set`,
search: `?projectID=${projectID}&projectRole=${userRole}`,
})
}
>
<EditIcon
className={classes.editIcon}
data-cy="edit"
/>
{t('editSchedule.edit')}
</ButtonOutlined>
</div>
</div>
<div className={classes.summaryDiv}>
<div className={classes.innerSumDiv}>
<Typography className={classes.col1}>
{t(
'createWorkflow.verifyCommit.summary.adjustedWeights'
)}
:
</Typography>
</div>
{weights.length === 0 ? (
<div>
<Typography className={classes.col2}>
{t('createWorkflow.verifyCommit.error')}
</Typography>
</div>
) : (
<div className={classes.adjWeights}>
<div className={classes.progress}>
{weights.map((Test) => (
<AdjustedWeights
key={Test.weight}
testName={`${Test.experimentName} ${t(
'createWorkflow.verifyCommit.test'
)}`}
testValue={Test.weight}
spacing={false}
icon={false}
/>
))}
</div>
</div>
)}
</div>
<div className={classes.summaryDiv}>
<div className={classes.innerSumDiv}>
<Typography className={classes.col1}>
{t('createWorkflow.verifyCommit.YAML')}
</Typography>
</div>
<div className={classes.yamlFlex}>
{weights.length === 0 ? (
<Typography className={classes.spacingHorizontal}>
{t('createWorkflow.verifyCommit.errYaml')}
</Typography>
) : (
<Typography>
<b>{yamlStatus}</b>
<span className={classes.spacingHorizontal}>
{t('createWorkflow.verifyCommit.youCanMoveOn')}
</span>
</Typography>
)}
<br />
<ButtonFilled
className={classes.verifyYAMLButton}
onClick={handleEditOpen}
>
{t('createWorkflow.verifyCommit.button.viewYaml')}
</ButtonFilled>
</div>
</div>
</div> </div>
</div> </>
</div> )}
</div> </div>
</div> </div>
{/* Cancel and Save Button */} {/* Cancel and Save Button */}
@ -397,7 +442,10 @@ const EditSchedule: React.FC = () => {
> >
{t('editSchedule.cancel')} {t('editSchedule.cancel')}
</ButtonOutlined> </ButtonOutlined>
<ButtonFilled onClick={() => handleNext()}> <ButtonFilled
data-cy="SaveEditScheduleButton"
onClick={() => handleNext()}
>
{t('editSchedule.save')} {t('editSchedule.save')}
</ButtonFilled> </ButtonFilled>
</div> </div>

29
litmus-portal/frontend/src/pages/EditSchedule/styles.ts
View File

@ -227,4 +227,33 @@ export const useStyles = makeStyles((theme: Theme) => ({
fontWeight: 'bold', fontWeight: 'bold',
margin: theme.spacing(2, 0), margin: theme.spacing(2, 0),
}, },
// Editor
editorWrapper: {
marginBottom: theme.spacing(-4),
},
flex: {
display: 'flex',
},
additional: {
width: '95%',
margin: '0rem auto',
justifyContent: 'space-between',
},
name: {
margin: theme.spacing(1, 0, 2, 2),
fontWeight: 'bold',
},
editorTopBtn: {
padding: '0.4rem',
fontSize: '0.8rem',
},
editorCloseBtn: {
width: '0.5rem',
borderColor: theme.palette.disabledBackground,
color: theme.palette.text.disabled,
minWidth: '2rem',
padding: '0.2rem',
fontSize: '1rem',
},
})); }));

5
litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx
View File

@ -204,7 +204,10 @@ const WorkflowDetails: React.FC = () => {
</Tabs> </Tabs>
</AppBar> </AppBar>
<TabPanel value={workflowDetailsTabValue} index={0}> <TabPanel value={workflowDetailsTabValue} index={0}>
<div className={classes.graphView}> <div
className={classes.graphView}
data-cy="dagreGraphWorkflowLevel"
>
{/* Argo Workflow DAG Graph */} {/* Argo Workflow DAG Graph */}
<ArgoWorkflow <ArgoWorkflow
nodes={ nodes={

1
litmus-portal/frontend/src/views/CreateWorkflow/ScheduleWorkflow/index.tsx
View File

@ -471,6 +471,7 @@ const ScheduleWorkflow = forwardRef((_, ref) => {
<div className={classes.innerRecurring}> <div className={classes.innerRecurring}>
<FormControl component="fieldset"> <FormControl component="fieldset">
<RadioGroup <RadioGroup
data-cy="RecurringSchedule"
aria-label="instanceDef" aria-label="instanceDef"
name="instanceDef" name="instanceDef"
value={valueDef} value={valueDef}

1
litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx
View File

@ -795,6 +795,7 @@ const TuneWorkflow = forwardRef((_, ref) => {
{/* Edit Button */} {/* Edit Button */}
{manifest !== '' && ( {manifest !== '' && (
<ButtonOutlined <ButtonOutlined
data-cy="EditSequenceButton"
disabled={isVisualizationComplete} disabled={isVisualizationComplete}
onClick={() => setEditSequence(true)} onClick={() => setEditSequence(true)}
> >

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

@ -82,7 +82,6 @@ const useStyles = makeStyles((theme) => ({
// Table // Table
table: { table: {
minWidth: '40rem',
minHeight: '23rem', minHeight: '23rem',
}, },
revertChaos: { revertChaos: {

9
litmus-portal/frontend/src/views/WorkflowDetails/LogsSwitcher/index.tsx
View File

@ -159,7 +159,7 @@ const LogsSwitcher: React.FC<LogsSwitcherProps> = ({
try { try {
const podLogs = JSON.parse(logs); const podLogs = JSON.parse(logs);
return ( return (
<div> <div data-cy="LogsWindow">
<div> <div>
{workflow !== undefined && {workflow !== undefined &&
JSON.parse(workflow?.execution_data).nodes[pod_name].type === JSON.parse(workflow?.execution_data).nodes[pod_name].type ===
@ -245,7 +245,12 @@ const LogsSwitcher: React.FC<LogsSwitcherProps> = ({
<TabPanel value={selectedTab} index={1} style={{ height: '100%' }}> <TabPanel value={selectedTab} index={1} style={{ height: '100%' }}>
<div className={classes.logs}> <div className={classes.logs}>
<div style={{ whiteSpace: 'pre-wrap' }}> <div style={{ whiteSpace: 'pre-wrap' }}>
<Typography className={classes.text}>{chaosResult}</Typography> <Typography
data-cy="ChaosResultTypography"
className={classes.text}
>
{chaosResult}
</Typography>
</div> </div>
</div> </div>
</TabPanel> </TabPanel>