type(ux): Adding enable schedule (ux-issue 14) + fixing ux issue 7 and 11 (#2824)

* Adding enable schedule (ux-issue 14) + fixing ux issue 7 and 11
* Updating logic for Disable and Enable schedule
* Removing comments

Signed-off-by: Sayan Mondal <sayan@chaosnative.com>
This commit is contained in:
Sayan Mondal 2021-05-20 17:39:48 +05:30 committed by GitHub
parent 16866af9c0
commit be94b251bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 11 deletions

View File

@ -402,6 +402,7 @@ chaosWorkflows:
editSchedule: Edit Schedule
scheduleIsDisabled: This Schedule is disabled now
disableSchedule: Disable Schedule
enableSchedule: Enable Schedule
saveTemplate: Save Template
updateEngine: 'Note: Make sure to update the chaos engine names'
saveChanges: Save Changes

View File

@ -37,13 +37,13 @@ import useStyles from './styles';
interface TableDataProps {
data: ScheduleWorkflow;
deleteRow: (wfid: string) => void;
handleDisableSchedule: (schedule: ScheduleWorkflow) => void;
handleToggleSchedule: (schedule: ScheduleWorkflow) => void;
}
const TableData: React.FC<TableDataProps> = ({
data,
deleteRow,
handleDisableSchedule,
handleToggleSchedule,
}) => {
const classes = useStyles();
const { t } = useTranslation();
@ -396,7 +396,7 @@ const TableData: React.FC<TableDataProps> = ({
<MenuItem
value="Disable"
onClick={() => {
handleDisableSchedule(data);
handleToggleSchedule(data);
}}
>
<div className={classes.expDiv}>
@ -414,6 +414,30 @@ const TableData: React.FC<TableDataProps> = ({
</div>
</MenuItem>
)}
{projectRole !== 'Viewer' &&
YAML.parse(data.workflow_manifest).spec.suspend === true && (
<MenuItem
value="Enable"
onClick={() => {
handleToggleSchedule(data);
}}
>
<div className={classes.expDiv}>
<img
src="/icons/disableSchedule.svg"
alt="Enable Schedule"
className={classes.btnImg}
/>
<Typography
data-cy="enableSchedule"
className={classes.downloadText}
>
{t('chaosWorkflows.browseSchedules.enableSchedule')}
</Typography>
</div>
</MenuItem>
)}
<MenuItem
value="Download"
onClick={() =>

View File

@ -29,6 +29,7 @@ import {
SCHEDULE_DETAILS,
UPDATE_SCHEDULE,
} from '../../../graphql';
import { WeightMap } from '../../../models/graphql/createWorkflowData';
import {
DeleteSchedule,
ScheduleDataVars,
@ -44,7 +45,6 @@ import {
} from '../../../utils/sort';
import useStyles from './styles';
import TableData from './TableData';
import { WeightMap } from '../../../models/graphql/createWorkflowData';
interface FilterOption {
search: string;
@ -86,13 +86,18 @@ const BrowseSchedule: React.FC = () => {
suspended: 'All',
});
const [disableSchedule] = useMutation(UPDATE_SCHEDULE, {
const [updateSchedule] = useMutation(UPDATE_SCHEDULE, {
refetchQueries: [{ query: SCHEDULE_DETAILS, variables: { projectID } }],
});
const handleDisableSchedule = (schedule: ScheduleWorkflow) => {
// Disable and re-enable a schedule
const handleToggleSchedule = (schedule: ScheduleWorkflow) => {
const yaml = YAML.parse(schedule.workflow_manifest);
if (yaml.spec.suspend === undefined || yaml.spec.suspend === false) {
yaml.spec.suspend = true;
} else {
yaml.spec.suspend = false;
}
const weightData: WeightMap[] = [];
@ -103,7 +108,7 @@ const BrowseSchedule: React.FC = () => {
});
});
disableSchedule({
updateSchedule({
variables: {
ChaosWorkFlowInput: {
workflow_id: schedule.workflow_id,
@ -366,7 +371,7 @@ const BrowseSchedule: React.FC = () => {
<TableData
data={data}
deleteRow={deleteRow}
handleDisableSchedule={handleDisableSchedule}
handleToggleSchedule={handleToggleSchedule}
/>
</TableRow>
))

View File

@ -91,7 +91,7 @@ const BrowseAWorkflow: React.FC<BrowseTemplateProps> = ({ location }) => {
{/* Buttons */}
<div className={classes.spaceBetween}>
<ButtonOutlined onClick={() => history.push('/workflows')}>
<ButtonOutlined onClick={() => history.goBack()}>
{t('browseTemplate.back')}
</ButtonOutlined>
<ButtonFilled variant="success" onClick={() => preSelectWorkflow()}>

View File

@ -113,7 +113,7 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
<MenuItem value="All">All</MenuItem>
<MenuItem value="Failed">Failed</MenuItem>
<MenuItem value="Running">Running</MenuItem>
<MenuItem value="Succeeded">Succeeded</MenuItem>
<MenuItem value="Succeeded">Completed</MenuItem>
</Select>
</FormControl>