Merge pull request #2904 from PrefectHQ/update-task-run-pagination-co…

…mposition

Update usePaginatedTaskRuns to use new pagination endpoint

src/compositions/usePaginatedTaskRuns.ts

@@ -1,23 +1,26 @@
-import { MaybeReadonly } from '@prefecthq/prefect-design'
-import { MaybeRefOrGetter, toValue } from 'vue'
+import { SubscriptionOptions, UseSubscription, useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+import merge from 'lodash.merge'
+import { ComputedRef, MaybeRefOrGetter, computed, toRef, toValue, watch, watchEffect } from 'vue'
 import { useCan } from '@/compositions/useCan'
-import { PaginationOptions, UsePaginationEntity, usePagination } from '@/compositions/usePagination'
 import { useWorkspaceApi } from '@/compositions/useWorkspaceApi'
-import { TaskRunsFilter } from '@/models'
+import { TaskRun, TaskRunsPaginationFilter } from '@/models'
 import { WorkspaceTaskRunsApi } from '@/services'
 import { Getter } from '@/types/reactivity'
 
-export type UsePaginatedTaskRuns = UsePaginationEntity<
-WorkspaceTaskRunsApi['getTaskRuns'],
-WorkspaceTaskRunsApi['getTaskRunsCount'],
-'taskRuns'
->
+type UsePaginatedTaskRuns = {
+  subscription: UseSubscription<WorkspaceTaskRunsApi['getTaskRunsPaginated']>,
+  taskRuns: ComputedRef<TaskRun[]>,
+  count: ComputedRef<number>,
+  limit: ComputedRef<number>,
+  pages: ComputedRef<number>,
+  page: ComputedRef<number>,
+}
 
-export function usePaginatedTaskRuns(filter?: MaybeRefOrGetter<MaybeReadonly<TaskRunsFilter> | null | undefined>, options?: PaginationOptions): UsePaginatedTaskRuns {
+export function usePaginatedTaskRuns(filter: MaybeRefOrGetter<TaskRunsPaginationFilter | null | undefined> = {}, options?: SubscriptionOptions): UsePaginatedTaskRuns {
   const api = useWorkspaceApi()
   const can = useCan()
 
-  const parameters: Getter<[TaskRunsFilter] | null> = () => {
+  const getter: Getter<[TaskRunsPaginationFilter] | null> = () => {
     if (!can.read.task_run) {
       return null
     }
@@ -28,19 +31,25 @@ export function usePaginatedTaskRuns(filter?: MaybeRefOrGetter<MaybeReadonly<Tas
       return null
     }
 
-    return [value]
+    // merge here is important to track changes to `filter` if it is a reactive
+    return [merge({}, value)]
   }
 
-  const pagination = usePagination({
-    fetchMethod: api.taskRuns.getTaskRuns,
-    fetchParameters: parameters,
-    countMethod: api.taskRuns.getTaskRunsCount,
-    countParameters: parameters,
-    options,
-  })
+  const parameters = toRef(getter)
+  const subscription = useSubscriptionWithDependencies(api.taskRuns.getTaskRunsPaginated, parameters, options)
+
+  const taskRuns = computed(() => subscription.response?.results ?? [])
+  const pages = computed(() => subscription.response?.pages ?? 0)
+  const limit = computed(() => subscription.response?.limit ?? 0)
+  const count = computed(() => subscription.response?.count ?? 0)
+  const page = computed(() => subscription.response?.page ?? 1)
 
   return {
-    ...pagination,
-    taskRuns: pagination.results,
+    subscription,
+    taskRuns,
+    pages,
+    page,
+    limit,
+    count,
   }
 }

src/maps/filters.ts

@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 import { asArray } from '@prefecthq/prefect-design'
-import { Any, Like, All, IsNull, OperatorRequest, TagFilterRequest, FlowFilterRequest, FlowRunFilterRequest, NotAny, StateFilterRequest, Before, After, TaskRunFilterRequest, Exists, DeploymentFilterRequest, Equals, FlowsFilterRequest, FlowRunsFilterRequest, TaskRunsFilterRequest, DeploymentsFilterRequest, BlockTypeFilterRequest, BlockSchemaFilterRequest, BlockDocumentFilterRequest, NotificationsFilterRequest, SavedSearchesFilterRequest, LogsFilterRequest, GreaterThan, LessThan, ConcurrencyLimitsFilterRequest, BlockTypesFilterRequest, BlockSchemasFilterRequest, BlockDocumentsFilterRequest, StartsWith, WorkPoolFilterRequest, WorkPoolsFilterRequest, WorkPoolQueueFilterRequest, FlowRunsHistoryFilterRequest, WorkersFilterRequest, WorkPoolQueuesFilterRequest, ArtifactsFilterRequest, ArtifactFilterRequest, NullableEquals, VariablesFilterRequest, VariableFilterRequest, TaskRunsHistoryFilterRequest, FlowRunsPaginationFilterRequest, FlowsPaginationFilterRequest, DeploymentsPaginationFilterRequest, WorkPoolWorkersFilterRequest, WorkPoolWorkersPaginationRequest } from '@/models/api/Filters'
-import { FlowFilter, FlowRunFilter, Operation, StateFilter, TagFilter, TaskRunFilter, DeploymentFilter, FlowsFilter, FlowRunsFilter, TaskRunsFilter, DeploymentsFilter, BlockTypeFilter, BlockSchemaFilter, BlockDocumentFilter, NotificationsFilter, SavedSearchesFilter, LogsFilter, ConcurrencyLimitsFilter, BlockTypesFilter, BlockSchemasFilter, BlockDocumentsFilter, WorkPoolFilter, WorkPoolsFilter, WorkPoolQueueFilter, FlowRunsHistoryFilter, WorkersFilter, WorkPoolQueuesFilter, ArtifactsFilter, ArtifactFilter, VariablesFilter, VariableFilter, TaskRunsHistoryFilter, FlowRunsPaginationFilter, FlowsPaginationFilter, DeploymentsPaginationFilter, WorkPoolWorkersFilter, WorkPoolWorkersPagination } from '@/models/Filters'
+import { Any, Like, All, IsNull, OperatorRequest, TagFilterRequest, FlowFilterRequest, FlowRunFilterRequest, NotAny, StateFilterRequest, Before, After, TaskRunFilterRequest, Exists, DeploymentFilterRequest, Equals, FlowsFilterRequest, FlowRunsFilterRequest, TaskRunsFilterRequest, DeploymentsFilterRequest, BlockTypeFilterRequest, BlockSchemaFilterRequest, BlockDocumentFilterRequest, NotificationsFilterRequest, SavedSearchesFilterRequest, LogsFilterRequest, GreaterThan, LessThan, ConcurrencyLimitsFilterRequest, BlockTypesFilterRequest, BlockSchemasFilterRequest, BlockDocumentsFilterRequest, StartsWith, WorkPoolFilterRequest, WorkPoolsFilterRequest, WorkPoolQueueFilterRequest, FlowRunsHistoryFilterRequest, WorkersFilterRequest, WorkPoolQueuesFilterRequest, ArtifactsFilterRequest, ArtifactFilterRequest, NullableEquals, VariablesFilterRequest, VariableFilterRequest, TaskRunsHistoryFilterRequest, FlowRunsPaginationFilterRequest, FlowsPaginationFilterRequest, DeploymentsPaginationFilterRequest, WorkPoolWorkersFilterRequest, WorkPoolWorkersPaginationRequest, TaskRunsPaginationFilterRequest } from '@/models/api/Filters'
+import { FlowFilter, FlowRunFilter, Operation, StateFilter, TagFilter, TaskRunFilter, DeploymentFilter, FlowsFilter, FlowRunsFilter, TaskRunsFilter, DeploymentsFilter, BlockTypeFilter, BlockSchemaFilter, BlockDocumentFilter, NotificationsFilter, SavedSearchesFilter, LogsFilter, ConcurrencyLimitsFilter, BlockTypesFilter, BlockSchemasFilter, BlockDocumentsFilter, WorkPoolFilter, WorkPoolsFilter, WorkPoolQueueFilter, FlowRunsHistoryFilter, WorkersFilter, WorkPoolQueuesFilter, ArtifactsFilter, ArtifactFilter, VariablesFilter, VariableFilter, TaskRunsHistoryFilter, FlowRunsPaginationFilter, FlowsPaginationFilter, DeploymentsPaginationFilter, WorkPoolWorkersFilter, WorkPoolWorkersPagination, TaskRunsPaginationFilter } from '@/models/Filters'
 import { MapFunction } from '@/services'
 import { removeEmptyObjects } from '@/utilities'
 
@@ -376,6 +376,16 @@ export const mapFlowRunsPaginationFilter: MapFunction<FlowRunsPaginationFilter,
   }
 }
 
+export const mapTaskRunsPaginationFilter: MapFunction<TaskRunsPaginationFilter, TaskRunsPaginationFilterRequest> = function(source) {
+  // eslint-disable-next-line no-unused-vars
+  const { offset, ...filter } = this.map('TaskRunsFilter', source, 'TaskRunsFilterRequest')
+
+  return {
+    ...filter,
+    page: source.page,
+  }
+}
+
 export const mapDeploymentsPaginationFilter: MapFunction<DeploymentsPaginationFilter, DeploymentsPaginationFilterRequest> = function(source) {
   // eslint-disable-next-line no-unused-vars
   const { offset, ...filter } = this.map('DeploymentsFilter', source, 'DeploymentsFilterRequest')

src/maps/index.ts

@@ -37,7 +37,7 @@ import { mapDeploymentStatsFilterToFlowRunsFilter } from '@/maps/deploymentStats
 import { mapDeploymentStatusToServerDeploymentStatus, mapServerDeploymentStatusToDeploymentStatus } from '@/maps/deploymentStatus'
 import { mapRunHistoryToDivergingBarChartItem } from '@/maps/divergingBarChartItem'
 import { mapEmpiricalPolicyToEmpiricalPolicyResponse, mapEmpiricalPolicyResponseToEmpiricalPolicy, mapEmpiricalPolicyToEmpiricalPolicyRequest } from '@/maps/empiricalPolicy'
-import { mapFlowFilter, mapDeploymentFilter, mapFlowRunFilter, mapStateFilter, mapFlowsFilter, mapDeploymentsFilter, mapFlowRunsFilter, mapTagFilter, mapTaskRunFilter, mapTaskRunsFilter, mapBlockDocumentFilter, mapBlockSchemaFilter, mapBlockTypeFilter, mapBlockDocumentsFilter, mapBlockSchemasFilter, mapBlockTypesFilter, mapWorkPoolsFilter, mapWorkPoolFilter, mapWorkPoolQueueFilter, mapFlowRunsHistoryFilter, mapLogsFilter, mapNotificationsFilter, mapSavedSearchesFilter, mapWorkersFilter, mapWorkPoolQueuesFilter, mapArtifactFilter, mapArtifactsFilter, mapVariablesFilter, mapVariableFilter, mapTaskRunsHistoryFilter, mapFlowRunsPaginationFilter, mapFlowsPaginationFilter, mapDeploymentsPaginationFilter, mapWorkPoolWorkersFilter, mapWorkPoolWorkersPagination } from '@/maps/filters'
+import { mapFlowFilter, mapDeploymentFilter, mapFlowRunFilter, mapStateFilter, mapFlowsFilter, mapDeploymentsFilter, mapFlowRunsFilter, mapTagFilter, mapTaskRunFilter, mapTaskRunsFilter, mapBlockDocumentFilter, mapBlockSchemaFilter, mapBlockTypeFilter, mapBlockDocumentsFilter, mapBlockSchemasFilter, mapBlockTypesFilter, mapWorkPoolsFilter, mapWorkPoolFilter, mapWorkPoolQueueFilter, mapFlowRunsHistoryFilter, mapLogsFilter, mapNotificationsFilter, mapSavedSearchesFilter, mapWorkersFilter, mapWorkPoolQueuesFilter, mapArtifactFilter, mapArtifactsFilter, mapVariablesFilter, mapVariableFilter, mapTaskRunsHistoryFilter, mapFlowRunsPaginationFilter, mapFlowsPaginationFilter, mapDeploymentsPaginationFilter, mapWorkPoolWorkersFilter, mapWorkPoolWorkersPagination, mapTaskRunsPaginationFilter } from '@/maps/filters'
 import { mapFlowToFlowResponse, mapFlowResponseToFlow, mapFlowToAutomationTrigger } from '@/maps/flow'
 import { mapFlowRunResponseToFlowRun } from '@/maps/flowRun'
 import { mapRunHistoryToFlowRunHistoryResponse, mapFlowRunHistoryResponseToRunHistory } from '@/maps/flowRunHistory'
@@ -50,7 +50,7 @@ import { mapNotificationCreateToNotificationCreateRequest } from '@/maps/notific
 import { mapNotificationUpdateToNotificationUpdateRequest } from '@/maps/notificationUpdate'
 import { mapNumberToString, mapStringToNumber } from '@/maps/number'
 import { mapOrchestrationResultResponseToOrchestrationResult } from '@/maps/orchestrationResult'
-import { mapDeploymentsPaginationResponseToDeploymentRunsPagination, mapFlowRunsPaginationResponseToFlowRunsPagination, mapFlowsPaginationResponseToFlowRunsPagination } from '@/maps/pagination'
+import { mapDeploymentsPaginationResponseToDeploymentRunsPagination, mapFlowRunsPaginationResponseToFlowRunsPagination, mapFlowsPaginationResponseToFlowRunsPagination, mapTaskRunsPaginationResponseToTaskRunsPagination } from '@/maps/pagination'
 import { mapRunGraphDataResponse, mapRunGraphNodeResponse, mapRunGraphArtifactResponse, mapRunGraphStateResponse } from '@/maps/runGraphData'
 import { mapSavedSearchResponseToSavedSearch, mapSavedSearchToLocationQuery } from '@/maps/savedSearch'
 import { mapSavedSearchCreateToSavedSearchCreateRequest } from '@/maps/savedSearchCreate'
@@ -149,8 +149,10 @@ export const maps = {
   FlowRunInputKeysetResponse: { FlowRunInputKeyset: mapFlowRunInputKeysetToFlowRunInputKeysetResponse },
   FlowRunResponse: { FlowRun: mapFlowRunResponseToFlowRun },
   FlowRunsPaginationResponse: { FlowRunsPagination: mapFlowRunsPaginationResponseToFlowRunsPagination },
+  TaskRunsPaginationResponse: { TaskRunsPagination: mapTaskRunsPaginationResponseToTaskRunsPagination },
   FlowRunsFilter: { FlowRunsFilterRequest: mapFlowRunsFilter },
   FlowRunsPaginationFilter: { FlowRunsPaginationFilterRequest: mapFlowRunsPaginationFilter },
+  TaskRunsPaginationFilter: { TaskRunsPaginationFilterRequest: mapTaskRunsPaginationFilter },
   FlowRunsHistoryFilter: { FlowRunsHistoryFilterRequest: mapFlowRunsHistoryFilter },
   FlowsFilter: { FlowsFilterRequest: mapFlowsFilter },
   FlowsPaginationFilter: { FlowsPaginationFilterRequest: mapFlowsPaginationFilter },

src/maps/pagination.ts

@@ -1,4 +1,4 @@
-import { Deployment, DeploymentResponse, Flow, FlowResponse, FlowRun, FlowRunResponse } from '@/models'
+import { Deployment, DeploymentResponse, Flow, FlowResponse, FlowRun, FlowRunResponse, TaskRun, TaskRunResponse } from '@/models'
 import { Paginated } from '@/models/pagination'
 import { MapFunction } from '@/services'
 
@@ -11,6 +11,15 @@ export const mapFlowRunsPaginationResponseToFlowRunsPagination: MapFunction<Pagi
   }
 }
 
+export const mapTaskRunsPaginationResponseToTaskRunsPagination: MapFunction<Paginated<TaskRunResponse>, Paginated<TaskRun>> = function(source) {
+  const results = this.map('TaskRunResponse', source.results, 'TaskRun')
+
+  return {
+    ...source,
+    results,
+  }
+}
+
 export const mapFlowsPaginationResponseToFlowRunsPagination: MapFunction<Paginated<FlowResponse>, Paginated<Flow>> = function(source) {
   const results = this.map('FlowResponse', source.results, 'Flow')
 

src/models/Filters.ts

@@ -200,6 +200,7 @@ export type WithPage<T extends PaginationUnionFilter> = Require<T, 'page'>
 
 export type FlowsPaginationFilter = PaginationUnionFilter<FlowSortValues>
 export type FlowRunsPaginationFilter = PaginationUnionFilter<FlowRunSortValues>
+export type TaskRunsPaginationFilter = PaginationUnionFilter<TaskRunSortValues>
 export type DeploymentsPaginationFilter = PaginationUnionFilter<DeploymentSortValues>
 
 export type FlowRunsHistoryFilter = FlowRunsFilter & {

src/models/api/Filters.ts

@@ -152,6 +152,7 @@ export type PaginationUnionFilterRequest<T> = {
 
 export type FlowsPaginationFilterRequest = PaginationUnionFilterRequest<FlowSortValues>
 export type FlowRunsPaginationFilterRequest = PaginationUnionFilterRequest<FlowRunSortValues>
+export type TaskRunsPaginationFilterRequest = PaginationUnionFilterRequest<TaskRunSortValues>
 export type DeploymentsPaginationFilterRequest = PaginationUnionFilterRequest<DeploymentSortValues>
 
 export type ArtifactFilterRequest = {

src/services/WorkspaceTaskRunsApi.ts

@@ -1,6 +1,8 @@
+import { FlowRun, FlowRunResponse } from '@/models'
 import { TaskRunHistoryResponse } from '@/models/api/TaskRunHistoryResponse'
 import { TaskRunResponse } from '@/models/api/TaskRunResponse'
-import { TaskRunsFilter, TaskRunsHistoryFilter } from '@/models/Filters'
+import { FlowRunsPaginationFilter, TaskRunsFilter, TaskRunsHistoryFilter, TaskRunsPaginationFilter } from '@/models/Filters'
+import { Paginated } from '@/models/pagination'
 import { StateUpdate } from '@/models/StateUpdate'
 import { TaskRun } from '@/models/TaskRun'
 import { TaskRunHistory } from '@/models/TaskRunHistory'
@@ -41,6 +43,13 @@ export class WorkspaceTaskRunsApi extends WorkspaceApi {
     return mapper.map('TaskRunResponse', data, 'TaskRun')
   }
 
+  public async getTaskRunsPaginated(filter: TaskRunsPaginationFilter = {}): Promise<Paginated<TaskRun>> {
+    const request = mapper.map('TaskRunsPaginationFilter', filter, 'TaskRunsPaginationFilterRequest')
+    const { data } = await this.post<Paginated<TaskRunResponse>>('/paginate', request)
+
+    return mapper.map('TaskRunsPaginationResponse', data, 'TaskRunsPagination')
+  }
+
   public async getTaskRunsCount(filter: TaskRunsFilter = {}): Promise<number> {
     const request = mapper.map('TaskRunsFilter', filter, 'TaskRunsFilterRequest')
     const { data } = await this.post<number>('/count', request)