@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/components/FlowRunStateTypeTabs.vue

@@ -0,0 +1,81 @@
+<template>
+  <p-tabs v-model:selected="selected" :tabs="tabs" class="flow-run-state-type-tabs">
+    <template #heading="{ tab }">
+      <template v-if="tab">
+        <FlowRunStateTypeCount :state-type="getTabStates(tab.label)" :filter="getStateTypeFilterGetter(tab.label)" />
+      </template>
+    </template>
+    <template #content="{ tab }">
+      <p-content>
+        <FlowRunsAccordion :filter="getStateTypeFilterGetter(tab.label)" :state-type="getTabStates(tab.label)" />
+      </p-content>
+    </template>
+  </p-tabs>
+</template>
+
+<script lang="ts" setup>
+  import { useRouteQueryParam } from '@prefecthq/vue-compositions'
+  import merge from 'lodash.merge'
+  import { computed, toValue } from 'vue'
+  import FlowRunsAccordion from '@/components/FlowRunsAccordion.vue'
+  import FlowRunStateTypeCount from '@/components/FlowRunStateTypeCount.vue'
+  import { useFlowRunsCount } from '@/compositions'
+  import { FlowRunsFilter } from '@/models/Filters'
+  import { StateType } from '@/models/StateType'
+  import { Getter, MaybeGetter } from '@/types/reactivity'
+
+  const props = defineProps<{
+    filter?: MaybeGetter<FlowRunsFilter>,
+  }>()
+
+  const tabStates: Record<string, StateType[]> = {
+    failed: ['failed', 'crashed'],
+    running: ['running', 'pending', 'cancelling'],
+    completed: ['completed'],
+    scheduled: ['scheduled', 'paused'],
+    cancelled: ['cancelled'],
+  }
+
+  const { count: cancelledCount } = useFlowRunsCount(getStateTypeFilterGetter('cancelled'))
+
+  const tabs = computed(() => {
+    const tabNames = Object.keys(tabStates)
+
+    if (!cancelledCount.value || cancelledCount.value < 1) {
+      tabNames.filter(value => value !== 'cancelled')
+    }
+
+    return tabNames
+  })
+
+  const selected = useRouteQueryParam('flow-run-state', 'failed')
+
+  function getTabStates(tab: string): StateType[] {
+    return tabStates[tab]
+  }
+
+  function getStateTypeFilterGetter(tab: string): Getter<FlowRunsFilter> {
+    return () => {
+      const base = toValue(props.filter)
+      const filter: FlowRunsFilter = {
+        flowRuns: {
+          state: {
+            type: getTabStates(tab),
+          },
+        },
+        sort: 'EXPECTED_START_TIME_DESC',
+      }
+
+      return merge({}, base, filter)
+    }
+  }
+</script>
+
+<style>
+.flow-run-state-type-tabs .p-tab { @apply
+  flex-grow
+  flex
+  items-center
+  justify-center
+}
+</style>

package/src/components/FlowRunSuspendButton.vue

@@ -0,0 +1,36 @@
+<template>
+  <p-button
+    v-if="canSuspend"
+    icon-append="PauseIcon"
+    @click="open"
+  >
+    Suspend
+    <FlowRunSuspendModal
+      v-model:showModal="showModal"
+      :flow-run-id="flowRun.id"
+      @change="showModal"
+    />
+  </p-button>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import FlowRunSuspendModal from '@/components/FlowRunSuspendModal.vue'
+  import { useCan, useShowModal } from '@/compositions'
+  import { FlowRun, isRunningStateType } from '@/models'
+
+  const props = defineProps<{
+    flowRun: FlowRun,
+  }>()
+
+  const can = useCan()
+  const { showModal, open } = useShowModal()
+
+  const canSuspend = computed(() => {
+    if (!can.update.flow_run || !props.flowRun.stateType || !props.flowRun.deploymentId) {
+      return false
+    }
+
+    return isRunningStateType(props.flowRun.stateType)
+  })
+</script>

package/src/components/FlowRunSuspendModal.vue

@@ -0,0 +1,91 @@
+<template>
+  <p-modal v-if="flowRun" v-model:showModal="internalValue" title="Suspend Flow Run">
+    <p-label label="Current Flow Run State">
+      <StateBadge :state="flowRun.state" />
+    </p-label>
+    <p-label label="Timeout" :message="timeoutErrorMessage" :state="timeoutState">
+      <p-number-input v-model="timeout" min="5" :state="timeoutState" />
+    </p-label>
+    <div>
+      Do you want to suspend {{ flowRun.name }}? This will put flow run into a <StateBadge :state="{ name: 'Suspended', type: 'paused' }" class="flow-run-suspend-modal__state-badge" /> state for {{ secondsToApproximateString(timeout) }}.
+    </div>
+
+    <template #actions>
+      <p-button variant="default" :loading="isSubmitting" @click="submit">
+        Submit
+      </p-button>
+    </template>
+  </p-modal>
+</template>
+
+<script lang="ts" setup>
+  import { showToast } from '@prefecthq/prefect-design'
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { addSeconds } from 'date-fns'
+  import { useField } from 'vee-validate'
+  import { computed, ref } from 'vue'
+  import StateBadge from '@/components/StateBadge.vue'
+  import { useForm, useWorkspaceApi } from '@/compositions'
+  import { localization } from '@/localization'
+  import { StateUpdateDetails } from '@/models'
+  import { fieldRules, isGreaterThan, isRequired } from '@/utilities'
+  import { getApiErrorMessage } from '@/utilities/errors'
+  import { secondsToApproximateString } from '@/utilities/seconds'
+
+  const props = defineProps<{
+    showModal: boolean,
+    flowRunId: string,
+  }>()
+
+  const defaultTimeout = ref<number>(300)
+
+  const { handleSubmit, isSubmitting } = useForm()
+
+  const { value: timeout, meta: timeoutState, errorMessage: timeoutErrorMessage } = useField<number>('timeout', fieldRules('Limit', isRequired, isGreaterThan(4)), { initialValue: defaultTimeout })
+
+  const emit = defineEmits<{
+    (event: 'update:showModal', value: boolean): void,
+  }>()
+
+  const api = useWorkspaceApi()
+
+  const internalValue = computed({
+    get() {
+      return props.showModal
+    },
+    set(value: boolean) {
+      emit('update:showModal', value)
+    },
+  })
+
+  const flowRunSubscription = useSubscription(api.flowRuns.getFlowRun, [props.flowRunId])
+  const flowRun = computed(() => flowRunSubscription.response)
+
+  const submit = handleSubmit(async (formValues): Promise<void> => {
+    try {
+      const { timeout } = formValues
+      const values: StateUpdateDetails = {
+        type: 'paused',
+        name: 'Suspended',
+        stateDetails: {
+          pauseTimeout: addSeconds(new Date(), timeout),
+          pauseReschedule: true,
+        },
+      }
+      await api.flowRuns.setFlowRunState(props.flowRunId, { state: values })
+      flowRunSubscription.refresh()
+      internalValue.value = false
+      showToast(localization.success.suspendFlowRun, 'success')
+    } catch (error) {
+      console.error(error)
+      const message = getApiErrorMessage(error, localization.error.suspendFlowRun)
+      showToast(message, 'error')
+    }
+  })
+</script>
+
+<style>
+.flow-run-suspend-modal__state-badge { @apply
+    align-middle
+}
+</style>

package/src/components/FlowRunTagsInput.vue

@@ -0,0 +1,45 @@
+<template>
+  <p-tags-input v-model="internalValue" class="flow-run-tags-input" placeholder="Search or enter new tag" v-bind="{ options, emptyMessage }" />
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import { useFlowRuns } from '@/compositions'
+  import { FlowRunsFilter } from '@/models/Filters'
+  import { unique } from '@/utilities/arrays'
+
+  const props = defineProps<{
+    selected: string[] | null | undefined,
+    emptyMessage?: string,
+    filter?: FlowRunsFilter,
+  }>()
+
+  const emits = defineEmits<{
+    (event: 'update:selected', value: string[] | null): void,
+  }>()
+
+  const emptyMessage = computed(() => props.emptyMessage ?? 'All tags')
+
+  const internalValue = computed({
+    get() {
+      return props.selected ?? null
+    },
+    set(value) {
+      emits('update:selected', value)
+    },
+  })
+
+  const { flowRuns } = useFlowRuns(() => props.filter ?? {})
+
+  const options = computed(() => {
+    const tags = flowRuns.value.flatMap(run => run.tags ?? [])
+
+    return unique(tags).sort((tagA, tagB) => tagA.localeCompare(tagB))
+  })
+</script>
+
+<style>
+.flow-run-tags-input {
+  min-width: 128px;
+}
+</style>

package/src/components/FlowRunTaskCounts.vue

@@ -0,0 +1,48 @@
+<template>
+  <span v-if="counts" class="flow-run-task-counts">
+    ({{ counts }})
+  </span>
+</template>
+
+<script lang="ts" setup>
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import { useWorkspaceApi } from '@/compositions/useWorkspaceApi'
+  import { TaskRunsFilter } from '@/models/Filters'
+
+  const props = defineProps<{
+    flowRunId: string,
+  }>()
+
+  const api = useWorkspaceApi()
+  const filter = computed<TaskRunsFilter>(() => ({
+    flowRuns: {
+      id: [props.flowRunId],
+    },
+  }))
+
+  const subscription = useSubscription(api.ui.getTaskRunsCountByState, [filter], { interval: 30000 })
+  const counts = computed(() => {
+    if (!subscription.response) {
+      return ''
+    }
+
+    return Object.entries(subscription.response).reduce<string[]>((response, [key, value]) => {
+      if (!value) {
+        return response
+      }
+
+      response.push(`${value} ${key}`)
+
+      return response
+    }, []).join(', ')
+  })
+</script>
+
+<style>
+.flow-run-task-counts { @apply
+  text-subdued
+  text-xs
+  capitalize
+}
+</style>

package/src/components/FlowRunTaskRuns.vue

@@ -0,0 +1,97 @@
+<template>
+  <p-content class="flow-run-task-runs">
+    <p-list-header sticky>
+      <div class="flow-run-task-runs__count">
+        <ResultsCount :count="count" label="Task run" />
+        <FlowRunTaskCounts :flow-run-id="flowRunId" />
+      </div>
+      <template #controls>
+        <SearchInput v-model="searchTerm" placeholder="Search by run name" label="Search by run name" class="flow-run-task-runs__search" />
+        <StateNameSelect v-model:selected="states" empty-message="All states" multiple />
+        <TaskRunTagsInput v-if="media.xl" v-model:selected="filter.taskRuns.tags.name" multiple :filter="filter" />
+      </template>
+      <template #sort>
+        <TaskRunsSort v-model="filter.sort" />
+      </template>
+    </p-list-header>
+
+    <TaskRunList :task-runs="taskRuns" @bottom="taskRunsSubscription.loadMore" />
+
+    <PEmptyResults v-if="empty">
+      <template #message>
+        No task runs
+      </template>
+      <template v-if="isCustomFilter" #actions>
+        <p-button size="sm" @click="clear">
+          Clear Filters
+        </p-button>
+      </template>
+    </PEmptyResults>
+  </p-content>
+</template>
+
+<script lang="ts" setup>
+  import { media } from '@prefecthq/prefect-design'
+  import { useDebouncedRef } from '@prefecthq/vue-compositions'
+  import { computed, ref } from 'vue'
+  import {
+    ResultsCount,
+    SearchInput,
+    StateNameSelect,
+    TaskRunList,
+    TaskRunsSort
+  } from '@/components'
+  import FlowRunTaskCounts from '@/components/FlowRunTaskCounts.vue'
+  import TaskRunTagsInput from '@/components/TaskRunTagsInput.vue'
+  import { useTaskRunsCount, useTaskRunsFilter, useWorkspaceApi } from '@/compositions'
+  import { usePaginatedSubscription } from '@/compositions/usePaginatedSubscription'
+  import { TaskRun } from '@/models/TaskRun'
+
+  const props = defineProps<{
+    flowRunId: string,
+  }>()
+
+  const states = ref<string[]>([])
+  const searchTerm = ref<string>()
+  const searchTermDebounced = useDebouncedRef(searchTerm, 1200)
+  const flowRunsIds = computed(() => [props.flowRunId])
+
+  const { filter, isCustomFilter } = useTaskRunsFilter({
+    flowRuns: {
+      id: flowRunsIds,
+    },
+    taskRuns: {
+      subFlowRunsExist: false,
+      nameLike: searchTermDebounced,
+      state: {
+        name: states,
+      },
+      tags: {
+        name: [],
+      },
+    },
+  })
+
+  const api = useWorkspaceApi()
+  const taskRunsSubscription = usePaginatedSubscription(api.taskRuns.getTaskRuns, [filter], { interval: 30000 })
+  const taskRuns = computed<TaskRun[]>(() => taskRunsSubscription.response ?? [])
+  const empty = computed(() => taskRunsSubscription.executed && taskRuns.value.length === 0)
+  const { count } = useTaskRunsCount(filter)
+
+  function clear(): void {
+    states.value = []
+    searchTerm.value = ''
+  }
+</script>
+
+<style>
+.flow-run-task-runs__search { @apply
+  min-w-[224px]
+}
+
+.flow-run-task-runs__count { @apply
+  grid
+  grid-cols-1
+  gap-1
+}
+</style>

package/src/components/FlowRunTimelineSubFlowRunDetails.vue

@@ -0,0 +1,85 @@
+<template>
+  <div v-if="flowRun">
+    <p-bread-crumbs class="flow-run-timeline-sub-flow-run-details__heading" :crumbs="crumbs" />
+    <div class="flow-run-timeline-sub-flow-run-details__content">
+      <p-key-value label="State" :alternate="alternate">
+        <template #value>
+          <StateBadge :state="flowRun.state" class="timeline-task-details__state-badge" />
+        </template>
+      </p-key-value>
+      <p-key-value label="Flow Run ID" :value="flowRun.id" :alternate="alternate" />
+      <p-key-value label="Duration" :alternate="alternate">
+        <template #value>
+          <DurationIconText :duration="flowRun.duration" />
+        </template>
+      </p-key-value>
+      <p-key-value label="Created" :value="formatDateTimeNumeric(flowRun.created)" :alternate="alternate" />
+      <p-key-value label="Tags" :alternate="alternate">
+        <template v-if="flowRun.tags?.length" #value>
+          <p-tags :tags="flowRun.tags!" class="flow-run-timeline-sub-flow-run-details__tags" />
+        </template>
+      </p-key-value>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BreadCrumbs } from '@prefecthq/prefect-design'
+  import { computed, toRefs } from 'vue'
+  import { StateBadge, DurationIconText } from '@/components'
+  import { useFlow, useFlowRun, useWorkspaceRoutes } from '@/compositions'
+  import { formatDateTimeNumeric } from '@/utilities/dates'
+
+  const props = defineProps<{
+    flowRunId: string,
+  }>()
+
+  const { flowRunId } = toRefs(props)
+
+  const alternate = true
+
+  const routes = useWorkspaceRoutes()
+
+  const { flowRun } = useFlowRun(flowRunId)
+
+  const flowId = computed(() => flowRun.value?.flowId)
+  const { flow } = useFlow(flowId)
+
+  const crumbs = computed<BreadCrumbs>(() => {
+    const internalCrumbs: BreadCrumbs = []
+
+    if (flow.value?.name) {
+      internalCrumbs.push({
+        text: flow.value.name,
+        to: routes.flow(flow.value.id),
+      })
+    }
+
+    if (flowRun.value?.name) {
+      internalCrumbs.push({
+        text: flowRun.value.name,
+        to: routes.flowRun(flowRun.value.id),
+      })
+    }
+
+    return internalCrumbs
+  })
+</script>
+
+<style>
+.flow-run-timeline-sub-flow-run-details__heading { @apply
+  text-base
+}
+
+.flow-run-timeline-sub-flow-run-details__content { @apply
+  mt-2
+  flex
+  flex-col
+  gap-3
+}
+
+.flow-run-timeline-sub-flow-run-details__tags .p-tag,
+.flow-run-timeline-sub-flow-run-details__state-badge .p-tag { @apply
+  !text-xs
+}
+</style>

package/src/components/FlowRunTimelineTaskDetails.vue

@@ -0,0 +1,61 @@
+<template>
+  <div v-if="taskRun">
+    <p-heading element="h3" heading="5">
+      <p-link :to="routes.taskRun(taskRunId)">
+        {{ taskRun.name }}
+      </p-link>
+    </p-heading>
+    <div class="flow-run-timeline-task-details__content">
+      <p-key-value label="State" :alternate="alternate">
+        <template #value>
+          <StateBadge :state="taskRun.state" class="flow-run-timeline-task-details__state-badge" />
+        </template>
+      </p-key-value>
+      <p-key-value label="Task Run ID" :value="taskRun.id" :alternate="alternate" />
+      <p-key-value label="Duration" :alternate="alternate">
+        <template #value>
+          <DurationIconText :duration="taskRun.duration" />
+        </template>
+      </p-key-value>
+      <p-key-value label="Created" :value="formatDateTimeNumeric(taskRun.created)" :alternate="alternate" />
+      <p-key-value label="Tags" :alternate="alternate">
+        <template v-if="taskRun.tags?.length" #value>
+          <p-tags :tags="taskRun.tags!" class="flow-run-timeline-task-details__tags" />
+        </template>
+      </p-key-value>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { toRefs } from 'vue'
+  import { StateBadge, DurationIconText } from '@/components'
+  import { useTaskRun, useWorkspaceRoutes } from '@/compositions'
+  import { formatDateTimeNumeric } from '@/utilities/dates'
+
+  const props = defineProps<{
+    taskRunId: string,
+  }>()
+
+  const { taskRunId } = toRefs(props)
+
+  const alternate = true
+
+  const routes = useWorkspaceRoutes()
+
+  const { taskRun } = useTaskRun(taskRunId)
+</script>
+
+<style>
+.flow-run-timeline-task-details__content { @apply
+  mt-2
+  flex
+  flex-col
+  gap-3
+}
+
+.flow-run-timeline-task-details__tags .p-tag,
+.flow-run-timeline-task-details__state-badge .p-tag { @apply
+  !text-xs
+}
+</style>

package/src/components/FlowRunWorkPool.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flow-run-work-pool">
+    <span>Work Pool</span> <WorkPoolIconText :work-pool-name="workPoolName" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import WorkPoolIconText from '@/components/WorkPoolIconText.vue'
+
+  defineProps<{
+    workPoolName: string,
+  }>()
+</script>
+
+<style>
+.flow-run-work-pool { @apply
+  flex gap-1
+}
+</style>

package/src/components/FlowRunWorkQueue.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="flow-run-work-queue">
+    <span>Work Queue</span>
+    <WorkQueueIconText :work-queue-name="workQueueName" :work-pool-name="workPoolName" />
+
+    <template v-if="!hideWorkPoolQueueStatus && workPoolName">
+      <WorkPoolQueueStatusIcon v-if="can.access.workQueueStatus && workPoolQueue" :work-pool-queue="workPoolQueue" />
+      <WorkPoolQueueHealthIcon v-else-if="!can.access.workQueueStatus" :work-queue-name="workQueueName" :work-pool-name="workPoolName" />
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+  import { computed, toRefs } from 'vue'
+  import { WorkPoolQueueHealthIcon, WorkQueueIconText } from '@/components'
+  import WorkPoolQueueStatusIcon from '@/components/WorkPoolQueueStatusIcon.vue'
+  import { useCan, useInterval, useWorkspaceApi } from '@/compositions'
+  import { isTerminalStateType } from '@/models'
+
+  const props = defineProps<{
+    workQueueName: string,
+    workPoolName?: string | null,
+    flowRunState?: string | null,
+  }>()
+
+  const can = useCan()
+
+  const hideWorkPoolQueueStatus = computed(() => props.flowRunState && isTerminalStateType(props.flowRunState))
+  const { workPoolName } = toRefs(props)
+
+  const api = useWorkspaceApi()
+  const workPoolQueueArgs = computed<[string, string] | null>(() => {
+    if (!props.workPoolName) {
+      return null
+    }
+    return [props.workPoolName, props.workQueueName]
+  })
+  const options = useInterval()
+
+  const workPoolQueuesSubscription = useSubscriptionWithDependencies(api.workPoolQueues.getWorkPoolQueueByName, workPoolQueueArgs, options)
+  const workPoolQueue = computed(() => workPoolQueuesSubscription.response)
+</script>
+
+<style>
+.flow-run-work-queue { @apply
+  flex gap-1 items-center
+}
+</style>

package/src/components/FlowRunsAccordion.vue

@@ -0,0 +1,69 @@
+<template>
+  <template v-if="flowIds">
+    <p-accordion :sections="flowIds" class="flow-runs-accordion">
+      <template #heading="{ section: flowId }">
+        <FlowRunsAccordionHeader :flow="getFlow(flowId)" :filter="flowRunsFilter" />
+      </template>
+      <template #content="{ section: flowId }">
+        <FlowRunsAccordionContent :flow-id="flowId" :filter="flowRunsFilter" />
+      </template>
+    </p-accordion>
+  </template>
+  <template v-if="!count && loaded">
+    <FlowRunStateTypeEmpty :state-type="stateType" />
+  </template>
+</template>
+
+<script lang="ts" setup>
+  import { computed, toRef } from 'vue'
+  import FlowRunsAccordionContent from '@/components/FlowRunsAccordionContent.vue'
+  import FlowRunsAccordionHeader from '@/components/FlowRunsAccordionHeader.vue'
+  import FlowRunStateTypeEmpty from '@/components/FlowRunStateTypeEmpty.vue'
+  import { useFlowRunsCount } from '@/compositions/useFlowRunsCount'
+  import { useFlows } from '@/compositions/useFlows'
+  import { useInterval } from '@/compositions/useInterval'
+  import { FlowRunsFilter, FlowsFilter } from '@/models/Filters'
+  import { Flow } from '@/models/Flow'
+  import { StateType } from '@/models/StateType'
+  import { Getter, MaybeGetter } from '@/types/reactivity'
+  import { MaybeArray } from '@/types/utilities'
+  import { toMap } from '@/utilities'
+
+  const props = defineProps<{
+    filter: MaybeGetter<FlowRunsFilter>,
+    stateType: MaybeArray<StateType>,
+  }>()
+
+  const flowRunsFilter = toRef(props.filter)
+  const flowsFilter: Getter<FlowsFilter> = () => {
+    // eslint-disable-next-line no-unused-vars
+    const { sort, limit, offset, ...filter } = flowRunsFilter.value
+
+    return {
+      ...filter,
+      sort: 'UPDATED_DESC',
+    }
+  }
+  const options = useInterval()
+  const { count, subscription } = useFlowRunsCount(flowRunsFilter, options)
+  const loaded = computed(() => subscription.executed)
+  const { flows } = useFlows(flowsFilter, options)
+  const flowIds = computed(() => flows.value.map(flow => flow.id))
+  const flowsLookup = computed(() => toMap(flows.value, 'id'))
+
+  function getFlow(id: string): Flow {
+    const flow = flowsLookup.value.get(id)
+
+    if (!flow) {
+      throw new Error(`FlowRunsAccordion: Flow with id ${id} not found in flowsLookup`)
+    }
+
+    return flow
+  }
+</script>
+
+<style>
+.flow-runs-accordion *:last-child {@apply
+  border-b-0
+}
+</style>