@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/components/WorkQueueCombobox.vue

@@ -0,0 +1,120 @@
+<template>
+  <p-combobox v-model="internalValue" v-bind="{ options, multiple, emptyMessage }">
+    <template #combobox-options-empty>
+      No work queues
+    </template>
+    <template #default="scope">
+      <slot v-bind="scope" />
+    </template>
+    <template #option="{ option }">
+      <slot name="option" :option="option" />
+    </template>
+  </p-combobox>
+</template>
+
+<script lang="ts" setup>
+  import { PCombobox, SelectOptionGroup, isSelectOptionNormalized } from '@prefecthq/prefect-design'
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed, watch } from 'vue'
+  import { useWorkspaceApi } from '@/compositions'
+  import { WorkQueue } from '@/models'
+
+  export type WorkPoolFilterByIdOrName = { id?: string[], name?: string[] }
+
+  const props = defineProps<{
+    selected: string | string[] | null | undefined,
+    emptyMessage?: string,
+    allowUnset?: boolean,
+    multiple?: boolean,
+    workPoolFilter?: WorkPoolFilterByIdOrName,
+  }>()
+
+  const emits = defineEmits<{
+    (event: 'update:selected', value: string | string[] | null): void,
+  }>()
+
+  const multiple = computed(() => props.multiple || Array.isArray(props.selected))
+
+  const internalValue = computed<typeof props.selected>({
+    get() {
+      return props.selected ?? null
+    },
+    set(value: string | string[] | null | undefined) {
+      if (!value) {
+        emits('update:selected', null)
+      } else if (multiple.value) {
+        emits('update:selected', Array.isArray(value) ? value : [value])
+      } else {
+        emits('update:selected', value)
+      }
+    },
+  })
+
+  const api = useWorkspaceApi()
+  const workQueuesSubscription = useSubscription(api.workQueues.getWorkQueues, [{}])
+  const workQueues = computed(() => workQueuesSubscription.response ?? [])
+  const options = computed<SelectOptionGroup[]>(() => {
+    const workQueuesGroupedByWorkPool = workQueues.value.reduce<Map<string, WorkQueue[]>>((acc, workQueue) => {
+      // Filter options by work pool id or name
+      if (props.workPoolFilter?.id || props.workPoolFilter?.name) {
+        if (!props.workPoolFilter.id?.includes(workQueue.workPoolId) && !(workQueue.workPoolName && props.workPoolFilter.name?.includes(workQueue.workPoolName))) {
+          return acc
+        }
+      }
+
+      const workPoolName = workQueue.workPoolName ?? 'No work pool'
+      acc.set(workPoolName, (acc.get(workPoolName) ?? []).concat(workQueue))
+      return acc
+    }, new Map())
+
+    const options: SelectOptionGroup[] = []
+    for (const [workPoolName, workQueues] of workQueuesGroupedByWorkPool.entries()) {
+      options.push({
+        label: workPoolName,
+        options: workQueues.map(workQueue => ({
+          value: workQueue.id,
+          label: workQueue.name,
+        })),
+      })
+    }
+
+    if (props.allowUnset) {
+      options.unshift({
+        options: [{ value: null, label: 'None' }],
+        label: '',
+      })
+    }
+
+    return options
+  })
+
+  // Remove previously selected work queues that are no longer options
+  // when the options change
+  watch(options, (newValue, oldValue) => {
+    const newWorkQueueIds = new Set(newValue.flatMap(group => group.options.map((option) => {
+      if (isSelectOptionNormalized(option)) {
+        return option.value
+      }
+      return null
+    })))
+
+    const removedWorkQueueIds = new Set()
+    for (const group of oldValue) {
+      for (const option of group.options) {
+        if (isSelectOptionNormalized(option) && !newWorkQueueIds.has(option.value)) {
+          removedWorkQueueIds.add(option.value)
+        }
+      }
+    }
+
+    if (removedWorkQueueIds.size === 0) {
+      return
+    }
+
+    if (!multiple.value && internalValue.value && removedWorkQueueIds.has(internalValue.value)) {
+      internalValue.value = undefined
+    } else if (Array.isArray(internalValue.value) && internalValue.value.length) {
+      internalValue.value = internalValue.value.filter(id => !removedWorkQueueIds.has(id))
+    }
+  })
+</script>

package/src/components/WorkQueueCreateForm.vue

@@ -0,0 +1,95 @@
+<template>
+  <p-form class="work-queue-create-form p-background" @submit="submit">
+    <p-content>
+      <p-label label="Name " :message="errors.name" :state="nameState">
+        <p-text-input v-model="name" :state="nameState" />
+      </p-label>
+
+      <p-label label="Description (Optional)">
+        <p-textarea v-model="description" rows="7" />
+      </p-label>
+
+      <p-label label="Status (Optional)">
+        <p-toggle v-model="isActive">
+          <template #append>
+            <div>
+              <template v-if="isActive">
+                Active
+              </template>
+              <template v-else>
+                Paused
+              </template>
+            </div>
+          </template>
+        </p-toggle>
+      </p-label>
+
+      <p-label label="Flow Run Concurrency (Optional)">
+        <p-number-input v-model="concurrencyLimit" placeholder="Unlimited" :min="0" />
+      </p-label>
+    </p-content>
+
+    <template #footer>
+      <p-button @click="cancel">
+        Cancel
+      </p-button>
+      <SubmitButton action="Create" :loading="isSubmitting" />
+    </template>
+  </p-form>
+</template>
+
+<script lang="ts" setup>
+  import { PLabel, PTextInput, PNumberInput, PToggle, PForm } from '@prefecthq/prefect-design'
+  import { useField } from 'vee-validate'
+  import { computed } from 'vue'
+  import SubmitButton from '@/components/SubmitButton.vue'
+  import { useForm } from '@/compositions/useForm'
+  import { WorkQueueCreate } from '@/models'
+  import { isRequired } from '@/utilities/validation'
+
+  const { handleSubmit, isSubmitting, errors } = useForm<WorkQueueCreate>()
+
+  const rules = {
+    name: isRequired('Name'),
+  }
+
+  const isActive = computed({
+    get() {
+      return !isPaused.value
+    },
+    set() {
+      isPaused.value = !isPaused.value
+    },
+  })
+
+  const { value: name, meta: nameState } = useField<string>('name', rules.name)
+  const { value: description } = useField<string|null>('description')
+  const { value: isPaused } = useField<boolean | undefined>('isPaused')
+  const { value: concurrencyLimit } = useField<number|null>('concurrencyLimit')
+
+  const emit = defineEmits<{
+    (event: 'submit', value: WorkQueueCreate): void,
+    (event: 'cancel'): void,
+  }>()
+
+  const submit = handleSubmit((values) => {
+    emit('submit', values)
+  })
+
+  function cancel(): void {
+    emit('cancel')
+  }
+</script>
+
+<style>
+.work-queue-create-form { @apply
+  px-6
+  py-6
+  rounded-default
+}
+
+.work-queue-create-form__section-header { @apply
+  text-base
+  text-subdued
+}
+</style>

package/src/components/WorkQueueDetails.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="work-queue-details">
+    <template v-if="workQueueStatus">
+      <p-key-value label="Status" :alternate="alternate">
+        <template #value>
+          <WorkQueueStatusBadge :work-queue="workQueue" />
+        </template>
+      </p-key-value>
+    </template>
+
+    <p-key-value label="Description" :value="workQueue.description" :alternate="alternate" />
+
+    <p-divider />
+
+    <p-key-value label="Work Queue ID" :value="workQueue.id" :alternate="alternate" />
+
+    <p-key-value label="Flow Run Concurrency" :value="workQueue.concurrencyLimit" :alternate="alternate" />
+
+    <p-key-value label="Created" :value="formatDateTimeNumeric(workQueue.created)" :alternate="alternate" />
+
+    <template v-if="workQueueStatus">
+      <p-key-value label="Last Polled" :value="workQueueStatus.lastPolled ? formatDateTimeNumeric(workQueueStatus.lastPolled) : null" :alternate="alternate" />
+    </template>
+
+    <template v-if="workQueue.filter">
+      <p-key-value :label="deploymentLabel" :alternate="alternate">
+        <template v-if="workQueue.filter.deploymentIds.length" #value>
+          <div class="work-queue-details__deployments">
+            <template v-for="deploymentId in deploymentIds" :key="deploymentId">
+              <DeploymentIconText :deployment-id="deploymentId" />
+            </template>
+          </div>
+        </template>
+        <template #empty>
+          Any
+        </template>
+      </p-key-value>
+
+      <p-key-value label="Tags" :alternate="alternate">
+        <template v-if="workQueue.filter.tags.length" #value>
+          <p-tags :tags="workQueue.filter.tags" class="mt-2" />
+        </template>
+      </p-key-value>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import { WorkQueueStatusBadge } from '@/components'
+  import DeploymentIconText from '@/components/DeploymentIconText.vue'
+  import { useWorkQueueStatus } from '@/compositions'
+  import { WorkQueue } from '@/models/WorkQueue'
+  import { formatDateTimeNumeric } from '@/utilities/dates'
+
+  const props = defineProps<{
+    workQueue: WorkQueue,
+    alternate?: boolean,
+  }>()
+
+  const deploymentIds = computed(() => {
+    return props.workQueue.filter?.deploymentIds
+  })
+
+  const deploymentLabel = computed(() => {
+    const num = deploymentIds.value?.length ?? 0
+    return num > 0 ? `${num} Deployments` : 'Deployments'
+  })
+
+  const { workQueueStatus } = useWorkQueueStatus(props.workQueue.id)
+</script>
+
+<style>
+.work-queue-details { @apply
+  flex
+  flex-col
+  gap-3
+  items-start
+}
+
+.work-queue-details__tags { @apply
+  mt-1
+}
+
+.work-queue-details__deployments { @apply
+  flex
+  flex-col
+  gap-2
+}
+</style>

package/src/components/WorkQueueEditForm.vue

@@ -0,0 +1,101 @@
+<template>
+  <p-form class="work-queue-edit-form p-background" @submit="submit">
+    <p-content>
+      <p-label label="Name">
+        <p-text-input :model-value="workQueue.name" disabled />
+      </p-label>
+
+      <p-label label="Description (Optional)">
+        <p-textarea v-model="description" rows="7" />
+      </p-label>
+
+      <p-label label="Status (Optional)">
+        <p-toggle v-model="isActive">
+          <template #append>
+            <div>
+              <template v-if="isActive">
+                Active
+              </template>
+              <template v-else>
+                Paused
+              </template>
+            </div>
+          </template>
+        </p-toggle>
+      </p-label>
+
+      <p-label label="Flow Run Concurrency (Optional)">
+        <p-number-input v-model="concurrencyLimit" placeholder="Unlimited" :min="0" />
+      </p-label>
+    </p-content>
+
+    <template #footer>
+      <p-button @click="cancel">
+        Cancel
+      </p-button>
+      <SubmitButton action="Save" :loading="isSubmitting" />
+    </template>
+  </p-form>
+</template>
+
+<script lang="ts" setup>
+  import { PLabel, PTextInput, PNumberInput, PToggle, PForm } from '@prefecthq/prefect-design'
+  import { useField } from 'vee-validate'
+  import { computed } from 'vue'
+  import SubmitButton from '@/components/SubmitButton.vue'
+  import { useForm } from '@/compositions/useForm'
+  import { WorkQueueEdit, WorkQueue } from '@/models'
+
+  const props = defineProps<{
+    workQueue: WorkQueue,
+  }>()
+
+  const { handleSubmit, isSubmitting } = useForm<WorkQueueEdit>({
+    initialValues: {
+      description: props.workQueue.description,
+      isPaused: props.workQueue.isPaused,
+      concurrencyLimit: props.workQueue.concurrencyLimit,
+    },
+  })
+
+  const isActive = computed({
+    get() {
+      return !isPaused.value
+    },
+    set() {
+      isPaused.value = !isPaused.value
+    },
+  })
+
+
+  const { value: description } = useField<string|null>('description')
+  const { value: isPaused } = useField<boolean | undefined>('isPaused')
+  const { value: concurrencyLimit } = useField<number|null>('concurrencyLimit')
+
+  const emit = defineEmits<{
+    (event: 'submit', value: WorkQueueEdit): void,
+    (event: 'cancel'): void,
+  }>()
+
+  const submit = handleSubmit((values) => {
+    emit('submit', values)
+  })
+
+  function cancel(): void {
+    emit('cancel')
+  }
+</script>
+
+<style>
+.work-queue-edit-form { @apply
+  px-6
+  py-6
+  rounded-default
+}
+
+.work-queue-edit-form__section-header {
+  @apply
+  text-base
+  text-subdued
+}
+</style>

package/src/components/WorkQueueFlowRunsList.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="work-queue-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 { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed, watch } from 'vue'
+  import FlowRunList from '@/components/FlowRunList.vue'
+  import { useWorkspaceApi } from '@/compositions'
+  import { FlowRun, WorkQueue } from '@/models'
+
+  const props = defineProps<{
+    workQueue: WorkQueue,
+  }>()
+
+  const api = useWorkspaceApi()
+  const workQueueFlowRunsSubscription = useSubscription(api.workQueues.getRuns, [props.workQueue.id])
+  const flowRuns = computed<FlowRun[]>(() => workQueueFlowRunsSubscription.response ?? [])
+
+  const empty = computed(() => workQueueFlowRunsSubscription.executed && flowRuns.value.length === 0)
+  const isPaused = computed(() => props.workQueue.isPaused)
+
+  watch(() => props.workQueue, () => {
+    workQueueFlowRunsSubscription.refresh()
+  })
+</script>
+
+<style>
+.work-queue-flow-runs-list__icon {
+  @apply h-14 w-14 mx-auto mb-4
+}
+</style>

package/src/components/WorkQueueIconText.vue

@@ -0,0 +1,62 @@
+<template>
+  <template v-if="workPoolQueue">
+    <p-link :to="routes.workPoolQueue(workPoolName, workQueueName)">
+      <p-icon-text icon="CircleStackIcon">
+        {{ workQueueName }}
+      </p-icon-text>
+    </p-link>
+  </template>
+  <template v-else>
+    <p-icon-text icon="CircleStackIcon" title="Unknown work queue">
+      {{ workQueueName }}
+    </p-icon-text>
+  </template>
+</template>
+
+<script lang="ts" setup>
+  import { useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import { useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
+
+  const props = defineProps<{
+    workQueueName: string,
+    workPoolName?: string | null,
+    workPoolId?: string | null,
+  }>()
+
+  const api = useWorkspaceApi()
+  const routes = useWorkspaceRoutes()
+
+  const workPoolArgs = computed<Parameters<typeof api.workPools.getWorkPools> | null>(() => {
+    if (!props.workPoolId) {
+      return null
+    }
+
+    return [
+      {
+        workPools: {
+          id: [props.workPoolId],
+        },
+      },
+    ]
+  })
+
+  const workPoolsSubscription = useSubscriptionWithDependencies(api.workPools.getWorkPools, workPoolArgs)
+  const workPools = computed(() => workPoolsSubscription.response ?? [])
+  const workPoolName = computed(() => props.workPoolName ?? workPools.value[0].name)
+
+  const workPoolQueueArgs = computed<Parameters<typeof api.workPoolQueues.getWorkPoolQueueByName> | null>(() => {
+    if (props.workPoolName) {
+      return [props.workPoolName, props.workQueueName]
+    }
+
+    if (props.workPoolId) {
+      return [workPoolName.value, props.workQueueName]
+    }
+
+    return null
+  })
+
+  const workPoolQueuesSubscription = useSubscriptionWithDependencies(api.workPoolQueues.getWorkPoolQueueByName, workPoolQueueArgs)
+  const workPoolQueue = computed(() => workPoolQueuesSubscription.response)
+</script>

package/src/components/WorkQueueLastPolled.vue

@@ -0,0 +1,19 @@
+<template>
+  <span v-if="lastPolled" class="work-queue-last-polled">
+    {{ formatDateTimeNumeric(lastPolled) }}
+  </span>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import { useWorkQueueStatus } from '@/compositions'
+  import { formatDateTimeNumeric } from '@/utilities'
+
+  const props = defineProps<{
+    workQueueId: string,
+  }>()
+
+  const workQueueId = computed(() => props.workQueueId)
+  const { workQueueStatus } = useWorkQueueStatus(workQueueId)
+  const lastPolled = computed(() => workQueueStatus.value?.lastPolled)
+</script>

package/src/components/WorkQueueLateIndicator.vue

@@ -0,0 +1,29 @@
+<template>
+  <p-tag v-if="lateRunsCount" class="work-queue-late-indicator">
+    {{ lateRunsCount }} {{ toPluralString('Late run', lateRunsCount) }}
+  </p-tag>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import { useWorkQueueStatus } from '@/compositions'
+  import { toPluralString } from '@/utilities'
+
+  const props = defineProps<{
+    workQueueId: string,
+  }>()
+
+  const workQueueId = computed(() => props.workQueueId)
+  const { workQueueStatus } = useWorkQueueStatus(workQueueId)
+  const lateRunsCount = computed(() => workQueueStatus.value?.lateRunsCount)
+</script>
+
+<style>
+.work-queue-late-indicator { @apply
+  text-xs
+  bg-amber-100
+  text-amber-800
+  dark:bg-amber-700
+  dark:text-white
+}
+</style>

package/src/components/WorkQueueMenu.vue

@@ -0,0 +1,69 @@
+<template>
+  <p-icon-button-menu v-bind="$attrs">
+    <copy-overflow-menu-item label="Copy ID" :item="workQueue.id" />
+    <router-link v-if="can.update.work_queue && !workQueue.deprecated" :to="routes.workQueueEdit(workQueue.id)">
+      <p-overflow-menu-item label="Edit" />
+    </router-link>
+    <slot v-bind="{ workQueue }" />
+    <p-overflow-menu-item v-if="showDelete" label="Delete" @click="open" />
+  </p-icon-button-menu>
+
+  <ConfirmDeleteModal
+    v-model:showModal="showModal"
+    label="Work Queue"
+    :name="workQueue.name"
+    @delete="deleteWorkQueue(workQueue.id)"
+  />
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'WorkQueueMenu',
+    expose: [],
+    inheritAttrs: false,
+  }
+</script>
+
+<script lang="ts" setup>
+  import { PIconButtonMenu, POverflowMenuItem } from '@prefecthq/prefect-design'
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import { RouterLink } from 'vue-router'
+  import ConfirmDeleteModal from '@/components/ConfirmDeleteModal.vue'
+  import CopyOverflowMenuItem from '@/components/CopyOverflowMenuItem.vue'
+  import { useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
+  import { useCan } from '@/compositions/useCan'
+  import { useShowModal } from '@/compositions/useShowModal'
+  import { WorkQueue } from '@/models'
+  import { deleteItem } from '@/utilities'
+
+  const props = defineProps<{
+    workQueue: WorkQueue,
+  }>()
+
+  const emits = defineEmits<{
+    (event: 'delete', value: string): void,
+  }>()
+
+  const api = useWorkspaceApi()
+  const can = useCan()
+  const routes = useWorkspaceRoutes()
+  const { showModal, open, close } = useShowModal()
+
+  const workPoolsSubscription = useSubscription(api.workPools.getWorkPools, [])
+  const workPools = computed(() => workPoolsSubscription.response ?? [])
+
+  const isDefaultQueue = computed(() => {
+    return workPools.value.some(workPool => workPool.defaultQueueId === props.workQueue.id)
+  })
+
+  const showDelete = computed(() => {
+    return !isDefaultQueue.value && can.delete.work_queue
+  })
+
+  const deleteWorkQueue = async (id: string): Promise<void> => {
+    close()
+    await deleteItem(id, api.workQueues.deleteWorkQueue, 'Work queue')
+    emits('delete', id)
+  }
+</script>

package/src/components/WorkQueueStatusBadge.vue

@@ -0,0 +1,48 @@
+<template>
+  <template v-if="workQueue && workQueueStatus">
+    <p-tag class="work-queue-status-badge" :class="classes">
+      <WorkPoolQueueStatusIcon v-if="can.access.workQueueStatus" :work-pool-queue="workQueue" />
+      <WorkQueueStatusIcon v-else :work-queue-name="workQueueName" class="work-queue-status-badge__icon" />
+      {{ label }}
+    </p-tag>
+  </template>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import WorkPoolQueueStatusIcon from '@/components/WorkPoolQueueStatusIcon.vue'
+  import WorkQueueStatusIcon from '@/components/WorkQueueStatusIcon.vue'
+  import { useCan, useWorkQueueStatus } from '@/compositions'
+  import { WorkQueue } from '@/models'
+
+  const props = defineProps<{
+    workQueue: WorkQueue,
+  }>()
+
+  const can = useCan()
+
+  const workQueueName = computed(() => props.workQueue.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-queue-status-badge { @apply
+  text-xs
+  pl-1
+}
+</style>