From 0f0c0a98b1d30ee30d19da37246db63df7c7dcb2 Mon Sep 17 00:00:00 2001 From: Devin Villarosa <102188207+devinvillarosa@users.noreply.github.com> Date: Tue, 21 Jan 2025 08:34:43 -0800 Subject: [PATCH] [UI v2] feat: Adds action details for work queues and work pools (#16784) --- .../action-details/action-details.tsx | 69 +++++++++- ui-v2/src/mocks/create-fake-work-pool.ts | 2 +- ui-v2/src/routeTree.gen.ts | 130 +++++++----------- ui-v2/src/routes/work-pools/work-pool.$id.tsx | 9 -- ...ol.$workPoolName.queue.$workQueueName.tsx} | 2 +- ...PoolId.tsx => work-pool.$workPoolName.tsx} | 2 +- ui-v2/src/storybook/utils/mode-decorator.tsx | 2 +- 7 files changed, 120 insertions(+), 96 deletions(-) delete mode 100644 ui-v2/src/routes/work-pools/work-pool.$id.tsx rename ui-v2/src/routes/work-pools/{work-pool.$workPoolId.queue.$workQueueId.tsx => work-pool.$workPoolName.queue.$workQueueName.tsx} (77%) rename ui-v2/src/routes/work-pools/{work-pool.$workPoolId.tsx => work-pool.$workPoolName.tsx} (94%) diff --git a/ui-v2/src/components/automations/action-details/action-details.tsx b/ui-v2/src/components/automations/action-details/action-details.tsx index cb2eeee01484..7c1410865340 100644 --- a/ui-v2/src/components/automations/action-details/action-details.tsx +++ b/ui-v2/src/components/automations/action-details/action-details.tsx @@ -1,9 +1,16 @@ -import { Automation } from "@/api/automations"; -import { Deployment } from "@/api/deployments"; +import type { Automation } from "@/api/automations"; +import type { Deployment } from "@/api/deployments"; +import type { WorkPool } from "@/api/work-pools"; +import type { WorkQueue } from "@/api/work-queues"; import { Card } from "@/components/ui/card"; import { Icon, IconId } from "@/components/ui/icons"; import { Typography } from "@/components/ui/typography"; -import { createFakeAutomation, createFakeDeployment } from "@/mocks"; +import { + createFakeAutomation, + createFakeDeployment, + createFakeWorkPool, + createFakeWorkQueue, +} from "@/mocks"; import { Link } from "@tanstack/react-router"; const ACTION_TYPE_TO_STRING = { @@ -68,7 +75,11 @@ export const ActionDetailsType = ({ action }: ActionDetailsProps) => { case "pause-work-queue": case "resume-work-queue": return action.work_queue_id && action.source == "selected" ? ( - "TODO" + // TODO: Pass a real work queue from API + ) : ( ); @@ -86,7 +97,8 @@ export const ActionDetailsType = ({ action }: ActionDetailsProps) => { case "pause-work-pool": case "resume-work-pool": return action.work_pool_id && action.source == "selected" ? ( - "TODO" + // TODO: Pass a real work pool from API + ) : ( ); @@ -170,3 +182,50 @@ export const AutomationActionDetails = ({ ); }; + +type WorkPoolActionDetailsProps = { + label: ActionLabel; + workPool: WorkPool; +}; +export const WorkPoolActionDetails = ({ + label, + workPool, +}: WorkPoolActionDetailsProps) => { + return ( + + + + + + + ); +}; + +type WorkQueueActionDetailsProps = { + label: ActionLabel; + workQueue: WorkQueue; +}; +export const WorkQueueActionDetails = ({ + label, + workQueue, +}: WorkQueueActionDetailsProps) => { + return ( + + + + + + + ); +}; diff --git a/ui-v2/src/mocks/create-fake-work-pool.ts b/ui-v2/src/mocks/create-fake-work-pool.ts index 935c3013477f..27ce374525cc 100644 --- a/ui-v2/src/mocks/create-fake-work-pool.ts +++ b/ui-v2/src/mocks/create-fake-work-pool.ts @@ -10,7 +10,7 @@ export const createFakeWorkPool = ( created: faker.date.past().toISOString(), description: `${faker.word.adjective()} ${faker.word.noun()}`, id: faker.string.uuid(), - name: `${faker.word.adjective()} automation`, + name: `${faker.word.adjective()} work pool`, updated: faker.date.past().toISOString(), base_job_template: {}, concurrency_limit: faker.number.int({ min: 0, max: 1_000 }), diff --git a/ui-v2/src/routeTree.gen.ts b/ui-v2/src/routeTree.gen.ts index be37b82ddc4e..a837f7ed9e88 100644 --- a/ui-v2/src/routeTree.gen.ts +++ b/ui-v2/src/routeTree.gen.ts @@ -25,8 +25,7 @@ import { Route as DeploymentsIndexImport } from './routes/deployments/index' import { Route as ConcurrencyLimitsIndexImport } from './routes/concurrency-limits/index' import { Route as AutomationsIndexImport } from './routes/automations/index' import { Route as AutomationsCreateImport } from './routes/automations/create' -import { Route as WorkPoolsWorkPoolWorkPoolIdImport } from './routes/work-pools/work-pool.$workPoolId' -import { Route as WorkPoolsWorkPoolIdImport } from './routes/work-pools/work-pool.$id' +import { Route as WorkPoolsWorkPoolWorkPoolNameImport } from './routes/work-pools/work-pool.$workPoolName' import { Route as RunsTaskRunIdImport } from './routes/runs/task-run.$id' import { Route as RunsFlowRunIdImport } from './routes/runs/flow-run.$id' import { Route as FlowsFlowIdImport } from './routes/flows/flow.$id' @@ -34,7 +33,7 @@ import { Route as DeploymentsDeploymentIdImport } from './routes/deployments/dep import { Route as ConcurrencyLimitsConcurrencyLimitIdImport } from './routes/concurrency-limits/concurrency-limit.$id' import { Route as AutomationsAutomationIdImport } from './routes/automations/automation.$id' import { Route as AutomationsAutomationIdEditImport } from './routes/automations/automation.$id.edit' -import { Route as WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdImport } from './routes/work-pools/work-pool.$workPoolId.queue.$workQueueId' +import { Route as WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameImport } from './routes/work-pools/work-pool.$workPoolName.queue.$workQueueName' // Create/Update Routes @@ -122,19 +121,13 @@ const AutomationsCreateRoute = AutomationsCreateImport.update({ getParentRoute: () => rootRoute, } as any) -const WorkPoolsWorkPoolWorkPoolIdRoute = - WorkPoolsWorkPoolWorkPoolIdImport.update({ - id: '/work-pools/work-pool/$workPoolId', - path: '/work-pools/work-pool/$workPoolId', +const WorkPoolsWorkPoolWorkPoolNameRoute = + WorkPoolsWorkPoolWorkPoolNameImport.update({ + id: '/work-pools/work-pool/$workPoolName', + path: '/work-pools/work-pool/$workPoolName', getParentRoute: () => rootRoute, } as any) -const WorkPoolsWorkPoolIdRoute = WorkPoolsWorkPoolIdImport.update({ - id: '/work-pools/work-pool/$id', - path: '/work-pools/work-pool/$id', - getParentRoute: () => rootRoute, -} as any) - const RunsTaskRunIdRoute = RunsTaskRunIdImport.update({ id: '/runs/task-run/$id', path: '/runs/task-run/$id', @@ -179,11 +172,11 @@ const AutomationsAutomationIdEditRoute = getParentRoute: () => AutomationsAutomationIdRoute, } as any) -const WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute = - WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdImport.update({ - id: '/queue/$workQueueId', - path: '/queue/$workQueueId', - getParentRoute: () => WorkPoolsWorkPoolWorkPoolIdRoute, +const WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute = + WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameImport.update({ + id: '/queue/$workQueueName', + path: '/queue/$workQueueName', + getParentRoute: () => WorkPoolsWorkPoolWorkPoolNameRoute, } as any) // Populate the FileRoutesByPath interface @@ -330,18 +323,11 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof RunsTaskRunIdImport parentRoute: typeof rootRoute } - '/work-pools/work-pool/$id': { - id: '/work-pools/work-pool/$id' - path: '/work-pools/work-pool/$id' - fullPath: '/work-pools/work-pool/$id' - preLoaderRoute: typeof WorkPoolsWorkPoolIdImport - parentRoute: typeof rootRoute - } - '/work-pools/work-pool/$workPoolId': { - id: '/work-pools/work-pool/$workPoolId' - path: '/work-pools/work-pool/$workPoolId' - fullPath: '/work-pools/work-pool/$workPoolId' - preLoaderRoute: typeof WorkPoolsWorkPoolWorkPoolIdImport + '/work-pools/work-pool/$workPoolName': { + id: '/work-pools/work-pool/$workPoolName' + path: '/work-pools/work-pool/$workPoolName' + fullPath: '/work-pools/work-pool/$workPoolName' + preLoaderRoute: typeof WorkPoolsWorkPoolWorkPoolNameImport parentRoute: typeof rootRoute } '/automations/automation/$id/edit': { @@ -351,12 +337,12 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof AutomationsAutomationIdEditImport parentRoute: typeof AutomationsAutomationIdImport } - '/work-pools/work-pool/$workPoolId/queue/$workQueueId': { - id: '/work-pools/work-pool/$workPoolId/queue/$workQueueId' - path: '/queue/$workQueueId' - fullPath: '/work-pools/work-pool/$workPoolId/queue/$workQueueId' - preLoaderRoute: typeof WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdImport - parentRoute: typeof WorkPoolsWorkPoolWorkPoolIdImport + '/work-pools/work-pool/$workPoolName/queue/$workQueueName': { + id: '/work-pools/work-pool/$workPoolName/queue/$workQueueName' + path: '/queue/$workQueueName' + fullPath: '/work-pools/work-pool/$workPoolName/queue/$workQueueName' + preLoaderRoute: typeof WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameImport + parentRoute: typeof WorkPoolsWorkPoolWorkPoolNameImport } } } @@ -377,19 +363,19 @@ const AutomationsAutomationIdRouteWithChildren = AutomationsAutomationIdRouteChildren, ) -interface WorkPoolsWorkPoolWorkPoolIdRouteChildren { - WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute: typeof WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute +interface WorkPoolsWorkPoolWorkPoolNameRouteChildren { + WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute: typeof WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute } -const WorkPoolsWorkPoolWorkPoolIdRouteChildren: WorkPoolsWorkPoolWorkPoolIdRouteChildren = +const WorkPoolsWorkPoolWorkPoolNameRouteChildren: WorkPoolsWorkPoolWorkPoolNameRouteChildren = { - WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute: - WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute, + WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute: + WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute, } -const WorkPoolsWorkPoolWorkPoolIdRouteWithChildren = - WorkPoolsWorkPoolWorkPoolIdRoute._addFileChildren( - WorkPoolsWorkPoolWorkPoolIdRouteChildren, +const WorkPoolsWorkPoolWorkPoolNameRouteWithChildren = + WorkPoolsWorkPoolWorkPoolNameRoute._addFileChildren( + WorkPoolsWorkPoolWorkPoolNameRouteChildren, ) export interface FileRoutesByFullPath { @@ -413,10 +399,9 @@ export interface FileRoutesByFullPath { '/flows/flow/$id': typeof FlowsFlowIdRoute '/runs/flow-run/$id': typeof RunsFlowRunIdRoute '/runs/task-run/$id': typeof RunsTaskRunIdRoute - '/work-pools/work-pool/$id': typeof WorkPoolsWorkPoolIdRoute - '/work-pools/work-pool/$workPoolId': typeof WorkPoolsWorkPoolWorkPoolIdRouteWithChildren + '/work-pools/work-pool/$workPoolName': typeof WorkPoolsWorkPoolWorkPoolNameRouteWithChildren '/automations/automation/$id/edit': typeof AutomationsAutomationIdEditRoute - '/work-pools/work-pool/$workPoolId/queue/$workQueueId': typeof WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute + '/work-pools/work-pool/$workPoolName/queue/$workQueueName': typeof WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute } export interface FileRoutesByTo { @@ -440,10 +425,9 @@ export interface FileRoutesByTo { '/flows/flow/$id': typeof FlowsFlowIdRoute '/runs/flow-run/$id': typeof RunsFlowRunIdRoute '/runs/task-run/$id': typeof RunsTaskRunIdRoute - '/work-pools/work-pool/$id': typeof WorkPoolsWorkPoolIdRoute - '/work-pools/work-pool/$workPoolId': typeof WorkPoolsWorkPoolWorkPoolIdRouteWithChildren + '/work-pools/work-pool/$workPoolName': typeof WorkPoolsWorkPoolWorkPoolNameRouteWithChildren '/automations/automation/$id/edit': typeof AutomationsAutomationIdEditRoute - '/work-pools/work-pool/$workPoolId/queue/$workQueueId': typeof WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute + '/work-pools/work-pool/$workPoolName/queue/$workQueueName': typeof WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute } export interface FileRoutesById { @@ -468,10 +452,9 @@ export interface FileRoutesById { '/flows/flow/$id': typeof FlowsFlowIdRoute '/runs/flow-run/$id': typeof RunsFlowRunIdRoute '/runs/task-run/$id': typeof RunsTaskRunIdRoute - '/work-pools/work-pool/$id': typeof WorkPoolsWorkPoolIdRoute - '/work-pools/work-pool/$workPoolId': typeof WorkPoolsWorkPoolWorkPoolIdRouteWithChildren + '/work-pools/work-pool/$workPoolName': typeof WorkPoolsWorkPoolWorkPoolNameRouteWithChildren '/automations/automation/$id/edit': typeof AutomationsAutomationIdEditRoute - '/work-pools/work-pool/$workPoolId/queue/$workQueueId': typeof WorkPoolsWorkPoolWorkPoolIdQueueWorkQueueIdRoute + '/work-pools/work-pool/$workPoolName/queue/$workQueueName': typeof WorkPoolsWorkPoolWorkPoolNameQueueWorkQueueNameRoute } export interface FileRouteTypes { @@ -497,10 +480,9 @@ export interface FileRouteTypes { | '/flows/flow/$id' | '/runs/flow-run/$id' | '/runs/task-run/$id' - | '/work-pools/work-pool/$id' - | '/work-pools/work-pool/$workPoolId' + | '/work-pools/work-pool/$workPoolName' | '/automations/automation/$id/edit' - | '/work-pools/work-pool/$workPoolId/queue/$workQueueId' + | '/work-pools/work-pool/$workPoolName/queue/$workQueueName' fileRoutesByTo: FileRoutesByTo to: | '/' @@ -523,10 +505,9 @@ export interface FileRouteTypes { | '/flows/flow/$id' | '/runs/flow-run/$id' | '/runs/task-run/$id' - | '/work-pools/work-pool/$id' - | '/work-pools/work-pool/$workPoolId' + | '/work-pools/work-pool/$workPoolName' | '/automations/automation/$id/edit' - | '/work-pools/work-pool/$workPoolId/queue/$workQueueId' + | '/work-pools/work-pool/$workPoolName/queue/$workQueueName' id: | '__root__' | '/' @@ -549,10 +530,9 @@ export interface FileRouteTypes { | '/flows/flow/$id' | '/runs/flow-run/$id' | '/runs/task-run/$id' - | '/work-pools/work-pool/$id' - | '/work-pools/work-pool/$workPoolId' + | '/work-pools/work-pool/$workPoolName' | '/automations/automation/$id/edit' - | '/work-pools/work-pool/$workPoolId/queue/$workQueueId' + | '/work-pools/work-pool/$workPoolName/queue/$workQueueName' fileRoutesById: FileRoutesById } @@ -577,8 +557,7 @@ export interface RootRouteChildren { FlowsFlowIdRoute: typeof FlowsFlowIdRoute RunsFlowRunIdRoute: typeof RunsFlowRunIdRoute RunsTaskRunIdRoute: typeof RunsTaskRunIdRoute - WorkPoolsWorkPoolIdRoute: typeof WorkPoolsWorkPoolIdRoute - WorkPoolsWorkPoolWorkPoolIdRoute: typeof WorkPoolsWorkPoolWorkPoolIdRouteWithChildren + WorkPoolsWorkPoolWorkPoolNameRoute: typeof WorkPoolsWorkPoolWorkPoolNameRouteWithChildren } const rootRouteChildren: RootRouteChildren = { @@ -603,9 +582,8 @@ const rootRouteChildren: RootRouteChildren = { FlowsFlowIdRoute: FlowsFlowIdRoute, RunsFlowRunIdRoute: RunsFlowRunIdRoute, RunsTaskRunIdRoute: RunsTaskRunIdRoute, - WorkPoolsWorkPoolIdRoute: WorkPoolsWorkPoolIdRoute, - WorkPoolsWorkPoolWorkPoolIdRoute: - WorkPoolsWorkPoolWorkPoolIdRouteWithChildren, + WorkPoolsWorkPoolWorkPoolNameRoute: + WorkPoolsWorkPoolWorkPoolNameRouteWithChildren, } export const routeTree = rootRoute @@ -638,8 +616,7 @@ export const routeTree = rootRoute "/flows/flow/$id", "/runs/flow-run/$id", "/runs/task-run/$id", - "/work-pools/work-pool/$id", - "/work-pools/work-pool/$workPoolId" + "/work-pools/work-pool/$workPoolName" ] }, "/": { @@ -705,22 +682,19 @@ export const routeTree = rootRoute "/runs/task-run/$id": { "filePath": "runs/task-run.$id.tsx" }, - "/work-pools/work-pool/$id": { - "filePath": "work-pools/work-pool.$id.tsx" - }, - "/work-pools/work-pool/$workPoolId": { - "filePath": "work-pools/work-pool.$workPoolId.tsx", + "/work-pools/work-pool/$workPoolName": { + "filePath": "work-pools/work-pool.$workPoolName.tsx", "children": [ - "/work-pools/work-pool/$workPoolId/queue/$workQueueId" + "/work-pools/work-pool/$workPoolName/queue/$workQueueName" ] }, "/automations/automation/$id/edit": { "filePath": "automations/automation.$id.edit.ts", "parent": "/automations/automation/$id" }, - "/work-pools/work-pool/$workPoolId/queue/$workQueueId": { - "filePath": "work-pools/work-pool.$workPoolId.queue.$workQueueId.tsx", - "parent": "/work-pools/work-pool/$workPoolId" + "/work-pools/work-pool/$workPoolName/queue/$workQueueName": { + "filePath": "work-pools/work-pool.$workPoolName.queue.$workQueueName.tsx", + "parent": "/work-pools/work-pool/$workPoolName" } } } diff --git a/ui-v2/src/routes/work-pools/work-pool.$id.tsx b/ui-v2/src/routes/work-pools/work-pool.$id.tsx deleted file mode 100644 index ce7470a9a641..000000000000 --- a/ui-v2/src/routes/work-pools/work-pool.$id.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { createFileRoute } from "@tanstack/react-router"; - -export const Route = createFileRoute("/work-pools/work-pool/$id")({ - component: RouteComponent, -}); - -function RouteComponent() { - return "🚧🚧 Pardon our dust! 🚧🚧"; -} diff --git a/ui-v2/src/routes/work-pools/work-pool.$workPoolId.queue.$workQueueId.tsx b/ui-v2/src/routes/work-pools/work-pool.$workPoolName.queue.$workQueueName.tsx similarity index 77% rename from ui-v2/src/routes/work-pools/work-pool.$workPoolId.queue.$workQueueId.tsx rename to ui-v2/src/routes/work-pools/work-pool.$workPoolName.queue.$workQueueName.tsx index 6609e494bf04..44b337a3d652 100644 --- a/ui-v2/src/routes/work-pools/work-pool.$workPoolId.queue.$workQueueId.tsx +++ b/ui-v2/src/routes/work-pools/work-pool.$workPoolName.queue.$workQueueName.tsx @@ -1,7 +1,7 @@ import { createFileRoute } from "@tanstack/react-router"; export const Route = createFileRoute( - "/work-pools/work-pool/$workPoolId/queue/$workQueueId", + "/work-pools/work-pool/$workPoolName/queue/$workQueueName", )({ component: RouteComponent, }); diff --git a/ui-v2/src/routes/work-pools/work-pool.$workPoolId.tsx b/ui-v2/src/routes/work-pools/work-pool.$workPoolName.tsx similarity index 94% rename from ui-v2/src/routes/work-pools/work-pool.$workPoolId.tsx rename to ui-v2/src/routes/work-pools/work-pool.$workPoolName.tsx index 209fa9a5c540..c3aa1765263b 100644 --- a/ui-v2/src/routes/work-pools/work-pool.$workPoolId.tsx +++ b/ui-v2/src/routes/work-pools/work-pool.$workPoolName.tsx @@ -1,6 +1,6 @@ import { createFileRoute } from "@tanstack/react-router"; -export const Route = createFileRoute("/work-pools/work-pool/$workPoolId")({ +export const Route = createFileRoute("/work-pools/work-pool/$workPoolName")({ component: RouteComponent, }); diff --git a/ui-v2/src/storybook/utils/mode-decorator.tsx b/ui-v2/src/storybook/utils/mode-decorator.tsx index b1b6b521ac09..cd8a0b06a50a 100644 --- a/ui-v2/src/storybook/utils/mode-decorator.tsx +++ b/ui-v2/src/storybook/utils/mode-decorator.tsx @@ -17,7 +17,7 @@ export const ModeDecorator: DecoratorFunction = (Story) => { return ( <> -
+