[UI v2] feat: Adds active task runs component

PrefectHQ · Jan 2, 2025 · 38b8c11 · 38b8c11
1 parent fc1ea02
commit 38b8c11
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 5 deletions.
diff --git a/...currency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/index.ts b/...currency/task-run-concurrency-limits/task-run-concurrency-limit-active-task-runs/index.ts
@@ -0,0 +1 @@
+export { TaskRunConcurrencyLimitActiveTaskRuns } from "./task-run-concurrency-limit-active-task-runs";
diff --git a/...oncurrency-limit-active-task-runs/task-run-concurrency-limit-active-task-runs.stories.tsx b/...oncurrency-limit-active-task-runs/task-run-concurrency-limit-active-task-runs.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+	createFakeFlow,
+	createFakeFlowRun,
+	createFakeTaskRun,
+	routerDecorator,
+} from "@/storybook/utils";
+
+import { TaskRunConcurrencyLimitActiveTaskRuns } from "./task-run-concurrency-limit-active-task-runs";
+
+const MOCK_DATA = [
+	{
+		flow: createFakeFlow(),
+		flowRun: createFakeFlowRun(),
+		taskRun: createFakeTaskRun(),
+	},
+	{
+		flow: createFakeFlow(),
+		flowRun: createFakeFlowRun(),
+		taskRun: createFakeTaskRun({ tags: ["foo", "bar", "baz"] }),
+	},
+	{
+		flow: createFakeFlow(),
+		flowRun: createFakeFlowRun(),
+		taskRun: createFakeTaskRun(),
+	},
+	{
+		taskRun: createFakeTaskRun(),
+	},
+	{
+		flow: createFakeFlow(),
+		flowRun: createFakeFlowRun(),
+		taskRun: createFakeTaskRun(),
+	},
+	{
+		taskRun: createFakeTaskRun({ tags: ["foo", "bar", "baz"] }),
+	},
+];
+
+const meta: Meta<typeof TaskRunConcurrencyLimitActiveTaskRuns> = {
+	title:
+		"Components/Concurrency/TaskRunConcurrencyLimits/TaskRunConcurrencyLimitActiveTaskRuns",
+	component: TaskRunConcurrencyLimitActiveTaskRuns,
+	decorators: [routerDecorator],
+	args: { data: MOCK_DATA },
+};
+export default meta;
+
+type Story = StoryObj<typeof TaskRunConcurrencyLimitActiveTaskRuns>;
+
+export const story: Story = {
+	name: "TaskRunConcurrencyLimitActiveTaskRuns",
+};
diff --git a/...currency-limit-active-task-runs/index.tsx → ...un-concurrency-limit-active-task-runs.tsx b/...currency-limit-active-task-runs/index.tsx → ...un-concurrency-limit-active-task-runs.tsx
@@ -1,5 +1,5 @@
 import type { components } from "@/api/prefect";
-import { Typography } from "@/components/ui/typography";
+import { RunCard } from "@/components/ui/run-card";
 
 type Props = {
 	data: Array<{
@@ -11,9 +11,12 @@ type Props = {
 
 export const TaskRunConcurrencyLimitActiveTaskRuns = ({ data }: Props) => {
 	return (
-		<div>
-			<Typography>TODO: Active Task Runs</Typography>
-			{JSON.stringify(data)}
-		</div>
+		<ul className="flex flex-col gap-2">
+			{data.map((d) => (
+				<li key={d.taskRun.id}>
+					<RunCard flow={d.flow} flowRun={d.flowRun} taskRun={d.taskRun} />
+				</li>
+			))}
+		</ul>
 	);
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { TaskRunConcurrencyLimitActiveTaskRuns } from "./task-run-concurrency-limit-active-task-runs";