@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/components/WorkPoolQueueToggle.vue

@@ -0,0 +1,61 @@
+<template>
+  <p-tooltip text="Pause or resume this work queue">
+    <p-toggle v-if="can.update.work_queue" v-model="internalValue" />
+  </p-tooltip>
+</template>
+
+<script lang="ts" setup>
+  import { PToggle, showToast } from '@prefecthq/prefect-design'
+  import { computed, toRefs } from 'vue'
+  import { useCan, useWorkspaceApi } from '@/compositions'
+  import { localization } from '@/localization'
+  import { WorkPoolQueue } from '@/models'
+  import { getApiErrorMessage } from '@/utilities/errors'
+
+  const props = defineProps<{
+    workPoolName: string,
+    workPoolQueue: WorkPoolQueue,
+  }>()
+
+  const { workPoolName } = toRefs(props)
+  const { workPoolQueue } = toRefs(props)
+
+  const emit = defineEmits<{
+    (event: 'update'): void,
+  }>()
+
+  const can = useCan()
+  const api = useWorkspaceApi()
+
+  const internalValue = computed({
+    get() {
+      return !props.workPoolQueue.isPaused
+    },
+    set(value: boolean) {
+      toggle(value)
+    },
+  })
+
+  const toggle = async (value: boolean): Promise<void> => {
+
+    try {
+      if (value) {
+        await api.workPoolQueues.resumeWorkPoolQueue(workPoolName.value, workPoolQueue.value.name)
+
+        showToast(localization.success.activateWorkPoolQueue, 'success')
+      } else {
+        await api.workPoolQueues.pauseWorkPoolQueue(workPoolName.value, workPoolQueue.value.name)
+
+        showToast(localization.success.pauseWorkPoolQueue, 'success')
+      }
+
+      emit('update')
+    } catch (error) {
+      const defaultMessage = value ? localization.error.pauseWorkPoolQueue : localization.error.activateWorkPoolQueue
+      const message = getApiErrorMessage(error, defaultMessage)
+      showToast(message, 'error')
+
+      console.error(error)
+    }
+  }
+</script>

package/src/components/WorkPoolQueueUpcomingFlowRunsList.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="work-pool-queue-upcoming-flow-runs-list">
+    <FlowRunList :flow-runs="flowRuns" />
+
+    <p-empty-results v-if="empty">
+      <template v-if="isPaused" #message>
+        <p-icon class="work-queue-flow-runs-list__icon" icon="PauseIcon" />
+        This work queue is paused and will not submit runs
+      </template>
+      <template v-else #message>
+        No upcoming runs
+      </template>
+    </p-empty-results>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, toRefs, watch } from 'vue'
+  import { FlowRunList } from '@/components'
+  import { useFlowRuns } from '@/compositions'
+  import { FlowRunsFilter, WorkPoolQueue } from '@/models'
+
+  const props = defineProps<{
+    workPoolName: string,
+    workPoolQueue: WorkPoolQueue,
+  }>()
+
+  const { workPoolQueue } = toRefs(props)
+
+  const filter = (): FlowRunsFilter => ({
+    flowRuns: {
+      state: {
+        name: ['Scheduled'],
+      },
+    },
+    workPools: {
+      name: [props.workPoolName],
+    },
+    workPoolQueues: {
+      name: [props.workPoolQueue.name],
+    },
+  })
+
+  const { flowRuns, subscriptions } = useFlowRuns(filter)
+
+  const empty = computed(() => subscriptions.executed && flowRuns.value.length === 0)
+  const isPaused = computed(() => workPoolQueue.value.isPaused)
+
+  // pretty sure this isn't needed but I haven't tested for sure
+  // the subscription should refresh automatically because if the workPoolQueue
+  // updates the filter will update which creates a new subscription
+  watch(() => workPoolQueue, () => {
+    subscriptions.refresh()
+  })
+</script>

package/src/components/WorkPoolQueuesDeleteButton.vue

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

package/src/components/WorkPoolQueuesTable.vue

@@ -0,0 +1,127 @@
+<template>
+  <p-content class="work-pool-queues-table">
+    <p-list-header sticky>
+      <ResultsCount v-if="selected.length == 0" label="Work Queue" :count="filteredWorkPoolQueues.length" />
+      <SelectedCount v-else :count="selected.length" />
+      <p-button v-if="can.create.work_queue && !selected.length" size="sm" icon="PlusIcon" :to="routes.workPoolQueueCreate(workPoolName)" />
+
+      <WorkPoolQueuesDeleteButton v-if="can.delete.work_queue" :work-pool-name="workPoolName" :work-pool-queues="selected" @delete="handleDelete" />
+
+      <template #controls>
+        <SearchInput v-model="search" label="Search" placeholder="Search" />
+      </template>
+    </p-list-header>
+
+    <p-table :selected="can.delete.work_queue ? selected : undefined" :data="filteredWorkPoolQueues" :columns="columns" @update:selected="selected = $event">
+      <template #priority-heading>
+        <WorkPoolQueuePriorityLabel />
+      </template>
+
+      <template #actions-heading>
+        <span />
+      </template>
+
+      <template #name="{ row }">
+        <p-link :to="routes.workPoolQueue(workPoolName, row.name)">
+          <span>{{ row.name }}</span>
+        </p-link>
+      </template>
+
+      <template #status="{ row }">
+        <WorkPoolQueueStatusBadge v-if="workPool" :work-queue="row" :work-pool="workPool" />
+      </template>
+
+      <template #actions="{ row }">
+        <div class="worker-pool-queues-table__actions">
+          <WorkersLateIndicator :work-pool-name="workPoolName" :work-pool-queue-names="[row.name]" />
+          <WorkPoolQueueToggle :work-pool-queue="row" :work-pool-name="workPoolName" @update="refresh" />
+          <WorkPoolQueueMenu :work-pool-name="workPoolName" :work-pool-queue="row" size="xs" @delete="handleDelete" />
+        </div>
+      </template>
+    </p-table>
+  </p-content>
+</template>
+
+<script lang="ts" setup>
+  import { TableColumn } from '@prefecthq/prefect-design'
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { ref, computed } from 'vue'
+  import { SearchInput, ResultsCount, SelectedCount, WorkPoolQueuesDeleteButton, WorkPoolQueuePriorityLabel, WorkersLateIndicator, WorkPoolQueueToggle, WorkPoolQueueStatusBadge } from '@/components'
+  import { useCan, useWorkspaceRoutes, useWorkspaceApi, useComponent } from '@/compositions'
+  import { WorkPoolQueue, WorkPoolQueueTableData } from '@/models'
+  import { hasString, isRecord } from '@/utilities'
+
+  const props = defineProps<{
+    workPoolName: string,
+  }>()
+
+  const api = useWorkspaceApi()
+  const can = useCan()
+  const routes = useWorkspaceRoutes()
+  const { WorkPoolQueueMenu } = useComponent()
+
+  const search = ref('')
+
+  const workPoolSubscription = useSubscription(api.workPools.getWorkPoolByName, [props.workPoolName])
+  const workPool = computed(() => {
+    return workPoolSubscription.response
+  })
+  const workPoolQueuesSubscription = useSubscription(api.workPoolQueues.getWorkPoolQueues, [props.workPoolName])
+  const workPoolQueues = computed(() => workPoolQueuesSubscription.response ?? [])
+
+
+  const workPoolQueuesData = computed(() => workPoolQueues.value.map(queue => new WorkPoolQueueTableData({
+    ...queue,
+    disabled: !workPool.value || workPool.value.defaultQueueId == queue.id,
+  })))
+
+  const filteredWorkPoolQueues = computed(() => {
+    if (search.value.length == 0) {
+      return workPoolQueuesData.value
+    }
+
+    return workPoolQueuesData.value.filter(queue => isRecord(queue) && hasString(queue, search.value))
+  })
+
+  const selected = ref<WorkPoolQueue[]>([])
+  const columns: TableColumn<WorkPoolQueue>[] = [
+    {
+      property: 'name',
+      label: 'Name',
+    },
+    {
+      property: 'concurrencyLimit',
+      label: 'Concurrency Limit',
+    },
+    {
+      property: 'priority',
+      label: 'Priority',
+    },
+    {
+      label: 'Status',
+    },
+    {
+      label: 'Actions',
+      width: '42px',
+    },
+  ]
+
+  const handleDelete = async (): Promise<void> => {
+    await workPoolQueuesSubscription.refresh()
+    selected.value = []
+  }
+
+  function refresh(): void {
+    workPoolSubscription.refresh()
+    workPoolQueuesSubscription.refresh()
+  }
+</script>
+
+<style>
+.worker-pool-queues-table__actions { @apply
+  justify-end
+  items-center
+  flex
+  gap-2
+}
+</style>

package/src/components/WorkPoolStatusBadge.vue

@@ -0,0 +1,18 @@
+<template>
+  <template v-if="workPool.status">
+    <p-tag>
+      <WorkPoolStatusIcon :work-pool="workPool" />
+      {{ titleCase(workPool.status) }}
+    </p-tag>
+  </template>
+</template>
+
+<script lang="ts" setup>
+  import WorkPoolStatusIcon from '@/components/WorkPoolStatusIcon.vue'
+  import { WorkPool } from '@/models'
+  import { titleCase } from '@/utilities'
+
+  defineProps<{
+    workPool: WorkPool,
+  }>()
+</script>

package/src/components/WorkPoolStatusIcon.vue

@@ -0,0 +1,51 @@
+<template>
+  <p-tooltip
+    v-if="status"
+    class="work-pool-status-icon"
+    :text="tooltipText"
+  >
+    <StatusIcon v-if="status !== 'paused'" :status="status" />
+    <p-icon
+      v-if="status === 'paused'"
+      icon="PauseCircleIcon"
+      size="small"
+      class="work-pool-status-icon--paused"
+    />
+  </p-tooltip>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import StatusIcon from '@/components/StatusIcon.vue'
+  import { WorkPool } from '@/models'
+
+  const props = defineProps<{
+    workPool: WorkPool,
+  }>()
+
+  const status = computed(() => props.workPool.status)
+
+  const tooltipText = computed(() => {
+    switch (status.value) {
+      case 'ready':
+        if (props.workPool.isPushPool) {
+          return 'Work pool is ready.'
+        }
+        return 'Work pool has at least one online worker ready to execute work.'
+      case 'not_ready':
+        return 'Work pool does not have any online workers ready to execute work.'
+      case 'paused':
+        return 'Work pool is paused. No work will be executed.'
+      default:
+        return ''
+    }
+  })
+</script>
+
+<style>
+.work-pool-status-icon--paused { @apply
+  flex
+  items-center
+  text-subdued
+}
+</style>

package/src/components/WorkPoolStatusSelect.vue

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

package/src/components/WorkPoolToggle.vue

@@ -0,0 +1,56 @@
+<template>
+  <p-tooltip text="Pause or resume this work pool">
+    <p-toggle v-if="can.update.work_pool" v-model="internalValue" />
+  </p-tooltip>
+</template>
+
+<script lang="ts" setup>
+  import { PToggle, showToast } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import { useCan, useWorkspaceApi } from '@/compositions'
+  import { localization } from '@/localization'
+  import { WorkPool } from '@/models'
+  import { getApiErrorMessage } from '@/utilities/errors'
+
+  const props = defineProps<{
+    workPool: WorkPool,
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'update'): void,
+  }>()
+
+  const can = useCan()
+  const api = useWorkspaceApi()
+
+  const internalValue = computed({
+    get() {
+      return !props.workPool.isPaused
+    },
+    set(value: boolean) {
+      toggle(value)
+    },
+  })
+
+  const toggle = async (value: boolean): Promise<void> => {
+    try {
+      if (value) {
+        await api.workPools.resumeWorkPool(props.workPool.name)
+
+        showToast(localization.success.activateWorkPool, 'success')
+      } else {
+        await api.workPools.pauseWorkPool(props.workPool.name)
+
+        showToast(localization.success.pauseWorkPool, 'success')
+      }
+
+      emit('update')
+    } catch (error) {
+      const defaultMessage = value ? localization.error.pauseWorkPool : localization.error.activateWorkPool
+      const message = getApiErrorMessage(error, defaultMessage)
+      showToast(message, 'error')
+
+      console.error(error)
+    }
+  }
+</script>

package/src/components/WorkPoolTypeSelect.vue

@@ -0,0 +1,46 @@
+<template>
+  <PSelect v-model="model" class="block-type-select" v-bind="{ options, disabled }">
+    <template #default="{ label }">
+      {{ label }}
+    </template>
+  </PSelect>
+</template>
+
+<script lang="ts" setup>
+  import { SelectOptionNormalized } from '@prefecthq/prefect-design'
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import { useWorkspaceApi } from '@/compositions'
+  import { getProcessTypeLabel } from '@/utilities'
+
+  const props = defineProps<{
+    selected: string | null | undefined,
+    disabled?: boolean,
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'update:selected', value: string | null): void,
+  }>()
+
+  const model = computed({
+    get() {
+      return props.selected ?? null
+    },
+    set(value: string | null) {
+      emit('update:selected', value)
+    },
+  })
+
+  const api = useWorkspaceApi()
+  const workersCollectionSubscription = useSubscription(api.collections.getWorkerCollection, [])
+  const workersCollectionItems = computed(() => workersCollectionSubscription.response ?? [])
+
+  const options = computed<SelectOptionNormalized[]>(() => {
+    const options: SelectOptionNormalized[] = workersCollectionItems.value.map(({ type }) => ({
+      label: getProcessTypeLabel(type!),
+      value: type!,
+    }))
+
+    return options.sort((optionA, optionB) => optionA.label.localeCompare(optionB.label))
+  })
+</script>

package/src/components/WorkPools.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="work-pools">
+    <div class="work-pools__filters">
+      <ResultsCount label="Work pool" :count="filteredWorkPools.length" class="work-pools__results" />
+
+      <SearchInput v-model="searchValue" class="work-pools__search" placeholder="Search work pools" />
+    </div>
+
+    <div class="work-pools__list">
+      <WorkPoolList :work-pools="filteredWorkPools" @update="refresh" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed, ref } from 'vue'
+  import { ResultsCount, SearchInput, WorkPoolList } from '@/components'
+  import { useWorkspaceApi } from '@/compositions'
+
+  const api = useWorkspaceApi()
+  const subscriptionOptions = {
+    interval: 30000,
+  }
+
+  const emit = defineEmits<{
+    (event: 'update'): void,
+  }>()
+
+  const workPoolsSubscription = useSubscription(api.workPools.getWorkPools, [], subscriptionOptions)
+  const workPools = computed(() => workPoolsSubscription.response ?? [])
+
+  const searchValue = ref<string>('')
+
+  const filteredWorkPools = computed(() => {
+    if (!searchValue.value) {
+      return workPools.value
+    }
+
+    return workPools.value.filter(key => key.name.toLowerCase().includes(searchValue.value.toLowerCase()),
+    )
+  })
+
+  function refresh(): void {
+    workPoolsSubscription.refresh()
+    emit('update')
+  }
+</script>
+
+<style>
+.work-pools { @apply
+  grid
+  gap-4
+}
+
+.work-pools__filters { @apply
+  grid
+  md:flex
+  gap-2
+  justify-between
+  items-center
+}
+</style>

package/src/components/WorkPoolsPageEmptyState.vue

@@ -0,0 +1,40 @@
+<template>
+  <p-empty-state>
+    <template #icon>
+      <p-icon icon="CircleStackIcon" class="work-pools-page-empty-state__icon" />
+    </template>
+
+    <template #heading>
+      Create a work pool to get started
+    </template>
+
+    <template #description>
+      Work pools allow you to prioritize and manage deployment runs
+      and control the infrastructure they run on.
+    </template>
+    <template #actions>
+      <p-button v-if="can.create.work_pool" primary icon-append="PlusIcon" :to="routes.workPoolCreate()">
+        Add Work Pool
+      </p-button>
+      <DocumentationButton :to="localization.docs.workPools" />
+    </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>
+.work-pools-page-empty-state__icon { @apply
+  w-12
+  h-12;
+}
+</style>