diff --git a/skyvern-frontend/src/components/StatusFilterDropdown.tsx b/skyvern-frontend/src/components/StatusFilterDropdown.tsx index 86a1649e..27d629ee 100644 --- a/skyvern-frontend/src/components/StatusFilterDropdown.tsx +++ b/skyvern-frontend/src/components/StatusFilterDropdown.tsx @@ -8,18 +8,60 @@ import { import { Checkbox } from "./ui/checkbox"; import { Status } from "@/api/types"; +type StatusDropdownItem = { + label: string; + value: Status; +}; + +const statusDropdownItems: Array = [ + { + label: "Completed", + value: Status.Completed, + }, + { + label: "Failed", + value: Status.Failed, + }, + { + label: "Running", + value: Status.Running, + }, + { + label: "Queued", + value: Status.Queued, + }, + { + label: "Terminated", + value: Status.Terminated, + }, + { + label: "Canceled", + value: Status.Canceled, + }, + { + label: "Timed Out", + value: Status.TimedOut, + }, + { + label: "Created", + value: Status.Created, + }, +]; + type Item = { label: string; value: Status; }; type Props = { - options: Array; values: Array; onChange: (values: Array) => void; + options?: Array; }; function StatusFilterDropdown({ options, values, onChange }: Props) { + const dropdownOptions = options ?? statusDropdownItems; // allow options to be overridden by the user of this component + return ( @@ -28,7 +70,7 @@ function StatusFilterDropdown({ options, values, onChange }: Props) { - {options.map((item) => { + {dropdownOptions.map((item) => { return (
= [ - { - label: "Completed", - value: Status.Completed, - }, - { - label: "Failed", - value: Status.Failed, - }, - { - label: "Running", - value: Status.Running, - }, - { - label: "Queued", - value: Status.Queued, - }, - { - label: "Terminated", - value: Status.Terminated, - }, - { - label: "Canceled", - value: Status.Canceled, - }, - { - label: "Timed Out", - value: Status.TimedOut, - }, - { - label: "Created", - value: Status.Created, - }, -]; - function TaskHistory() { const credentialGetter = useCredentialGetter(); const [searchParams, setSearchParams] = useSearchParams(); @@ -152,7 +112,6 @@ function TaskHistory() {
-
-

Past Runs

+
+

Past Runs

+
diff --git a/skyvern-frontend/src/routes/workflows/Workflows.tsx b/skyvern-frontend/src/routes/workflows/Workflows.tsx index d194590c..5222ce68 100644 --- a/skyvern-frontend/src/routes/workflows/Workflows.tsx +++ b/skyvern-frontend/src/routes/workflows/Workflows.tsx @@ -1,5 +1,5 @@ import { getClient } from "@/api/AxiosClient"; -import { WorkflowRunApiResponse } from "@/api/types"; +import { Status, WorkflowRunApiResponse } from "@/api/types"; import { StatusBadge } from "@/components/StatusBadge"; import { Button } from "@/components/ui/button"; import { @@ -35,11 +35,14 @@ import { WorkflowApiResponse } from "./types/workflowTypes"; import { WorkflowActions } from "./WorkflowActions"; import { WorkflowsPageBanner } from "./WorkflowsPageBanner"; import { WorkflowTitle } from "./WorkflowTitle"; +import { useState } from "react"; +import { StatusFilterDropdown } from "@/components/StatusFilterDropdown"; function Workflows() { const credentialGetter = useCredentialGetter(); const navigate = useNavigate(); const [searchParams, setSearchParams] = useSearchParams(); + const [statusFilters, setStatusFilters] = useState>([]); const workflowsPage = searchParams.get("workflowsPage") ? Number(searchParams.get("workflowsPage")) : 1; @@ -65,11 +68,14 @@ function Workflows() { const { data: workflowRuns, isLoading: workflowRunsIsLoading } = useQuery< Array >({ - queryKey: ["workflowRuns", workflowRunsPage], + queryKey: ["workflowRuns", { statusFilters }, workflowRunsPage], queryFn: async () => { const client = await getClient(credentialGetter); const params = new URLSearchParams(); params.append("page", String(workflowRunsPage)); + statusFilters.forEach((status) => { + params.append("status", status); + }); return client .get("/workflows/runs", { params, @@ -277,10 +283,16 @@ function Workflows() {

Workflow Runs

- +
+ + +