Skip to content

Commit

Permalink
Merge pull request #196 from yohamta/feat/improve-web-ui
Browse files Browse the repository at this point in the history 
feat: update web UI
  • Loading branch information
@yottahmd
yottahmd authored Jul 11, 2022
2 parents c586f25 + d0ee400 commit 2e48c01
Show file tree
Hide file tree
Showing 22 changed files with 475 additions and 512 deletions.
2 changes: 1 addition & 1 deletion admin/src/components/BorderedBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function BorderedBox({
<Box
sx={{
border: 1,
borderColor: 'grey.300',
borderColor: '#485fc7',
borderRadius: '6px',
...sx,
}}
Expand Down
67 changes: 17 additions & 50 deletions admin/src/components/ConfigInfoTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,36 @@
import React, { CSSProperties } from 'react';
import React from 'react';
import { Config } from '../models/Config';
import MultilineText from './MultilineText';
import {
Table,
TableBody,
TableCell,
TableHead,
TableRow,
} from '@mui/material';
import BorderedBox from './BorderedBox';
import { Stack, Box } from '@mui/material';
import LabeledItem from './LabeledItem';

type Props = {
config: Config;
};

function ConfigInfoTable({ config }: Props) {
const tableStyle: CSSProperties = {
tableLayout: 'fixed',
wordWrap: 'break-word',
};
const styles = configTabColStyles;
const preconditions = config.Preconditions.map((c) => (
<li>
{c.Condition}
{' => '}
{c.Expected}
</li>
));
let i = 0;
return (
<BorderedBox>
<Table sx={tableStyle}>
<TableHead>
<TableRow>
<TableCell style={styles[i++]}>Name</TableCell>
<TableCell style={styles[i++]}>Description</TableCell>
<TableCell style={styles[i++]}>MaxActiveRuns</TableCell>
<TableCell style={styles[i++]}>Params</TableCell>
<TableCell style={styles[i++]}>Preconditions</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell> {config.Name} </TableCell>
<TableCell>
<MultilineText>{config.Description}</MultilineText>
</TableCell>
<TableCell> {config.MaxActiveRuns} </TableCell>
<TableCell> {config.DefaultParams} </TableCell>
<TableCell>
<ul>{preconditions}</ul>
</TableCell>
</TableRow>
</TableBody>
</Table>
</BorderedBox>
<Stack direction="column" spacing={1}>
<LabeledItem label="Name">{config.Name}</LabeledItem>
<LabeledItem label="Description">{config.Description}</LabeledItem>
<LabeledItem label="Max Active Runs">{config.MaxActiveRuns}</LabeledItem>
<LabeledItem label="Params">{config.Params}</LabeledItem>
<Stack direction={'column'}>
<React.Fragment>
<LabeledItem label="Pre Conditions">{null}</LabeledItem>
<Box sx={{ pl: 2 }}>
<ul>{preconditions}</ul>
</Box>
</React.Fragment>
</Stack>
</Stack>
);
}

export default ConfigInfoTable;

const configTabColStyles = [
{ maxWidth: '200px' },
{ maxWidth: '200px' },
{ maxWidth: '150px' },
{ maxWidth: '150px' },
{},
];
4 changes: 2 additions & 2 deletions admin/src/components/DAGActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ function ActionButton({
return label ? (
<Button
variant="contained"
color="info"
color="primary"
size="small"
startIcon={icon}
disabled={disabled}
Expand All @@ -142,7 +142,7 @@ function ActionButton({
{children}
</Button>
) : (
<IconButton color="info" size="small" onClick={onClick} disabled={disabled}>
<IconButton color="primary" size="small" onClick={onClick} disabled={disabled}>
{icon}
</IconButton>
);
Expand Down
262 changes: 130 additions & 132 deletions admin/src/components/DAGConfig.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,155 +29,153 @@ function DAGConfig({ data }: Props) {
data.DAG &&
data.DAG.Config && (
<React.Fragment>
<BorderedBox
sx={{
pb: 4,
px: 2,
mx: 4,
display: 'flex',
flexDirection: 'column',
overflowX: 'auto',
borderTopWidth: 0,
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
}}
>
<Box
<Box>
<SubTitle>Config</SubTitle>
<BorderedBox
sx={{
mt: 2,
py: 2,
px: 2,
display: 'flex',
flexDirection: 'column',
overflowX: 'auto',
}}
>
<Graph steps={data.DAG.Config.Steps} type="config"></Graph>
</Box>
</BorderedBox>

<Box sx={{ mx: 4 }}>
<Box sx={{ mt: 3 }}>
<SubTitle>DAG Config</SubTitle>
<Box sx={{ mt: 2 }}>
<ConfigInfoTable config={data.DAG.Config!}></ConfigInfoTable>
<Box
sx={{
overflowX: 'auto',
}}
>
<Graph steps={data.DAG.Config.Steps} type="config"></Graph>
</Box>
</BorderedBox>
</Box>

<Box sx={{ mt: 3 }}>
<SubTitle>DAG Config</SubTitle>
<Box sx={{ mt: 2 }}>
<ConfigInfoTable config={data.DAG.Config!}></ConfigInfoTable>
</Box>
</Box>
<Box sx={{ mt: 3 }}>
<Box sx={{ mt: 2 }}>
<SubTitle>Step Config</SubTitle>
<ConfigStepTable
steps={data.DAG.Config.Steps}
></ConfigStepTable>
</Box>
</Box>
{handlers && handlers.length ? (
<Box sx={{ mt: 3 }}>
<SubTitle>Handler Config</SubTitle>
<Box sx={{ mt: 2 }}>
<SubTitle>Step Config</SubTitle>
<ConfigStepTable
steps={data.DAG.Config.Steps}
></ConfigStepTable>
<ConfigStepTable steps={handlers}></ConfigStepTable>
</Box>
</Box>
{handlers && (
<Box sx={{ mt: 3 }}>
<SubTitle>Handler Config</SubTitle>
<Box sx={{ mt: 2 }}>
<ConfigStepTable steps={handlers}></ConfigStepTable>
</Box>
</Box>
)}
) : null}

<Box sx={{ mt: 3 }}>
<SubTitle>Config Editor</SubTitle>
<BorderedBox
sx={{
mt: 2,
px: 2,
pt: 1,
display: 'flex',
flexDirection: 'column',
}}
<Box sx={{ mt: 3 }}>
<SubTitle>Config Editor</SubTitle>
<BorderedBox
sx={{
mt: 2,
px: 2,
py: 1,
display: 'flex',
flexDirection: 'column',
}}
>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
<Box
sx={{
color: 'grey.600',
}}
>
<Box
sx={{
color: 'grey.600',
}}
>
{data.DAG.Config.ConfigPath}
</Box>
{editing ? (
<Stack direction="row">
<Button
id="save-config"
color="primary"
variant="contained"
startIcon={
<span className="icon">
<i className="fa-solid fa-floppy-disk"></i>
</span>
}
onClick={async () => {
const formData = new FormData();
formData.append('action', 'save');
formData.append('value', currentValue);
const url = `${API_URL}/dags/${props.name}`;
const resp = await fetch(url, {
method: 'POST',
headers: {
Accept: 'application/json',
},
body: formData,
});
if (resp.ok) {
setEditing(false);
props.refresh();
} else {
const e = await resp.text();
alert(e);
}
}}
>
Save
</Button>
<Button
color="error"
variant="contained"
onClick={() => setEditing(false)}
sx={{ ml: 2 }}
startIcon={
<span className="icon">
<i className="fa-solid fa-xmark"></i>
</span>
}
>
Cancel
</Button>
</Stack>
) : (
<Stack direction="row">
<Button
id="edit-config"
variant="contained"
color="info"
onClick={() => setEditing(true)}
startIcon={
<span className="icon">
<i className="fa-solid fa-pen-to-square"></i>
</span>
}
>
Edit
</Button>
</Stack>
)}
</Stack>
{data.DAG.Config.ConfigPath}
</Box>
{editing ? (
<Box sx={{ mt: 2 }}>
<ConfigEditor
value={data.Definition}
onChange={(newValue) => {
setCurrentValue(newValue);
<Stack direction="row">
<Button
id="save-config"
color="primary"
variant="contained"
startIcon={
<span className="icon">
<i className="fa-solid fa-floppy-disk"></i>
</span>
}
onClick={async () => {
const formData = new FormData();
formData.append('action', 'save');
formData.append('value', currentValue);
const url = `${API_URL}/dags/${props.name}`;
const resp = await fetch(url, {
method: 'POST',
headers: {
Accept: 'application/json',
},
body: formData,
});
if (resp.ok) {
setEditing(false);
props.refresh();
} else {
const e = await resp.text();
alert(e);
}
}}
></ConfigEditor>
</Box>
>
Save
</Button>
<Button
color="error"
variant="contained"
onClick={() => setEditing(false)}
sx={{ ml: 2 }}
startIcon={
<span className="icon">
<i className="fa-solid fa-xmark"></i>
</span>
}
>
Cancel
</Button>
</Stack>
) : (
<ConfigPreview value={data.Definition} />
<Stack direction="row">
<Button
id="edit-config"
variant="contained"
color="info"
onClick={() => setEditing(true)}
startIcon={
<span className="icon">
<i className="fa-solid fa-pen-to-square"></i>
</span>
}
>
Edit
</Button>
</Stack>
)}
</BorderedBox>
</Box>
</Stack>
{editing ? (
<Box sx={{ mt: 2 }}>
<ConfigEditor
value={data.Definition}
onChange={(newValue) => {
setCurrentValue(newValue);
}}
></ConfigEditor>
</Box>
) : (
<ConfigPreview value={data.Definition} />
)}
</BorderedBox>
</Box>
</React.Fragment>
)
Expand Down
Loading

0 comments on commit 2e48c01

Please sign in to comment.