Implement workflows tab, workflow runs view, ability to run workflows from UI (#582)
Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
This commit is contained in:
Kerem Yilmaz
154
skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx
Normal file
154
skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import { getClient } from "@/api/AxiosClient";
|
||||
import { WorkflowParameter } from "@/api/types";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
} from "@/components/ui/form";
|
||||
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { WorkflowParameterInput } from "./WorkflowParameterInput";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { toast } from "@/components/ui/use-toast";
|
||||
import { ReloadIcon } from "@radix-ui/react-icons";
|
||||
|
||||
type Props = {
|
||||
workflowParameters: Array<WorkflowParameter>;
|
||||
initialValues: Record<string, unknown>;
|
||||
};
|
||||
|
||||
function RunWorkflowForm({ workflowParameters, initialValues }: Props) {
|
||||
const { workflowPermanentId } = useParams();
|
||||
const credentialGetter = useCredentialGetter();
|
||||
const queryClient = useQueryClient();
|
||||
const form = useForm({
|
||||
defaultValues: initialValues,
|
||||
});
|
||||
|
||||
const runWorkflowMutation = useMutation({
|
||||
mutationFn: async (values: Record<string, unknown>) => {
|
||||
const client = await getClient(credentialGetter);
|
||||
return client
|
||||
.post(`/workflows/${workflowPermanentId}/run`, {
|
||||
data: values,
|
||||
})
|
||||
.then((response) => response.data);
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["workflowRuns"],
|
||||
});
|
||||
toast({
|
||||
variant: "success",
|
||||
title: "Workflow run started",
|
||||
description: "The workflow run has been started successfully",
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "Failed to start workflow run",
|
||||
description: error.message,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function onSubmit(values: Record<string, unknown>) {
|
||||
const parsedValues = Object.fromEntries(
|
||||
Object.entries(values).map(([key, value]) => {
|
||||
const parameter = workflowParameters?.find(
|
||||
(parameter) => parameter.key === key,
|
||||
);
|
||||
if (parameter?.workflow_parameter_type === "json") {
|
||||
try {
|
||||
return [key, JSON.parse(value as string)];
|
||||
} catch {
|
||||
console.error("Invalid JSON"); // this should never happen, it should fall to form error
|
||||
return [key, value];
|
||||
}
|
||||
}
|
||||
// can improve this via the type system maybe
|
||||
if (
|
||||
parameter?.workflow_parameter_type === "file_url" &&
|
||||
value !== null &&
|
||||
typeof value === "object" &&
|
||||
"s3uri" in value
|
||||
) {
|
||||
return [key, value.s3uri];
|
||||
}
|
||||
return [key, value];
|
||||
}),
|
||||
);
|
||||
runWorkflowMutation.mutate(parsedValues);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
{workflowParameters?.map((parameter) => {
|
||||
return (
|
||||
<FormField
|
||||
key={parameter.key}
|
||||
control={form.control}
|
||||
name={parameter.key}
|
||||
rules={{
|
||||
validate: (value) => {
|
||||
if (
|
||||
parameter.workflow_parameter_type === "json" &&
|
||||
typeof value === "string"
|
||||
) {
|
||||
try {
|
||||
JSON.parse(value);
|
||||
return true;
|
||||
} catch (e) {
|
||||
return "Invalid JSON";
|
||||
}
|
||||
}
|
||||
},
|
||||
}}
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>{parameter.key}</FormLabel>
|
||||
<FormControl>
|
||||
<WorkflowParameterInput
|
||||
type={parameter.workflow_parameter_type}
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
{parameter.description && (
|
||||
<FormDescription>
|
||||
{parameter.description}
|
||||
</FormDescription>
|
||||
)}
|
||||
{form.formState.errors[parameter.key] && (
|
||||
<div className="text-destructive">
|
||||
{form.formState.errors[parameter.key]?.message}
|
||||
</div>
|
||||
)}
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<Button type="submit" disabled={runWorkflowMutation.isPending}>
|
||||
{runWorkflowMutation.isPending && (
|
||||
<ReloadIcon className="mr-2 w-4 h-4 animate-spin" />
|
||||
)}
|
||||
Run workflow
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { RunWorkflowForm };
|
||||
140
skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
Normal file
140
skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import { getClient } from "@/api/AxiosClient";
|
||||
import { WorkflowRunApiResponse } from "@/api/types";
|
||||
import { StatusBadge } from "@/components/StatusBadge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
|
||||
import { cn } from "@/util/utils";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
Link,
|
||||
useNavigate,
|
||||
useParams,
|
||||
useSearchParams,
|
||||
} from "react-router-dom";
|
||||
|
||||
function WorkflowPage() {
|
||||
const credentialGetter = useCredentialGetter();
|
||||
const { workflowPermanentId } = useParams();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { data: workflowRuns, isLoading } = useQuery<
|
||||
Array<WorkflowRunApiResponse>
|
||||
>({
|
||||
queryKey: ["workflowRuns", workflowPermanentId, page],
|
||||
queryFn: async () => {
|
||||
const client = await getClient(credentialGetter);
|
||||
const params = new URLSearchParams();
|
||||
params.append("page", String(page));
|
||||
return client
|
||||
.get(`/workflows/${workflowPermanentId}/runs`, {
|
||||
params,
|
||||
})
|
||||
.then((response) => response.data);
|
||||
},
|
||||
});
|
||||
|
||||
if (!workflowPermanentId) {
|
||||
return null; // this should never happen
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<header className="flex justify-between">
|
||||
<h1 className="text-lg font-semibold">{workflowPermanentId}</h1>
|
||||
<Button asChild>
|
||||
<Link to="run">Create New Run</Link>
|
||||
</Button>
|
||||
</header>
|
||||
<div>
|
||||
<header>
|
||||
<h1 className="text-lg font-semibold">Past Runs</h1>
|
||||
</header>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-1/2">ID</TableHead>
|
||||
<TableHead className="w-1/2">Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{isLoading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={2}>Loading...</TableCell>
|
||||
</TableRow>
|
||||
) : workflowRuns?.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={2}>No workflow runs found</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
workflowRuns?.map((workflowRun) => (
|
||||
<TableRow
|
||||
key={workflowRun.workflow_run_id}
|
||||
onClick={() => {
|
||||
navigate(`${workflowRun.workflow_run_id}`);
|
||||
}}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<TableCell>{workflowRun.workflow_run_id}</TableCell>
|
||||
<TableCell>
|
||||
<StatusBadge status={workflowRun.status} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Pagination className="pt-2">
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
href="#"
|
||||
className={cn({ "cursor-not-allowed": page === 1 })}
|
||||
onClick={() => {
|
||||
if (page === 1) {
|
||||
return;
|
||||
}
|
||||
const params = new URLSearchParams();
|
||||
params.set("page", String(Math.max(1, page - 1)));
|
||||
setSearchParams(params);
|
||||
}}
|
||||
/>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">{page}</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
href="#"
|
||||
onClick={() => {
|
||||
const params = new URLSearchParams();
|
||||
params.set("page", String(page + 1));
|
||||
setSearchParams(params);
|
||||
}}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { WorkflowPage };
|
||||
@@ -0,0 +1,65 @@
|
||||
import { WorkflowParameterType } from "@/api/types";
|
||||
import { FileInputValue, FileUpload } from "@/components/FileUpload";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
type Props = {
|
||||
type: WorkflowParameterType;
|
||||
value: unknown;
|
||||
onChange: (value: unknown) => void;
|
||||
};
|
||||
|
||||
function WorkflowParameterInput({ type, value, onChange }: Props) {
|
||||
if (type === "json" || type === "string") {
|
||||
return (
|
||||
<Textarea
|
||||
value={value as string}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
rows={5}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "integer") {
|
||||
return (
|
||||
<Input
|
||||
value={value as number}
|
||||
onChange={(e) => onChange(parseInt(e.target.value))}
|
||||
type="number"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "float") {
|
||||
return (
|
||||
<Input
|
||||
value={value as number}
|
||||
onChange={(e) => onChange(parseFloat(e.target.value))}
|
||||
type="number"
|
||||
step="any"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "boolean") {
|
||||
return (
|
||||
<Checkbox
|
||||
checked={value as boolean}
|
||||
onCheckedChange={(checked) => onChange(checked)}
|
||||
className="block"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "file_url") {
|
||||
return (
|
||||
<FileUpload
|
||||
value={value as FileInputValue}
|
||||
onChange={(value) => onChange(value)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export { WorkflowParameterInput };
|
||||
157
skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
Normal file
157
skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import { getClient } from "@/api/AxiosClient";
|
||||
import { TaskApiResponse, WorkflowRunStatusApiResponse } from "@/api/types";
|
||||
import { StatusBadge } from "@/components/StatusBadge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { TaskListSkeletonRows } from "../tasks/list/TaskListSkeletonRows";
|
||||
import { basicTimeFormat } from "@/util/timeFormat";
|
||||
import { TaskActions } from "../tasks/list/TaskActions";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
function WorkflowRun() {
|
||||
const { workflowRunId, workflowPermanentId } = useParams();
|
||||
const credentialGetter = useCredentialGetter();
|
||||
const navigate = useNavigate();
|
||||
const { data: workflowRun, isLoading: workflowRunIsLoading } =
|
||||
useQuery<WorkflowRunStatusApiResponse>({
|
||||
queryKey: ["workflowRun", workflowPermanentId, workflowRunId],
|
||||
queryFn: async () => {
|
||||
const client = await getClient(credentialGetter);
|
||||
return client
|
||||
.get(`/workflows/${workflowPermanentId}/runs/${workflowRunId}`)
|
||||
.then((response) => response.data);
|
||||
},
|
||||
});
|
||||
|
||||
const { data: workflowTasks, isLoading: workflowTasksIsLoading } = useQuery<
|
||||
Array<TaskApiResponse>
|
||||
>({
|
||||
queryKey: ["workflowTasks", workflowRunId],
|
||||
queryFn: async () => {
|
||||
const client = await getClient(credentialGetter);
|
||||
return client
|
||||
.get(`/tasks?workflow_run_id=${workflowRunId}`)
|
||||
.then((response) => response.data);
|
||||
},
|
||||
});
|
||||
|
||||
function handleNavigate(event: React.MouseEvent, id: string) {
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
window.open(
|
||||
window.location.origin + `/tasks/${id}/actions`,
|
||||
"_blank",
|
||||
"noopener,noreferrer",
|
||||
);
|
||||
} else {
|
||||
navigate(`${id}/actions`);
|
||||
}
|
||||
}
|
||||
|
||||
const parameters = workflowRun?.parameters ?? {};
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<header className="flex gap-2">
|
||||
<h1 className="text-lg font-semibold">{workflowRunId}</h1>
|
||||
{workflowRunIsLoading ? (
|
||||
<Skeleton className="w-28 h-8" />
|
||||
) : workflowRun ? (
|
||||
<StatusBadge status={workflowRun?.status} />
|
||||
) : null}
|
||||
</header>
|
||||
<div className="space-y-4">
|
||||
<header>
|
||||
<h2 className="text-lg font-semibold">Tasks</h2>
|
||||
</header>
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-1/4">ID</TableHead>
|
||||
<TableHead className="w-1/4">URL</TableHead>
|
||||
<TableHead className="w-1/6">Status</TableHead>
|
||||
<TableHead className="w-1/4">Created At</TableHead>
|
||||
<TableHead className="w-1/12" />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{workflowTasksIsLoading ? (
|
||||
<TaskListSkeletonRows />
|
||||
) : workflowTasks?.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5}>
|
||||
This workflow run does not have any tasks
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
workflowTasks?.map((task) => {
|
||||
return (
|
||||
<TableRow key={task.task_id}>
|
||||
<TableCell
|
||||
className="w-1/4 cursor-pointer"
|
||||
onClick={(event) => handleNavigate(event, task.task_id)}
|
||||
>
|
||||
{task.task_id}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="w-1/4 cursor-pointer max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis"
|
||||
onClick={(event) => handleNavigate(event, task.task_id)}
|
||||
>
|
||||
{task.request.url}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="w-1/6 cursor-pointer"
|
||||
onClick={(event) => handleNavigate(event, task.task_id)}
|
||||
>
|
||||
<StatusBadge status={task.status} />
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="w-1/4 cursor-pointer"
|
||||
onClick={(event) => handleNavigate(event, task.task_id)}
|
||||
>
|
||||
{basicTimeFormat(task.created_at)}
|
||||
</TableCell>
|
||||
<TableCell className="w-1/12">
|
||||
<TaskActions task={task} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<header>
|
||||
<h2 className="text-lg font-semibold">Parameters</h2>
|
||||
</header>
|
||||
{Object.entries(parameters).map(([key, value]) => {
|
||||
return (
|
||||
<div key={key} className="flex flex-col gap-2">
|
||||
<Label>{key}</Label>
|
||||
{typeof value === "string" ? (
|
||||
<Input value={value} readOnly />
|
||||
) : (
|
||||
<Input value={JSON.stringify(value)} readOnly />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { WorkflowRun };
|
||||
@@ -0,0 +1,90 @@
|
||||
import { getClient } from "@/api/AxiosClient";
|
||||
import { WorkflowApiResponse, WorkflowParameterType } from "@/api/types";
|
||||
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { RunWorkflowForm } from "./RunWorkflowForm";
|
||||
|
||||
function defaultValue(type: WorkflowParameterType) {
|
||||
switch (type) {
|
||||
case "string":
|
||||
return "";
|
||||
case "integer":
|
||||
return 0;
|
||||
case "float":
|
||||
return 0.0;
|
||||
case "boolean":
|
||||
return false;
|
||||
case "json":
|
||||
return null;
|
||||
case "file_url":
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function WorkflowRunParameters() {
|
||||
const credentialGetter = useCredentialGetter();
|
||||
const { workflowPermanentId } = useParams();
|
||||
|
||||
const { data: workflow, isFetching } = useQuery<WorkflowApiResponse>({
|
||||
queryKey: ["workflow", workflowPermanentId],
|
||||
queryFn: async () => {
|
||||
const client = await getClient(credentialGetter);
|
||||
return client
|
||||
.get(`/workflows/${workflowPermanentId}`)
|
||||
.then((response) => response.data);
|
||||
},
|
||||
});
|
||||
|
||||
const workflowParameters = workflow?.workflow_definition.parameters.filter(
|
||||
(parameter) => parameter.parameter_type === "workflow",
|
||||
);
|
||||
|
||||
const initialValues = workflowParameters?.reduce(
|
||||
(acc, curr) => {
|
||||
if (curr.workflow_parameter_type === "file_url") {
|
||||
acc[curr.key] = null;
|
||||
return acc;
|
||||
}
|
||||
if (curr.workflow_parameter_type === "json") {
|
||||
if (typeof curr.default_value === "string") {
|
||||
acc[curr.key] = curr.default_value;
|
||||
return acc;
|
||||
}
|
||||
if (curr.default_value) {
|
||||
acc[curr.key] = JSON.stringify(curr.default_value, null, 2);
|
||||
return acc;
|
||||
}
|
||||
}
|
||||
if (curr.default_value) {
|
||||
acc[curr.key] = curr.default_value;
|
||||
return acc;
|
||||
}
|
||||
acc[curr.key] = defaultValue(curr.workflow_parameter_type);
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, unknown>,
|
||||
);
|
||||
|
||||
if (isFetching) {
|
||||
return <div>Getting workflow parameters...</div>;
|
||||
}
|
||||
|
||||
if (!workflow || !workflowParameters || !initialValues) {
|
||||
return <div>Workflow not found</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<header>
|
||||
<h1 className="text-2xl font-semibold">Workflow Run Parameters</h1>
|
||||
</header>
|
||||
<RunWorkflowForm
|
||||
initialValues={initialValues}
|
||||
workflowParameters={workflowParameters}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { WorkflowRunParameters };
|
||||
236
skyvern-frontend/src/routes/workflows/Workflows.tsx
Normal file
236
skyvern-frontend/src/routes/workflows/Workflows.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
import { getClient } from "@/api/AxiosClient";
|
||||
import { WorkflowApiResponse, WorkflowRunApiResponse } from "@/api/types";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { WorkflowsBetaAlertCard } from "./WorkflowsBetaAlertCard";
|
||||
import { StatusBadge } from "@/components/StatusBadge";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
import { cn } from "@/util/utils";
|
||||
|
||||
function Workflows() {
|
||||
const credentialGetter = useCredentialGetter();
|
||||
const navigate = useNavigate();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const workflowsPage = searchParams.get("workflowsPage")
|
||||
? Number(searchParams.get("workflowsPage"))
|
||||
: 1;
|
||||
const workflowRunsPage = searchParams.get("workflowRunsPage")
|
||||
? Number(searchParams.get("workflowRunsPage"))
|
||||
: 1;
|
||||
|
||||
const { data: workflows, isLoading } = useQuery<Array<WorkflowApiResponse>>({
|
||||
queryKey: ["workflows", workflowsPage],
|
||||
queryFn: async () => {
|
||||
const client = await getClient(credentialGetter);
|
||||
const params = new URLSearchParams();
|
||||
params.append("page", String(workflowsPage));
|
||||
params.append("only_workflows", "true");
|
||||
return client
|
||||
.get(`/workflows`, {
|
||||
params,
|
||||
})
|
||||
.then((response) => response.data);
|
||||
},
|
||||
});
|
||||
|
||||
const { data: workflowRuns, isLoading: workflowRunsIsLoading } = useQuery<
|
||||
Array<WorkflowRunApiResponse>
|
||||
>({
|
||||
queryKey: ["workflowRuns", workflowRunsPage],
|
||||
queryFn: async () => {
|
||||
const client = await getClient(credentialGetter);
|
||||
const params = new URLSearchParams();
|
||||
params.append("page", String(workflowRunsPage));
|
||||
return client
|
||||
.get("/workflows/runs", {
|
||||
params,
|
||||
})
|
||||
.then((response) => response.data);
|
||||
},
|
||||
});
|
||||
|
||||
if (workflows?.length === 0 && workflowsPage === 1) {
|
||||
return <WorkflowsBetaAlertCard />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<header>
|
||||
<h1 className="text-2xl font-semibold">Workflows</h1>
|
||||
</header>
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-1/2">ID</TableHead>
|
||||
<TableHead className="w-1/2">Title</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{isLoading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={2}>Loading...</TableCell>
|
||||
</TableRow>
|
||||
) : workflows?.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={2}>No workflows found</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
workflows?.map((workflow) => {
|
||||
return (
|
||||
<TableRow
|
||||
key={workflow.workflow_permanent_id}
|
||||
onClick={() => {
|
||||
navigate(`${workflow.workflow_permanent_id}`);
|
||||
}}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<TableCell className="w-1/2">
|
||||
{workflow.workflow_permanent_id}
|
||||
</TableCell>
|
||||
<TableCell className="w-1/2">{workflow.title}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Pagination className="pt-2">
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
href="#"
|
||||
className={cn({ "cursor-not-allowed": workflowsPage === 1 })}
|
||||
onClick={() => {
|
||||
if (workflowsPage === 1) {
|
||||
return;
|
||||
}
|
||||
const params = new URLSearchParams();
|
||||
params.set(
|
||||
"workflowsPage",
|
||||
String(Math.max(1, workflowsPage - 1)),
|
||||
);
|
||||
setSearchParams(params);
|
||||
}}
|
||||
/>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">{workflowsPage}</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
href="#"
|
||||
onClick={() => {
|
||||
const params = new URLSearchParams();
|
||||
params.set("workflowsPage", String(workflowsPage + 1));
|
||||
setSearchParams(params);
|
||||
}}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
<header>
|
||||
<h1 className="text-2xl font-semibold">Workflow Runs</h1>
|
||||
</header>
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-1/3">Workflow ID</TableHead>
|
||||
<TableHead className="w-1/3">Workflow Run ID</TableHead>
|
||||
<TableHead className="w-1/3">Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{workflowRunsIsLoading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={3}>Loading...</TableCell>
|
||||
</TableRow>
|
||||
) : workflowRuns?.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={3}>No workflow runs found</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
workflowRuns?.map((workflowRun) => {
|
||||
return (
|
||||
<TableRow
|
||||
key={workflowRun.workflow_run_id}
|
||||
onClick={() => {
|
||||
navigate(
|
||||
`/workflows/${workflowRun.workflow_permanent_id}/${workflowRun.workflow_run_id}`,
|
||||
);
|
||||
}}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<TableCell className="w-1/3">
|
||||
{workflowRun.workflow_permanent_id}
|
||||
</TableCell>
|
||||
<TableCell className="w-1/3">
|
||||
{workflowRun.workflow_run_id}
|
||||
</TableCell>
|
||||
<TableCell className="w-1/3">
|
||||
<StatusBadge status={workflowRun.status} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Pagination className="pt-2">
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
href="#"
|
||||
className={cn({ "cursor-not-allowed": workflowRunsPage === 1 })}
|
||||
onClick={() => {
|
||||
if (workflowRunsPage === 1) {
|
||||
return;
|
||||
}
|
||||
const params = new URLSearchParams();
|
||||
params.set(
|
||||
"workflowRunsPage",
|
||||
String(Math.max(1, workflowRunsPage - 1)),
|
||||
);
|
||||
setSearchParams(params);
|
||||
}}
|
||||
/>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">{workflowRunsPage}</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
href="#"
|
||||
onClick={() => {
|
||||
const params = new URLSearchParams();
|
||||
params.set("workflowRunsPage", String(workflowRunsPage + 1));
|
||||
setSearchParams(params);
|
||||
}}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { Workflows };
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
function WorkflowsBetaAlertCard() {
|
||||
return (
|
||||
<div className="shadow rounded-lg bg-slate-900 flex flex-col items-center p-4">
|
||||
<header>
|
||||
<h1 className="text-3xl py-4">Workflows (Beta)</h1>
|
||||
</header>
|
||||
<div>Workflows through UI are currently under construction.</div>
|
||||
<div>
|
||||
Today, you can create and run workflows through the Skyvern API.
|
||||
</div>
|
||||
<div className="flex gap-4 py-4">
|
||||
<Button asChild>
|
||||
<a
|
||||
href="https://docs.skyvern.com/workflows/creating-workflows"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
See the workflow docs
|
||||
</a>
|
||||
</Button>
|
||||
<Button asChild>
|
||||
<a
|
||||
href="https://meetings.hubspot.com/suchintan"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Book a demo
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { WorkflowsBetaAlertCard };
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Outlet } from "react-router-dom";
|
||||
|
||||
function WorkflowsPageLayout() {
|
||||
return (
|
||||
<main className="container mx-auto px-8">
|
||||
<Outlet />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export { WorkflowsPageLayout };
|
||||
Reference in New Issue
Block a user