@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/components/ConcurrencyLimitsV2EmptyState.vue

@@ -0,0 +1,36 @@
+<template>
+  <p-empty-state class="concurrency-limit-page-empty-state">
+    <template #icon>
+      <p-icon icon="QueueListIcon" />
+    </template>
+
+    <template #heading>
+      Add a concurrency limit
+    </template>
+
+    <template #description>
+      Global concurrency limits can be applied to flow runs, task runs and any operation where you want to control concurrency.
+    </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.globalConcurrency" />
+      <ConcurrencyLimitsV2CreateModal v-model:showModal="showModal" />
+    </template>
+  </p-empty-state>
+</template>
+
+<script lang="ts" setup>
+  import { PEmptyState, PButton, PIcon } from '@prefecthq/prefect-design'
+  import ConcurrencyLimitsV2CreateModal from '@/components/ConcurrencyLimitsV2CreateModal.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/ConcurrencyLimitsV2Table.vue

@@ -0,0 +1,78 @@
+<template>
+  <ConcurrencyLimitsV2EmptyState v-if="empty && loaded" />
+  <p-table v-else class="concurrency-limits-v2-table" :columns="columns" :data="concurrencyLimits">
+    <template #tag="{ row }">
+      <p-link :to="routes.concurrencyLimit(row.id)">
+        {{ row.name }}
+      </p-link>
+    </template>
+
+    <template #active-slots="{ row }">
+      {{ row.activeSlots }}
+    </template>
+
+    <template #active="{ row }">
+      <ConcurrencyLimitV2Toggle :limit="row" />
+    </template>
+
+    <template #action-heading>
+      <span />
+    </template>
+
+    <template #action="{ row }">
+      <ConcurrencyLimitV2Menu size="xs" :concurrency-limit="row" @delete="concurrencyLimitSubscription.refresh" />
+    </template>
+
+    <template #empty-state>
+      <p-empty-results>
+        <template #message>
+          No concurrency limits
+        </template>
+      </p-empty-results>
+    </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 { ConcurrencyLimitsV2EmptyState, ConcurrencyLimitV2Menu, ConcurrencyLimitV2Toggle } from '@/components'
+  import { useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
+  import { ConcurrencyV2Limit } from '@/models/ConcurrencyV2Limit'
+
+  const api = useWorkspaceApi()
+  const columns: TableColumn<ConcurrencyV2Limit>[] = [
+    {
+      property: 'name',
+      label: 'Name',
+    },
+    {
+      property: 'limit',
+      label: 'Limit',
+    },
+    {
+      property: 'activeSlots',
+      label: 'Active Slots',
+    },
+    {
+      property: 'slotDecayPerSecond',
+      label: 'Slot Decay per Second',
+    },
+    {
+      property: 'active',
+      label: 'Active',
+    },
+    {
+      label: 'Action',
+      width: '42px',
+    },
+  ]
+
+  const concurrencyLimitSubscription = useSubscription(api.concurrencyV2Limits.getConcurrencyV2Limits)
+  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/ConcurrencyLimitsV2UpdateModal.vue

@@ -0,0 +1,119 @@
+<template>
+  <p-modal v-model:showModal="internalShowModal" class="concurrency-limits-v2-update-modal" :title="updateLimitTitle">
+    <p-form class="concurrency-limits-v2-update-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">
+          Update
+        </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 { ConcurrencyV2Limit } from '@/models/ConcurrencyV2Limit'
+  import { getApiErrorMessage } from '@/utilities/errors'
+  import { isRequired, isGreaterThanZeroOrNull } from '@/utilities/formValidation'
+
+  const props = defineProps<{
+    showModal: boolean,
+    concurrencyLimit: ConcurrencyV2Limit,
+  }>()
+  const emit = defineEmits<{
+    (event: 'update:showModal', value: boolean): void,
+  }>()
+
+  const updateLimitTitle = computed(() => `Update ${props.concurrencyLimit.name}`)
+
+  const name = ref(props.concurrencyLimit.name)
+  const { state: nameState, error: nameErrorMessage } = useValidation(name, 'Name', [isRequired])
+
+  const limit = ref(props.concurrencyLimit.limit)
+  const { state: limitState, error: limitErrorMessage } = useValidation(limit, 'Limit', [
+    isRequired,
+    isGreaterThanZeroOrNull,
+  ])
+
+  const active = ref(true)
+
+  const activeSlots = ref(props.concurrencyLimit.activeSlots)
+
+
+  const decay = ref(props.concurrencyLimit.slotDecayPerSecond)
+
+
+  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 = props.concurrencyLimit.name
+    limit.value = props.concurrencyLimit.limit
+    decay.value = props.concurrencyLimit.slotDecayPerSecond ?? 0
+    active.value = props.concurrencyLimit.active ?? true
+    activeSlots.value = props.concurrencyLimit.activeSlots ?? 0
+  }
+
+  const { valid, pending, validate } = useValidationObserver()
+  const submit = async (): Promise<void> => {
+    await validate()
+    if (valid.value) {
+      try {
+        const updatedLimit = {
+          name: name.value,
+          limit: limit.value,
+          active: active.value,
+          slotDecayPerSecond: decay.value,
+          activeSlots: activeSlots.value,
+        }
+        await api.concurrencyV2Limits.updateConcurrencyV2Limit(props.concurrencyLimit.id, updatedLimit)
+        concurrencyLimitSubscription.refresh()
+        showToast(localization.success.updateConcurrencyLimit, 'success')
+      } catch (error) {
+        console.error(error)
+        const message = getApiErrorMessage(error, localization.error.updateConcurrencyLimit)
+        showToast(message, 'error')
+      } finally {
+        reset()
+        internalShowModal.value = false
+      }
+    }
+  }
+</script>

package/src/components/ConcurrencyTableActiveSlots.vue

@@ -0,0 +1,18 @@
+<template>
+  <template v-if="!taskRunCount">
+    None
+  </template>
+  <template v-else>
+    {{ taskRunCount }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+
+  const props = defineProps<{
+    activeSlots: string[],
+  }>()
+
+  const taskRunCount = computed(() => props.activeSlots.length)
+</script>

package/src/components/ConfirmDeleteModal.vue

@@ -0,0 +1,71 @@
+<template>
+  <p-modal v-model:showModal="internalValue">
+    <template #icon>
+      <p-icon icon="ExclamationCircleIcon" class="delete-modal__icon" />
+    </template>
+    <template #title>
+      <div class="delete-modal__title">
+        <slot name="title">
+          {{ `${action} ${label ?? name}` }}
+        </slot>
+      </div>
+    </template>
+    <span class="delete-modal__message">
+      <slot name="message">
+        Are you sure you want to {{ action.toLowerCase() }} {{ name }}?
+      </slot>
+    </span>
+    <template #actions>
+      <slot name="actions">
+        <p-button variant="destructive" @click="handleDeleteClick">
+          {{ action }}
+        </p-button>
+      </slot>
+    </template>
+  </p-modal>
+</template>
+
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+
+  const props = withDefaults(defineProps<{
+    showModal: boolean,
+    label?: string,
+    name?: string,
+    action?: 'Delete' | 'Remove',
+  }>(), {
+    name: '',
+    label: undefined,
+    action: 'Delete',
+  })
+
+  const emits = defineEmits<{
+    (event: 'update:showModal', value: boolean): void,
+    (event: 'delete'): void,
+  }>()
+
+  const internalValue = computed({
+    get() {
+      return props.showModal
+    },
+    set(value: boolean) {
+      emits('update:showModal', value)
+    },
+  })
+
+  const handleDeleteClick = (): void => {
+    emits('delete')
+    internalValue.value = false
+  }
+</script>
+
+<style>
+.delete-modal__icon { @apply
+  stroke-sentiment-negative
+}
+
+.delete-modal__title { @apply
+  capitalize
+}
+</style>

package/src/components/ConfirmDeleteModalWithSlot.vue

@@ -0,0 +1,30 @@
+<template inheritAttrs="false">
+  <slot :show-modal="showModal" :is-open="isOpen" :open="open" :close="close" :toggle="toggle" />
+  <ConfirmDeleteModal v-model:showModal="showModal" v-bind="$attrs">
+    <template v-for="(index, name) in $slots" #[name]="data">
+      <slot :name="name" v-bind="data" />
+    </template>
+  </ConfirmDeleteModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import ConfirmDeleteModal from '@/components/ConfirmDeleteModal.vue'
+  import { useShowModal } from '@/compositions/useShowModal'
+
+  export default defineComponent({
+    name: 'ConfirmDeleteModalWithSlot',
+    expose: [],
+    components: {
+      ConfirmDeleteModal,
+    },
+
+    inheritAttrs: false,
+
+    setup() {
+      const { showModal, isOpen, open, close, toggle } = useShowModal()
+
+      return { showModal, isOpen, open, close, toggle }
+    },
+  })
+</script>

package/src/components/ConfirmStateChangeModal.vue

@@ -0,0 +1,92 @@
+<template>
+  <p-modal v-model:showModal="internalValue">
+    <template #title>
+      <div class="state-change-modal__title">
+        <slot name="title">
+          {{ `Change ${label} State` }}
+        </slot>
+      </div>
+    </template>
+
+    <p-form @submit="submit">
+      <p-content>
+        <p-label :label="`Current ${label} State`">
+          <StateBadge :state="run.state" />
+        </p-label>
+        <p-label :label="`Desired ${label} State`" :message="stateErrorMessage" :state="typeState">
+          <StateSelect v-model:selected="type" terminal-state />
+        </p-label>
+        <p-label label="Reason (Optional)">
+          <p-text-input v-model="message" />
+        </p-label>
+      </p-content>
+    </p-form>
+
+    <template #actions>
+      <slot name="actions">
+        <p-button variant="default" class="state-change-modal__state-change-button" :loading="isSubmitting" @click="submit">
+          Change
+        </p-button>
+      </slot>
+    </template>
+  </p-modal>
+</template>
+
+
+<script lang="ts" setup>
+  import { useField } from 'vee-validate'
+  import { computed, watch } from 'vue'
+  import StateBadge from '@/components/StateBadge.vue'
+  import StateSelect from '@/components/StateSelect.vue'
+  import { useForm } from '@/compositions'
+  import { FlowRun, StateUpdateDetails, TaskRun } from '@/models'
+  import { isRequired } from '@/utilities/validation'
+
+
+  const props = withDefaults(defineProps<{
+    showModal: boolean,
+    label?: string,
+    run: FlowRun | TaskRun,
+  }>(), {
+    label: '',
+  })
+
+  const emit = defineEmits<{
+    (event: 'update:showModal', value: boolean): void,
+    (event: 'change', value: StateUpdateDetails): void,
+  }>()
+
+  const internalValue = computed({
+    get() {
+      return props.showModal
+    },
+    set(value: boolean) {
+      emit('update:showModal', value)
+    },
+  })
+
+  const rules = {
+    type: [isRequired('State')],
+  }
+
+  const { handleSubmit, handleReset, isSubmitting } = useForm<StateUpdateDetails>()
+  const { value: type, meta: typeState, errorMessage: stateErrorMessage } = useField<string>('type', rules.type)
+  const { value: message } = useField<string>('message')
+
+  const submit = handleSubmit(values => {
+    emit('change', values)
+    internalValue.value = false
+  })
+
+  watch(internalValue, value => {
+    if (!value) {
+      handleReset()
+    }
+  })
+</script>
+
+<style>
+.change-state-modal__title { @apply
+  capitalize
+}
+</style>

package/src/components/CopyOverflowMenuItem.vue

@@ -0,0 +1,13 @@
+<template>
+  <p-overflow-menu-item :label="label" @click="copyToClipboard(item)" />
+</template>
+
+<script lang="ts" setup>
+  import { POverflowMenuItem } from '@prefecthq/prefect-design'
+  import { copyToClipboard } from '@/utilities/copy'
+
+  defineProps<{
+    item: string,
+    label: string,
+  }>()
+</script>

package/src/components/CopyableWrapper.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="copyable-wrapper">
+    <slot />
+    <p-button
+      size="sm"
+      variant="ghost"
+      class="copyable-wrapper__button"
+      title="copy"
+      icon="DocumentDuplicateIcon"
+      @click="copy"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { PButton } from '@prefecthq/prefect-design'
+  import { copyToClipboard } from '@/utilities/copy'
+
+  const props = defineProps<{
+    textToCopy: string,
+  }>()
+
+  function copy(): void {
+    copyToClipboard(props.textToCopy)
+  }
+</script>
+
+<style>
+.copyable-wrapper { @apply
+  relative
+}
+
+.copyable-wrapper__button { @apply
+  absolute
+  top-2
+  right-2
+}
+</style>

package/src/components/CronScheduleForm.vue

@@ -0,0 +1,168 @@
+<template>
+  <p-form @submit="submit">
+    <p-content>
+      <div class="cron-schedule-form__row">
+        <p-label label="Value" class="cron-schedule-form__column--span-3" :state="cronState">
+          <p-text-input v-model="cron" />
+
+          <template #message>
+            {{ cronErrors?.[0] ?? internalValue }}
+          </template>
+        </p-label>
+
+        <p-label class="cron-schedule-form__column--span-1">
+          <template #label>
+            <span>
+              Day Or
+              <DayOrDescriptionModal />
+            </span>
+          </template>
+
+          <p-toggle v-model="dayOr" class="inline-block" />
+        </p-label>
+      </div>
+
+      <div class="cron-schedule-form__row">
+        <p-label label="Timezone" class="cron-schedule-form__column--span-2">
+          <TimezoneSelect v-model="timezone" />
+        </p-label>
+      </div>
+    </p-content>
+
+    <template v-if="!hideActions" #footer>
+      <slot name="footer" :disabled="disabled">
+        <p-button @click="cancel">
+          Cancel
+        </p-button>
+        <p-button variant="default" :disabled="disabled" type="submit">
+          Save
+        </p-button>
+      </slot>
+    </template>
+  </p-form>
+</template>
+
+<script lang="ts" setup>
+  import { useField } from 'vee-validate'
+  import { computed, ref, watch, onMounted } from 'vue'
+  import DayOrDescriptionModal from '@/components/DayOrDescriptionModal.vue'
+  import TimezoneSelect from '@/components/TimezoneSelect.vue'
+  import { CronSchedule } from '@/models'
+  import { containsCronRandomExpression } from '@/types/cron'
+  import { isRequired, ValidationMethod } from '@/utilities/validation'
+
+  const props = withDefaults(defineProps<{
+    hideActions?: boolean,
+    schedule?: CronSchedule,
+  }>(), {
+    schedule: () => new CronSchedule({ cron: '* * * * *', dayOr: true, timezone: 'UTC' }),
+  })
+
+  const emit = defineEmits<{
+    (event: 'cancel'): void,
+    (event: 'update:schedule' | 'submit', value: CronSchedule): void,
+    (event: 'update:disabled', value: boolean): void,
+  }>()
+
+  const isSupportedCron: ValidationMethod = () => {
+    if (containsCronRandomExpression(cron.value)) {
+      return 'Unsupported expression'
+    }
+
+    return true
+  }
+
+  const isValidCron: ValidationMethod = () => {
+    const val = internalValue.value.toString()
+    const valid = val !== '' && val.toLowerCase() !== 'invalid'
+
+    if (!valid) {
+      return 'Invalid expression'
+    }
+
+    return true
+  }
+
+  const rules = {
+    cron: [
+      isRequired('Expression'),
+      isValidCron,
+      isSupportedCron,
+    ],
+  }
+
+  const { value: cron, meta: cronState, errors: cronErrors } = useField<string>('cron', rules.cron, { initialValue: props.schedule.cron })
+  const timezone = ref(props.schedule.timezone)
+  const dayOr = ref(props.schedule.dayOr)
+
+  const internalValue = computed(() => {
+    return new CronSchedule({
+      cron: cron.value,
+      dayOr: dayOr.value,
+      timezone: timezone.value,
+    })
+  })
+
+  const disabled = computed(() => {
+    return cronErrors.value.length > 0
+  })
+
+  const cancel = (): void => {
+    emit('cancel')
+  }
+
+  const submit = (): void => {
+    if (disabled.value) {
+      return
+    }
+
+    emit('submit', internalValue.value)
+  }
+
+  watch(() => internalValue.value, () => emit('update:schedule', internalValue.value))
+  watch(() => disabled.value, () => emit('update:disabled', disabled.value))
+
+  watch(() => props.schedule, (val) => {
+    timezone.value = val.timezone ?? timezone.value
+    cron.value = val.cron
+    dayOr.value = val.dayOr
+  }, { deep: true })
+
+  onMounted(() => {
+    emit('update:disabled', disabled.value)
+    emit('update:schedule', internalValue.value)
+  })
+</script>
+
+<style>
+.cron-schedule-form__row {
+  @apply
+  grid
+  gap-4
+  grid-cols-1
+}
+
+@screen md {
+  .cron-schedule-form__row {
+    @apply
+    grid
+    gap-2
+    grid-cols-4
+  }
+
+  .cron-schedule-form__column--span-full {
+    @apply
+    col-span-full
+  }
+
+  .cron-schedule-form__column--span-2 {
+    @apply
+    col-span-2
+  }
+
+  .cron-schedule-form__column--span-3 {
+    @apply
+    col-span-3
+  }
+}
+</style>