Enhancement: Better run list error support (#2934)

* Add a slot for error message when there's an error fetching runs

* Provide the error to the slot

src/components/FlowRunFilteredList.vue

@@ -21,9 +21,16 @@
 
     <p-empty-results v-if="empty">
       <template #message>
-        <slot name="empty-message">
-          No runs found
-        </slot>
+        <template v-if="errored">
+          <slot name="error-message" v-bind="{ error }">
+            {{ localization.error.readFlowRuns }}
+          </slot>
+        </template>
+        <template v-else>
+          <slot name="empty-message">
+            No runs found
+          </slot>
+        </template>
       </template>
 
       <template v-if="isCustomFilter" #actions>
@@ -57,6 +64,7 @@
   import SearchInput from '@/components/SearchInput.vue'
   import { useFlowRunsPaginationFilterFromRoute, usePaginatedFlowRuns } from '@/compositions'
   import { useCan } from '@/compositions/useCan'
+  import { localization } from '@/localization'
   import { FlowRunsFilter } from '@/models/Filters'
 
   const props = defineProps<{
@@ -80,7 +88,7 @@
     limit,
   }), props.prefix)
 
-  const { flowRuns, count, pages, subscription } = usePaginatedFlowRuns(filter, {
+  const { flowRuns, count, pages, subscription, errored, error } = usePaginatedFlowRuns(filter, {
     interval: 30000,
   })
 

src/compositions/usePaginatedFlowRuns.ts

@@ -1,6 +1,6 @@
 import { SubscriptionOptions, UseSubscription, useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
 import merge from 'lodash.merge'
-import { ComputedRef, MaybeRefOrGetter, computed, toRef, toValue, watch, watchEffect } from 'vue'
+import { ComputedRef, MaybeRefOrGetter, computed, toRef, toValue } from 'vue'
 import { useCan } from '@/compositions/useCan'
 import { useWorkspaceApi } from '@/compositions/useWorkspaceApi'
 import { FlowRun, FlowRunsPaginationFilter } from '@/models'
@@ -14,6 +14,8 @@ type UsePaginatedFlowRuns = {
   limit: ComputedRef<number>,
   pages: ComputedRef<number>,
   page: ComputedRef<number>,
+  error: ComputedRef<unknown | null>,
+  errored: ComputedRef<boolean>,
 }
 
 export function usePaginatedFlowRuns(filter: MaybeRefOrGetter<FlowRunsPaginationFilter | null | undefined> = {}, options?: SubscriptionOptions): UsePaginatedFlowRuns {
@@ -43,6 +45,8 @@ export function usePaginatedFlowRuns(filter: MaybeRefOrGetter<FlowRunsPagination
   const limit = computed(() => subscription.response?.limit ?? 0)
   const count = computed(() => subscription.response?.count ?? 0)
   const page = computed(() => subscription.response?.page ?? 1)
+  const error = computed(() => subscription.error)
+  const errored = computed(() => subscription.errored)
 
   return {
     subscription,
@@ -51,5 +55,7 @@ export function usePaginatedFlowRuns(filter: MaybeRefOrGetter<FlowRunsPagination
     page,
     limit,
     count,
+    error,
+    errored,
   }
 }

src/localization/locale/en.ts

@@ -30,6 +30,7 @@ export const en = {
     changeFlowRunState: 'Failed to change flow run state',
     changeTaskRunState: 'Failed to change task run state',
     createBlock: 'Failed to create block',
+    readFlowRuns: 'Something went wrong loading flow runs, please try again.',
     createConcurrencyLimit: 'Failed to create concurrency limit',
     resetConcurrencyLimit: 'Failed to reset concurrency limit',
     resetConcurrencyV2Limit: 'Failed to reset concurrency limit',