@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/components/WorkQueueStatusIcon.vue

@@ -0,0 +1,43 @@
+<template>
+  <template v-if="workQueue && workQueueStatus">
+    <p-icon :icon="status.icon" size="small" class="work-queue-status-icon" :class="classes" />
+  </template>
+</template>
+
+<script lang="ts">
+  /** @deprecated prefer `<WorkPoolQueueStatusIcon>` */
+  export default {}
+</script>
+
+<script lang="ts" setup>
+  import { Icon } from '@prefecthq/prefect-design'
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import { useWorkQueueStatus, useWorkspaceApi } from '@/compositions'
+
+  const props = defineProps<{
+    workQueueName: string,
+  }>()
+
+  const api = useWorkspaceApi()
+
+  const workQueueName = computed(() => props.workQueueName)
+  const workQueuesSubscription = useSubscription(api.workQueues.getWorkQueueByName, [workQueueName])
+  const workQueue = computed(() => workQueuesSubscription.response)
+
+  const workQueueId = computed(() => workQueue.value?.id)
+  const { workQueueStatus } = useWorkQueueStatus(workQueueId)
+  const healthy = computed(() => workQueueStatus.value?.healthy)
+
+  const status = computed<{ name: string, icon: Icon }>(() => {
+    if (workQueue.value?.isPaused) {
+      return { name: 'Paused', icon: 'PauseIcon' }
+    }
+    if (healthy.value) {
+      return { name: 'Healthy', icon: 'CheckCircleIcon' }
+    }
+    return { name: 'Unhealthy', icon: 'XCircleIcon' }
+  })
+
+  const classes = computed(() => `work-queue-status-icon--${status.value.name.toLowerCase()}`)
+</script>

package/src/components/WorkQueueStatusSelect.vue

@@ -0,0 +1,35 @@
+<template>
+  <p-select v-model="internalSelected" class="work-queue-status-select" :options="options" />
+</template>
+
+<script lang="ts" setup>
+  import { SelectOption } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import { WorkPoolQueueStatus } from '@/models/WorkPoolQueue'
+
+  const props = defineProps<{
+    selected: WorkPoolQueueStatus,
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'update:selected', value: WorkPoolQueueStatus): void,
+  }>()
+
+  type WorkQueueStatusOption = SelectOption & {
+    value: WorkPoolQueueStatus,
+  }
+  const options: WorkQueueStatusOption[] = [
+    { label: 'Ready', value: 'ready' },
+    { label: 'Paused', value: 'paused' },
+    { label: 'Not Ready', value: 'not_ready' },
+  ]
+
+  const internalSelected = computed({
+    get() {
+      return props.selected
+    },
+    set(value) {
+      emit('update:selected', value)
+    },
+  })
+</script>

package/src/components/WorkQueueToggle.vue

@@ -0,0 +1,69 @@
+<template>
+  <p-tooltip text="Pause or resume this work queue">
+    <p-toggle v-if="can.update.work_queue" v-model="internalValue" :loading="loading" />
+  </p-tooltip>
+</template>
+
+<script lang="ts" setup>
+  import { PToggle, showToast } from '@prefecthq/prefect-design'
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed, ref } from 'vue'
+  import { useWorkspaceApi } from '@/compositions'
+  import { useCan } from '@/compositions/useCan'
+  import { localization } from '@/localization'
+  import { WorkQueue } from '@/models'
+  import { getApiErrorMessage } from '@/utilities/errors'
+
+  const props = defineProps<{
+    workQueue: WorkQueue,
+  }>()
+
+  const can = useCan()
+
+  const api = useWorkspaceApi()
+  const workQueueName = computed(() => props.workQueue.name)
+  const workQueueSubscription = useSubscription(api.workQueues.getWorkQueueByName, [workQueueName])
+
+  const emit = defineEmits<{
+    (event: 'update'): void,
+  }>()
+
+  const internalValue = computed({
+    get() {
+      return !props.workQueue.isPaused
+    },
+    set(value: boolean) {
+      toggleWorkQueue(value)
+    },
+  })
+
+  const loading = ref(false)
+
+  const toggleWorkQueue = async (value: boolean): Promise<void> => {
+    loading.value = true
+
+    try {
+      if (value) {
+        await api.workQueues.resumeWorkQueue(props.workQueue.id)
+
+        showToast(localization.success.activateWorkQueue, 'success')
+      } else {
+        await api.workQueues.pauseWorkQueue(props.workQueue.id)
+
+        showToast(localization.success.pauseWorkQueue, 'success')
+      }
+
+      workQueueSubscription.refresh()
+      emit('update')
+    } catch (error) {
+      const defaultMessage = value ? localization.error.activateWorkQueue : localization.error.pauseWorkQueue
+      const message = getApiErrorMessage(error, defaultMessage)
+      showToast(message, 'error')
+
+      console.error(error)
+    } finally {
+      loading.value = false
+    }
+  }
+</script>
+

package/src/components/WorkQueuesDeleteButton.vue

@@ -0,0 +1,66 @@
+<template>
+  <Transition name="work-queues-delete-button-transition">
+    <p-button v-if="selected.length > 0" icon="TrashIcon" @click="open" />
+  </Transition>
+  <ConfirmDeleteModal
+    v-model:showModal="showModal"
+    name="selected work queues"
+    label="Work Queues"
+    @delete="deleteWorkQueues(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 { WorkQueue } from '@/models'
+  import { getApiErrorMessage } from '@/utilities/errors'
+
+  defineProps<{
+    selected: WorkQueue[],
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'delete'): void,
+  }>()
+
+  const { showModal, open, close } = useShowModal()
+
+  const api = useWorkspaceApi()
+
+  const deleteWorkQueues = async (workQueues: WorkQueue[]): Promise<void> => {
+    const toastMessage = computed(() => {
+      if (workQueues.length === 1) {
+        return localization.success.delete('Work queue')
+      }
+      return localization.success.delete(`${workQueues.length} work queues`)
+    })
+
+    try {
+      const deleteWorkQueues = workQueues.map(queue => api.workQueues.deleteWorkQueue(queue.id))
+      await Promise.all(deleteWorkQueues)
+      showToast(toastMessage, 'success')
+      emit('delete')
+    } catch (error) {
+      const message = getApiErrorMessage(error, localization.error.delete('work queues'))
+      showToast(message, 'error')
+    } finally {
+      close()
+    }
+  }
+</script>
+
+<style>
+.work-queues-delete-button-transition-enter-active,
+.work-queues-delete-button-transition-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.work-queues-delete-button-transition-enter-from,
+.work-queues-delete-button-transition-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/WorkQueuesPageEmptyState.vue

@@ -0,0 +1,42 @@
+<template>
+  <p-empty-state>
+    <template #icon>
+      <p-icon icon="Flow" class="empty-work-queue--icon " />
+      <p-icon icon="EllipsisHorizontalIcon" class="empty-work-queue--icon " />
+      <p-icon icon="CircleStackIcon" class="empty-work-queue--icon " />
+    </template>
+
+    <template #heading>
+      Create a work queue to run your deployments
+    </template>
+
+    <template #description>
+      Work queues organize runs into meaningful groups to be picked up by a corresponding agent process.
+    </template>
+
+    <template #actions>
+      <DocumentationButton :to="localization.docs.workQueues" />
+      <p-button v-if="can.create.work_queue" icon-append="PlusIcon" :to="routes.workQueueCreate()">
+        Create Work Queue
+      </p-button>
+    </template>
+  </p-empty-state>
+</template>
+
+<script lang="ts" setup>
+  import { PEmptyState, PButton, PIcon } from '@prefecthq/prefect-design'
+  import DocumentationButton from '@/components/DocumentationButton.vue'
+  import { useWorkspaceRoutes } from '@/compositions'
+  import { useCan } from '@/compositions/useCan'
+  import { localization } from '@/localization'
+
+  const can = useCan()
+  const routes = useWorkspaceRoutes()
+</script>
+
+<style>
+.empty-work-queue--icon { @apply
+  w-12
+  h-12
+}
+</style>

package/src/components/WorkQueuesTable.vue

@@ -0,0 +1,146 @@
+<template>
+  <p-content class="work-queues-table">
+    <p-list-header sticky>
+      <template v-if="selected">
+        <ResultsCount v-if="selected.length == 0" label="Work queue" :count="filteredWorkQueues.length" />
+        <SelectedCount v-else :count="selected.length" />
+        <WorkQueuesDeleteButton v-if="can.delete.work_queue" :selected="selected" @delete="handleDelete" />
+      </template>
+
+      <template #controls>
+        <SearchInput v-model="search" placeholder="Search work queues" label="Search work queues" />
+      </template>
+    </p-list-header>
+
+    <p-table v-model:selected="selected" :data="filteredWorkQueues" :columns="columns">
+      <template #action-heading>
+        <span />
+      </template>
+
+      <template #name="{ row }">
+        <p-link :to="routes.workQueue(row.id)">
+          <span>{{ row.name }}</span>
+        </p-link>
+      </template>
+
+      <template #concurrency="{ row }">
+        <span> {{ row.concurrencyLimit ?? 'Unlimited' }} </span>
+      </template>
+
+      <template #status="{ row }">
+        <WorkQueueStatusBadge :work-queue="row" />
+      </template>
+
+      <template #last-polled="{ row }">
+        <WorkQueueLastPolled :work-queue-id="row.id" />
+      </template>
+
+      <template #action="{ row }">
+        <div class="work-queues-table__actions">
+          <WorkQueueLateIndicator :work-queue-id="row.id" />
+          <WorkQueueToggle :work-queue="row" @update="emit('update')" />
+          <WorkQueueMenu size="xs" :work-queue="row" @delete="handleDelete" />
+        </div>
+      </template>
+
+      <template #empty-state>
+        <PEmptyResults>
+          <template #message>
+            No work queues
+          </template>
+          <template #actions>
+            <p-button size="sm" @click="clear">
+              Clear Filters
+            </p-button>
+          </template>
+        </PEmptyResults>
+      </template>
+    </p-table>
+  </p-content>
+</template>
+
+<script lang="ts" setup>
+  import { TableColumn } from '@prefecthq/prefect-design'
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed, ref, toRefs } from 'vue'
+  import { WorkQueueToggle, WorkQueueLateIndicator, SearchInput, ResultsCount, WorkQueueLastPolled, WorkQueueStatusBadge, SelectedCount, WorkQueuesDeleteButton, WorkQueueMenu } from '@/components'
+  import { useCan, useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
+  import { WorkQueue, WorkQueueTableData } from '@/models'
+  import { hasString, isRecord } from '@/utilities'
+
+  const props = defineProps<{
+    workQueues: WorkQueue[],
+  }>()
+
+  const { workQueues } = toRefs(props)
+
+  const emit = defineEmits<{
+    (event: 'update' | 'delete'): void,
+  }>()
+
+  const api = useWorkspaceApi()
+  const can = useCan()
+  const routes = useWorkspaceRoutes()
+
+  const search = ref('')
+  const selected = ref<WorkQueue[] | undefined>(can.delete.work_queue ? [] : undefined)
+
+  const columns: TableColumn<WorkQueue>[] = [
+    {
+      property: 'name',
+      label: 'Name',
+    },
+    {
+      label: 'Concurrency',
+    },
+    {
+      label: 'Status',
+    },
+    {
+      label: 'Last Polled',
+    },
+    {
+      label: 'Action',
+      width: '42px',
+    },
+  ]
+
+  const subscriptionOptions = {
+    interval: 30000,
+  }
+
+  const workPoolsSubscription = useSubscription(api.workPools.getWorkPools, [], subscriptionOptions)
+  const workPools = computed(() => workPoolsSubscription.response ?? [])
+
+  const workQueuesData = computed(() => workQueues.value.map(queue => new WorkQueueTableData({
+    ...queue,
+    disabled: workPools.value.some(pool => pool.defaultQueueId == queue.id),
+  })))
+
+  const filteredWorkQueues = computed(() => {
+    if (search.value.length === 0) {
+      return workQueuesData.value
+    }
+
+    return workQueuesData.value.filter(queue => isRecord(queue) && hasString(queue, search.value))
+  })
+
+  const handleDelete = (): void => {
+    emit('delete')
+    selected.value = []
+    selected.value = selected.value.filter(queue => workQueues.value.find(({ id }) => id === queue.id))
+  }
+
+  function clear(): void {
+    search.value = ''
+  }
+</script>
+
+<style>
+.work-queues-table__actions { @apply
+  justify-end
+  items-center
+  flex
+  gap-2
+}
+</style>

package/src/components/WorkerStatusBadge.vue

@@ -0,0 +1,21 @@
+<template>
+  <p-tag>
+    <StatusIcon :status="worker.status === 'online' ? 'ready' : 'not_ready'" />
+    <span class="worker-status-badge--status-text">{{ worker.status }}</span>
+  </p-tag>
+</template>
+
+<script lang="ts" setup>
+  import StatusIcon from '@/components/StatusIcon.vue'
+  import { WorkPoolWorker } from '@/models'
+
+  defineProps<{
+    worker: WorkPoolWorker,
+  }>()
+</script>
+
+<style>
+.worker-status-badge--status-text { @apply
+  capitalize
+}
+</style>

package/src/components/WorkersLateIndicator.vue

@@ -0,0 +1,52 @@
+<template>
+  <p-tag v-if="lateFlowRunsCount" class="workers-late-indicator">
+    {{ lateFlowRunsCount }} {{ toPluralString('Late run', lateFlowRunsCount) }}
+  </p-tag>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'WorkersLateIndicator',
+    expose: [],
+    inheritAttrs: false,
+  }
+</script>
+
+<script lang="ts" setup>
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import { useWorkspaceApi } from '@/compositions'
+  import { FlowRunsFilter } from '@/models'
+  import { toPluralString } from '@/utilities'
+
+  const props = defineProps<{
+    workPoolName: string,
+    workPoolQueueNames?: string[],
+  }>()
+
+  const api = useWorkspaceApi()
+
+  const flowRunsFilter = computed<FlowRunsFilter>(() => ({
+    workPools: {
+      name: [props.workPoolName],
+    },
+    workPoolQueues: {
+      name: props.workPoolQueueNames,
+    },
+    flowRuns: {
+      state: {
+        name: ['Late'],
+      },
+    },
+  }))
+
+  const flowRunsCountSubscription = useSubscription(api.flowRuns.getFlowRunsCount, [flowRunsFilter], { interval: 30000 })
+  const lateFlowRunsCount = computed(() => flowRunsCountSubscription.response ?? 0)
+</script>
+
+<style>
+.workers-late-indicator { @apply
+  bg-state-scheduled-100
+  text-state-scheduled-700
+}
+</style>

package/src/components/WorkersTable.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="workers-table">
+    <div class="workers-table__filters">
+      <ResultsCount label="Worker" :count="filteredWorkers.length" class="workers-table__results" />
+
+      <SearchInput v-model="searchValue" class="workers-table__search" placeholder="Search workers" />
+    </div>
+
+    <p-table :data="filteredWorkers" :columns="columns">
+      <template #name="{ row }">
+        <span>{{ row.name }}</span>
+      </template>
+
+      <template #last-seen="{ value }">
+        <span>{{ formatDateTimeRelative(value, now) }}</span>
+      </template>
+
+      <template #status="{ row }">
+        <WorkerStatusBadge :worker="row" />
+      </template>
+
+      <template #action-heading>
+        <span />
+      </template>
+
+      <template #action="{ row }">
+        <div class="workers-table__actions">
+          <p-icon-button-menu>
+            <CopyOverflowMenuItem label="Copy ID" :item="row.id" />
+            <p-overflow-menu-item label="Delete" @click="open" />
+          </p-icon-button-menu>
+        </div>
+        <ConfirmDeleteModal
+          v-model:showModal="showModal"
+          label="Worker"
+          :name="row.name"
+          @delete="deleteWorker(row.name)"
+        />
+      </template>
+
+      <template #empty-state>
+        <PEmptyResults>
+          <template #message>
+            No workers
+          </template>
+          <template v-if="hasFilters" #actions>
+            <p-button size="sm" @click="clear">
+              Clear Filters
+            </p-button>
+          </template>
+        </PEmptyResults>
+      </template>
+    </p-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { TableColumn } from '@prefecthq/prefect-design'
+  import { useNow, useSubscription } from '@prefecthq/vue-compositions'
+  import { computed, ref, toRefs } from 'vue'
+  import { ResultsCount, SearchInput, CopyOverflowMenuItem, WorkerStatusBadge, ConfirmDeleteModal } from '@/components'
+  import { useWorkspaceApi, useShowModal } from '@/compositions'
+  import { WorkPoolWorker } from '@/models'
+  import { deleteItem, formatDateTimeRelative } from '@/utilities'
+
+  const props = defineProps<{
+    workPoolName: string,
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'delete'): void,
+  }>()
+
+  const api = useWorkspaceApi()
+  const subscriptionOptions = {
+    interval: 30000,
+  }
+  const { now } = useNow({ interval: 1000 })
+
+  const { workPoolName } = toRefs(props)
+
+  const workPoolWorkersSubscription = useSubscription(api.workPoolWorkers.getWorkers, [workPoolName.value], subscriptionOptions)
+  const workPoolWorkers = computed(() => workPoolWorkersSubscription.response ?? [])
+
+  const searchValue = ref<string>('')
+
+  const filteredWorkers = computed(() => {
+    if (!searchValue.value) {
+      return workPoolWorkers.value
+    }
+
+    return workPoolWorkers.value.filter(key => key.name.toLowerCase().includes(searchValue.value.toLowerCase()),
+    )
+  })
+
+  const hasFilters = computed(() => {
+    return !!searchValue.value
+  })
+
+  const columns: TableColumn<WorkPoolWorker>[] = [
+    {
+      property: 'name',
+      label: 'Name',
+    },
+    {
+      property: 'lastHeartbeatTime',
+      label: 'Last Seen',
+    },
+    {
+      property: 'status',
+      label: 'Status',
+    },
+    {
+      label: 'Action',
+      width: '42px',
+    },
+  ]
+
+  function clear(): void {
+    searchValue.value = ''
+  }
+
+  const { showModal, open, close } = useShowModal()
+  async function deleteWorker(workerName: string): Promise<void> {
+    close()
+    await deleteItem({ 'workPoolName': workPoolName.value, 'workerName': workerName }, api.workPoolWorkers.deleteWorker, 'Worker')
+    emit('delete')
+  }
+</script>
+
+<style>
+.workers-table { @apply
+  grid
+  gap-4
+}
+
+.workers-table__filters { @apply
+  grid
+  md:flex
+  gap-2
+  justify-between
+  items-center
+}
+
+.workers-table__actions { @apply
+  justify-end
+  items-center
+  flex
+  gap-2
+}
+</style>

package/src/components/WorkspaceDashboardFlowRunsCard.vue

@@ -0,0 +1,53 @@
+<template>
+  <p-card class="workspace-dashboard-flow-runs-card">
+    <header class="workspace-dashboard-flow-runs-card__header">
+      <p-heading heading="5">
+        Flow Runs
+      </p-heading>
+      <template v-if="count">
+        <StatisticKeyValue label="total" :value="count" />
+      </template>
+    </header>
+    <FlowRunsBarChart class="workspace-dashboard-flow-runs-card__chart" :filter="flowRunsFilter" />
+    <FlowRunStateTypeTabs :filter="flowRunsFilter" />
+  </p-card>
+</template>
+
+<script lang="ts" setup>
+  import FlowRunsBarChart from '@/components/FlowRunsBarChart.vue'
+  import FlowRunStateTypeTabs from '@/components/FlowRunStateTypeTabs.vue'
+  import StatisticKeyValue from '@/components/StatisticKeyValue.vue'
+  import { useFlowRunsCount } from '@/compositions/useFlowRunsCount'
+  import { useInterval } from '@/compositions/useInterval'
+  import { FlowRunsFilter } from '@/models/Filters'
+  import { mapper } from '@/services/Mapper'
+  import { WorkspaceDashboardFilter } from '@/types/dashboard'
+  import { Getter } from '@/types/reactivity'
+
+  const props = defineProps<{
+    filter: WorkspaceDashboardFilter,
+  }>()
+
+  const options = useInterval()
+  const flowRunsFilter: Getter<FlowRunsFilter> = () => mapper.map('WorkspaceDashboardFilter', props.filter, 'FlowRunsFilter')
+  const { count } = useFlowRunsCount(flowRunsFilter, options)
+</script>
+
+<style>
+.workspace-dashboard-flow-runs-card { @apply
+  grid
+  grid-cols-1
+  auto-rows-max
+  gap-4
+}
+
+.workspace-dashboard-flow-runs-card__header { @apply
+  flex
+  items-center
+  justify-between
+}
+
+.workspace-dashboard-flow-runs-card__chart { @apply
+  h-24
+}
+</style>