Skip to content

Commit

Permalink
[UI v2] feat: Adds action details for work queues and work pools
Browse files Browse the repository at this point in the history
  • Loading branch information
@devinvillarosa
devinvillarosa committed Jan 20, 2025
1 parent 6b7c1ee commit 7470d56
Show file tree
Hide file tree
Showing 9 changed files with 136 additions and 112 deletions.
65 changes: 62 additions & 3 deletions ui-v2/src/components/automations/action-details/action-details.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
import { Automation } from "@/api/automations";
import { Deployment } from "@/api/deployments";
import { WorkPool } from "@/api/work-pools";
import { 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 = {
Expand Down Expand Up @@ -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
<WorkQueueActionDetails
label={label}
workQueue={createFakeWorkQueue()}
/>
) : (
<InferredAction label={label} />
);
Expand All @@ -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
<WorkPoolActionDetails label={label} workPool={createFakeWorkPool()} />
) : (
<InferredAction label={label} />
);
Expand Down Expand Up @@ -170,3 +182,50 @@ export const AutomationActionDetails = ({
</ActionResource>
);
};

type WorkPoolActionDetailsProps = {
label: ActionLabel;
workPool: WorkPool;
};
export const WorkPoolActionDetails = ({
label,
workPool,
}: WorkPoolActionDetailsProps) => {
return (
<ActionResource>
<label>{label}:</label>
<Link
to="/work-pools/work-pool/$workPoolName"
params={{ workPoolName: workPool.name }}
aria-label={workPool.name}
>
<ActionResourceName iconId="Cpu" name={workPool.name} />
</Link>
</ActionResource>
);
};

type WorkQueueActionDetailsProps = {
label: ActionLabel;
workQueue: WorkQueue;
};
export const WorkQueueActionDetails = ({
label,
workQueue,
}: WorkQueueActionDetailsProps) => {
return (
<ActionResource>
<label>{label}:</label>
<Link
to="/work-pools/work-pool/$workPoolName/queue/$workQueueName"
params={{
workPoolName: workQueue.name,
workQueueName: workQueue.name,
}}
aria-label={workQueue.name}
>
<ActionResourceName iconId="Cpu" name={workQueue.name} />
</Link>
</ActionResource>
);
};
2 changes: 1 addition & 1 deletion ui-v2/src/mocks/create-fake-work-pool.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }),
Expand Down
130 changes: 52 additions & 78 deletions ui-v2/src/routeTree.gen.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,15 @@ 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'
import { Route as DeploymentsDeploymentIdImport } from './routes/deployments/deployment.$id'
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

Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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': {
Expand All @@ -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
}
}
}
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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:
| '/'
Expand All @@ -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__'
| '/'
Expand All @@ -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
}

Expand All @@ -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 = {
Expand All @@ -603,9 +582,8 @@ const rootRouteChildren: RootRouteChildren = {
FlowsFlowIdRoute: FlowsFlowIdRoute,
RunsFlowRunIdRoute: RunsFlowRunIdRoute,
RunsTaskRunIdRoute: RunsTaskRunIdRoute,
WorkPoolsWorkPoolIdRoute: WorkPoolsWorkPoolIdRoute,
WorkPoolsWorkPoolWorkPoolIdRoute:
WorkPoolsWorkPoolWorkPoolIdRouteWithChildren,
WorkPoolsWorkPoolWorkPoolNameRoute:
WorkPoolsWorkPoolWorkPoolNameRouteWithChildren,
}

export const routeTree = rootRoute
Expand Down Expand Up @@ -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"
]
},
"/": {
Expand Down Expand Up @@ -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"
}
}
}
Expand Down
9 changes: 0 additions & 9 deletions ui-v2/src/routes/work-pools/work-pool.$id.tsx
View file

This file was deleted.

11 changes: 0 additions & 11 deletions ui-v2/src/routes/work-pools/work-pool.$workPoolId.queue.$workQueueId.tsx
View file

This file was deleted.

Loading

0 comments on commit 7470d56

Please sign in to comment.