@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/components/ColorModeSelectOption.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="color-mode-select-option" :class="modeClass">
+    <div class="color-mode-select-option__label">
+      {{ mode ?? 'default' }}
+    </div>
+    <div class="color-mode-select-option__states">
+      <template v-for="state in stateType" :key="state">
+        <span class="color-mode-select-option__state" :class="stateClass(state)" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import { stateType, StateType } from '@/models/StateType'
+  import { ColorMode } from '@/types/ColorMode'
+  import { getColorModeClass } from '@/utilities'
+
+  const props = defineProps<{
+    mode: ColorMode | null,
+  }>()
+
+  const modeClass = computed(() => getColorModeClass(props.mode))
+
+  function stateClass(stateType: StateType): string {
+    return `color-mode-select-option__state--${stateType}`
+  }
+</script>
+
+<style>
+.color-mode-select-option { @apply
+  flex
+  items-center
+  justify-between
+  gap-2
+}
+
+.color-mode-select-option__label { @apply
+  capitalize
+}
+
+.color-mode-select-option__states { @apply
+  flex
+  items-center
+  gap-1
+}
+
+.color-mode-select-option__state { @apply
+  w-4
+  h-4
+  rounded-full
+}
+
+.color-mode-select-option__state--running {
+  background-color: var(--state-running-500);
+}
+
+.color-mode-select-option__state--scheduled {
+  background-color: var(--state-scheduled-500);
+}
+
+.color-mode-select-option__state--pending {
+  background-color: var(--state-pending-500);
+}
+
+.color-mode-select-option__state--paused {
+  background-color: var(--state-paused-500);
+}
+
+.color-mode-select-option__state--cancelled {
+  background-color: var(--state-cancelled-500);
+}
+
+.color-mode-select-option__state--completed {
+  background-color: var(--state-completed-500);
+}
+
+.color-mode-select-option__state--failed {
+  background-color: var(--state-failed-500);
+}
+
+.color-mode-select-option__state--crashed {
+  background-color: var(--state-crashed-500);
+}
+</style>

package/src/components/ConcurrencyLimitActiveRuns.vue

@@ -0,0 +1,31 @@
+<template>
+  <TaskRunList v-if="hasActiveSlots" :task-runs="activeRuns" />
+  <p-empty-results v-else>
+    <template #message>
+      No active task runs
+    </template>
+  </p-empty-results>
+</template>
+
+<script lang="ts" setup>
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import TaskRunList from '@/components/TaskRunList.vue'
+  import { useWorkspaceApi } from '@/compositions'
+  import { TaskRunsFilter } from '@/models/Filters'
+
+  const props = defineProps<{
+    activeSlots: string[],
+  }>()
+
+  const hasActiveSlots = computed(() => props.activeSlots.length)
+
+  const concurrencyLimitTaskRunFilter = computed<TaskRunsFilter>(() => ({
+    taskRuns: {
+      id: props.activeSlots,
+    },
+  }))
+  const api = useWorkspaceApi()
+  const activeRunsSubscription = useSubscription(api.taskRuns.getTaskRuns, [concurrencyLimitTaskRunFilter])
+  const activeRuns = computed(() => activeRunsSubscription.response ?? [])
+</script>

package/src/components/ConcurrencyLimitDetails.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="concurrency-limit-details">
+    <p-key-value label="Tag" :value="concurrencyLimit.tag" :alternate="alternate" />
+
+    <p-divider />
+
+    <p-key-value label="Concurrency Limit Count" :value="concurrencyLimit.concurrencyLimit" :alternate="alternate" />
+
+    <p-key-value label="Concurrency Limit Active Task Runs Count" :value="concurrencyLimit.activeSlots?.length" :alternate="alternate" />
+
+    <p-key-value label="Concurrency Limit ID" :value="concurrencyLimit.id" :alternate="alternate" />
+
+    <p-key-value v-if="concurrencyLimit.created" label="Created" :value="formatDateTimeNumeric(concurrencyLimit.created)" :alternate="alternate" />
+
+    <p-key-value v-if="concurrencyLimit.updated" label="Updated" :value="formatDateTimeNumeric(concurrencyLimit.updated)" :alternate="alternate" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ConcurrencyLimit } from '@/models/ConcurrencyLimit'
+  import { formatDateTimeNumeric } from '@/utilities/dates'
+
+  defineProps<{
+    concurrencyLimit: ConcurrencyLimit,
+    alternate?: boolean,
+  }>()
+</script>
+
+<style>
+.concurrency-limit-details { @apply
+  flex
+  flex-col
+  gap-3
+  items-start
+}
+</style>

package/src/components/ConcurrencyLimitMenu.vue

@@ -0,0 +1,51 @@
+<template>
+  <p-icon-button-menu v-bind="$attrs">
+    <copy-overflow-menu-item label="Copy ID" :item="concurrencyLimit.id" />
+    <p-overflow-menu-item v-if="can.delete.concurrency_limit" label="Delete" @click="open" />
+    <p-overflow-menu-item v-if="can.update.concurrency_limit" label="Reset" @click="openReset" />
+  </p-icon-button-menu>
+  <ConfirmDeleteModal
+    v-model:showModal="showModal"
+    :name="concurrencyLimit.tag"
+    label="Concurrency Limit"
+    @delete="deleteConcurrencyLimit(concurrencyLimit.id)"
+  />
+  <ConcurrencyLimitResetModal v-model:showModal="showResetModal" :concurrency-limit="concurrencyLimit" />
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'ConcurrencyLimitsMenu',
+    expose: [],
+    inheritAttrs: false,
+  }
+</script>
+
+<script lang="ts" setup>
+  import { CopyOverflowMenuItem, ConfirmDeleteModal, ConcurrencyLimitResetModal } from '@/components'
+  import { useShowModal, useCan, useWorkspaceApi } from '@/compositions'
+  import { ConcurrencyLimit } from '@/models'
+  import { deleteItem } from '@/utilities'
+
+  defineProps<{
+    concurrencyLimit: ConcurrencyLimit,
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'delete', value: string): void,
+  }>()
+
+  const can = useCan()
+
+  const { showModal, open, close } = useShowModal()
+
+  const { showModal: showResetModal, open: openReset } = useShowModal()
+
+  const api = useWorkspaceApi()
+
+  const deleteConcurrencyLimit = async (id: string): Promise<void> => {
+    close()
+    await deleteItem(id, api.concurrencyLimits.deleteConcurrencyLimit, 'Concurrency Limit')
+    emit('delete', id)
+  }
+</script>

package/src/components/ConcurrencyLimitResetModal.vue

@@ -0,0 +1,61 @@
+<template>
+  <p-modal v-model:showModal="internalShowModal" class="concurrency-limit-reset-modal" :title="resetTitle">
+    This will reset the active task run count to 0.
+    <template #actions>
+      <slot name="actions">
+        <p-button variant="default" @click="submit">
+          Reset
+        </p-button>
+      </slot>
+    </template>
+  </p-modal>
+</template>
+
+<script lang="ts" setup>
+  import { showToast } from '@prefecthq/prefect-design'
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import { useWorkspaceApi } from '@/compositions'
+  import { localization } from '@/localization'
+  import { ConcurrencyLimit } from '@/models/ConcurrencyLimit'
+  import { getApiErrorMessage } from '@/utilities/errors'
+
+  const props = defineProps<{
+    showModal: boolean,
+    concurrencyLimit: ConcurrencyLimit,
+  }>()
+  const emit = defineEmits<{
+    (event: 'update:showModal', value: boolean): void,
+  }>()
+
+  const internalShowModal = computed({
+    get() {
+      return props.showModal
+    },
+    set(value: boolean) {
+      emit('update:showModal', value)
+    },
+  })
+
+  const resetTitle = computed(() => {
+    return `Reset concurrency limit for tag ${props.concurrencyLimit.tag}?`
+  })
+
+  const api = useWorkspaceApi()
+  const concurrencyLimitSubscription = useSubscription(api.concurrencyLimits.getConcurrencyLimit, [props.concurrencyLimit.id])
+  const concurrencyLimitsSubscription = useSubscription(api.concurrencyLimits.getConcurrencyLimits)
+  const submit = async (): Promise<void> => {
+    try {
+      await api.concurrencyLimits.resetConcurrencyLimitByTag(props.concurrencyLimit.tag)
+      concurrencyLimitSubscription.refresh()
+      concurrencyLimitsSubscription.refresh()
+      showToast(localization.success.resetConcurrencyLimit, 'success')
+    } catch (error) {
+      console.error(error)
+      const message = getApiErrorMessage(error, localization.error.resetConcurrencyLimit)
+      showToast(message, 'error')
+    } finally {
+      internalShowModal.value = false
+    }
+  }
+</script>

package/src/components/ConcurrencyLimitV2Menu.vue

@@ -0,0 +1,51 @@
+<template>
+  <p-icon-button-menu v-bind="$attrs">
+    <copy-overflow-menu-item label="Copy ID" :item="concurrencyLimit.id" />
+    <p-overflow-menu-item v-if="can.delete.concurrency_limit" label="Delete" @click="open" />
+    <p-overflow-menu-item v-if="can.update.concurrency_limit" label="Edit" @click="openEdit" />
+  </p-icon-button-menu>
+  <ConcurrencyLimitsV2UpdateModal v-model:showModal="showEditModal" :concurrency-limit="concurrencyLimit" />
+  <ConfirmDeleteModal
+    v-model:showModal="showModal"
+    :name="concurrencyLimit.name"
+    label="Concurrency Limit"
+    @delete="deleteConcurrencyLimit(concurrencyLimit.id)"
+  />
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'ConcurrencyLimitsMenu',
+    expose: [],
+    inheritAttrs: false,
+  }
+</script>
+
+<script lang="ts" setup>
+  import { CopyOverflowMenuItem, ConfirmDeleteModal, ConcurrencyLimitsV2UpdateModal } from '@/components'
+  import { useShowModal, useCan, useWorkspaceApi } from '@/compositions'
+  import { ConcurrencyV2Limit } from '@/models'
+  import { deleteItem } from '@/utilities'
+
+  defineProps<{
+    concurrencyLimit: ConcurrencyV2Limit,
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'delete', value: string): void,
+  }>()
+
+  const can = useCan()
+
+  const { showModal, open, close } = useShowModal()
+
+  const { showModal: showEditModal, open: openEdit } = useShowModal()
+
+  const api = useWorkspaceApi()
+
+  const deleteConcurrencyLimit = async (id: string): Promise<void> => {
+    close()
+    await deleteItem(id, api.concurrencyV2Limits.deleteConcurrencyV2Limit, 'Concurrency Limit')
+    emit('delete', id)
+  }
+</script>

package/src/components/ConcurrencyLimitV2Toggle.vue

@@ -0,0 +1,59 @@
+<template>
+  <p-tooltip :text="toggleTooltipText">
+    <p-toggle 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 { localization } from '@/localization'
+  import { ConcurrencyV2Limit } from '@/models'
+  import { getApiErrorMessage } from '@/utilities/errors'
+
+  const props = defineProps<{
+    limit: ConcurrencyV2Limit,
+  }>()
+
+  const api = useWorkspaceApi()
+  const concurrencyLimitSubscription = useSubscription(api.concurrencyV2Limits.getConcurrencyV2Limits)
+
+  const emit = defineEmits<{
+    (event: 'update'): void,
+  }>()
+
+  const internalValue = computed({
+    get() {
+      return !!props.limit.active
+    },
+    set(value: boolean) {
+      toggleLimit(value)
+    },
+  })
+
+  const toggleTooltipText = computed(() => {
+    return internalValue.value ? 'Set concurrency limit to inactive' : 'Set concuurency limit to active'
+  })
+
+  const loading = ref(false)
+
+  const toggleLimit = async (value: boolean): Promise<void> => {
+    loading.value = true
+
+    try {
+      await api.concurrencyV2Limits.updateConcurrencyV2Limit(props.limit.id, { active: value })
+      showToast(localization.success.updateConcurrencyLimit, 'success')
+      concurrencyLimitSubscription.refresh()
+      emit('update')
+    } catch (error) {
+      const message = getApiErrorMessage(error, localization.error.updateConcurrencyLimit)
+      showToast(message, 'error')
+      console.error(error)
+    } finally {
+      loading.value = false
+    }
+  }
+</script>
+

package/src/components/ConcurrencyLimitsCreateModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <p-modal v-model:showModal="internalShowModal" class="concurrency-limit-create-modal" title="Add Task Run Concurrency Limit">
+    <p-form class="concurrency-limit-create-form" @submit="submit">
+      <p-content>
+        <p-label label="Tag" :message="tagErrorMessage" :state="tagState">
+          <p-text-input v-model="tag" :state="tagState" />
+        </p-label>
+
+        <p-label label="Concurrency Limit" :message="limitErrorMessage" :state="limitState">
+          <p-number-input v-model="concurrencyLimit" :min="0" :state="limitState" />
+        </p-label>
+      </p-content>
+    </p-form>
+
+    <template #actions>
+      <slot name="actions">
+        <p-button variant="default" :loading="isSubmitting" @click="submit">
+          Add
+        </p-button>
+      </slot>
+    </template>
+  </p-modal>
+</template>
+
+<script lang="ts" setup>
+  import { PLabel, PNumberInput, PForm, showToast } from '@prefecthq/prefect-design'
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { useField } from 'vee-validate'
+  import { computed } from 'vue'
+  import { useWorkspaceApi } from '@/compositions'
+  import { useForm } from '@/compositions/useForm'
+  import { localization } from '@/localization'
+  import { ConcurrencyLimitCreate } from '@/models/ConcurrencyLimitCreate'
+  import { getApiErrorMessage } from '@/utilities/errors'
+  import { isRequired, isGreaterThan, fieldRules } from '@/utilities/validation'
+
+  const props = defineProps<{
+    showModal: boolean,
+  }>()
+  const emit = defineEmits<{
+    (event: 'update:showModal', value: boolean): void,
+  }>()
+
+  const { handleSubmit, resetForm, isSubmitting } = useForm<ConcurrencyLimitCreate>()
+  const rules = {
+    tag: isRequired('Tag'),
+    concurrencyLimit: fieldRules('Limit', isRequired, isGreaterThan(0)),
+  }
+  const { value: tag, meta: tagState, errorMessage: tagErrorMessage } = useField<string>('tag', rules.tag)
+  const { value: concurrencyLimit, meta: limitState, errorMessage: limitErrorMessage } = useField<number|null>('concurrencyLimit', rules.concurrencyLimit)
+
+  const internalShowModal = computed({
+    get() {
+      return props.showModal
+    },
+    set(value: boolean) {
+      emit('update:showModal', value)
+    },
+  })
+
+  const api = useWorkspaceApi()
+  const concurrencyLimitSubscription = useSubscription(api.concurrencyLimits.getConcurrencyLimits)
+  const submit = handleSubmit(async (values) => {
+    try {
+      const { tag, concurrencyLimit } = values
+      await api.concurrencyLimits.createConcurrencyLimit({ tag, concurrencyLimit })
+      concurrencyLimitSubscription.refresh()
+      showToast(localization.success.createConcurrencyLimit, 'success')
+    } catch (error) {
+      console.error(error)
+      const message = getApiErrorMessage(error, localization.error.createConcurrencyLimit)
+      showToast(message, 'error')
+    } finally {
+      resetForm()
+      internalShowModal.value = false
+    }
+  })
+</script>

package/src/components/ConcurrencyLimitsPageEmptyState.vue

@@ -0,0 +1,37 @@
+<template>
+  <p-empty-state class="concurrency-limit-page-empty-state">
+    <template #icon>
+      <p-icon icon="Task" />
+    </template>
+
+    <template #heading>
+      Add a concurrency limit for your task runs
+    </template>
+
+    <template #description>
+      Creating a limit allows you to limit the number of tasks running
+      simultaneously with a given tag.
+    </template>
+
+    <template #actions>
+      <p-button v-if="can.create.concurrency_limit" primary icon-append="PlusIcon" @click="open">
+        Add Concurrency Limit
+      </p-button>
+      <DocumentationButton :to="localization.docs.concurrency" />
+      <ConcurrencyLimitsCreateModal v-model:showModal="showModal" />
+    </template>
+  </p-empty-state>
+</template>
+
+<script lang="ts" setup>
+  import { PEmptyState, PButton, PIcon } from '@prefecthq/prefect-design'
+  import ConcurrencyLimitsCreateModal from '@/components/ConcurrencyLimitsCreateModal.vue'
+  import DocumentationButton from '@/components/DocumentationButton.vue'
+  import { useCan } from '@/compositions/useCan'
+  import { useShowModal } from '@/compositions/useShowModal'
+  import { localization } from '@/localization'
+
+  const { showModal, open } = useShowModal()
+
+  const can = useCan()
+</script>

package/src/components/ConcurrencyLimitsTable.vue

@@ -0,0 +1,65 @@
+<template>
+  <ConcurrencyLimitsPageEmptyState v-if="empty && loaded" />
+  <p-table v-else class="concurrency-limits-table__table" :columns="columns" :data="concurrencyLimits">
+    <template #tag="{ row }">
+      <p-link :to="routes.concurrencyLimit(row.id)">
+        {{ row.tag }}
+      </p-link>
+    </template>
+    <template #active-task-runs="{ row }">
+      <ConcurrencyTableActiveSlots v-if="row.activeSlots" :active-slots="row.activeSlots" />
+    </template>
+
+    <template #action-heading>
+      <span />
+    </template>
+
+    <template #action="{ row }">
+      <ConcurrencyLimitMenu size="xs" :concurrency-limit="row" @delete="concurrencyLimitSubscription.refresh" />
+    </template>
+
+    <template #empty-state>
+      <PEmptyResults>
+        <template #message>
+          No task concurrency limits
+        </template>
+      </PEmptyResults>
+    </template>
+  </p-table>
+</template>
+
+<script lang="ts" setup>
+  import { TableColumn } from '@prefecthq/prefect-design'
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import { ConcurrencyTableActiveSlots, ConcurrencyLimitMenu, ConcurrencyLimitsPageEmptyState } from '@/components'
+  import { useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
+  import { ConcurrencyLimit } from '@/models/ConcurrencyLimit'
+
+  const api = useWorkspaceApi()
+  const columns: TableColumn<ConcurrencyLimit>[] = [
+    {
+      property: 'tag',
+      label: 'Tag',
+    },
+    {
+      property: 'concurrencyLimit',
+      label: 'Slots',
+    },
+    {
+      property: 'activeSlots',
+      label: 'Active Task Runs',
+    },
+    {
+      label: 'Action',
+      width: '42px',
+    },
+  ]
+
+  const concurrencyLimitSubscription = useSubscription(api.concurrencyLimits.getConcurrencyLimits)
+  const concurrencyLimits = computed(() => concurrencyLimitSubscription.response ?? [])
+  const empty = computed(() => concurrencyLimitSubscription.executed && !concurrencyLimits.value.length)
+  const loaded = computed(() => concurrencyLimitSubscription.executed)
+
+  const routes = useWorkspaceRoutes()
+</script>

package/src/components/ConcurrencyLimitsV2CreateModal.vue

@@ -0,0 +1,114 @@
+<template>
+  <p-modal v-model:showModal="internalShowModal" class="concurrency-limits-v2-create-modal" title="Add Concurrency Limit">
+    <p-form class="concurrency-limits-v2-create-form" @submit="submit">
+      <p-content>
+        <p-label label="Name" :message="nameErrorMessage" :state="nameState">
+          <p-text-input v-model="name" :state="nameState" />
+        </p-label>
+
+        <p-label label="Concurrency Limit" :message="limitErrorMessage" :state="limitState">
+          <p-number-input v-model="limit" :min="0" :state="limitState" />
+        </p-label>
+
+        <p-label label="Slot Decay Per Second">
+          <p-number-input v-model="decay" :min="0" />
+        </p-label>
+
+        <p-label label="Active Slots">
+          <p-number-input v-model="activeSlots" :min="0" />
+        </p-label>
+
+        <p-label label="Active">
+          <p-toggle v-model="active" />
+        </p-label>
+      </p-content>
+    </p-form>
+
+    <template #actions>
+      <slot name="actions">
+        <p-button variant="default" :loading="pending" @click="submit">
+          Create
+        </p-button>
+      </slot>
+    </template>
+  </p-modal>
+</template>
+
+<script lang="ts" setup>
+  import { PLabel, PNumberInput, PForm, showToast } from '@prefecthq/prefect-design'
+  import { useSubscription, useValidation, useValidationObserver } from '@prefecthq/vue-compositions'
+  import { computed, ref } from 'vue'
+  import { useWorkspaceApi } from '@/compositions'
+  import { localization } from '@/localization'
+  import { getApiErrorMessage } from '@/utilities/errors'
+  import { isRequired, isGreaterThanZeroOrNull } from '@/utilities/formValidation'
+
+  const props = defineProps<{
+    showModal: boolean,
+  }>()
+  const emit = defineEmits<{
+    (event: 'update:showModal', value: boolean): void,
+  }>()
+
+  const name = ref('')
+  const { state: nameState, error: nameErrorMessage } = useValidation(name, 'Name', [isRequired])
+
+  const limit = ref(0)
+  const { state: limitState, error: limitErrorMessage } = useValidation(limit, 'Limit', [
+    isRequired,
+    isGreaterThanZeroOrNull,
+  ])
+
+  const active = ref(true)
+
+
+  const decay = ref(0)
+
+  const activeSlots = ref(0)
+
+  const internalShowModal = computed({
+    get() {
+      return props.showModal
+    },
+    set(value: boolean) {
+      emit('update:showModal', value)
+    },
+  })
+
+  const api = useWorkspaceApi()
+  const concurrencyLimitSubscription = useSubscription(api.concurrencyV2Limits.getConcurrencyV2Limits)
+
+  const reset = (): void => {
+    name.value = ''
+    limit.value = 0
+    decay.value = 0
+    active.value = true
+    activeSlots.value = 0
+  }
+
+  const { valid, pending, validate } = useValidationObserver()
+  const submit = async (): Promise<void> => {
+    await validate()
+    if (valid.value) {
+      try {
+        const concurrencyLimit = {
+          name: name.value,
+          limit: limit.value,
+          slotDecayPerSecond: decay.value,
+          active: active.value,
+          activeSlots: activeSlots.value,
+        }
+        await api.concurrencyV2Limits.createConcurrencyV2Limit(concurrencyLimit)
+        concurrencyLimitSubscription.refresh()
+        showToast(localization.success.createConcurrencyLimit, 'success')
+      } catch (error) {
+        console.error(error)
+        const message = getApiErrorMessage(error, localization.error.createConcurrencyLimit)
+        showToast(message, 'error')
+      } finally {
+        reset()
+        internalShowModal.value = false
+      }
+    }
+  }
+</script>