1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
import { FunctionComponent, useMemo } from "react";
import { Text } from "@mantine/core";
import { faPlay } from "@fortawesome/free-solid-svg-icons";
import { ColumnDef, getSortedRowModel } from "@tanstack/react-table";
import { useRunTask } from "@/apis/hooks";
import MutateAction from "@/components/async/MutateAction";
import SimpleTable from "@/components/tables/SimpleTable";
interface Props {
tasks: System.Task[];
}
const Table: FunctionComponent<Props> = ({ tasks }) => {
const runTask = useRunTask();
const columns: ColumnDef<System.Task>[] = useMemo<ColumnDef<System.Task>[]>(
() => [
{
header: "Name",
accessor: "name",
cell: ({
row: {
original: { name },
},
}) => {
return <Text className="table-primary">{name}</Text>;
},
},
{
header: "Interval",
accessor: "interval",
cell: ({
row: {
original: { interval },
},
}) => {
return <Text className="table-no-wrap">{interval}</Text>;
},
},
{
header: "Next Execution",
accessor: "next_run_in",
},
{
header: "Run",
accessor: "job_running",
cell: ({
row: {
original: { job_id: jobId, job_running: jobRunning },
},
}) => {
return (
<MutateAction
label="Run Job"
icon={faPlay}
iconProps={{ spin: jobRunning }}
mutation={runTask}
args={() => jobId}
></MutateAction>
);
},
},
],
[runTask],
);
return (
<SimpleTable
initialState={{ sorting: [{ id: "name", desc: false }] }}
columns={columns}
data={tasks}
enableSorting
getSortedRowModel={getSortedRowModel()}
></SimpleTable>
);
};
export default Table;
|
