@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/components/DeploymentForm.vue

@@ -0,0 +1,160 @@
+<template>
+  <p-form class="deployment-form p-background" :loading="isSubmitting" @submit="submit" @cancel="cancel">
+    <p-content>
+      <p-content>
+        <h3 class="deployment-form__section-header">
+          General
+        </h3>
+
+        <p-label label="Name">
+          <p-text-input :model-value="name" disabled />
+        </p-label>
+
+        <p-label label="Description (Optional)" :state="descriptionState">
+          <p-code-input
+            v-model="description"
+            class="deployment-form__description-input"
+            :min-lines="3"
+            lang="markdown"
+            show-line-numbers
+            :state="descriptionState"
+            :placeholder="localization.info.descriptionPlaceholder"
+          />
+        </p-label>
+
+        <p-label label="Work Pool (Optional)">
+          <WorkPoolCombobox v-model:selected="workPoolName" />
+        </p-label>
+
+        <p-label v-if="workPoolName" label="Work Queue (Optional)">
+          <WorkPoolQueueCombobox v-model:selected="workQueueName" :work-pool-name="workPoolName" />
+        </p-label>
+
+        <p-label label="Tags (Optional)">
+          <p-tags-input v-model="tags" empty-message="Add tags" />
+        </p-label>
+      </p-content>
+
+      <p-divider />
+
+      <p-content>
+        <h3>
+          {{ localization.info.parameters }}
+        </h3>
+
+        <SchemaInput v-model="parameters" :schema="schema" />
+        <p-label label="Enforce Parameter Schema">
+          <p-toggle v-model="enforceParameterSchema" :disabled="!parameters" class="deployment-form__enforce-parameter-schema-toggle" />
+        </p-label>
+      </p-content>
+    </p-content>
+
+    <p-divider />
+
+    <p-content>
+      <h3 class="deployment-form__section-header">
+        {{ localization.info.infraOverrides }}
+      </h3>
+      <p-label label="Infrastructure Overrides (Optional)" :message="overrideErrorMessage" :state="overrideState">
+        <JobVariableOverridesInput v-model="infrastructureOverrides" :state="overrideState" />
+      </p-label>
+    </p-content>
+
+    <template #footer>
+      <p-button @click="cancel">
+        Cancel
+      </p-button>
+      <p-button variant="default" type="submit" @click="submit">
+        Save
+      </p-button>
+    </template>
+  </p-form>
+</template>
+
+<script lang="ts" setup>
+  import { useValidationObserver } from '@prefecthq/vue-compositions'
+  import { useField } from 'vee-validate'
+  import { computed } from 'vue'
+  import { SchemaInput, WorkPoolCombobox, WorkPoolQueueCombobox, JobVariableOverridesInput } from '@/components'
+  import { useForm } from '@/compositions/useForm'
+  import { useOptionalPropertiesSchema } from '@/compositions/useOptionalPropertiesSchema'
+  import { localization } from '@/localization'
+  import { Deployment, DeploymentUpdate, DeploymentEdit } from '@/models'
+  import { SchemaValues } from '@/types/schemas'
+  import { stringify, isJson, fieldRules } from '@/utilities'
+
+  const props = defineProps<{
+    deployment: Deployment,
+  }>()
+
+  const name = computed(() => props.deployment.name)
+
+  const { handleSubmit, isSubmitting } = useForm<DeploymentEdit>({
+    initialValues: {
+      description: props.deployment.description,
+      parameters: props.deployment.parameters,
+      workPoolName: props.deployment.workPoolName,
+      workQueueName: props.deployment.workQueueName,
+      tags: props.deployment.tags,
+      schema: props.deployment.parameterOpenApiSchema,
+      infrastructureOverrides: stringify(props.deployment.infrastructureOverrides),
+      enforceParameterSchema: props.deployment.enforceParameterSchema,
+    },
+  })
+
+  const rules = {
+    infrastructureOverrides: fieldRules('Infrastructure overrides', isJson),
+    jsonParameters: fieldRules('Parameters', isJson),
+  }
+
+  const { value: description, meta: descriptionState } = useField<string>('description')
+  const { value: parameters } = useField<SchemaValues>('parameters')
+  const { value: workPoolName } = useField<string | null>('workPoolName')
+  const { value: workQueueName } = useField<string | null>('workQueueName')
+  const { value: tags } = useField<string[] | null>('tags')
+  const { value: infrastructureOverrides, meta: overrideState, errorMessage: overrideErrorMessage } = useField<string>('infrastructureOverrides', rules.infrastructureOverrides)
+  const { value: enforceParameterSchema } = useField<boolean>('enforceParameterSchema')
+
+  const { schema } = useOptionalPropertiesSchema(props.deployment.rawSchema)
+
+  const emit = defineEmits<{
+    (event: 'submit', value: DeploymentUpdate): void,
+    (event: 'cancel'): void,
+  }>()
+
+  const { validate } = useValidationObserver()
+
+  const submit = handleSubmit(async (values): Promise<void> => {
+    const valid = await validate()
+
+    if (!valid) {
+      return
+    }
+
+    const deploymentUpdate: DeploymentUpdate = {
+      ...values,
+      infrastructureOverrides: JSON.parse(infrastructureOverrides.value),
+    }
+
+    emit('submit', deploymentUpdate)
+  })
+
+  const cancel = (): void => {
+    emit('cancel')
+  }
+</script>
+
+<style>
+.deployment-form {
+  @apply
+  px-6
+  py-6
+  rounded-default
+}
+
+.deployment-form__section-header {
+  @apply
+  text-lg
+  font-semibold
+}
+</style>

package/src/components/DeploymentFormV2.vue

@@ -0,0 +1,166 @@
+<template>
+  <p-form class="deployment-form p-background" @submit="submit" @cancel="cancel">
+    <h3 class="deployment-form__heading">
+      General
+    </h3>
+
+    <p-label label="Name">
+      <p-text-input :model-value="name" disabled />
+    </p-label>
+
+    <p-label label="Description (Optional)">
+      <p-code-input
+        v-model="description"
+        class="deployment-form__json"
+        :min-lines="3"
+        lang="markdown"
+        show-line-numbers
+        :placeholder="localization.info.descriptionPlaceholder"
+      />
+    </p-label>
+
+    <p-label label="Work Pool (Optional)">
+      <WorkPoolCombobox v-model:selected="workPoolName" allow-unset />
+    </p-label>
+
+    <p-label v-if="workPoolName" label="Work Queue (Optional)">
+      <WorkPoolQueueCombobox v-model:selected="workQueueName" :work-pool-name="workPoolName" allow-unset />
+    </p-label>
+
+    <p-label label="Tags (Optional)">
+      <p-tags-input v-model="tags" empty-message="Add tags" />
+    </p-label>
+
+    <p-divider />
+
+
+    <SchemaInputV2 v-model:values="parameters" :schema="schema" :errors="errors" :kinds="['none', 'json']">
+      <template #default="{ kind, setKind }">
+        <div class="flow-run-create-form-v2__header">
+          <h3 class="deployment-form__heading">
+            {{ localization.info.parameters }}
+          </h3>
+          <p-icon-button-menu small>
+            <p-overflow-menu-item v-if="kind === 'json'" label="Use form input" @click="setKind('none')" />
+            <p-overflow-menu-item v-if="kind === 'none'" label="Use JSON input" @click="setKind('json')" />
+          </p-icon-button-menu>
+        </div>
+      </template>
+    </SchemaInputV2>
+
+    <p-checkbox v-model="shouldValidateParameters" label="Validate parameters before submitting" />
+
+    <p-label label="Enforce Parameter Schema">
+      <p-toggle v-model="enforceParameterSchema" :disabled="!parameters" />
+    </p-label>
+
+    <p-divider />
+
+    <h3 class="deployment-form__heading">
+      {{ localization.info.infraOverrides }}
+    </h3>
+    <p-label label="Infrastructure Overrides (Optional)" :message="overrideError" :state="overrideState">
+      <JobVariableOverridesInput v-model="infrastructureOverrides" :state="overrideState" />
+    </p-label>
+
+    <template #footer>
+      <p-button @click="cancel">
+        Cancel
+      </p-button>
+      <p-button variant="default" type="submit">
+        Save
+      </p-button>
+    </template>
+  </p-form>
+</template>
+
+<script lang="ts" setup>
+  import { showToast } from '@prefecthq/prefect-design'
+  import { useValidation, useValidationObserver } from '@prefecthq/vue-compositions'
+  import { computed, h, ref } from 'vue'
+  import { JobVariableOverridesInput, WorkPoolCombobox, WorkPoolQueueCombobox } from '@/components'
+  import ToastParameterValidationError from '@/components/ToastParameterValidationError.vue'
+  import { localization } from '@/localization'
+  import { Deployment, DeploymentUpdateV2 } from '@/models'
+  import { SchemaInputV2 } from '@/schemas'
+  import { useSchemaValidation } from '@/schemas/compositions/useSchemaValidation'
+  import { stringify, isJson } from '@/utilities'
+
+  const props = defineProps<{
+    deployment: Deployment,
+  }>()
+
+  const name = computed(() => props.deployment.name)
+  const description = ref(props.deployment.description)
+  const workPoolName = ref(props.deployment.workPoolName)
+  const workQueueName = ref(props.deployment.workQueueName)
+  const parameters = ref(props.deployment.parametersV2)
+  const tags = ref(props.deployment.tags)
+  const infrastructureOverrides = ref(stringify(props.deployment.infrastructureOverrides))
+  const enforceParameterSchema = ref(props.deployment.enforceParameterSchema)
+  const shouldValidateParameters = ref(true)
+
+  const schema = computed(() => {
+    return { ...props.deployment.parameterOpenApiSchemaV2, required: [] }
+  })
+
+  const { validate } = useValidationObserver()
+  const { errors, validate: validateParameters } = useSchemaValidation(schema, parameters)
+  const { state: overrideState, error: overrideError } = useValidation(infrastructureOverrides, isJson('Infrastructure overrides'))
+
+  const emit = defineEmits<{
+    (event: 'submit', value: DeploymentUpdateV2): void,
+    (event: 'cancel'): void,
+  }>()
+
+  async function submit(): Promise<void> {
+    const valid = await validate()
+
+    if (!valid) {
+      return
+    }
+
+    if (shouldValidateParameters.value) {
+      try {
+        const valid = await validateParameters()
+
+        if (!valid) {
+          return
+        }
+      } catch (error) {
+        console.error(error)
+        showToast(h(ToastParameterValidationError), 'error')
+        return
+      }
+    }
+
+    const deploymentUpdate: DeploymentUpdateV2 = {
+      description: description.value,
+      workPoolName: workPoolName.value,
+      workQueueName: workQueueName.value,
+      parameters: parameters.value,
+      tags: tags.value,
+      enforceParameterSchema: enforceParameterSchema.value,
+      infrastructureOverrides: JSON.parse(infrastructureOverrides.value),
+    }
+
+    emit('submit', deploymentUpdate)
+  }
+
+  const cancel = (): void => {
+    emit('cancel')
+  }
+</script>
+
+<style>
+.deployment-form { @apply
+  px-6
+  py-6
+  rounded-default
+}
+
+.deployment-form__heading { @apply
+  text-lg
+  font-semibold
+}
+</style>

package/src/components/DeploymentIconText.vue

@@ -0,0 +1,24 @@
+<template>
+  <template v-if="deployment?.can.read">
+    <p-link :to="routes.deployment(deploymentId)" class="deployment-icon-text">
+      <p-icon-text icon="MapPinIcon">
+        <span>{{ deploymentName }}</span>
+      </p-icon-text>
+    </p-link>
+  </template>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import { useWorkspaceRoutes } from '@/compositions'
+  import { useDeployment } from '@/compositions/useDeployment'
+
+  const props = defineProps<{
+    deploymentId: string,
+  }>()
+
+  const routes = useWorkspaceRoutes()
+  const deploymentId = computed(() => props.deploymentId)
+  const { deployment } = useDeployment(deploymentId)
+  const deploymentName = computed(() => deployment.value?.name)
+</script>

package/src/components/DeploymentList.vue

@@ -0,0 +1,309 @@
+<template>
+  <p-content class="deployment-list">
+    <p-list-header sticky>
+      <ResultsCount v-if="selectedDeployments.length == 0" label="Deployment" :count="total" />
+      <SelectedCount v-else :count="selectedDeployments.length" />
+      <DeploymentsDeleteButton v-if="can.delete.deployment" :selected="selectedDeployments.map(deployment => deployment.id)" small @delete="deleteDeployments" />
+
+      <template #controls>
+        <SearchInput v-model="nameLike" size="small" placeholder="Search deployments..." class="deployment-list__search-input" label="Search deployments" />
+        <DeploymentTagsInput v-model:selected="filter.deployments.tags.name" small multiple />
+      </template>
+
+      <template #sort>
+        <p-select v-model="filter.sort" small :options="deploymentSortOptions" />
+      </template>
+    </p-list-header>
+
+    <p-table
+      :selected="can.delete.deployment ? selectedDeployments : undefined"
+      :data="deployments"
+      :columns="columns"
+      :header-classes="columnClasses"
+      :column-classes="columnClasses"
+      :row-classes="rowClasses"
+      class="deployment-list__table"
+      @update:selected="selectedDeployments = $event"
+    >
+      <template #status="{ row }">
+        <DeploymentStatusBadge :deployment="row" small />
+      </template>
+
+      <template #schedules-heading="{ column }">
+        <div class="deployment-list__schedules-heading">
+          {{ column.label }}
+        </div>
+      </template>
+
+      <template #tags-heading="{ column }">
+        <div class="deployment-list__tags-heading">
+          {{ column.label }}
+        </div>
+      </template>
+
+      <template #action-heading>
+        <span />
+      </template>
+
+      <template #deployment="{ row }">
+        <div class="deployment-list__deployment">
+          <router-link :to="routes.deployment(row.id)" class="deployment-list__name">
+            {{ row.name }}
+          </router-link>
+
+          <FlowPopover :flow-id="row.flowId" class="deployment-list__flow-name" />
+        </div>
+      </template>
+
+      <template #updated="{ row }">
+        <FormattedDate :date="row.updated" />
+      </template>
+
+      <template #created="{ row }">
+        <FormattedDate :date="row.created" />
+      </template>
+
+      <template #schedules="{ row }">
+        <DeploymentScheduleTags :schedules="row.schedules" justify="right" />
+      </template>
+
+      <template #tags="{ row }">
+        <template v-if="row.tags">
+          <p-tag-wrapper :tags="row.tags" small justify="right" />
+        </template>
+      </template>
+
+      <template #activity="{ row }">
+        <MiniDeploymentHistory
+          class="deployment-list__activity-chart"
+          :deployment-id="row.id"
+          :time-span-in-seconds="secondsInWeek"
+        />
+      </template>
+
+      <template #action="{ row }">
+        <div class="deployment-list__action">
+          <DeploymentToggle :deployment="row" @update="refresh" />
+          <DeploymentMenu
+            class="deployment-list__menu"
+            small
+            show-all
+            :deployment="row"
+            flat
+            @delete="refresh"
+          />
+        </div>
+      </template>
+
+      <template #empty-state>
+        <PEmptyResults v-if="subscriptions.executed">
+          <template #message>
+            No deployments
+          </template>
+          <template v-if="isCustomFilter" #actions>
+            <p-button small @click="clear">
+              Clear Filters
+            </p-button>
+          </template>
+        </PEmptyResults>
+        <PEmptyResults v-else>
+          <template #message>
+            <p-loading-icon />
+          </template>
+        </PEmptyResults>
+      </template>
+    </p-table>
+
+    <p-pager v-if="pages > 1" v-model:page="page" :pages="pages" />
+  </p-content>
+</template>
+
+<script lang="ts" setup>
+  import { TableColumn, media } from '@prefecthq/prefect-design'
+  import { NumberRouteParam, useDebouncedRef, useRouteQueryParam } from '@prefecthq/vue-compositions'
+  import { secondsInWeek } from 'date-fns/constants'
+  import { snakeCase } from 'lodash'
+  import merge from 'lodash.merge'
+  import { computed, ref } from 'vue'
+  import {
+    DeploymentsDeleteButton,
+    ResultsCount,
+    SearchInput,
+    FlowPopover,
+    MiniDeploymentHistory,
+    SelectedCount,
+    DeploymentTagsInput,
+    DeploymentToggle,
+    FormattedDate,
+    DeploymentStatusBadge,
+    DeploymentScheduleTags
+  } from '@/components'
+  import { useCan, useDeploymentsFilterFromRoute, useWorkspaceRoutes, useDeployments, useComponent } from '@/compositions'
+  import { Deployment } from '@/models'
+  import { DeploymentsFilter } from '@/models/Filters'
+  import { ClassValue } from '@/types'
+  import { deploymentSortOptions } from '@/types/SortOptionTypes'
+
+  const props = defineProps<{
+    filter?: DeploymentsFilter,
+    prefix?: string,
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'delete'): void,
+  }>()
+
+  const { DeploymentMenu } = useComponent()
+
+  const can = useCan()
+  const routes = useWorkspaceRoutes()
+
+  const nameLike = ref<string>()
+  const nameLikeDebounced = useDebouncedRef(nameLike, 1200)
+
+  const { filter, clear, isCustomFilter } = useDeploymentsFilterFromRoute(merge({}, props.filter, {
+    deployments: {
+      flowOrDeploymentNameLike: nameLikeDebounced,
+    },
+    limit: 50,
+  }), props.prefix)
+
+  const page = useRouteQueryParam('page', NumberRouteParam, 1)
+  const { deployments, subscriptions, total, pages } = useDeployments(filter, {
+    page,
+    interval: 30000,
+  })
+
+  const columns = computed<TableColumn<Deployment>[]>(() => [
+    {
+      label: 'Deployment',
+    },
+    {
+      label: 'Status',
+      property: 'status',
+      width: '116px',
+    },
+    {
+      label: 'Activity',
+      visible: media.lg,
+      maxWidth: '15%',
+    },
+    {
+      label: 'Tags',
+      property: 'tags',
+      visible: media.md,
+      maxWidth: '15%',
+    },
+    {
+      label: 'Schedules',
+      property: 'schedules',
+      visible: media.md,
+      maxWidth: '15%',
+    },
+    {
+      label: 'Action',
+      width: '82px',
+    },
+  ])
+
+  const columnClasses = (column: TableColumn<Deployment>): ClassValue => [`deployment-list__${snakeCase(column.label)}-column`]
+  const rowClasses = (row: Deployment): ClassValue => {
+    return {
+      'deployment-list__row--subdued': row.paused,
+    }
+  }
+
+  const selectedDeployments = ref<Deployment[]>([])
+
+  function refresh(): void {
+    subscriptions.refresh()
+  }
+
+  const deleteDeployments = (): void => {
+    selectedDeployments.value = []
+    refresh()
+    emit('delete')
+  }
+</script>
+
+<style>
+.deployment-list__table .p-table__table { @apply
+  table-fixed
+  w-full
+}
+
+.deployment-list__action-column,
+.deployment-list__table .p-table__checkbox-cell { @apply
+  box-content
+}
+
+.deployment-list__activity-column { @apply
+  overflow-visible
+}
+
+.deployment-list__activity-chart { @apply
+  h-8
+  pr-4
+  w-full
+}
+
+.deployment-list__search-input { @apply
+  w-64
+}
+
+.deployment-list__action { @apply
+  flex
+  justify-end
+  items-center
+}
+
+.deployment-list__deployment { @apply
+  flex
+  flex-col
+  gap-0.5
+  min-w-0
+  max-w-full
+}
+
+.deployment-list__name { @apply
+  font-semibold
+  text-base
+  hover:underline
+}
+
+.deployment-list__flow-name,
+.deployment-list__name { @apply
+  max-w-full
+  truncate
+}
+
+.deployment-list__schedules-heading,
+.deployment-list__tags-heading { @apply
+  text-right
+}
+
+.deployment-list__flow-name { @apply
+  text-subdued
+  text-xs
+}
+
+.deployment-list__created-date { @apply
+  text-subdued
+  text-xs
+}
+
+.deployment-list__menu { @apply
+  ml-2
+}
+
+.deployment-list__row--subdued .deployment-list__deployment-column,
+.deployment-list__row--subdued .deployment-list__tags-column,
+.deployment-list__row--subdued .deployment-list__schedules-column { @apply
+  opacity-65
+}
+
+.deployment-list__row--subdued .deployment-list__name  { @apply
+  text-subdued
+  font-normal
+}
+</style>