@prefecthq/prefect-ui-library 3.0.0 → 3.0.2

package/dist/types/src/components/DeploymentsCount.vue.d.ts

@@ -1,6 +1,8 @@
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    count: number;
     flowId: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    count: number;
     flowId: string;
 }>>>, {}, {}>;
 export default _default;

package/dist/types/src/compositions/useDeploymentsCount.d.ts

@@ -3,4 +3,5 @@ import { DeploymentsFilter } from '../models';
 import { WorkspaceDeploymentsApi } from '../services/WorkspaceDeploymentsApi';
 import { UseEntitySubscription } from '../types/useEntitySubscription';
 export type UseDeploymentsCount = UseEntitySubscription<WorkspaceDeploymentsApi['getDeploymentsCount'], 'count'>;
+/** @deprecated prefer to use the dedicated /ui/flows/count-deployments bulk endpoint since this is an expensive bespoke query */
 export declare function useDeploymentsCount(filter?: MaybeRefOrGetter<DeploymentsFilter>): UseDeploymentsCount;

package/dist/types/src/compositions/useWorkspaceRoutes.d.ts

@@ -72,6 +72,13 @@ export declare function useWorkspaceRoutes(): {
             tab?: string | undefined;
         } | undefined;
     };
+    flowRuns: () => {
+        readonly name: "workspace.flow-runs";
+        readonly params: {
+            readonly accountId?: string | undefined;
+            readonly workspaceId?: string | undefined;
+        };
+    };
     flowRun: (flowRunId: string) => {
         readonly name: "workspace.runs.flow-run";
         readonly params: {

package/dist/types/src/models/api/UiDeploymentsCountsByFlow.d.ts

@@ -0,0 +1 @@
+export type UiDeploymentsCountsByFlow = Record<string, number>;

package/dist/types/src/models/api/index.d.ts

@@ -32,6 +32,7 @@ export * from './StateResponse';
 export * from './StateUpdateRequest';
 export * from './TaskInputResponse';
 export * from './TaskRunResponse';
+export * from './UiDeploymentsCountsByFlow';
 export * from './UiFlowRunHistoryResponse';
 export * from './WorkerCollectionItemResponse';
 export * from './WorkerScheduledFlowRunResponse';

package/dist/types/src/router/index.d.ts

@@ -6,7 +6,8 @@ export type Route = Exclude<RouteLocationRaw, string>;
 type WorkspaceRoutes = ReturnType<typeof createWorkspaceRoutes>;
 type WorkspaceRouteKey = keyof WorkspaceRoutes;
 type WorkspaceRoute = ReturnType<WorkspaceRoutes[WorkspaceRouteKey]>;
-export type WorkspaceNamedRoute = WorkspaceRoute['name'];
+export type DeprecatedNamedRoutes = 'workspace.flow-runs' | 'workspace.flow-runs.flow-run' | 'workspace.flow-runs.task-run';
+export type WorkspaceNamedRoute = WorkspaceRoute['name'] | DeprecatedNamedRoutes;
 type WorkspaceRouteRecordParent = {
     name?: WorkspaceNamedRoute;
     children: WorkspaceRouteRecord[];

package/dist/types/src/router/routes.d.ts

@@ -77,6 +77,14 @@ export declare function createWorkspaceRoutes(config?: CreateWorkspaceRoutesConf
             tab?: string | undefined;
         } | undefined;
     };
+    /** @deprecated use workspace.runs instead */
+    flowRuns: () => {
+        readonly name: "workspace.flow-runs";
+        readonly params: {
+            readonly accountId?: string | undefined;
+            readonly workspaceId?: string | undefined;
+        };
+    };
     flowRun: (flowRunId: string) => {
         readonly name: "workspace.runs.flow-run";
         readonly params: {

package/dist/types/src/services/UiApi.d.ts

@@ -1,3 +1,4 @@
+import { UiDeploymentsCountsByFlow } from '../models/api/UiDeploymentsCountsByFlow';
 import { FlowRunsFilter, TaskRunsFilter } from '../models/Filters';
 import { UiFlowRunHistory } from '../models/UiFlowRunHistory';
 import { UiTaskRunCountsByState } from '../models/UiTaskRunCountsByState';
@@ -9,4 +10,5 @@ export declare class UiApi extends WorkspaceApi implements IUiApi {
     protected routePrefix: string;
     getFlowRunHistory(filter: FlowRunsFilter): Promise<UiFlowRunHistory[]>;
     getTaskRunsCountByState(filter: TaskRunsFilter): Promise<UiTaskRunCountsByState>;
+    getDeploymentsCountByFlow(flowIds: string[]): Promise<UiDeploymentsCountsByFlow>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@prefecthq/prefect-ui-library",
-    "version": "3.0.0",
+    "version": "3.0.2",
     "private": false,
     "repository": {
         "type": "git",

package/src/components/DeploymentsCount.vue

@@ -11,21 +11,16 @@
 
 <script lang="ts" setup>
   import { toPluralString } from '@prefecthq/prefect-design'
-  import { useDeploymentsCount, useWorkspaceRoutes } from '@/compositions'
+  import { useWorkspaceRoutes } from '@/compositions'
   import { localization } from '@/localization'
   import { withQuery } from '@/utilities'
 
-  const props = defineProps<{
+  defineProps<{
+    count: number,
     flowId: string,
   }>()
 
   const routes = useWorkspaceRoutes()
-
-  const { count } = useDeploymentsCount(() => ({
-    flows: {
-      id: [props.flowId],
-    },
-  }))
 </script>
 
 <style>

package/src/components/FlowList.vue

@@ -41,7 +41,7 @@
       </template>
 
       <template #deployments="{ row }">
-        <DeploymentsCount :flow-id="row.id" class="flow-list__deployment-count" />
+        <DeploymentsCount :count="getDeploymentsCount(row.id)" :flow-id="row.id" class="flow-list__deployment-count" />
       </template>
 
       <template #activity="{ row }">
@@ -87,10 +87,10 @@
 
 <script lang="ts" setup>
   import { ColumnClassesMethod, TableColumn } from '@prefecthq/prefect-design'
-  import { NumberRouteParam, useDebouncedRef, useRouteQueryParam } from '@prefecthq/vue-compositions'
+  import { NumberRouteParam, useDebouncedRef, useRouteQueryParam, useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
   import { secondsInWeek } from 'date-fns/constants'
   import merge from 'lodash.merge'
-  import { ref } from 'vue'
+  import { computed, ref, toRef } from 'vue'
   import {
     FlowsDeleteButton,
     LastFlowRun,
@@ -102,10 +102,11 @@
     SelectedCount,
     FlowRunTagsInput
   } from '@/components'
-  import { useCan, useFlowsFilterFromRoute, useWorkspaceRoutes, useFlows } from '@/compositions'
+  import { useCan, useFlowsFilterFromRoute, useWorkspaceRoutes, useFlows, useWorkspaceApi } from '@/compositions'
   import { useComponent } from '@/compositions/useComponent'
   import { FlowsFilter } from '@/models/Filters'
   import { Flow } from '@/models/Flow'
+  import { Getter } from '@/types'
   import { flowSortOptions } from '@/types/SortOptionTypes'
   import { snakeCase } from '@/utilities'
   import { formatDateTimeNumeric } from '@/utilities/dates'
@@ -116,6 +117,7 @@
 
   const { FlowMenu } = useComponent()
 
+  const api = useWorkspaceApi()
   const can = useCan()
   const routes = useWorkspaceRoutes()
 
@@ -134,6 +136,21 @@
     interval: 30000,
   })
 
+  const deploymentsCountsSubscriptionGetter: Getter<[string[]] | null> = () => {
+    if (flows.value.length > 0) {
+      return [flows.value.map(flow => flow.id)]
+    }
+
+    return null
+  }
+  const deploymentsCountsSubscriptionArgs = toRef(deploymentsCountsSubscriptionGetter)
+  const deploymentsCountsSubscription = useSubscriptionWithDependencies(api.ui.getDeploymentsCountByFlow, deploymentsCountsSubscriptionArgs)
+  const deploymentsCounts = computed(() => deploymentsCountsSubscription.response)
+
+  function getDeploymentsCount(flowId: string): number {
+    return deploymentsCounts.value?.[flowId] ?? 0
+  }
+
   const columns: TableColumn<Flow>[] = [
     {
       property: 'name',

package/src/compositions/useDeploymentsCount.ts

@@ -9,6 +9,7 @@ import { UseEntitySubscription } from '@/types/useEntitySubscription'
 
 export type UseDeploymentsCount = UseEntitySubscription<WorkspaceDeploymentsApi['getDeploymentsCount'], 'count'>
 
+/** @deprecated prefer to use the dedicated /ui/flows/count-deployments bulk endpoint since this is an expensive bespoke query */
 export function useDeploymentsCount(filter?: MaybeRefOrGetter<DeploymentsFilter>): UseDeploymentsCount {
   const api = useWorkspaceApi()
   const can = useCan()

package/src/models/api/UiDeploymentsCountsByFlow.ts

@@ -0,0 +1 @@
+export type UiDeploymentsCountsByFlow = Record<string, number>

package/src/models/api/index.ts

@@ -32,6 +32,7 @@ export * from './StateResponse'
 export * from './StateUpdateRequest'
 export * from './TaskInputResponse'
 export * from './TaskRunResponse'
+export * from './UiDeploymentsCountsByFlow'
 export * from './UiFlowRunHistoryResponse'
 export * from './WorkerCollectionItemResponse'
 export * from './WorkerScheduledFlowRunResponse'

package/src/router/index.ts

@@ -9,7 +9,8 @@ type WorkspaceRoutes = ReturnType<typeof createWorkspaceRoutes>
 type WorkspaceRouteKey = keyof WorkspaceRoutes
 type WorkspaceRoute = ReturnType<WorkspaceRoutes[WorkspaceRouteKey]>
 
-export type WorkspaceNamedRoute = WorkspaceRoute['name']
+export type DeprecatedNamedRoutes = 'workspace.flow-runs' | 'workspace.flow-runs.flow-run' | 'workspace.flow-runs.task-run'
+export type WorkspaceNamedRoute = WorkspaceRoute['name'] | DeprecatedNamedRoutes
 
 type WorkspaceRouteRecordParent = { name?: WorkspaceNamedRoute, children: WorkspaceRouteRecord[] }
 type WorkspaceRouteRecordChild = { name: WorkspaceNamedRoute }
@@ -51,6 +52,23 @@ export function createWorkspaceRouteRecords(components: Partial<WorkspaceRouteCo
         },
       ],
     },
+    {
+      path: 'flow-runs',
+      name: 'workspace.flow-runs',
+      redirect: to => ({ name: 'workspace.runs', query: to.query, params: to.params }),
+      children: [
+        {
+          name: 'workspace.flow-runs.flow-run',
+          path: 'flow-run/:flowRunId',
+          redirect: to => ({ name: 'workspace.runs.flow-run', query: to.query, params: to.params }),
+        },
+        {
+          name: 'workspace.flow-runs.task-run',
+          path: 'task-run/:taskRunId',
+          redirect: to => ({ name: 'workspace.runs.task-run', query: to.query, params: to.params }),
+        },
+      ],
+    },
     {
       path: 'flows',
       meta: {

package/src/router/routes.ts

@@ -26,6 +26,8 @@ export function createWorkspaceRoutes(config?: CreateWorkspaceRoutesConfig) {
     artifacts: () => ({ name: 'workspace.artifacts', params: { ...config } }) as const,
     dashboard: () => ({ name: 'workspace.dashboard', params: { ...config } }) as const,
     runs: (query?: { tab?: string }) => ({ name: 'workspace.runs', params: { ...config }, query }) as const,
+    /** @deprecated use workspace.runs instead */
+    flowRuns: () => ({ name: 'workspace.flow-runs', params: { ...config } }) as const,
     flowRun: (flowRunId: string) => ({ name: 'workspace.runs.flow-run', params: { flowRunId, ...config } }) as const,
     taskRun: (taskRunId: string) => ({ name: 'workspace.runs.task-run', params: { taskRunId, ...config } }) as const,
     flows: () => ({ name: 'workspace.flows', params: { ...config } }) as const,

package/src/services/UiApi.ts

@@ -1,3 +1,4 @@
+import { UiDeploymentsCountsByFlow } from '@/models/api/UiDeploymentsCountsByFlow'
 import { UiFlowRunHistoryResponse } from '@/models/api/UiFlowRunHistoryResponse'
 import { UiTaskRunCountsByStateResponse } from '@/models/api/UiTaskRunCountsByStateResponse'
 import { FlowRunsFilter, TaskRunsFilter } from '@/models/Filters'
@@ -26,4 +27,11 @@ export class UiApi extends WorkspaceApi implements IUiApi {
 
     return mapper.map('UiTaskRunCountsByStateResponse', data, 'UiTaskRunCountsByState')
   }
+
+  public async getDeploymentsCountByFlow(flowIds: string[]): Promise<UiDeploymentsCountsByFlow> {
+    const request = { 'flow_ids': flowIds }
+    const { data } = await this.post<UiDeploymentsCountsByFlow>('/flows/count-deployments', request)
+
+    return data
+  }
 }