Skip to content

Commit

Permalink
Merge pull request #358 from DHI/finz/domainServicesOps/automation-pa…
Browse files Browse the repository at this point in the history 
…ge-new

Update Job Automator Component
  • Loading branch information
@FranzThomsen1089
FranzThomsen1089 authored Jul 26, 2023
2 parents 72486b8 + cc5ca75 commit 6631b3b
Show file tree
Hide file tree
Showing 12 changed files with 320 additions and 96 deletions.
2 changes: 1 addition & 1 deletion packages/react-components/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "0.8.24",
"version": "0.8.35",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
Expand Down
67 changes: 53 additions & 14 deletions packages/react-components/src/Automations/AutomationsList/AutomationsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,19 @@ import {
fetchListAutomations,
getScalarStatus,
updateAutomation,
updateStatusAutomation,
} from '../../api/Automations/AutomationApi';
import Loading from '../../common/Loading/Loading';
import GeneralDialog from '../../common/GeneralDialog/GeneralDialog';
import GeneralDialogProps from '../../common/GeneralDialog/types';
import { applyConditionStatus, applyLastJobIdStatus, applyTriggerStatus, processScalarStatus } from '../helper/helper';
import {
applyConditionStatus,
applyLastJobIdStatus,
applyTriggerStatus,
getFilterExtensions,
processScalarStatus
} from '../helper/helper';
import { ErrorProvider } from '../store';

const DEFAULT_COLUMNS = [
{ title: 'Group', name: 'group' },
Expand All @@ -64,7 +72,9 @@ function AutomationsList(props: AutomationsListProps) {
disabledTriggerNow
} = props;
const classes = AutomationsListStyles();
const filteringColumnExtensions = getFilterExtensions()
const [automations, setAutomations] = useState<AutomationData[]>([])
const [filters, setFilters] = useState([]);
const [detailAutomation, setDetailAutomation] = useState<AutomationData>()
const [windowHeight, setWindowHeight] = useState<number>(window.innerHeight);
const [openFormAutomations, setOpenFormAutomations] = useState(false)
Expand Down Expand Up @@ -230,6 +240,29 @@ function AutomationsList(props: AutomationsListProps) {
});
}

const handleChangeStatusAutomation = async (id, status) => {
try {
await updateStatusAutomation(dataSources, {
id: id,
flag: `${!status}`,
})
const updatedAutomations = automations.map((item) => {
if (item.id === id) {
return { ...item, isEnabled: !item.isEnabled };
}
return item;
});

setAutomations(updatedAutomations);
} catch (error) {
console.log('error update status', error)
}
}

const handleFiltersChange = (newFilters) => {
setFilters(newFilters);
};

const onTriggerNow = (automation) => {
const payload = {
...automation,
Expand Down Expand Up @@ -297,24 +330,29 @@ function AutomationsList(props: AutomationsListProps) {
onClose={handleCloseDetailAutomation}
automation={detailAutomation}
/>
<FormAutomationDialog
disabledTextField={disabledTextField}
dataSources={dataSources}
setLoading={setLoading}
loading={loading}
fetchData={fetchInitialData}
open={openFormAutomations}
onClose={handleCloseFormAutomation}
automation={detailAutomation}
listAutomation={automations}
/>
<ErrorProvider>
<FormAutomationDialog
disabledTextField={disabledTextField}
dataSources={dataSources}
setLoading={setLoading}
loading={loading}
fetchData={fetchInitialData}
open={openFormAutomations}
onClose={handleCloseFormAutomation}
automation={detailAutomation}
listAutomation={automations}
/>
</ErrorProvider>
<Box>
<Paper className={classes.paperStyle}>
<ToolbarAutomations onClick={() => handleOpenFormAutomation(undefined)} />
{loading && <Loading />}
<Grid rows={automations} columns={DEFAULT_COLUMNS} >
<FilteringState defaultFilters={[]} />
<IntegratedFiltering />
<FilteringState
filters={filters}
onFiltersChange={handleFiltersChange}
/>
<IntegratedFiltering columnExtensions={filteringColumnExtensions} />

<SortingState defaultSorting={[{ columnName: 'group', direction: 'asc' }]} />
<IntegratedSorting />
Expand All @@ -332,6 +370,7 @@ function AutomationsList(props: AutomationsListProps) {
onEditAutomation={handleOpenFormAutomation}
onDeleteDialog={handleOpenDeleteDialog}
onTriggerNow={handleTriggerNow}
updateStatus={handleChangeStatusAutomation}
disableTriggerNow={disabledTriggerNow}
isLoading={loading}
/>
Expand Down
29 changes: 22 additions & 7 deletions packages/react-components/src/Automations/helper/cell.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { TableFilterRow, VirtualTable } from '@devexpress/dx-react-grid-material-ui';
import { Box, Chip, Divider, IconButton, List, ListItem, ListItemIcon, ListItemText, Popover, Tooltip } from '@material-ui/core';
import { Box, Chip, Divider, FormControlLabel, IconButton, List, ListItem, ListItemIcon, ListItemText, Popover, Switch, Tooltip, Typography } from '@material-ui/core';
import {
ArrowDropDownCircleOutlined,
DeleteOutline,
Expand All @@ -19,6 +19,7 @@ interface CellProps extends Table.DataCellProps {
onViewAutomation: (automation: AutomationData) => void;
onEditAutomation: (automation: AutomationData) => void;
onDeleteDialog: (id: string) => void
updateStatus: (id: string, status: boolean) => void
onTriggerNow: (automation: AutomationData) => void;
disableTriggerNow: boolean
isLoading: boolean
Expand Down Expand Up @@ -81,6 +82,7 @@ const Cell: React.FC<CellProps> = (props) => {
onEditAutomation,
onDeleteDialog,
onTriggerNow,
updateStatus,
disableTriggerNow,
isLoading,
pageJob,
Expand All @@ -90,10 +92,9 @@ const Cell: React.FC<CellProps> = (props) => {
const classes = CellStyles();

if (column.name === 'jobId') {
// Comment Until Routing Issue Found
// const handleClick = () => {
// window.location.assign(`${pageJob}/${row.taskId}`);
// };
const handleClick = () => {
window.location.assign(`${pageJob}/${row.taskId}`);
};

return (
<td className="MuiTableCell-root">
Expand All @@ -105,7 +106,7 @@ const Cell: React.FC<CellProps> = (props) => {
overflow: 'hidden',
textOverflow: 'ellipsis'
}}
// onClick={handleClick}
onClick={handleClick}
>
{value}
</div>
Expand Down Expand Up @@ -286,7 +287,7 @@ const Cell: React.FC<CellProps> = (props) => {
}}
>
<List>
<ListItem button disabled={disableTriggerNow} onClick={() => onTriggerNow(row)}>
<ListItem button disabled={disableTriggerNow || !row.isEnabled} onClick={() => onTriggerNow(row)}>
<ListItemIcon>
<PlayCircleOutline />
</ListItemIcon>
Expand All @@ -311,6 +312,20 @@ const Cell: React.FC<CellProps> = (props) => {
</ListItemIcon>
<ListItemText primary="Delete" />
</ListItem>
<ListItem>
<FormControlLabel
control={
<Switch
checked={row.isEnabled}
onChange={() => updateStatus(row.id, row.isEnabled)}
name='isEnabled'
color='primary'
/>
}
label={<Typography variant="body1">Enabled</Typography>}
labelPlacement="start"
/>
</ListItem>
</List>
</Popover>
</td>
Expand Down
3 changes: 2 additions & 1 deletion packages/react-components/src/Automations/helper/const.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,5 +71,6 @@ export const schema : JSONSchema7 = {
title: "Interval",
description: "Format: d.hh:mm:ss.ff",
}
}
},
required: ["description"]
};
43 changes: 38 additions & 5 deletions packages/react-components/src/Automations/helper/formAutomationDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
DialogContent,
DialogTitle,
Divider,
FormControl,
IconButton,
InputLabel,
MenuItem,
Expand All @@ -26,6 +25,8 @@ import FormInputTrigger from './formInputTrigger'
import FormInputAutomation from './formInputAutomation'
import { useForm } from './helper';
import { ArrowBack } from '@material-ui/icons';
import { schema, uiSchema } from './const';
import { useErrorContext } from '../store';

const FormAutomationDialog: React.FC<IFormAutomationDialog> = ({
open, onClose, automation, dataSources, fetchData, disabledTextField, listAutomation
Expand All @@ -42,6 +43,7 @@ const FormAutomationDialog: React.FC<IFormAutomationDialog> = ({
const [loading, setLoading] = useState(false)
const [selectedOption, setSelectedOption] = useState('');

const { errors, setErrors } = useErrorContext()
const form = useForm(initialFormValues, initialFormErrors);
const triggerForm = useForm(initialTrigger, initialTriggerError);

Expand Down Expand Up @@ -76,13 +78,14 @@ const FormAutomationDialog: React.FC<IFormAutomationDialog> = ({
const findId = listAutomation.find((item) => item.id === automationId)
if (findId) {
setSelectedOption(automationId)
form.setValues({
form.setValues(prevValues => ({
...prevValues,
taskId: findId.taskId,
hostGroup: findId.hostGroup,
priority: findId.priority,
tag: findId.tag,
isEnabled: findId.isEnabled
});
}));

setParameters(Object.entries(findId.taskParameters || {}).map(([key, value]) => ({ key, value })));

Expand All @@ -99,6 +102,31 @@ const FormAutomationDialog: React.FC<IFormAutomationDialog> = ({

const handleAddTrigger = useCallback(() => {
const triggerParam = triggerParameters[triggerForm.values.type]
let isError = false
if (schema.required?.length > 0) {
schema.required.forEach(elem => {
if (!triggerParam[elem]) {
setErrors((prevErrors) => ({ ...prevErrors, [`root_${elem}`]: 'Field is required.' }));
isError = true
}
})
Object.entries(errors).forEach(([key, value]) => {
if (value) {
isError = true
}
})
if(isError){
return
}
}

const isDuplicate = inputTriggers.triggers.find((item) => item.id === triggerForm.values.triggerId)

if(isDuplicate) {
triggerForm.setErrors(prevValue => ({...prevValue, triggerIdError: 'Duplicated ID' }));
return
}

const newTrigger = {
id: triggerForm.values.triggerId,
description: triggerParam.description,
Expand All @@ -113,7 +141,7 @@ const FormAutomationDialog: React.FC<IFormAutomationDialog> = ({
triggers: [...prevState.triggers, newTrigger],
conditional: triggerForm.values.triggerCondition
}));
}, [triggerForm.values, triggerParameters]);
}, [triggerForm.values, triggerParameters, inputTriggers.triggers]);

const handleChangeTab = useCallback((event, newValue) => {
setTabValue(newValue)
Expand Down Expand Up @@ -166,6 +194,8 @@ const FormAutomationDialog: React.FC<IFormAutomationDialog> = ({
const handleClose = useCallback(() => {
form.setValues(initialFormValues);
triggerForm.setValues(initialTrigger);
form.setErrors(initialFormErrors)
triggerForm.setErrors(initialTriggerError)
setParameters([])
setTriggerParameters({});
setInputTriggers({
Expand Down Expand Up @@ -359,6 +389,8 @@ const FormAutomationDialog: React.FC<IFormAutomationDialog> = ({
handleAddTrigger={handleAddTrigger}
handleChangeStatus={handleChangeStatus}
handleRemoveTrigger={handleRemoveTrigger}
schema={schema}
uiSchema={uiSchema}
/>
)}
</DialogContent>
Expand All @@ -367,4 +399,5 @@ const FormAutomationDialog: React.FC<IFormAutomationDialog> = ({
)
}

export default FormAutomationDialog
export default FormAutomationDialog

8 changes: 7 additions & 1 deletion packages/react-components/src/Automations/helper/formInputTrigger.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ export default function FormInputTrigger({
handleChangeTrigger,
setTriggerParameters,
handleAddTrigger,
schema,
uiSchema,
handleRemoveTrigger,
handleChangeStatus,
}) {
Expand Down Expand Up @@ -59,7 +61,9 @@ export default function FormInputTrigger({
</Typography>
<TextField
error={triggerErrors.triggerIdError}
helperText={triggerErrors.triggerIdError ? "Trigger Id is required" : ""}
helperText={
triggerErrors.triggerIdError && (typeof triggerErrors.triggerIdError === "string" ?
triggerErrors.triggerIdError : "Trigger Id is required")}
name='triggerId'
variant="outlined"
size="small"
Expand Down Expand Up @@ -106,6 +110,8 @@ export default function FormInputTrigger({
triggerType={trigger.type}
setTriggerValues={setTriggerParameters}
triggerValues={triggerParameters}
schema={schema}
uiSchema={uiSchema}
/>
</Grid>
<Grid item xs={12} className={classes.gridAddButton}>
Expand Down
19 changes: 19 additions & 0 deletions packages/react-components/src/Automations/helper/helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,25 @@ export const processScalarStatus = (scalarStatus) => {
return { conditionStatusMap, lastJobIdMap, triggerStatusMap };
}

export const getFilterExtensions = () => {
return [{
columnName: 'isEnabled',
predicate: (value, filter, row) => {
if (filter && filter.value) {
let filterValue = filter.value.toLowerCase();
if (value && 'yes'.includes(filterValue)) {
return true;
}
if (!value && 'no'.includes(filterValue)) {
return true;
}
}
return false;
}
}];
};


export function useForm(initialValues, initialErrors) {
const [values, setValues] = useState(initialValues);
const [errors, setErrors] = useState(initialErrors);
Expand Down
Loading

0 comments on commit 6631b3b

Please sign in to comment.