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}>
<FormControl component="fieldset">
<RadioGroup
data-cy="RecurringSchedule"
aria-label="instanceDef"
name="instanceDef"
value={valueDef}
@ -750,6 +751,7 @@ const ScheduleWorkflow = () => {
Cancel
</ButtonOutlined>
<ButtonFilled
data-cy="VerifyButton"
onClick={() =>
history.push({
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 [finishModalOpen, setFinishModalOpen] = useState(false);
const [errorModal, setErrorModal] = useState(false);
@ -204,7 +205,7 @@ const EditSchedule: React.FC = () => {
const handleEditOpen = () => {
setModified(false);
setOpen(true);
setYAMLOpen(true);
};
const handleEditClose = () => {
@ -253,136 +254,180 @@ const EditSchedule: React.FC = () => {
</Typography>
<div className={classes.root}>
<div className={classes.innerContainer}>
<Typography className={classes.sumText}>
{t('createWorkflow.verifyCommit.summary.header')}
</Typography>
<div className={classes.outerSum}>
<div className={classes.summaryDiv}>
<div className={classes.innerSumDiv}>
<Typography className={classes.col1}>
{t('createWorkflow.verifyCommit.summary.workflowName')}:
</Typography>
</div>
<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')}
{yamlOpen ? (
<div className={classes.editorWrapper}>
<div className={`${classes.flex} ${classes.additional}`}>
<div className={classes.flex}>
<img
style={{ width: '2rem' }}
src="/icons/terminal.svg"
alt="Terminal Icon"
/>
<Typography className={classes.name}>
{fetchWorkflowNameFromManifest(manifest)}.yaml
</Typography>
) : (
<Typography>{cronstrue.toString(cronSyntax)}</Typography>
)}
</div>
<ButtonOutlined
className={classes.editButton}
onClick={() =>
history.push({
pathname: `/workflows/schedule/${projectID}/${fetchWorkflowNameFromManifest(
manifest
)}/set`,
search: `?projectID=${projectID}&projectRole=${userRole}`,
})
}
onClick={() => setYAMLOpen(false)}
className={classes.editorCloseBtn}
>
<EditIcon className={classes.editIcon} data-cy="edit" />
{t('editSchedule.edit')}
x
</ButtonOutlined>
</div>
<YamlEditor
content={manifest}
filename={workflow.name}
readOnly
/>
</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}
/>
))}
) : (
<>
<Typography className={classes.sumText}>
{t('createWorkflow.verifyCommit.summary.header')}
</Typography>
<div className={classes.outerSum}>
<div className={classes.summaryDiv}>
<div className={classes.innerSumDiv}>
<Typography className={classes.col1}>
{t(
'createWorkflow.verifyCommit.summary.workflowName'
)}
:
</Typography>
</div>
<div className={classes.col2} data-cy="WorkflowName">
<Typography>
{fetchWorkflowNameFromManifest(manifest)}
</Typography>
</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')}
<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>
) : (
<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 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>
{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>
{/* Cancel and Save Button */}
@ -397,7 +442,10 @@ const EditSchedule: React.FC = () => {
>
{t('editSchedule.cancel')}
</ButtonOutlined>
<ButtonFilled onClick={() => handleNext()}>
<ButtonFilled
data-cy="SaveEditScheduleButton"
onClick={() => handleNext()}
>
{t('editSchedule.save')}
</ButtonFilled>
</div>

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

@ -227,4 +227,33 @@ export const useStyles = makeStyles((theme: Theme) => ({
fontWeight: 'bold',
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>
</AppBar>
<TabPanel value={workflowDetailsTabValue} index={0}>
<div className={classes.graphView}>
<div
className={classes.graphView}
data-cy="dagreGraphWorkflowLevel"
>
{/* Argo Workflow DAG Graph */}
<ArgoWorkflow
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}>
<FormControl component="fieldset">
<RadioGroup
data-cy="RecurringSchedule"
aria-label="instanceDef"
name="instanceDef"
value={valueDef}

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

@ -795,6 +795,7 @@ const TuneWorkflow = forwardRef((_, ref) => {
{/* Edit Button */}
{manifest !== '' && (
<ButtonOutlined
data-cy="EditSequenceButton"
disabled={isVisualizationComplete}
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: {
minWidth: '40rem',
minHeight: '23rem',
},
revertChaos: {

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

@ -159,7 +159,7 @@ const LogsSwitcher: React.FC<LogsSwitcherProps> = ({
try {
const podLogs = JSON.parse(logs);
return (
<div>
<div data-cy="LogsWindow">
<div>
{workflow !== undefined &&
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%' }}>
<div className={classes.logs}>
<div style={{ whiteSpace: 'pre-wrap' }}>
<Typography className={classes.text}>{chaosResult}</Typography>
<Typography
data-cy="ChaosResultTypography"
className={classes.text}
>
{chaosResult}
</Typography>
</div>
</div>
</TabPanel>