[UI v2] feat: Adds total flow run counter to data table

PrefectHQ · Feb 19, 2025 · 819b22f · 819b22f
1 parent 87aa884
commit 819b22f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/ui-v2/src/components/flow-runs/data-table/data-table.stories.tsx b/ui-v2/src/components/flow-runs/data-table/data-table.stories.tsx
@@ -12,7 +12,7 @@ const MOCK_DATA = Array.from(
 const meta: Meta<typeof FlowRunsDataTable> = {
 	title: "Components/FlowRuns/DataTable/FlowRunsDataTable",
 	decorators: [routerDecorator],
-	args: { flowRuns: MOCK_DATA },
+	args: { flowRuns: MOCK_DATA, flowRunsCount: MOCK_DATA.length },
 	component: FlowRunsDataTable,
 };
 export default meta;

diff --git a/ui-v2/src/components/flow-runs/data-table/data-table.tsx b/ui-v2/src/components/flow-runs/data-table/data-table.tsx
@@ -16,10 +16,15 @@ import {
 import { useMemo } from "react";
 
 import { Flow } from "@/api/flows";
+import { Typography } from "@/components/ui/typography";
+import { pluralize } from "@/utils";
 import { DeploymentCell } from "./deployment-cell";
 import { DurationCell } from "./duration-cell";
 import { NameCell } from "./name-cell";
 import { ParametersCell } from "./parameters-cell";
+import { RunNameSearch } from "./run-name-search";
+import { SortFilter } from "./sort-filter";
+import { StateFilter } from "./state-filter";
 
 export type FlowRunsDataTableRow = FlowRun & {
 	flow: Flow;
@@ -94,9 +99,13 @@ const createColumns = ({
 };
 
 type FlowRunsDataTableProps = {
+	flowRunsCount: number;
 	flowRuns: Array<FlowRunWithDeploymentAndFlow | FlowRunWithFlow>;
 };
-export const FlowRunsDataTable = ({ flowRuns }: FlowRunsDataTableProps) => {
+export const FlowRunsDataTable = ({
+	flowRunsCount,
+	flowRuns,
+}: FlowRunsDataTableProps) => {
 	const showDeployment = useMemo(
 		() => flowRuns.some((flowRun) => "deployment" in flowRun),
 		[flowRuns],
@@ -112,7 +121,35 @@ export const FlowRunsDataTable = ({ flowRuns }: FlowRunsDataTableProps) => {
 	});
 
 	return (
-		<div className="flex flex-col gap-4">
+		<div>
+			<div className="grid sm:grid-cols-2 md:grid-cols-6 lg:grid-cols-12 gap-2 pb-4 items-center">
+				<div className="sm:col-span-2 md:col-span-6 lg:col-span-4 order-last lg:order-first">
+					<Typography variant="bodySmall" className="text-muted-foreground">
+						{flowRunsCount} {pluralize(flowRunsCount, "Flow run")}
+					</Typography>
+				</div>
+				<div className="sm:col-span-2 md:col-span-2 lg:col-span-3">
+					<RunNameSearch
+						// TODO
+						placeholder="Search by run name"
+					/>
+				</div>
+				<div className="xs:col-span-1 md:col-span-2 lg:col-span-3">
+					<StateFilter
+						// TODO
+						selectedFilters={new Set([])}
+						onSelectFilter={() => {}}
+					/>
+				</div>
+				<div className="xs:col-span-1 md:col-span-2 lg:col-span-2">
+					<SortFilter
+						// TODO
+						value={undefined}
+						onSelect={() => {}}
+					/>
+				</div>
+			</div>
+
 			<DataTable table={table} />
 		</div>
 	);

diff --git a/ui-v2/src/components/flow-runs/data-table/state-filter.tsx b/ui-v2/src/components/flow-runs/data-table/state-filter.tsx
@@ -137,7 +137,7 @@ export const StateFilter = ({
 	return (
 		<DropdownMenu open={open} onOpenChange={setOpen}>
 			<DropdownMenuTrigger asChild>
-				<Button variant="outline" className="justify-between">
+				<Button variant="outline" className="justify-between w-full">
 					<span>{renderSelectedTags()}</span>
 					<Icon id="ChevronDown" className="ml-2 h-4 w-4 flex-shrink-0" />
 				</Button>