Skip to content

Commit

Permalink
Several UI Improvements (#891)
Browse files Browse the repository at this point in the history
* Visual status for jobs
* Bulk actions for toggle and run
* Flexible jobs datagrid layout
* Fix clock style
* Fix date rendering on non finished executions
  • Loading branch information
Victor Castell authored Jan 17, 2021
1 parent b4e3aab commit a4dcb94
Show file tree
Hide file tree
Showing 20 changed files with 272 additions and 136 deletions.
150 changes: 75 additions & 75 deletions dkron/assets_ui/assets_vfsdata.go

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions go.sum
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ github.com/armon/go-metrics v0.3.4 h1:Xqf+7f2Vhl9tsqDYmXhnXInUdcrtgpRNpIA15/uldS
github.com/armon/go-metrics v0.3.4/go.mod h1:4O98XIr/9W0sxpJ8UaYkvjk10Iff7SnFrb4QAOwNTFc=
github.com/armon/go-metrics v0.3.5 h1:uq4txK6NAUvLQ60rotN+K+JuTnf3XP4TdQmcs9ma5mk=
github.com/armon/go-metrics v0.3.5/go.mod h1:4O98XIr/9W0sxpJ8UaYkvjk10Iff7SnFrb4QAOwNTFc=
github.com/armon/go-metrics v0.3.6 h1:x/tmtOF9cDBoXH7XoAGOz2qqm1DknFD1590XmD/DUJ8=
github.com/armon/go-metrics v0.3.6/go.mod h1:4O98XIr/9W0sxpJ8UaYkvjk10Iff7SnFrb4QAOwNTFc=
github.com/armon/go-radix v0.0.0-20180808171621-7fddfc383310/go.mod h1:ufUuZ+zHj4x4TnLV4JWEpy2hxWSpsRywHrMgIH9cCH8=
github.com/armon/go-radix v1.0.0/go.mod h1:ufUuZ+zHj4x4TnLV4JWEpy2hxWSpsRywHrMgIH9cCH8=
Expand Down Expand Up @@ -606,8 +607,12 @@ github.com/ryanuber/columnize v2.1.2+incompatible/go.mod h1:sm1tb6uqfes/u+d4ooFo
github.com/samuel/go-zookeeper v0.0.0-20190923202752-2cc03de413da/go.mod h1:gi+0XIa01GRL2eRQVjQkKGqKF3SF9vZR/HnPullcV2E=
github.com/sean-/seed v0.0.0-20170313163322-e2103e2c3529 h1:nn5Wsu0esKSJiIVhscUtVbo7ada43DJhG55ua/hjS5I=
github.com/sean-/seed v0.0.0-20170313163322-e2103e2c3529/go.mod h1:DxrIzT+xaE7yg65j358z/aeFdxmN0P9QXhEzd20vsDc=
github.com/shurcooL/httpfs v0.0.0-20190707220628-8d4bc4ba7749 h1:bUGsEnyNbVPw06Bs80sCeARAlK8lhwqGyi6UT8ymuGk=
github.com/shurcooL/httpfs v0.0.0-20190707220628-8d4bc4ba7749/go.mod h1:ZY1cvUeJuFPAdZ/B6v7RHavJWZn2YPVFQ1OSXhCGOkg=
github.com/shurcooL/sanitized_anchor_name v1.0.0 h1:PdmoCO6wvbs+7yrJyMORt4/BmY5IYyJwS/kOiWx8mHo=
github.com/shurcooL/sanitized_anchor_name v1.0.0/go.mod h1:1NzhyTcUVG4SuEtjjoZeVRXNmyL/1OwPU0+IJeTBvfc=
github.com/shurcooL/vfsgen v0.0.0-20200824052919-0d455de96546 h1:pXY9qYc/MP5zdvqWEUH6SjNiu7VhSjuVFTFiTcphaLU=
github.com/shurcooL/vfsgen v0.0.0-20200824052919-0d455de96546/go.mod h1:TrYk7fJVaAttu97ZZKrO9UbRa8izdowaMIZcxYMbVaw=
github.com/sirupsen/logrus v1.0.6/go.mod h1:pMByvHTf9Beacp5x1UXfOR9xyW/9antXMhjMPG0dEzc=
github.com/sirupsen/logrus v1.2.0/go.mod h1:LxeOpSwHxABJmUn/MG1IvRgCAasNZTLOkJPxbbu5VWo=
github.com/sirupsen/logrus v1.4.2 h1:SPIRibHv4MatM3XXNO2BJeFLZwZ2LvZgfQ5+UNI2im4=
Expand Down Expand Up @@ -669,24 +674,29 @@ github.com/tent/http-link-go v0.0.0-20130702225549-ac974c61c2f9 h1:/Bsw4C+DEdqPj
github.com/tent/http-link-go v0.0.0-20130702225549-ac974c61c2f9/go.mod h1:RHkNRtSLfOK7qBTHaeSX1D6BNpI3qw7NTxsmNr4RvN8=
github.com/tidwall/btree v0.2.2 h1:VVo0JW/tdidNdQzNsDR4wMbL3heaxA1DGleyzQ3/niY=
github.com/tidwall/btree v0.2.2/go.mod h1:huei1BkDWJ3/sLXmO+bsCNELL+Bp2Kks9OLyQFkzvA8=
github.com/tidwall/btree v0.3.0 h1:LcwmLI5kv+AaH/xnBgOuKfbu5eLBWVdWTpD2o+qSRdU=
github.com/tidwall/btree v0.3.0/go.mod h1:huei1BkDWJ3/sLXmO+bsCNELL+Bp2Kks9OLyQFkzvA8=
github.com/tidwall/buntdb v1.1.4 h1:W7y9+2dM3GOswU0t3pz6+BcwZXjj/tVOhPcO6EHufME=
github.com/tidwall/buntdb v1.1.4/go.mod h1:06+/n7EFf6uUaIG5r9xZcExYN3H0Lnc+g/Kqx0fZFkI=
github.com/tidwall/buntdb v1.1.5 h1:rxlXykuv5DjQBFJEmWK6kw5332iAzLmSoWsh1gy1KUo=
github.com/tidwall/buntdb v1.1.5/go.mod h1:06+/n7EFf6uUaIG5r9xZcExYN3H0Lnc+g/Kqx0fZFkI=
github.com/tidwall/buntdb v1.1.7 h1:Dk7KO7RcGgWJTNHt9nYgLxxztgHXWm2C5SfOCXBNrz4=
github.com/tidwall/buntdb v1.1.7/go.mod h1:DqVwIsd7QCInPKRxgr03w165FBuvjLClDy8DrJ+sXJE=
github.com/tidwall/gjson v1.6.1 h1:LRbvNuNuvAiISWg6gxLEFuCe72UKy5hDqhxW/8183ws=
github.com/tidwall/gjson v1.6.1/go.mod h1:BaHyNc5bjzYkPqgLq7mdVzeiRtULKULXLgZFKsxEHI0=
github.com/tidwall/gjson v1.6.7 h1:Mb1M9HZCRWEcXQ8ieJo7auYyyiSux6w9XN3AdTpxJrE=
github.com/tidwall/gjson v1.6.7/go.mod h1:zeFuBCIqD4sN/gmqBzZ4j7Jd6UcA2Fc56x7QFsv+8fI=
github.com/tidwall/grect v0.0.0-20161006141115-ba9a043346eb h1:5NSYaAdrnblKByzd7XByQEJVT8+9v0W/tIY0Oo4OwrE=
github.com/tidwall/grect v0.0.0-20161006141115-ba9a043346eb/go.mod h1:lKYYLFIr9OIgdgrtgkZ9zgRxRdvPYsExnYBsEAd8W5M=
github.com/tidwall/match v1.0.1 h1:PnKP62LPNxHKTwvHHZZzdOAOCtsJTjo6dZLCwpKm5xc=
github.com/tidwall/match v1.0.1/go.mod h1:LujAq0jyVjBy028G1WhWfIzbpQfMO8bBZ6Tyb0+pL9E=
github.com/tidwall/match v1.0.3 h1:FQUVvBImDutD8wJLN6c5eMzWtjgONK9MwIBCOrUJKeE=
github.com/tidwall/match v1.0.3/go.mod h1:eRSPERbgtNPcGhD8UCthc6PmLEQXEWd3PRB5JTxsfmM=
github.com/tidwall/pretty v1.0.2 h1:Z7S3cePv9Jwm1KwS0513MRaoUe3S01WPbLNV40pwWZU=
github.com/tidwall/pretty v1.0.2/go.mod h1:XNkn88O1ChpSDQmQeStsy+sBenx6DDtFZJxhVysOjyk=
github.com/tidwall/rtree v0.0.0-20201027154624-32188eeb08a8 h1:BsKSRhu0TDB6Snq8SutN9KQHc6vqHEXJTcAFwyGNius=
github.com/tidwall/rtree v0.0.0-20201027154624-32188eeb08a8/go.mod h1:/h+UnNGt0IhNNJLkGikcdcJqm66zGD/uJGMRxK/9+Ao=
github.com/tidwall/rtree v0.0.0-20201103190202-0d877048965d h1:RfyBHwIzDt48a28uBzW+W+6rvTJzuYH9OpXBru+CDeo=
github.com/tidwall/rtree v0.0.0-20201103190202-0d877048965d/go.mod h1:/h+UnNGt0IhNNJLkGikcdcJqm66zGD/uJGMRxK/9+Ao=
github.com/tidwall/tinyqueue v0.0.0-20180302190814-1e39f5511563 h1:Otn9S136ELckZ3KKDyCkxapfufrqDqwmGjcHfAyXRrE=
github.com/tidwall/tinyqueue v0.0.0-20180302190814-1e39f5511563/go.mod h1:mLqSmt7Dv/CNneF2wfcChfN1rvapyQr01LGKnKex0DQ=
Expand Down
17 changes: 17 additions & 0 deletions ui/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.5.0",
"@types/react-dom": "^17.0.0",
"@types/react-redux": "^7.1.12",
"@types/react-router-dom": "^5.1.6",
"prop-types": "^15.7.2",
Expand Down Expand Up @@ -45,5 +46,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/query-string": "^6.3.0"
}
}
1 change: 1 addition & 0 deletions ui/src/@types/alltypes.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
declare module 'query-string';
38 changes: 0 additions & 38 deletions ui/src/App.css

This file was deleted.

7 changes: 4 additions & 3 deletions ui/src/executions/BusyList.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import * as React from "react";
import { List, Datagrid, TextField, DateField } from 'react-admin';

export const OutputPanel = ({ id, record, resource }: any) => (
<div className="execution-output" dangerouslySetInnerHTML={{ __html: record.output }} />
);
export const OutputPanel = ({ id, record, resource }: any) => {
let o = record.output || "Empty output";
return (<div className="execution-output" dangerouslySetInnerHTML={{ __html: o }} />);
};

export const BusyList = (props: any) => (
<List {...props} pagination={ false }>
Expand Down
4 changes: 4 additions & 0 deletions ui/src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,7 @@ code {
max-height: 300px;
overflow: auto;
}

.clock {
width: 100px;
}
2 changes: 1 addition & 1 deletion ui/src/index.js → ui/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,4 @@ ReactDOM.render(
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
reportWebVitals(null);
51 changes: 51 additions & 0 deletions ui/src/jobs/BulkRunButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import * as React from 'react';
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import {
useNotify,
fetchStart,
fetchEnd,
Button,
useUnselectAll,
useRefresh,
} from 'react-admin';
import { apiUrl } from '../dataProvider';
import RunIcon from '@material-ui/icons/PlayArrow';

const BulkRunButton = ({selectedIds}: any) => {
const dispatch = useDispatch();
const notify = useNotify();
const refresh = useRefresh();
const unselectAll = useUnselectAll();
const [loading, setLoading] = useState(false);
const runMany = () => {
for(let id of selectedIds) {
setLoading(true);
dispatch(fetchStart()); // start the global loading indicator
fetch(`${apiUrl}/jobs/${id}`, { method: 'POST' })
.then(() => {
notify('Success running job');
})
.catch((e) => {
notify('Error on running job', 'warning')
})
.finally(() => {
setLoading(false);
refresh();
dispatch(fetchEnd()); // stop the global loading indicator
});
}
unselectAll('jobs');
};
return (
<Button
label="Run"
onClick={runMany}
disabled={loading}
>
<RunIcon/>
</Button>
);
};

export default BulkRunButton;
51 changes: 51 additions & 0 deletions ui/src/jobs/BulkToggleButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import * as React from 'react';
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import {
useNotify,
fetchStart,
fetchEnd,
Button,
useUnselectAll,
useRefresh,
} from 'react-admin';
import { apiUrl } from '../dataProvider';
import RunIcon from '@material-ui/icons/PlayArrow';

const BulkToggleButton = ({selectedIds}: any) => {
const dispatch = useDispatch();
const notify = useNotify();
const refresh = useRefresh();
const unselectAll = useUnselectAll();
const [loading, setLoading] = useState(false);
const toggleMany = () => {
for(let id of selectedIds) {
setLoading(true);
dispatch(fetchStart()); // start the global loading indicator
fetch(`${apiUrl}/jobs/${id}/toggle`, { method: 'POST' })
.then(() => {
notify('Job toggled');
})
.catch((e) => {
notify('Error on job toggle', 'warning')
})
.finally(() => {
setLoading(false);
refresh();
dispatch(fetchEnd()); // stop the global loading indicator
});
}
unselectAll('jobs');
};
return (
<Button
label="Toggle"
onClick={toggleMany}
disabled={loading}
>
<RunIcon/>
</Button>
);
};

export default BulkToggleButton;
31 changes: 20 additions & 11 deletions ui/src/jobs/JobList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,15 @@ import {
Filter,
TextInput,
List,
SelectInput
SelectInput,
BulkDeleteButton
} from 'react-admin';
import ToggleButton from "./ToggleButton"
import RunButton from "./RunButton"
import { Fragment } from 'react';
import BulkRunButton from "./BulkRunButton"
import BulkToggleButton from "./BulkToggleButton"
import StatusField from "./StatusFiled"

const PostFilter = (props: any) => (
const JobFilter = (props: any) => (
<Filter {...props}>
<TextInput label="Search" source="q" alwaysOn />
<SelectInput source="status" choices={[
Expand All @@ -24,23 +27,29 @@ const PostFilter = (props: any) => (
</Filter>
);

const JobBulkActionButtons = (props: any) => (
<Fragment>
<BulkRunButton {...props} />
<BulkToggleButton {...props} />
<BulkDeleteButton {...props} />
</Fragment>
);

const JobList = (props: any) => (
<List filters={<PostFilter />} {...props}>
<Datagrid rowClick="show">
<List {...props} filters={<JobFilter />} bulkActionButtons={<JobBulkActionButtons />}>
<Datagrid rowClick="show" style={{tableLayout: 'fixed'}}>
<TextField source="id" />
<TextField source="displayname" />
<TextField source="displayname" label="Display name" />
<TextField source="schedule" />
<NumberField source="success_count" />
<NumberField source="error_count" />
<DateField source="last_success" showTime />
<DateField source="last_error" showTime />
<BooleanField source="disabled" sortable={false} />
<NumberField source="retries" sortable={false} />
<TextField source="status" sortable={false} />
<StatusField source="status" sortable={false} />
<DateField source="next" showTime />
<RunButton />
<ToggleButton />
<EditButton />
<EditButton/>
</Datagrid>
</List>
);
Expand Down
3 changes: 2 additions & 1 deletion ui/src/jobs/JobShow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { OutputPanel } from "../executions/BusyList";
import ToggleButton from "./ToggleButton"
import RunButton from "./RunButton"
import { JsonField } from "react-admin-json-view";
import ZeroDateField from "./ZeroDateField";

const JobShowActions = ({ basePath, data, resource }: any) => (
<TopToolbar>
Expand Down Expand Up @@ -77,7 +78,7 @@ const JobShow = (props: any) => (
<TextField source="group" sortable={false} />
<TextField source="job_name" sortable={false} />
<DateField source="started_at" showTime />
<DateField source="finished_at" showTime />
<ZeroDateField source="finished_at" showTime />
<TextField source="node_name" sortable={false} />
<BooleanField source="success" sortable={false} />
<NumberField source="attempt" />
Expand Down
9 changes: 9 additions & 0 deletions ui/src/jobs/StatusFiled.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import * as React from "react";
import SuccessIcon from '@material-ui/icons/CheckCircle';
import FailedIcon from '@material-ui/icons/Cancel';

const StatusField = (props: any) => {
return (props.record[props.source] === 'success' ? <SuccessIcon htmlColor="green" /> : <FailedIcon htmlColor="red" />);
};

export default StatusField;
13 changes: 13 additions & 0 deletions ui/src/jobs/ZeroDateField.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import * as React from "react";
import { DateField, DateFieldProps } from 'react-admin';

export const ZeroDateField: React.FC<DateFieldProps> = (props) => {
if (props.record !== undefined && props.source !== undefined) {
if (props.record[props.source] === "0001-01-01T00:00:00Z") {
props.record[props.source] = null;
}
}
return (<DateField {...props}/>);
}

export default ZeroDateField;
4 changes: 3 additions & 1 deletion ui/src/layout/AppBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@ const CustomAppBar = (props: any) => {
className={classes.title}
id="react-admin-title"
/>
<img src={logo} alt="logo" className={classes.logo} />
<div>
<img src={logo} alt="logo" className={classes.logo} />
</div>
<span className={classes.spacer} />
<Clock/>
</AppBar>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/layout/Clock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ class Clock extends Component<{}, { date: Date }> {

render(){
return(
<div>
<div className="clock">
<div>{this.state.date.toLocaleTimeString()}</div>
</div>
)
Expand Down
3 changes: 0 additions & 3 deletions ui/src/layout/themes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,6 @@ export const lightTheme = {
},
type: 'light' as 'light',
},
shape: {
borderRadius: 10,
},
overrides: {
RaMenuItemLink: {
root: {
Expand Down
Loading

0 comments on commit a4dcb94

Please sign in to comment.