vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add status filters to workflow runs UI (#1639)

Browse Source
This commit is contained in:
Shuchang Zheng
2025-01-25 03:44:10 +08:00
committed by GitHub
parent ef93ad65d3
commit d41bae2383
4 changed files with 73 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
View File

@@ -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 {
@@ -32,18 +32,21 @@ import {
} from "react-router-dom";
import { WorkflowApiResponse } from "./types/workflowTypes";
import { WorkflowActions } from "./WorkflowActions";
import { useState } from "react";
import { StatusFilterDropdown } from "@/components/StatusFilterDropdown";
function WorkflowPage() {
const credentialGetter = useCredentialGetter();
const { workflowPermanentId } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
const [statusFilters, setStatusFilters] = useState<Array<Status>>([]);
const navigate = useNavigate();
const { data: workflowRuns, isLoading } = useQuery<
Array<WorkflowRunApiResponse>
>({
queryKey: ["workflowRuns", workflowPermanentId, page],
queryKey: ["workflowRuns", workflowPermanentId, { statusFilters }, page],
queryFn: async () => {
const client = await getClient(credentialGetter);
const params = new URLSearchParams();
@@ -110,8 +113,12 @@ function WorkflowPage() {
</div>
</header>
<div className="space-y-4">
<header>
<h1 className="text-lg font-semibold">Past Runs</h1>
<header className="flex justify-between">
<h1 className="text-2xl">Past Runs</h1>
<StatusFilterDropdown
values={statusFilters}
onChange={setStatusFilters}
/>
</header>
<div className="rounded-md border">
<Table>

24
skyvern-frontend/src/routes/workflows/Workflows.tsx
View File

@@ -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<Array<Status>>([]);
const workflowsPage = searchParams.get("workflowsPage")
? Number(searchParams.get("workflowsPage"))
: 1;
@@ -65,11 +68,14 @@ function Workflows() {
const { data: workflowRuns, isLoading: workflowRunsIsLoading } = useQuery<
Array<WorkflowRunApiResponse>
>({
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() {
<header>
<div className="flex justify-between">
<h1 className="text-2xl font-semibold">Workflow Runs</h1>
<Button variant="secondary" onClick={handleExport}>
<DownloadIcon className="mr-2" />
Export CSV
</Button>
<div className="flex gap-2">
<StatusFilterDropdown
values={statusFilters}
onChange={setStatusFilters}
/>
<Button variant="secondary" onClick={handleExport}>
<DownloadIcon className="mr-2" />
Export CSV
</Button>
</div>
</div>
</header>
<div className="rounded-md border">