Fix disabled (#1467)

Adapt fields to admin v4
distribworks · Feb 8, 2024 · 665c865 · 665c865
1 parent c35d31e
commit 665c865
Show file tree

Hide file tree

Showing 15 changed files with 171 additions and 66 deletions.
diff --git a/Makefile b/Makefile
@@ -77,7 +77,7 @@ updatetestcert:
 	rm badssl.com-client.p12
 
 ui/node_modules: ui/package.json
-	cd ui; yarn install
+	cd ui; bun install
 	# touch the directory so Make understands it is up to date
 	touch ui/node_modules
 

diff --git a/dkron/ui-dist/assets/index-d296cf7c.js → dkron/ui-dist/assets/index-2356520b.js b/dkron/ui-dist/assets/index-d296cf7c.js → dkron/ui-dist/assets/index-2356520b.js
diff --git a/dkron/ui-dist/index.html b/dkron/ui-dist/index.html
@@ -111,13 +111,14 @@
             href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
             rel="stylesheet"
         />
+        <script>window.global = window;</script>
         <script>window.DKRON_API_URL = {{.DKRON_API_URL }};
             window.DKRON_LEADER = {{.DKRON_LEADER }};
             window.DKRON_TOTAL_JOBS = {{.DKRON_TOTAL_JOBS }};
             window.DKRON_SUCCESSFUL_JOBS = {{.DKRON_SUCCESSFUL_JOBS }};
             window.DKRON_FAILED_JOBS = {{.DKRON_FAILED_JOBS }};
             window.DKRON_UNTRIGGERED_JOBS = {{.DKRON_UNTRIGGERED_JOBS }};</script>
-      <script type="module" crossorigin src="./assets/index-d296cf7c.js"></script>
+      <script type="module" crossorigin src="./assets/index-2356520b.js"></script>
       <link rel="stylesheet" href="./assets/index-73a69410.css">
     </head>
 

diff --git a/ui/bun.lockb b/ui/bun.lockb
diff --git a/ui/index.html b/ui/index.html
@@ -111,6 +111,7 @@
             href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
             rel="stylesheet"
         />
+        <script>window.global = window;</script>
         <script>window.DKRON_API_URL = {{.DKRON_API_URL }};
             window.DKRON_LEADER = {{.DKRON_LEADER }};
             window.DKRON_TOTAL_JOBS = {{.DKRON_TOTAL_JOBS }};

diff --git a/ui/src/dashboard/JobChart.tsx b/ui/src/dashboard/JobChart.tsx
@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { Card, CardHeader, CardContent } from '@mui/material';
+import {
+    ResponsiveContainer,
+    AreaChart,
+    Area,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+} from 'recharts';
+import { useTranslate } from 'react-admin';
+import { format, subDays, addDays } from 'date-fns';
+
+const lastDay = new Date();
+const lastMonthDays = Array.from({ length: 30 }, (_, i) => subDays(lastDay, i));
+const aMonthAgo = subDays(new Date(), 30);
+
+const dateFormatter = (date: number): string =>
+    new Date(date).toLocaleDateString();
+
+const aggregateJobsByHour = (jobs: any): { [key: string]: number } =>
+    jobs
+        .reduce((acc, curr) => {
+            const day = format(new Date(curr.date), 'yyyy-MM-dd');
+            if (!acc[day]) {
+                acc[day] = 0;
+            }
+            acc[day] += curr.total;
+            return acc;
+        }, {} as { [key: string]: number });
+
+const JobChart = (props: { jobs?: any }) => {
+    const { jobs } = props;
+    if (!jobs) return null;
+
+    return (
+        <Card>
+            <CardHeader title="Job Executions" />
+            <CardContent>
+                <div style={{ width: '100%', height: 300 }}>
+                    <ResponsiveContainer>
+                        <AreaChart data={aggregateJobsByHour(props)}>
+                            <defs>
+                                <linearGradient
+                                    id="colorUv"
+                                    x1="0"
+                                    y1="0"
+                                    x2="0"
+                                    y2="1"
+                                >
+                                    <stop
+                                        offset="5%"
+                                        stopColor="#8884d8"
+                                        stopOpacity={0.8}
+                                    />
+                                    <stop
+                                        offset="95%"
+                                        stopColor="#8884d8"
+                                        stopOpacity={0}
+                                    />
+                                </linearGradient>
+                            </defs>
+                            <XAxis
+                                dataKey="date"
+                                name="Date"
+                                type="number"
+                                scale="time"
+                                domain={[
+                                    addDays(aMonthAgo, 1).getTime(),
+                                    new Date().getTime(),
+                                ]}
+                                tickFormatter={dateFormatter}
+                            />
+                            <YAxis dataKey="total" name="Revenue" unit="€" />
+                            <CartesianGrid strokeDasharray="3 3" />
+                            <Tooltip
+                                cursor={{ strokeDasharray: '3 3' }}
+                                formatter={(value: any) =>
+                                    new Intl.NumberFormat(undefined, {
+                                        style: 'currency',
+                                        currency: 'USD',
+                                    }).format(value)
+                                }
+                                labelFormatter={(label: any) =>
+                                    dateFormatter(label)
+                                }
+                            />
+                            <Area
+                                type="monotone"
+                                dataKey="total"
+                                stroke="#8884d8"
+                                strokeWidth={2}
+                                fill="url(#colorUv)"
+                            />
+                        </AreaChart>
+                    </ResponsiveContainer>
+                </div>
+            </CardContent>
+        </Card>
+    );
+};
+
+interface TotalByDay {
+    date: number;
+    total: number;
+}
+
+export default JobChart;
diff --git a/ui/src/jobs/BulkToggleButton.tsx b/ui/src/jobs/BulkToggleButton.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useState } from 'react';
 import {
     useNotify,

diff --git a/ui/src/jobs/EnabledField.tsx b/ui/src/jobs/EnabledField.tsx
@@ -1,9 +1,12 @@
 import SuccessIcon from '@mui/icons-material/CheckCircle';
 import FailedIcon from '@mui/icons-material/Cancel';
 import { Tooltip } from '@mui/material';
+import { useRecordContext } from 'react-admin';
 
-const EnabledField = (props: any) => {
-    if (props.record !== undefined && props.record[props.source] === true) {
+const EnabledField = () => {
+    const record = useRecordContext();
+
+    if (record.disabled) {
         return <Tooltip title="Disabled"><FailedIcon htmlColor="red" /></Tooltip>
     } else {
         return <Tooltip title="Enabled"><SuccessIcon htmlColor="green" /></Tooltip>

diff --git a/ui/src/jobs/JobEdit.tsx b/ui/src/jobs/JobEdit.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { 
     Edit,
     SelectInput,

diff --git a/ui/src/jobs/JobList.tsx b/ui/src/jobs/JobList.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import {
     Datagrid,
     TextField,

diff --git a/ui/src/jobs/JobShow.tsx b/ui/src/jobs/JobShow.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { 
     Datagrid,
     TextField,

diff --git a/ui/src/jobs/RunButton.tsx b/ui/src/jobs/RunButton.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useState } from 'react';
 import { useNotify, useRefresh, Button } from 'react-admin';
 import { apiUrl } from '../dataProvider';

diff --git a/ui/src/jobs/StatusField.tsx b/ui/src/jobs/StatusField.tsx
@@ -1,20 +1,18 @@
-import * as React from "react";
 import SuccessIcon from '@mui/icons-material/CheckCircle';
 import FailedIcon from '@mui/icons-material/Cancel';
 import UntriggeredIcon from '@mui/icons-material/Timer';
 import { Tooltip } from '@mui/material';
+import { useRecordContext } from 'react-admin';
 
-const StatusField = (props: any) => {
-	if (props.record === undefined) {
-		return null
+const StatusField = () => {
+	const record = useRecordContext();
+
+	if (record.status === 'success') {
+		return <Tooltip title="Success"><SuccessIcon htmlColor="green" /></Tooltip> 
+	} else if (record.status === 'failed') {
+		return <Tooltip title="Error"><FailedIcon htmlColor="red" /></Tooltip>
 	} else {
-		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"><UntriggeredIcon htmlColor="blue" /></Tooltip>
-		}
+		return <Tooltip title="Waiting to Run"><UntriggeredIcon htmlColor="blue" /></Tooltip>
 	}
 };
 

diff --git a/ui/src/jobs/ToggleButton.tsx b/ui/src/jobs/ToggleButton.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useState } from 'react';
 import { useNotify, useRefresh, Button } from 'react-admin';
 import { apiUrl } from '../dataProvider';

diff --git a/ui/src/jobs/ZeroDateField.tsx b/ui/src/jobs/ZeroDateField.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { DateField, DateFieldProps } from 'react-admin';
 
 export const ZeroDateField: React.FC<DateFieldProps> = (props) => {