Several UI Improvements

go.sum

@@ -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=
@@ -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=
@@ -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=

ui/package.json

@@ -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",
@@ -45,5 +46,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/query-string": "^6.3.0"
   }
 }

ui/src/@types/alltypes.d.ts

@@ -0,0 +1 @@
+declare module 'query-string';

ui/src/executions/BusyList.tsx

@@ -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 }>

ui/src/index.css

@@ -19,3 +19,7 @@ code {
   max-height: 300px;
   overflow: auto;
 }
+
+.clock {
+  width: 100px;
+}

ui/src/index.js → ui/src/index.tsx

@@ -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);

ui/src/jobs/BulkRunButton.tsx

@@ -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;

ui/src/jobs/BulkToggleButton.tsx

@@ -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;

ui/src/jobs/JobList.tsx

@@ -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={[
@@ -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>
 );

ui/src/jobs/JobShow.tsx

@@ -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>
@@ -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" />

ui/src/jobs/StatusFiled.tsx

@@ -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;

ui/src/jobs/ZeroDateField.tsx

@@ -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;

ui/src/layout/AppBar.tsx

@@ -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>

ui/src/layout/Clock.tsx

@@ -21,7 +21,7 @@ class Clock extends Component<{}, { date: Date }> {
 
     render(){
         return( 
-            <div>
+            <div className="clock">
                 <div>{this.state.date.toLocaleTimeString()}</div>
             </div>
         )

ui/src/layout/themes.ts

@@ -34,9 +34,6 @@ export const lightTheme = {
         },
         type: 'light' as 'light',
     },
-    shape: {
-        borderRadius: 10,
-    },
     overrides: {
         RaMenuItemLink: {
             root: {