diff --git a/web/app/(app)/workflows/page.tsx b/web/app/(app)/workflows/page.tsx index 704af38..a743d2c 100644 --- a/web/app/(app)/workflows/page.tsx +++ b/web/app/(app)/workflows/page.tsx @@ -9,106 +9,115 @@ import { Button, Card } from "@/components/ui"; import { Table, Thead, Tbody, Tr, Th, Td } from "@/components/ui"; export default function WorkflowsPage() { - const qc = useQueryClient(); - const router = useRouter(); - const [error, setError] = useState(null); + const qc = useQueryClient(); + const router = useRouter(); + const [error, setError] = useState(null); - const { data: workflows, isLoading, error: loadError } = useQuery({ - queryKey: ["workflows"], - queryFn: api.listWorkflows, - }); + const { + data: workflows, + isLoading, + error: loadError, + } = useQuery({ + queryKey: ["workflows"], + queryFn: api.listWorkflows, + }); - const { mutate: create, isPending } = useMutation({ - mutationFn: () => api.createWorkflow({ name: "Untitled workflow", target_server_ids: [], steps: [] }), - onSuccess: (workflow) => { - qc.invalidateQueries({ queryKey: ["workflows"] }); - router.push(`/workflows/${workflow.workflow_id}`); - }, - onError: (err) => setError((err as Error).message), - }); + const { mutate: create, isPending } = useMutation({ + mutationFn: () => api.createWorkflow({ name: "Untitled workflow", target_server_ids: [], steps: [] }), + onSuccess: (workflow) => { + qc.invalidateQueries({ queryKey: ["workflows"] }); + router.push(`/workflows/${workflow.workflow_id}`); + }, + onError: (err) => setError((err as Error).message), + }); - return ( -
-
-
-

Workflows

-

- {workflows?.length ?? 0} workflow{workflows?.length !== 1 ? "s" : ""} · run reusable steps across servers -

-
- -
- - {error && ( -
- {error} -
- )} - - - {isLoading ? ( -
-
-
- ) : loadError ? ( -
Failed to load workflows. Is the backend running?
- ) : workflows && workflows.length > 0 ? ( - - - - - - - - - - {workflows.map((w: Workflow) => ( - - - - - - - ))} - -
NameTargetsSteps -
- {w.name} - - - {w.target_server_ids.length} server{w.target_server_ids.length !== 1 ? "s" : ""} - - - {w.steps.length} - -
- - - - - - -
-
- ) : ( -
-
- - - + return ( +
+
+
+

Workflows

+

+ {workflows?.length ?? 0} workflow{workflows?.length !== 1 ? "s" : ""} · run reusable steps across servers +

+
+
-

No workflows yet.

- -
- )} - -
- ); + + {error &&
{error}
} + + + {isLoading ? ( +
+
+
+ ) : loadError ? ( +
Failed to load workflows. Is the backend running?
+ ) : workflows && workflows.length > 0 ? ( + + + + + + + + + + + {workflows.map((w: Workflow) => ( + + + + + + + + ))} + +
NameTargetsStepsSchedule +
+ {w.name} + + + {w.target_server_ids.length} server{w.target_server_ids.length !== 1 ? "s" : ""} + + + {w.steps.length} + + {w.schedule?.enabled && {w.schedule.cron}} + {w.next_run_at && next {new Date(w.next_run_at).toLocaleString()}} + +
+ + + + + + +
+
+ ) : ( +
+
+ + + +
+

No workflows yet.

+ +
+ )} + +
+ ); }