@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/components/FlowRunsAccordionContent.vue

@@ -0,0 +1,49 @@
+<template>
+  <FlowRunList :flow-runs="flowRuns" :selected="null" class="flow-flow-runs-list" hide-flow-name hide-details />
+  <template v-if="more">
+    <div class="flow-flow-runs-list__more">
+      <p-button size="sm" @click="next">
+        Show more
+      </p-button>
+    </div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import FlowRunList from '@/components/FlowRunList.vue'
+  import { useFlowRuns } from '@/compositions/useFlowRuns'
+  import { FlowRunsFilter } from '@/models/Filters'
+
+  const props = defineProps<{
+    flowId: string,
+    filter?: FlowRunsFilter,
+    flowRunLimit?: number,
+  }>()
+
+  const limit = computed(() => props.flowRunLimit ?? 3)
+
+  const filter = (): FlowRunsFilter => ({
+    ...props.filter,
+    flows: {
+      ...props.filter?.flows,
+      id: [props.flowId],
+    },
+    limit: 3,
+  })
+
+  const { flowRuns, total, next } = useFlowRuns(filter, {
+    mode: 'infinite',
+  })
+
+  const more = computed(() => total.value > limit.value)
+
+  next()
+</script>
+
+<style>
+.flow-flow-runs-list__more { @apply
+  flex
+  justify-center
+}
+</style>

package/src/components/FlowRunsAccordionHeader.vue

@@ -0,0 +1,93 @@
+<template>
+  <div :id="flow.id" class="flow-runs-accordion-header">
+    <div class="flow-runs-accordion-header__content">
+      <p-link :to="routes.flow(flow.id)" class="flow-runs-accordion-header__name">
+        {{ flow.name }}
+      </p-link>
+      <span class="flow-runs-accordion-header__time">
+        {{ lastRunTime }}
+      </span>
+    </div>
+
+    <span class="flow-runs-accordion-header__count">
+      {{ count }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useNow } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import { useFlowRunsCount } from '@/compositions/useFlowRunsCount'
+  import { useLastFlowRun } from '@/compositions/useLastFlowRun'
+  import { useWorkspaceRoutes } from '@/compositions/useWorkspaceRoutes'
+  import { FlowRunsFilter } from '@/models/Filters'
+  import { Flow } from '@/models/Flow'
+  import { formatDateTimeRelative } from '@/utilities/dates'
+
+  const props = defineProps<{
+    flow: Flow,
+    filter?: FlowRunsFilter,
+  }>()
+
+  const routes = useWorkspaceRoutes()
+  const { now } = useNow({ interval: 1000 })
+
+  const filter = computed<FlowRunsFilter>(() => ({
+    ...props.filter,
+    flows: {
+      ...props.filter?.flows,
+      id: [props.flow.id],
+    },
+  }))
+  const { flowRun: lastFlowRun } = useLastFlowRun(filter)
+
+  const lastRunTime = computed(() => {
+    if (lastFlowRun.value?.startTime) {
+      return formatDateTimeRelative(lastFlowRun.value.startTime, now.value)
+    }
+
+    return undefined
+  })
+
+  const { count } = useFlowRunsCount(filter)
+</script>
+
+<style>
+.flow-runs-accordion-header { @apply
+  flex
+  flex-1
+  gap-2
+  justify-between
+  py-2
+  items-center
+}
+
+.flow-runs-accordion-header__content { @apply
+  grid
+  gap-0.5
+  grid-cols-1
+}
+
+.flow-runs-accordion-header__time { @apply
+  text-xs
+  text-subdued
+  text-left
+}
+
+.flow-runs-accordion-header__count { @apply
+  text-sm mr-2
+}
+
+.flow-runs-accordion-header__icon { @apply
+  transition-transform
+}
+
+.flow-runs-accordion-header__icon--selected { @apply
+  rotate-180
+}
+
+.flow-runs-accordion-header__name { @apply
+  font-semibold
+}
+</style>

package/src/components/FlowRunsBarChart.vue

@@ -0,0 +1,217 @@
+<template>
+  <div ref="chart" class="flow-runs-bar-chart" :class="classes.root" :style="styles.root" @mouseleave="close">
+    <template v-for="(flowRun, index) in barFlowRuns" :key="getKey(flowRun, index)">
+      <p-pop-over class="flow-runs-bar-chart__bar-container" :to="chart" :placement="placement" :group="group" auto-close>
+        <template #target="{ open }">
+          <div class="flow-runs-bar-chart__bar" :class="getBarClasses(flowRun)" :style="getBarStyles(flowRun)" @mouseover="open" />
+        </template>
+
+        <template v-if="flowRun">
+          <div class="flow-runs-bar-chart__pop-over">
+            <FlowRunPopoverContent :flow-run-id="flowRun.id" />
+          </div>
+        </template>
+      </p-pop-over>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ClassValue, toPixels, positions, usePopOverGroup } from '@prefecthq/prefect-design'
+  import { useDebouncedRef, useElementRect } from '@prefecthq/vue-compositions'
+  import { scaleSymlog } from 'd3'
+  import merge from 'lodash.merge'
+  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'
+
+  const props = defineProps<{
+    filter: MaybeGetter<FlowRunsFilter>,
+    mini?: boolean,
+  }>()
+
+  const desiredBarWidth = computed(() => props.mini ? 6 : 12)
+  const placement = [positions.bottom, positions.right, positions.left, positions.top]
+  const group = 'flow-runs-bar-chart-pop-over'
+  const { close } = usePopOverGroup(group)
+
+  const chart = ref<HTMLDivElement>()
+  const { width, height } = useElementRect(chart)
+  const bars = computed(() => Math.floor(width.value / desiredBarWidth.value))
+  const barsDebounced = useDebouncedRef(bars, 1000)
+  const styles = computed(() => ({
+    root: `grid-template-columns: repeat(${bars.value}, 1fr)`,
+  }))
+
+  const classes = computed(() => ({
+    root: {
+      'flow-runs-bar-chart--mini': props.mini,
+    },
+  }))
+
+  const filter = (): FlowRunsFilter | null => {
+    if (isNaN(barsDebounced.value)) {
+      return null
+    }
+
+    const base = toValue(props.filter)
+    const filter: FlowRunsFilter = {
+      limit: barsDebounced.value,
+      sort: 'START_TIME_DESC',
+    }
+
+    return merge({}, base, filter)
+  }
+
+  const options = useInterval()
+  const { flowRuns } = useFlowRuns(filter, options)
+
+  const barFlowRuns = computed(() => organizeFlowRunsWithGaps(flowRuns.value))
+
+  const maxDuration = computed(() => flowRuns.value.reduce((max, flowRun) => {
+    if (flowRun.duration > max) {
+      return flowRun.duration
+    }
+
+    return max
+  }, 0))
+
+  const yScale = computed(() => {
+    const scale = scaleSymlog()
+
+    scale.domain([0, maxDuration.value])
+    scale.range([0, height.value])
+
+    return scale
+  })
+
+  function getBarClasses(flowRun: FlowRun | null): ClassValue {
+    if (!flowRun) {
+      return undefined
+    }
+
+    return [
+      `bg-state-${flowRun.stateType}-500`,
+      'flow-runs-bar-chart__bar-flow-run',
+    ]
+  }
+
+  function getBarStyles(flowRun: FlowRun | null): StyleValue {
+    if (!flowRun) {
+      return ''
+    }
+
+    return {
+      height: toPixels(yScale.value(flowRun.duration)),
+    }
+  }
+
+  function getKey(flowRun: FlowRun | null, index: number): string {
+    if (!flowRun) {
+      return `${index}`
+    }
+
+    return flowRun.id
+  }
+
+  function organizeFlowRunsWithGaps(flowRuns: FlowRun[]): (FlowRun | null)[] {
+    const { expectedStartTimeAfter, expectedStartTimeBefore } = toValue(props.filter).flowRuns ?? {}
+
+    if (!expectedStartTimeBefore || !expectedStartTimeAfter) {
+      return []
+    }
+
+    const totalTime = expectedStartTimeBefore.getTime() - expectedStartTimeAfter.getTime()
+    const bucketSize = totalTime / bars.value
+    const buckets: (FlowRun | null)[] = new Array(bars.value).fill(null)
+    const maxBucketIndex = buckets.length - 1
+
+    const isFutureTimeSpan = expectedStartTimeBefore.getTime() > new Date().getTime()
+
+    const bucketIncrementDirection = isFutureTimeSpan ? 1 : -1
+    const sortedRuns = isFutureTimeSpan
+      ? flowRuns.sort((runA, runB) => {
+        const aStartTime = runA.startTime ?? runA.expectedStartTime
+        const bStartTime = runB.startTime ?? runB.expectedStartTime
+
+        if (!aStartTime || !bStartTime) {
+          return 0
+        }
+
+        return aStartTime.getTime() - bStartTime.getTime()
+      })
+      : flowRuns
+
+    // const bucketStepper = expectedStartTimeBefore.getTime() > new Date().getTime() ? 1 : -1
+    function getEmptyBucket(index: number): number | null {
+      if (index < 0) {
+        return null
+      }
+
+      if (buckets[index]) {
+        return getEmptyBucket(index + bucketIncrementDirection)
+      }
+
+      return index
+    }
+
+    sortedRuns.forEach((flowRun) => {
+      const startTime = flowRun.startTime ?? flowRun.expectedStartTime
+
+      if (!startTime) {
+        return
+      }
+
+      const bucketIndex = Math.min(Math.floor((startTime.getTime() - expectedStartTimeAfter.getTime()) / bucketSize), maxBucketIndex)
+      const emptyBucketIndex = getEmptyBucket(bucketIndex)
+
+      if (emptyBucketIndex === null) {
+        return
+      }
+
+      buckets[emptyBucketIndex] = flowRun
+    })
+
+    return buckets
+  }
+</script>
+
+<style>
+.flow-runs-bar-chart { @apply
+  relative
+  grid
+  items-end
+  grid-rows-1;
+  --bar-padding: 3px;
+  --bar-min-height: 6px;
+}
+
+.flow-runs-bar-chart--mini {
+  --bar-padding: 1px;
+  --bar-min-height: 4px;
+}
+
+.flow-runs-bar-chart__bar-container { @apply
+  w-full
+  px-[--bar-padding]
+}
+
+.flow-runs-bar-chart__bar { @apply
+  w-full
+  rounded-full
+  min-h-[--bar-min-height]
+  bg-sentiment-neutral
+}
+
+.flow-runs-bar-chart__bar-flow-run {
+  min-height: calc(var(--bar-min-height) * 2);
+}
+
+.flow-runs-bar-chart__pop-over { @apply
+  p-2
+}
+</style>

package/src/components/FlowRunsDeleteButton.vue

@@ -0,0 +1,66 @@
+<template>
+  <Transition name="flow-runs-delete-button-transition">
+    <p-button v-if="selected.length > 0" icon="TrashIcon" @click="open" />
+  </Transition>
+  <ConfirmDeleteModal
+    v-model:showModal="showModal"
+    name="selected flow runs"
+    label="Flow Runs"
+    @delete="deleteFlowRuns(selected)"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { showToast } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import ConfirmDeleteModal from '@/components/ConfirmDeleteModal.vue'
+  import { useShowModal, useWorkspaceApi } from '@/compositions'
+  import { localization } from '@/localization'
+  import { getApiErrorMessage } from '@/utilities/errors'
+
+  defineProps<{
+    selected: string[],
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'delete'): void,
+  }>()
+
+  const { showModal, open, close } = useShowModal()
+
+  const api = useWorkspaceApi()
+
+  const deleteFlowRuns = async (flowRuns: string[]): Promise<void> => {
+    const toastMessage = computed(() => {
+      if (flowRuns.length === 1) {
+        return 'Flow run deleted'
+      }
+      return `${flowRuns.length} flow runs deleted`
+    })
+
+    close()
+
+    try {
+      const deleteFlowRuns = flowRuns.map(api.flowRuns.deleteFlowRun)
+      await Promise.all(deleteFlowRuns)
+
+      showToast(toastMessage, 'success')
+      emit('delete')
+    } catch (error) {
+      const message = getApiErrorMessage(error, localization.error.delete('Flow Run'))
+      showToast(message, 'error')
+    }
+  }
+</script>
+
+<style>
+.flow-runs-delete-button-transition-enter-active,
+.flow-runs-delete-button-transition-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.flow-runs-delete-button-transition-enter-from,
+.flow-runs-delete-button-transition-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/FlowRunsFilterGroup.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="flow-runs-filter-group">
+    <div class="flow-runs-filter-group__row">
+      <p-label label="Date Range">
+        <DateRangeSelect v-model="range" />
+      </p-label>
+      <p-label label="States">
+        <StateNameSelect v-model:selected="state" empty-message="All run states" multiple />
+      </p-label>
+    </div>
+    <div class="flow-runs-filter-group__row">
+      <p-label label="Flows">
+        <FlowCombobox v-model:selected="flow" empty-message="All flows" multiple />
+      </p-label>
+      <p-label label="Deployments">
+        <DeploymentCombobox v-model:selected="deployment" empty-message="All deployments" multiple />
+      </p-label>
+      <p-label label="Work Pools">
+        <WorkPoolCombobox v-model:selected="workPool" empty-message="All pools" multiple />
+      </p-label>
+      <p-label label="Tags">
+        <FlowRunTagsInput v-model:selected="tag" empty-message="All tags" />
+      </p-label>
+    </div>
+    <p-label class="flow-runs-filter-group__search" label="Search">
+      <SearchInput v-model="flowRunName" placeholder="Search by flow run name" label="Search by flow run name" />
+    </p-label>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { PLabel } from '@prefecthq/prefect-design'
+  import { usePatchRef } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import DateRangeSelect from '@/components/DateRangeSelect.vue'
+  import DeploymentCombobox from '@/components/DeploymentCombobox.vue'
+  import FlowCombobox from '@/components/FlowCombobox.vue'
+  import FlowRunTagsInput from '@/components/FlowRunTagsInput.vue'
+  import SearchInput from '@/components/SearchInput.vue'
+  import StateNameSelect from '@/components/StateNameSelect.vue'
+  import WorkPoolCombobox from '@/components/WorkPoolCombobox.vue'
+  import { SavedSearchFilter } from '@/models/SavedSearch'
+
+  const props = defineProps<{
+    filter: SavedSearchFilter,
+    nameSearch: string,
+  }>()
+
+  const emit = defineEmits<{
+    'update:filter': [SavedSearchFilter],
+    'update:name': [string],
+  }>()
+
+  const internalFilter = computed({
+    get() {
+      return props.filter
+    },
+    set(filter) {
+      emit('update:filter', filter)
+    },
+  })
+
+  const flowRunName = computed({
+    get() {
+      return props.nameSearch
+    },
+    set(name) {
+      emit('update:name', name)
+    },
+  })
+
+  const state = usePatchRef(internalFilter, 'state')
+  const flow = usePatchRef(internalFilter, 'flow')
+  const deployment = usePatchRef(internalFilter, 'deployment')
+  const workPool = usePatchRef(internalFilter, 'workPool')
+  const tag = usePatchRef(internalFilter, 'tag')
+  const range = usePatchRef(internalFilter, 'range')
+</script>
+
+<style>
+.flow-runs-filter-group { @apply
+  flex
+  flex-col
+  gap-2
+}
+
+.flow-runs-filter-group__row { @apply
+  flex
+  flex-wrap
+  gap-2
+  md:grid
+  md:grid-flow-col
+  md:auto-cols-fr
+}
+
+.flow-runs-filter-group__search { @apply
+  md:hidden
+}
+
+.flow-runs-filter-group__date { @apply
+  flex
+  flex-wrap
+  justify-center
+  gap-1
+}
+
+.flow-runs-filter-group__date-value { @apply
+  w-full
+}
+</style>

package/src/components/FlowRunsPageEmptyState.vue

@@ -0,0 +1,29 @@
+<template>
+  <p-empty-state class="flow-runs-page-empty-state">
+    <template #icon>
+      <p-icon icon="FlowRun" />
+    </template>
+
+    <template #heading>
+      Run a flow to get started
+    </template>
+
+    <template #description>
+      Flow runs store the state history for each execution of a flow.
+    </template>
+
+    <template #actions>
+      <slot name="actions">
+        <DocumentationButton :to="localization.docs.gettingStarted">
+          Get Started
+        </DocumentationButton>
+      </slot>
+    </template>
+  </p-empty-state>
+</template>
+
+<script lang="ts" setup>
+  import { PEmptyState, PIcon } from '@prefecthq/prefect-design'
+  import DocumentationButton from '@/components/DocumentationButton.vue'
+  import { localization } from '@/localization'
+</script>

package/src/components/FlowRunsPageWithDefaultFilter.vue

@@ -0,0 +1,55 @@
+<template>
+  <component :is="routeComponent" v-if="routeComponent !== null" />
+</template>
+
+<script lang="ts">
+  import { defineComponent, shallowRef, watch } from 'vue'
+  import { NavigationGuard, RouteComponent } from 'vue-router'
+  import { isEmptyObject, mapper, isFunction } from '..'
+  import { useDefaultSavedSearchFilter } from '@/compositions/useDefaultSavedSearchFilter'
+
+  const setDefaultFlowRunsFilterQueryIfEmpty: NavigationGuard = (to) => {
+    const { value: defaultFlowRunsSavedSearchFilter, isCustom } = useDefaultSavedSearchFilter()
+
+    if (isEmptyObject(to.query) && isCustom.value) {
+      try {
+        const query = mapper.map('SavedSearchFilter', defaultFlowRunsSavedSearchFilter.value, 'LocationQuery')
+
+        return { ...to, query }
+      } catch (error) {
+        console.error(error)
+      }
+    }
+
+    return true
+  }
+
+  export default defineComponent({
+    expose: [],
+    beforeRouteEnter: setDefaultFlowRunsFilterQueryIfEmpty,
+    beforeRouteUpdate: setDefaultFlowRunsFilterQueryIfEmpty,
+  })
+</script>
+
+<script setup lang="ts">
+  type LazilyLoadedRouteComponent = () => Promise<{ default: RouteComponent }>
+  const props = defineProps<{
+    component: RouteComponent | LazilyLoadedRouteComponent,
+  }>()
+
+  const routeComponent = shallowRef<RouteComponent | null>(null)
+
+  function isLazilyLoadedRouteComponent(component: RouteComponent | LazilyLoadedRouteComponent): component is LazilyLoadedRouteComponent {
+    return isFunction(component)
+  }
+
+  watch(props.component, () => {
+    if (isLazilyLoadedRouteComponent(props.component)) {
+      props.component().then(component => {
+        routeComponent.value = component.default
+      })
+    } else {
+      routeComponent.value = props.component
+    }
+  }, { immediate: true })
+</script>