Added Pristine Jobs to React UI

MGSousa · Mar 10, 2021 · 31c6324 · 31c6324
1 parent 20ab436
commit 31c6324
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 70 deletions.
diff --git a/dkron/assets_ui/assets_vfsdata.go b/dkron/assets_ui/assets_vfsdata.go
diff --git a/dkron/store.go b/dkron/store.go
@@ -125,6 +125,9 @@ func (s *Store) SetJob(job *Job, copyDependentJobs bool) error {
 	}
 
 	err := s.db.Update(func(tx *buntdb.Tx) error {
+		// set pristine as default for newly created jobs
+		job.Status = "pristine"
+
 		// Get if the requested job already exist
 		err := s.getJobTxFunc(job.Name, &pbej)(tx)
 		if err != nil && err != buntdb.ErrNotFound {

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -13,6 +13,7 @@ declare global {
     interface Window {
         DKRON_API_URL: string;
         DKRON_LEADER: string;
+        DKRON_PRISTINE_JOBS: string;
         DKRON_FAILED_JOBS: string;
         DKRON_SUCCESSFUL_JOBS: string;
         DKRON_TOTAL_JOBS: string;

diff --git a/ui/src/dashboard/Dashboard.tsx b/ui/src/dashboard/Dashboard.tsx
@@ -5,6 +5,7 @@ import { TagsField } from '../TagsField'
 import Leader from './Leader';
 import FailedJobs from './FailedJobs';
 import SuccessfulJobs from './SuccessfulJobs';
+import PristineJobs from './PristineJobs';
 import TotalJobs from './TotalJobs';
 
 let fakeProps = {
@@ -46,6 +47,8 @@ const Dashboard = () => (
                             <SuccessfulJobs value={window.DKRON_SUCCESSFUL_JOBS || "0"} />
                             <Spacer />
                             <FailedJobs value={window.DKRON_FAILED_JOBS || "0"} />
+                            <Spacer />
+                            <PristineJobs value={window.DKRON_PRISTINE_JOBS || "0"} />
                         </div>
                     </div>
                 </div>

diff --git a/ui/src/dashboard/PristineJobs.tsx b/ui/src/dashboard/PristineJobs.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { FC } from 'react';
+import Icon from '@material-ui/icons/NewReleases';
+
+import CardWithIcon from './CardWithIcon';
+
+interface Props {
+    value?: string;
+}
+
+const PristineJobs: FC<Props> = ({ value }) => {
+    return (
+        <CardWithIcon
+            to='/jobs?filter={"status":"pristine"}'
+            icon={Icon}
+            title='Pristine Jobs'
+            subtitle={value}
+        />
+    );
+};
+
+export default PristineJobs;
diff --git a/ui/src/jobs/JobList.tsx b/ui/src/jobs/JobList.tsx
@@ -23,6 +23,7 @@ const JobFilter = (props: any) => (
         <SelectInput source="status" choices={[
             { id: 'success', name: 'Success' },
             { id: 'failed', name: 'Failed' },
+            { id: 'pristine', name: 'Waiting to Run' },
         ]} />
     </Filter>
 );

diff --git a/ui/src/jobs/StatusFiled.tsx b/ui/src/jobs/StatusFiled.tsx
@@ -1,10 +1,17 @@
 import * as React from "react";
 import SuccessIcon from '@material-ui/icons/CheckCircle';
 import FailedIcon from '@material-ui/icons/Cancel';
+import PristineIcon from '@material-ui/icons/Timer';
 import { Tooltip } from '@material-ui/core';
 
 const StatusField = (props: any) => {
-  return (props.record[props.source] === 'success' ? <Tooltip title="Success"><SuccessIcon htmlColor="green" /></Tooltip> : <Tooltip title="Success"><FailedIcon htmlColor="red" /></Tooltip>);
+	if (props.record[props.source] === 'success') {
+		return <Tooltip title="Success"><SuccessIcon htmlColor="green" /></Tooltip> 
+	} else if (props.record[props.source] === 'failed') {
+		return <Tooltip title="Error"><FailedIcon htmlColor="red" /></Tooltip>
+	} else {
+		return <Tooltip title="Waiting to Run"><PristineIcon htmlColor="blue" /></Tooltip>
+	}
 };
 
 export default StatusField;