@prefecthq/prefect-ui-library 2.10.0 → 2.10.1

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

@@ -31,6 +31,7 @@ export * from './useLogsSort';
 export * from './useNextFlowRun';
 export * from './useOptionalPropertiesSchema';
 export * from './useOptionalRules';
+export * from './usePaginatedFlowRuns';
 export * from './usePaginatedSubscription';
 export * from './usePagination';
 export * from './useReactiveField';

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

@@ -1,7 +1,10 @@
 import { MaybeReadonly } from '@prefecthq/prefect-design';
-import { MaybeRefOrGetter } from 'vue';
-import { PaginationOptions, UsePaginationEntity } from '../compositions/usePagination';
-import { FlowRunsFilter } from '../models';
+import { UseSubscription } from '@prefecthq/vue-compositions';
+import { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { FlowRun, FlowRunsFilter } from '../models';
 import { WorkspaceFlowRunsApi } from '../services';
-export type UseFlowRuns = UsePaginationEntity<WorkspaceFlowRunsApi['getFlowRuns'], WorkspaceFlowRunsApi['getFlowRunsCount'], 'flowRuns'>;
-export declare function useFlowRuns(filter?: MaybeRefOrGetter<MaybeReadonly<FlowRunsFilter> | null | undefined>, options?: PaginationOptions): UseFlowRuns;
+export type UseFlowRuns = {
+    subscription: UseSubscription<WorkspaceFlowRunsApi['getFlowRuns']>;
+    flowRuns: ComputedRef<FlowRun[]>;
+};
+export declare function useFlowRuns(filter?: MaybeRefOrGetter<MaybeReadonly<FlowRunsFilter> | null | undefined>): UseFlowRuns;

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

@@ -1,7 +1,7 @@
 import { ComputedRef, MaybeRefOrGetter } from 'vue';
 import { UseFlowRuns } from '../compositions/useFlowRuns';
 import { FlowRun, UnionFilter } from '../models';
-export type UseLastFlowRun = Pick<UseFlowRuns, 'subscriptions'> & {
+export type UseLastFlowRun = Pick<UseFlowRuns, 'subscription'> & {
     flowRun: ComputedRef<FlowRun | undefined>;
 };
 export declare function useLastFlowRun(filter: MaybeRefOrGetter<UnionFilter | null | undefined>): UseLastFlowRun;

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

@@ -1,8 +1,7 @@
-import { SubscriptionOptions } from '@prefecthq/vue-compositions';
 import { ComputedRef, MaybeRefOrGetter } from 'vue';
 import { UseFlowRuns } from '../compositions/useFlowRuns';
 import { FlowRun, UnionFilter } from '../models';
-export type UseNextFlowRun = Pick<UseFlowRuns, 'subscriptions'> & {
+export type UseNextFlowRun = Pick<UseFlowRuns, 'subscription'> & {
     flowRun: ComputedRef<FlowRun | undefined>;
 };
-export declare function useNextFlowRun(filter: MaybeRefOrGetter<UnionFilter | null | undefined>, options?: SubscriptionOptions): UseNextFlowRun;
+export declare function useNextFlowRun(filter: MaybeRefOrGetter<UnionFilter | null | undefined>): UseNextFlowRun;

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

@@ -0,0 +1,7 @@
+import { MaybeReadonly } from '@prefecthq/prefect-design';
+import { MaybeRefOrGetter } from 'vue';
+import { PaginationOptions, UsePaginationEntity } from '../compositions/usePagination';
+import { FlowRunsFilter } from '../models';
+import { WorkspaceFlowRunsApi } from '../services';
+export type UsePaginatedFlowRuns = UsePaginationEntity<WorkspaceFlowRunsApi['getFlowRuns'], WorkspaceFlowRunsApi['getFlowRunsCount'], 'flowRuns'>;
+export declare function usePaginatedFlowRuns(filter?: MaybeRefOrGetter<MaybeReadonly<FlowRunsFilter> | null | undefined>, options?: PaginationOptions): UsePaginatedFlowRuns;

package/package.json

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

package/src/components/DeploymentQuickRunOverflowMenuItem.vue

@@ -25,7 +25,7 @@
   const router = useRouter()
   const routes = useWorkspaceRoutes()
 
-  const { subscriptions: nextRunSubscription } = useNextFlowRun(() => ({
+  const { subscription: nextRunSubscription } = useNextFlowRun(() => ({
     deployments: {
       id: [props.deployment.id],
     },

package/src/components/FlowRunFilteredList.vue

@@ -49,7 +49,7 @@
     FlowRunsDeleteButton
   } from '@/components'
   import SearchInput from '@/components/SearchInput.vue'
-  import { useFlowRuns, useFlowRunsFilterFromRoute } from '@/compositions'
+  import { useFlowRunsFilterFromRoute, usePaginatedFlowRuns } from '@/compositions'
   import { useCan } from '@/compositions/useCan'
   import { FlowRunsFilter } from '@/models/Filters'
 
@@ -72,7 +72,7 @@
     },
   }), props.prefix)
 
-  const { flowRuns, total, subscriptions, next } = useFlowRuns(filter, {
+  const { flowRuns, total, subscriptions, next } = usePaginatedFlowRuns(filter, {
     interval: 30000,
     mode: 'infinite',
   })

package/src/components/FlowRunsAccordionContent.vue

@@ -12,7 +12,7 @@
 <script lang="ts" setup>
   import { computed } from 'vue'
   import FlowRunList from '@/components/FlowRunList.vue'
-  import { useFlowRuns } from '@/compositions/useFlowRuns'
+  import { usePaginatedFlowRuns } from '@/compositions'
   import { FlowRunsFilter } from '@/models/Filters'
 
   const props = defineProps<{
@@ -32,7 +32,7 @@
     limit: 3,
   })
 
-  const { flowRuns, total, next } = useFlowRuns(filter, {
+  const { flowRuns, total, next } = usePaginatedFlowRuns(filter, {
     mode: 'infinite',
   })
 

package/src/components/FlowRunsBarChart.vue

@@ -24,7 +24,6 @@
   import { StyleValue, computed, ref, toValue } from 'vue'
   import FlowRunPopoverContent from '@/components/FlowRunPopOverContent.vue'
   import { useFlowRuns } from '@/compositions/useFlowRuns'
-  import { useInterval } from '@/compositions/useInterval'
   import { FlowRunsFilter } from '@/models/Filters'
   import { FlowRun } from '@/models/FlowRun'
   import { MaybeGetter } from '@/types/reactivity'
@@ -67,8 +66,7 @@
     return merge({}, base, filter)
   }
 
-  const options = useInterval()
-  const { flowRuns } = useFlowRuns(filter, options)
+  const { flowRuns } = useFlowRuns(filter)
 
   const barFlowRuns = computed(() => organizeFlowRunsWithGaps(flowRuns.value))
 

package/src/components/WorkPoolQueueUpcomingFlowRunsList.vue

@@ -41,15 +41,15 @@
     },
   })
 
-  const { flowRuns, subscriptions } = useFlowRuns(filter)
+  const { flowRuns, subscription } = useFlowRuns(filter)
 
-  const empty = computed(() => subscriptions.executed && flowRuns.value.length === 0)
+  const empty = computed(() => subscription.executed && flowRuns.value.length === 0)
   const isPaused = computed(() => workPoolQueue.value.isPaused)
 
   // pretty sure this isn't needed but I haven't tested for sure
   // the subscription should refresh automatically because if the workPoolQueue
   // updates the filter will update which creates a new subscription
   watch(() => workPoolQueue, () => {
-    subscriptions.refresh()
+    subscription.refresh()
   })
 </script>

package/src/compositions/index.ts

@@ -31,6 +31,7 @@ export * from './useLogsSort'
 export * from './useNextFlowRun'
 export * from './useOptionalPropertiesSchema'
 export * from './useOptionalRules'
+export * from './usePaginatedFlowRuns'
 export * from './usePaginatedSubscription'
 export * from './usePagination'
 export * from './useReactiveField'

package/src/compositions/useFlowRuns.ts

@@ -1,19 +1,18 @@
 import { MaybeReadonly } from '@prefecthq/prefect-design'
-import { MaybeRefOrGetter, toValue } from 'vue'
+import { UseSubscription, useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+import { ComputedRef, MaybeRefOrGetter, computed, toRef, toValue } from 'vue'
 import { useCan } from '@/compositions/useCan'
-import { PaginationOptions, UsePaginationEntity, usePagination } from '@/compositions/usePagination'
 import { useWorkspaceApi } from '@/compositions/useWorkspaceApi'
-import { FlowRunsFilter } from '@/models'
+import { FlowRun, FlowRunsFilter } from '@/models'
 import { WorkspaceFlowRunsApi } from '@/services'
 import { Getter } from '@/types/reactivity'
 
-export type UseFlowRuns = UsePaginationEntity<
-WorkspaceFlowRunsApi['getFlowRuns'],
-WorkspaceFlowRunsApi['getFlowRunsCount'],
-'flowRuns'
->
+export type UseFlowRuns = {
+  subscription: UseSubscription<WorkspaceFlowRunsApi['getFlowRuns']>,
+  flowRuns: ComputedRef<FlowRun[]>,
+}
 
-export function useFlowRuns(filter?: MaybeRefOrGetter<MaybeReadonly<FlowRunsFilter> | null | undefined>, options?: PaginationOptions): UseFlowRuns {
+export function useFlowRuns(filter?: MaybeRefOrGetter<MaybeReadonly<FlowRunsFilter> | null | undefined>): UseFlowRuns {
   const api = useWorkspaceApi()
   const can = useCan()
 
@@ -31,16 +30,12 @@ export function useFlowRuns(filter?: MaybeRefOrGetter<MaybeReadonly<FlowRunsFilt
     return [value]
   }
 
-  const pagination = usePagination({
-    fetchMethod: api.flowRuns.getFlowRuns,
-    fetchParameters: parameters,
-    countMethod: api.flowRuns.getFlowRunsCount,
-    countParameters: parameters,
-    options,
-  })
+  const parametersRef = toRef(parameters)
+  const subscription = useSubscriptionWithDependencies(api.flowRuns.getFlowRuns, parametersRef)
+  const flowRuns = computed(() => subscription.response ?? [])
 
   return {
-    ...pagination,
-    flowRuns: pagination.results,
+    subscription,
+    flowRuns,
   }
 }

package/src/compositions/useLastFlowRun.ts

@@ -4,7 +4,7 @@ import { useCan } from '@/compositions/useCan'
 import { UseFlowRuns, useFlowRuns } from '@/compositions/useFlowRuns'
 import { FlowRun, FlowRunsFilter, UnionFilter } from '@/models'
 
-export type UseLastFlowRun = Pick<UseFlowRuns, 'subscriptions'> & {
+export type UseLastFlowRun = Pick<UseFlowRuns, 'subscription'> & {
   flowRun: ComputedRef<FlowRun | undefined>,
 }
 
@@ -29,11 +29,11 @@ export function useLastFlowRun(filter: MaybeRefOrGetter<UnionFilter | null | und
     return merge({}, filterValue, latestFilter)
   }
 
-  const { flowRuns, subscriptions } = useFlowRuns(getter)
+  const { flowRuns, subscription } = useFlowRuns(getter)
   const flowRun = computed(() => flowRuns.value.at(0))
 
   return {
-    subscriptions,
+    subscription,
     flowRun,
   }
 }

package/src/compositions/useNextFlowRun.ts

@@ -1,15 +1,14 @@
-import { SubscriptionOptions } from '@prefecthq/vue-compositions'
 import merge from 'lodash.merge'
 import { computed, ComputedRef, MaybeRefOrGetter, toValue } from 'vue'
 import { useCan } from '@/compositions/useCan'
 import { UseFlowRuns, useFlowRuns } from '@/compositions/useFlowRuns'
 import { FlowRun, FlowRunsFilter, UnionFilter } from '@/models'
 
-export type UseNextFlowRun = Pick<UseFlowRuns, 'subscriptions'> & {
+export type UseNextFlowRun = Pick<UseFlowRuns, 'subscription'> & {
   flowRun: ComputedRef<FlowRun | undefined>,
 }
 
-export function useNextFlowRun(filter: MaybeRefOrGetter<UnionFilter | null | undefined>, options?: SubscriptionOptions): UseNextFlowRun {
+export function useNextFlowRun(filter: MaybeRefOrGetter<UnionFilter | null | undefined>): UseNextFlowRun {
   const can = useCan()
 
   const getter = (): FlowRunsFilter | null => {
@@ -31,11 +30,11 @@ export function useNextFlowRun(filter: MaybeRefOrGetter<UnionFilter | null | und
     return merge({}, filterValue, nextFlowRunFilter)
   }
 
-  const { flowRuns, subscriptions } = useFlowRuns(getter, options)
+  const { flowRuns, subscription } = useFlowRuns(getter)
   const flowRun = computed(() => flowRuns.value.at(0))
 
   return {
-    subscriptions,
+    subscription,
     flowRun,
   }
 }

package/src/compositions/usePaginatedFlowRuns.ts

@@ -0,0 +1,46 @@
+import { MaybeReadonly } from '@prefecthq/prefect-design'
+import { MaybeRefOrGetter, toValue } from 'vue'
+import { useCan } from '@/compositions/useCan'
+import { PaginationOptions, UsePaginationEntity, usePagination } from '@/compositions/usePagination'
+import { useWorkspaceApi } from '@/compositions/useWorkspaceApi'
+import { FlowRunsFilter } from '@/models'
+import { WorkspaceFlowRunsApi } from '@/services'
+import { Getter } from '@/types/reactivity'
+
+export type UsePaginatedFlowRuns = UsePaginationEntity<
+WorkspaceFlowRunsApi['getFlowRuns'],
+WorkspaceFlowRunsApi['getFlowRunsCount'],
+'flowRuns'
+>
+
+export function usePaginatedFlowRuns(filter?: MaybeRefOrGetter<MaybeReadonly<FlowRunsFilter> | null | undefined>, options?: PaginationOptions): UsePaginatedFlowRuns {
+  const api = useWorkspaceApi()
+  const can = useCan()
+
+  const parameters: Getter<[FlowRunsFilter] | null> = () => {
+    if (!can.read.flow_run) {
+      return null
+    }
+
+    const value = toValue(filter)
+
+    if (!value) {
+      return null
+    }
+
+    return [value]
+  }
+
+  const pagination = usePagination({
+    fetchMethod: api.flowRuns.getFlowRuns,
+    fetchParameters: parameters,
+    countMethod: api.flowRuns.getFlowRunsCount,
+    countParameters: parameters,
+    options,
+  })
+
+  return {
+    ...pagination,
+    flowRuns: pagination.results,
+  }
+}