@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/components/WorkPoolQueueCreateForm.vue

@@ -0,0 +1,116 @@
+<template>
+  <p-form class="work-pool-queue-create-form p-background" @submit="submit">
+    <p-content>
+      <p-label label="Name" :message="nameErrorMessage" :state="nameState">
+        <template #default="{ id }">
+          <p-text-input :id="id" v-model="name" :state="nameState" />
+        </template>
+      </p-label>
+
+      <p-label label="Description (Optional)">
+        <template #default="{ id }">
+          <p-textarea :id="id" v-model="description" rows="7" />
+        </template>
+      </p-label>
+
+      <p-label label="Flow Run Concurrency (Optional)">
+        <template #default="{ id }">
+          <p-number-input :id="id" v-model="concurrencyLimit" placeholder="Unlimited" :min="0" />
+        </template>
+      </p-label>
+
+      <p-label label="Priority (Optional)" :message="queuePriorityErrorMessage" :state="queuePriorityState">
+        <template #label>
+          <WorkPoolQueuePriorityLabel />
+        </template>
+        <template #default="{ id }">
+          <p-number-input :id="id" v-model="queuePriority" :min="1" :state="queuePriorityState" />
+        </template>
+      </p-label>
+    </p-content>
+    <template #footer>
+      <p-button @click="cancel">
+        Cancel
+      </p-button>
+      <SubmitButton action="Create" :loading="pending" />
+    </template>
+  </p-form>
+</template>
+
+  <script lang="ts" setup>
+  import { showToast } from '@prefecthq/prefect-design'
+  import { useValidation, useValidationObserver, ValidationRule } from '@prefecthq/vue-compositions'
+  import { ref } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { SubmitButton, WorkPoolQueuePriorityLabel } from '@/components'
+  import { useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
+  import { localization } from '@/localization'
+  import { getApiErrorMessage } from '@/utilities/errors'
+
+  const props = defineProps<{
+    workPoolName: string,
+  }>()
+
+  const api = useWorkspaceApi()
+  const router = useRouter()
+  const routes = useWorkspaceRoutes()
+  const { validate, pending } = useValidationObserver()
+
+  const name = ref<string>()
+  const description = ref<string>()
+  const concurrencyLimit = ref<number>()
+  const queuePriority = ref<number>()
+
+  const isRequired: ValidationRule<string | undefined> = (value) => value !== undefined && value.trim().length > 0
+
+  const isGreaterThanZeroOrNull: ValidationRule<number | undefined> = (value, name) => {
+    if (value == null || value > 0) {
+      return true
+    }
+
+    return `${name} must be greater than 0`
+  }
+
+
+  const { error: nameErrorMessage, state: nameState } = useValidation(name, 'Name', [isRequired])
+  const { error: queuePriorityErrorMessage, state: queuePriorityState } = useValidation(queuePriority, 'Priority', [isGreaterThanZeroOrNull])
+
+  function cancel(): void {
+    router.back()
+  }
+
+  const submit = async (): Promise<void> => {
+    const valid = await validate()
+    if (!valid) {
+      return
+    }
+
+    const values = {
+      name: name.value,
+      description: description.value,
+      isPaused: false,
+      concurrencyLimit: concurrencyLimit.value,
+      priority: queuePriority.value,
+    }
+
+    try {
+      const { name } = await api.workPoolQueues.createWorkPoolQueue(props.workPoolName, values)
+      showToast(localization.success.createWorkPoolQueue, 'success')
+
+      router.push(routes.workPoolQueue(props.workPoolName, name))
+    } catch (error) {
+      const message = getApiErrorMessage(error, localization.error.createWorkPoolQueue)
+      showToast(message, 'error')
+      console.error(error)
+    }
+
+  }
+</script>
+
+<style>
+.work-pool-queue-create-form { @apply
+  px-6
+  py-6
+  rounded-default
+}
+</style>

package/src/components/WorkPoolQueueDetails.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="work-pool-queue-details">
+    <p-key-value label="Work Pool" :alternate="alternate">
+      <template #value>
+        <WorkPoolIconText :work-pool-name="workPoolName" />
+      </template>
+    </p-key-value>
+
+    <p-key-value label="Status" :alternate="alternate">
+      <template #value>
+        <WorkPoolQueueStatusBadge v-if="workPool" :work-queue="workPoolQueue" :work-pool="workPool" />
+      </template>
+    </p-key-value>
+
+    <template v-if="workQueueStatus">
+      <p-key-value label="Last Polled" :value="workQueueLastPolled" :alternate="alternate" />
+    </template>
+
+    <p-key-value label="Description" :value="workPoolQueue.description" :alternate="alternate" />
+
+    <p-key-value label="Priority" :value="workPoolQueue.priority" :alternate="alternate" />
+
+    <p-divider />
+
+    <p-key-value label="Work Queue ID" :value="workPoolQueue.id" :alternate="alternate" />
+
+    <p-key-value label="Flow Run Concurrency" :value="workPoolQueue.concurrencyLimit" :alternate="alternate" />
+
+    <p-key-value label="Created" :value="formatDateTimeNumeric(workPoolQueue.created)" :alternate="alternate" />
+
+    <p-key-value label="Last Updated" :value="formatDateTimeNumeric(workPoolQueue.updated)" :alternate="alternate" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+  import { toRefs, computed } from 'vue'
+  import { WorkPoolIconText, WorkPoolQueueStatusBadge } from '@/components'
+  import { useWorkspaceApi, useWorkQueueStatus } from '@/compositions'
+  import { WorkPoolQueue, WorkPoolsFilter } from '@/models'
+  import { formatDateTimeNumeric } from '@/utilities/dates'
+
+  const props = defineProps<{
+    workPoolQueue: WorkPoolQueue,
+    workPoolName: string,
+    alternate?: boolean,
+  }>()
+
+  const { workPoolName } = toRefs(props)
+  const api = useWorkspaceApi()
+
+  const { workQueueStatus } = useWorkQueueStatus(props.workPoolQueue.id)
+  const workPoolArgs = computed<[WorkPoolsFilter] | null>(() => {
+    return [
+      {
+        workPools: {
+          id: [props.workPoolQueue.workPoolId],
+        },
+      },
+    ]
+  })
+
+  const workPoolsSubscription = useSubscriptionWithDependencies(api.workPools.getWorkPools, workPoolArgs)
+  const workPools = computed(() => workPoolsSubscription.response ?? [])
+  const workPool = computed(() => workPools.value[0])
+  const workQueueLastPolled = computed(() => workQueueStatus.value?.lastPolled ? formatDateTimeNumeric(workQueueStatus.value.lastPolled) : null)
+</script>
+
+
+<style>
+.work-pool-queue-details { @apply
+  flex
+  flex-col
+  gap-3
+  items-start
+}
+</style>

package/src/components/WorkPoolQueueEditForm.vue

@@ -0,0 +1,115 @@
+<template>
+  <p-form class="work-pool-queue-edit-form p-background" @submit="submit">
+    <p-content>
+      <p-label label="Name" :message="nameErrorMessage" :state="nameState">
+        <template #default="{ id }">
+          <p-text-input :id="id" v-model="name" :state="nameState" />
+        </template>
+      </p-label>
+
+      <p-label label="Description (Optional)">
+        <template #default="{ id }">
+          <p-textarea :id="id" v-model="description" rows="7" />
+        </template>
+      </p-label>
+
+      <p-label label="Flow Run Concurrency (Optional)">
+        <template #default="{ id }">
+          <p-number-input :id="id" v-model="concurrencyLimit" placeholder="Unlimited" :min="0" />
+        </template>
+      </p-label>
+
+      <p-label label="Priority" :message="queuePriorityErrorMessage" :state="queuePriorityState">
+        <template #label>
+          <WorkPoolQueuePriorityLabel />
+        </template>
+
+        <template #default="{ id }">
+          <p-number-input :id="id" v-model="queuePriority" :min="1" :state="queuePriorityState" />
+        </template>
+      </p-label>
+    </p-content>
+
+    <template #footer>
+      <p-button @click="cancel">
+        Cancel
+      </p-button>
+      <SubmitButton action="Save" :loading="pending" />
+    </template>
+  </p-form>
+</template>
+
+  <script lang="ts" setup>
+  import { showToast } from '@prefecthq/prefect-design'
+  import { useValidation, useValidationObserver, ValidationRule } from '@prefecthq/vue-compositions'
+  import { ref } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { SubmitButton, WorkPoolQueuePriorityLabel } from '@/components'
+  import { useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
+  import { localization } from '@/localization'
+  import { WorkPoolQueue } from '@/models'
+  import { getApiErrorMessage } from '@/utilities/errors'
+
+  const props = defineProps<{
+    workPoolName: string,
+    workPoolQueue: WorkPoolQueue,
+  }>()
+
+  const api = useWorkspaceApi()
+  const router = useRouter()
+  const routes = useWorkspaceRoutes()
+  const { validate, pending } = useValidationObserver()
+
+  const name = ref<string>(props.workPoolQueue.name)
+  const description = ref<string | null | undefined>(props.workPoolQueue.description)
+  const concurrencyLimit = ref<number | null | undefined>(props.workPoolQueue.concurrencyLimit)
+  const queuePriority = ref<number>(props.workPoolQueue.priority)
+
+  const isRequired: ValidationRule<string | undefined> = (value) => value !== undefined && value.trim().length > 0
+
+  const isGreaterThanZero: ValidationRule<number | undefined> = (value, name) => {
+    if (value && value > 0) {
+      return true
+    }
+
+    return `${name} must be greater than 0`
+  }
+
+  const { error: nameErrorMessage, state: nameState } = useValidation(name, 'Name', [isRequired])
+  const { error: queuePriorityErrorMessage, state: queuePriorityState } = useValidation(queuePriority, 'Priority', [isGreaterThanZero])
+
+  function cancel(): void {
+    router.back()
+  }
+
+  const submit = async (): Promise<void> => {
+    const valid = await validate()
+    if (valid) {
+      const values = {
+        name: name.value,
+        description: description.value,
+        concurrencyLimit: concurrencyLimit.value,
+        priority: queuePriority.value,
+      }
+      try {
+        await api.workPoolQueues.updateWorkPoolQueue(props.workPoolName, props.workPoolQueue.name, values)
+
+        showToast(localization.success.updateWorkPoolQueue, 'success')
+        router.push(routes.workPoolQueue(props.workPoolName, values.name))
+      } catch (error) {
+        const message = getApiErrorMessage(error, localization.error.updateWorkPool)
+        showToast(message, 'error')
+        console.error(error)
+      }
+    }
+  }
+  </script>
+
+
+<style>
+.work-pool-queue-edit-form { @apply
+  px-6
+  py-6
+  rounded-default
+}
+</style>

package/src/components/WorkPoolQueueHealthIcon.vue

@@ -0,0 +1,79 @@
+<template>
+  <p-tooltip
+    v-if="workPoolQueue && workQueueStatus && !workPool?.isPushPool"
+    class="work-pool-queue-health-icon"
+    text="Work queue health is deprecated and will be removed in a future release. Please use work pool status instead."
+  >
+    <StatusIcon v-if="status.state === 'healthy'" status="ready" />
+    <p-icon
+      v-if="status.state !== 'healthy'"
+      :icon="status.icon"
+      size="small"
+      class="work-pool-queue-health-icon"
+      :class="classes"
+    />
+  </p-tooltip>
+</template>
+
+<script lang="ts">
+  /** @deprecated prefer `<WorkPoolQueueStatusIcon>` */
+  export default {}
+</script>
+
+<script lang="ts" setup>
+  import { Icon } from '@prefecthq/prefect-design'
+  import { useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import StatusIcon from '@/components/StatusIcon.vue'
+  import { useInterval, useWorkQueueStatus, useWorkspaceApi, useWorkPool } from '@/compositions'
+
+  const props = defineProps<{
+    workQueueName: string,
+    workPoolName: string,
+  }>()
+
+  const api = useWorkspaceApi()
+  const workPoolQueueArgs = computed<[string, string] | null>(() => [props.workPoolName, props.workQueueName])
+  const options = useInterval()
+
+  const workPoolQueuesSubscription = useSubscriptionWithDependencies(api.workPoolQueues.getWorkPoolQueueByName, workPoolQueueArgs, options)
+  const workPoolQueue = computed(() => workPoolQueuesSubscription.response)
+
+  const { workPool } = useWorkPool(() => props.workPoolName)
+
+  const workQueueId = computed(() => workPoolQueue.value?.id)
+  const { workQueueStatus } = useWorkQueueStatus(workQueueId)
+  const healthy = computed(() => workQueueStatus.value?.healthy)
+
+  const status = computed<{
+    state: 'paused' | 'healthy' | 'unhealthy',
+    name: string,
+    icon: Icon,
+  }>(() => {
+    if (workPoolQueue.value?.isPaused) {
+      return { state: 'paused', name: 'Paused', icon: 'PauseCircleIcon' }
+    }
+    if (healthy.value) {
+      return { state: 'healthy', name: 'Healthy', icon: 'CheckCircleIcon' }
+    }
+    return { state: 'unhealthy', name: 'Unhealthy', icon: 'ExclamationCircleIcon' }
+  })
+
+  const classes = computed(() => `work-pool-queue-health-icon--${status.value.state}`)
+</script>
+
+<style>
+.work-pool-queue-health-icon { @apply
+  flex
+  items-center
+  cursor-help
+}
+
+.work-pool-queue-health-icon--unhealthy { @apply
+  text-sentiment-negative
+}
+
+.work-pool-queue-health-icon--paused { @apply
+  text-subdued
+}
+</style>

package/src/components/WorkPoolQueueMenu.vue

@@ -0,0 +1,59 @@
+<template>
+  <p-icon-button-menu v-bind="$attrs" class="work-pool-queue-menu">
+    <CopyOverflowMenuItem label="Copy ID" :item="workPoolQueue.id" />
+    <slot v-bind="{ workPoolQueue }" />
+    <router-link :to="routes.workPoolQueueEdit(workPoolName, workPoolQueue.name)">
+      <p-overflow-menu-item v-if="can.update.work_queue" label="Edit" />
+    </router-link>
+    <p-overflow-menu-item v-if="showDelete" label="Delete" @click="open" />
+  </p-icon-button-menu>
+  <ConfirmDeleteModal
+    v-model:showModal="showModal"
+    label="Work Queue"
+    :name="workPoolQueue.name"
+    @delete="deleteWorkPoolQueue(workPoolQueue.name)"
+  />
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'WorkPoolQueueMenu',
+    expose: [],
+    inheritAttrs: false,
+  }
+</script>
+
+<script lang="ts" setup>
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import { CopyOverflowMenuItem, ConfirmDeleteModal } from '@/components'
+  import { useCan, useShowModal, useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
+  import { WorkPoolQueue } from '@/models'
+  import { deleteItem } from '@/utilities'
+
+  const props = defineProps<{
+    workPoolName: string,
+    workPoolQueue: WorkPoolQueue,
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'delete'): void,
+  }>()
+
+  const can = useCan()
+  const api = useWorkspaceApi()
+  const routes = useWorkspaceRoutes()
+  const { showModal, open, close } = useShowModal()
+  const workPoolSubscription = useSubscription(api.workPools.getWorkPoolByName, [props.workPoolName])
+  const workPool = computed(() => workPoolSubscription.response)
+
+  const showDelete = computed(() => {
+    return !workPool.value || workPool.value.defaultQueueId !== props.workPoolQueue.id && can.delete.work_queue
+  })
+
+  async function deleteWorkPoolQueue(name: string): Promise<void> {
+    close()
+    await deleteItem([props.workPoolName, name], api.workPoolQueues.deleteWorkPoolQueue, 'Work queue')
+    emit('delete')
+  }
+</script>

package/src/components/WorkPoolQueuePriorityLabel.vue

@@ -0,0 +1,12 @@
+<template>
+  <span>
+    Priority
+    <ExtraInfoModal title="Priority">
+      Priority specifies how Prefect prioritizes the delivery of work — more precisely, execution of flow runs among worker pools. Priority must be a unique, positive integer. Lower numbers indicate higher pool priorities. For example, 1 is the highest priority queue and its flow run execution takes precedence over any lower-priority pool. 10 is a lower priority queue than 1, and 100 is lower priority than both 1 and 10. If you specify a priority that already exists, the new priority supersedes any previously set priority on a worker pool.
+    </ExtraInfoModal>
+  </span>
+</template>
+
+<script lang="ts" setup>
+  import { ExtraInfoModal } from '@/components'
+</script>

package/src/components/WorkPoolQueueStatusArray.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="work-pool-queue-status-array">
+    <template v-if="!showTooMany && workPoolQueues.length > 0">
+      <template v-for="workQueue in workPoolQueues" :key="workQueue.id">
+        <WorkPoolQueueStatusIcon
+          v-if="can.access.workQueueStatus"
+          :work-pool-queue="workQueue"
+        />
+        <template v-else>
+          <span v-if="workPool.isPushPool" class="work-pool-queue-status-array__none">
+            N/A
+          </span>
+          <WorkPoolQueueHealthIcon
+            v-else
+            :work-queue-name="workQueue.name"
+            :work-pool-name="workPool.name"
+            class="work-pool-queue-status-badge__icon"
+          />
+        </template>
+      </template>
+    </template>
+    <span v-if="!showTooMany && workPoolQueues.length < 1" class="work-pool-queue-status-array__none">N/A</span>
+    <span v-if="showTooMany" class="work-pool-queue-status-array__too-many">Too many to show here.</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import { WorkPoolQueueHealthIcon } from '@/components'
+  import WorkPoolQueueStatusIcon from '@/components/WorkPoolQueueStatusIcon.vue'
+  import { useCan, useInterval, useWorkspaceApi } from '@/compositions'
+  import { WorkPool } from '@/models'
+
+  const props = defineProps<{
+    workPool: WorkPool,
+  }>()
+
+  const can = useCan()
+
+  const maxWorkQueues = 50
+  const api = useWorkspaceApi()
+  const options = useInterval()
+
+  const workPoolQueuesSubscription = useSubscription(
+    api.workPoolQueues.getWorkPoolQueues,
+    [props.workPool.name, { limit: maxWorkQueues + 1 }],
+    options,
+  )
+
+  const workPoolQueues = computed(() => workPoolQueuesSubscription.response ?? [])
+  const showTooMany = computed(() => workPoolQueues.value.length > maxWorkQueues)
+</script>
+
+<style>
+.work-pool-queue-status-array { @apply
+  inline-flex
+  flex-wrap
+  items-center
+  justify-center
+  gap-1
+  min-h-[1.5rem]
+  max-w-full
+}
+
+.work-pool-queue-status-array__none { @apply
+  text-subdued
+}
+
+.work-pool-queue-status-array__too-many { @apply
+  text-xs
+  text-subdued
+}
+</style>

package/src/components/WorkPoolQueueStatusBadge.vue

@@ -0,0 +1,70 @@
+<template>
+  <template v-if="workQueue && workQueueStatus">
+    <p-tag class="work-pool-queue-status-badge" :class="classes">
+      <WorkPoolQueueStatusIcon v-if="can.access.workQueueStatus" :work-pool-queue="workQueue" />
+      <WorkPoolQueueHealthIcon v-else :work-queue-name="workQueueName" :work-pool-name="workPoolName" class="work-pool-queue-status-badge__icon" />
+      {{ label }}
+    </p-tag>
+  </template>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import { WorkPoolQueueHealthIcon } from '@/components'
+  import WorkPoolQueueStatusIcon from '@/components/WorkPoolQueueStatusIcon.vue'
+  import { useCan, useWorkQueueStatus } from '@/compositions'
+  import { WorkPool, WorkPoolQueue } from '@/models'
+
+  const props = defineProps<{
+    workQueue: WorkPoolQueue,
+    workPool: WorkPool,
+  }>()
+
+  const can = useCan()
+
+  const workQueueName = computed(() => props.workQueue.name)
+  const workPoolName = computed(() => props.workPool.name)
+  const workQueueId = computed(() => props.workQueue.id)
+  const { workQueueStatus } = useWorkQueueStatus(workQueueId)
+  const healthy = computed(() => workQueueStatus.value?.healthy)
+
+  const label = computed(() => {
+    if (can.access.workQueueStatus) {
+      return { 'ready': 'Ready', 'not_ready': 'Not Ready', 'paused': 'Paused' }[props.workQueue.status]
+    }
+
+    if (props.workQueue.isPaused) {
+      return 'Paused'
+    }
+    return healthy.value ? 'Healthy' : 'Unhealthy'
+  })
+
+  const classes = computed(() => `work-queue-status-badge--${label.value.toLowerCase()}`)
+</script>
+
+<style>
+.work-pool-queue-status-badge { @apply
+  text-xs
+  pl-2
+}
+
+.p-tag.work-pool-queue-status-badge--healthy { @apply
+  bg-sentiment-positive
+  text-inverse
+  dark:text-default
+}
+
+.p-tag.work-pool-queue-status-badge--unhealthy { @apply
+  bg-sentiment-negative
+  text-inverse
+  dark:text-default
+}
+
+
+.p-tag.work-queue-status-badge--paused { @apply
+  bg-state-pending-300
+  text-state-pending-900
+  dark:bg-state-pending-800
+  dark:text-white
+}
+</style>

package/src/components/WorkPoolQueueStatusIcon.vue

@@ -0,0 +1,63 @@
+<template>
+  <p-tooltip
+    class="work-pool-queue-status-icon"
+    :text="status.tooltip"
+  >
+    <StatusIcon v-if="status.state === 'ready'" status="ready" />
+    <p-icon
+      v-if="status.state !== 'ready'"
+      :icon="status.icon"
+      size="small"
+      :class="classes"
+    />
+  </p-tooltip>
+</template>
+
+<script lang="ts" setup>
+  import { Icon } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import StatusIcon from '@/components/StatusIcon.vue'
+  import { useWorkPool } from '@/compositions/useWorkPool'
+  import { WorkPoolQueue } from '@/models'
+
+  const props = defineProps<{
+    workPoolQueue: WorkPoolQueue,
+  }>()
+
+  const { workPool } = useWorkPool(() => props.workPoolQueue.workPoolName)
+
+  const status = computed<{
+    state: 'paused' | 'ready' | 'not_ready',
+    icon: Icon,
+    tooltip: string,
+  }>(() => {
+    switch (props.workPoolQueue.status) {
+      case 'paused':
+        return { state: 'paused', icon: 'PauseCircleIcon', tooltip: 'Work queue is paused. No work will be executed.' }
+      case 'ready':
+        if (workPool.value?.isPushPool) {
+          return { state: 'ready', icon: 'CheckCircleIcon', tooltip: 'Work queue is ready.' }
+        }
+        return { state: 'ready', icon: 'CheckCircleIcon', tooltip: 'Work queue has at least one actively polling worker ready to execute work.' }
+      case 'not_ready':
+        return { state: 'not_ready', icon: 'ExclamationCircleIcon', tooltip: 'Work queue does not have any actively polling workers ready to execute work.' }
+      default:
+        const exhaustiveCheck: never = props.workPoolQueue.status
+        throw new Error(`Unhandled work pool queue status: ${exhaustiveCheck}`)
+    }
+  })
+
+  const classes = computed(() => `work-pool-queue-status-icon--${status.value.state}`)
+</script>
+
+<style>
+.work-pool-queue-status-icon--not_ready { @apply
+  text-sentiment-negative
+}
+
+.work-pool-queue-status-icon--paused { @apply
+  flex
+  items-center
+  text-subdued
+}
+</style>