@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/components/VariablesTable.vue

@@ -0,0 +1,203 @@
+<template>
+  <p-content class="variables-table">
+    <p-list-header sticky>
+      <ResultsCount v-if="selectedVariables.length == 0" :label="localization.info.variable" :count="variablesCount" />
+      <SelectedCount v-else :count="selectedVariables.length" />
+      <VariablesDeleteButton
+        v-if="can.delete.variable"
+        :variable-ids="selectedVariables.map(variable => variable.id)"
+        @delete="deleteVariables"
+      />
+
+      <template #controls>
+        <SearchInput
+          v-model="variableLike"
+          :placeholder="localization.info.variablesSearch"
+          :label="localization.info.variablesSearch"
+        />
+        <VariableTagsInput v-model:selected="filter.variables.tags.name" class="variables-table__tags-input" />
+      </template>
+
+      <template #sort>
+        <p-select v-model="filter.sort" :options="variableSortOptions" />
+      </template>
+    </p-list-header>
+
+    <p-table
+      :selected="can.delete.variable ? selectedVariables : undefined"
+      :data="variables"
+      :columns="columns"
+      :column-classes="columnClass"
+      @update:selected="selectedVariables = $event"
+    >
+      <template #name="{ row }">
+        <div class="variables-table__name" :title="row.name">
+          {{ row.name }}
+        </div>
+      </template>
+
+      <template #updated="{ row }">
+        {{ formatDateTimeNumeric(row.updated) }}
+      </template>
+
+      <template #tags="{ row }">
+        <p-tag-wrapper class="variables-table__tags" :tags="row.tags" justify="left" />
+      </template>
+
+      <template #action-heading>
+        <span />
+      </template>
+
+      <template #action="{ row }">
+        <div :key="row.id" class="variables-table__action">
+          <VariableMenu :variable="row" size="xs" @delete="refreshSubscriptions" @update="handleUpdate" />
+        </div>
+      </template>
+
+      <template #empty-state>
+        <PEmptyResults>
+          <template #message>
+            {{ localization.info.noVariables }}
+          </template>
+          <template v-if="isCustomFilter" #actions>
+            <p-button size="sm" @click="clear">
+              Clear Filters
+            </p-button>
+          </template>
+        </PEmptyResults>
+      </template>
+    </p-table>
+
+    <p-pager v-if="variables.length" v-model:page="page" :pages="pages" />
+  </p-content>
+</template>
+
+<script lang="ts" setup>
+  import { PTable, PEmptyResults, TableColumn, ClassValue } from '@prefecthq/prefect-design'
+  import { useDebouncedRef, useSubscription } from '@prefecthq/vue-compositions'
+  import merge from 'lodash.merge'
+  import { computed, ref } from 'vue'
+  import { VariablesDeleteButton, VariableMenu, ResultsCount, SearchInput, SelectedCount, VariableTagsInput } from '@/components'
+  import { useCan, useVariablesFilter, useWorkspaceApi } from '@/compositions'
+  import { localization } from '@/localization'
+  import { VariablesFilter, Variable } from '@/models'
+  import { variableSortOptions } from '@/types'
+  import { formatDateTimeNumeric } from '@/utilities/dates'
+
+  const DEFAULT_LIMIT = 25
+
+  const props = defineProps<{
+    filter?: VariablesFilter,
+  }>()
+
+  const api = useWorkspaceApi()
+  const can = useCan()
+
+  const variableLike = ref<string>()
+  const variableLikeDebounced = useDebouncedRef(variableLike, 1000)
+
+  const page = ref(1)
+  const offset = computed(() => {
+    return (page.value - 1) * DEFAULT_LIMIT
+  })
+  const pages = computed(() => Math.ceil((variablesCount.value ?? DEFAULT_LIMIT) / DEFAULT_LIMIT))
+
+  const { filter, isCustomFilter, clear } = useVariablesFilter(merge({}, props.filter, {
+    variables: {
+      nameLike: variableLikeDebounced,
+      valueLike: variableLikeDebounced,
+    },
+    offset,
+  }))
+
+  const columns: TableColumn<Variable>[] = [
+    {
+      property: 'name',
+      label: 'Name',
+      width: '192px',
+    },
+    {
+      property: 'value',
+      label: 'Value',
+    },
+    {
+      property: 'updated',
+      label: 'Updated',
+      width: '124px',
+    },
+    {
+      property: 'tags',
+      label: 'Tags',
+      width: '248px',
+    },
+    {
+      label: 'Action',
+      width: '42px',
+    },
+  ]
+
+  function columnClass(column: TableColumn): ClassValue {
+    return {
+      'variables-table__value-td': column.label === 'Value',
+    }
+  }
+
+  const selectedVariables = ref<Variable[]>([])
+
+  const variablesSubscription = useSubscription(api.variables.getVariables, [filter])
+  const variables = computed(() => variablesSubscription.response ?? [])
+
+  const variablesCountSubscription = useSubscription(api.variables.getVariablesCount, [filter])
+  const variablesCount = computed(() => variablesCountSubscription.response)
+
+  function refreshSubscriptions(): void {
+    variablesSubscription.refresh()
+    variablesCountSubscription.refresh()
+  }
+
+  defineExpose({
+    refreshSubscriptions,
+  })
+
+  const emit = defineEmits<{
+    (event: 'delete'): void,
+    (event: 'update', value: Variable): void,
+  }>()
+
+  const deleteVariables = (): void => {
+    selectedVariables.value = []
+    refreshSubscriptions()
+    emit('delete')
+  }
+
+  const handleUpdate = (variable: Variable): void => {
+    emit('update', variable)
+  }
+</script>
+
+<style>
+.variables-table__tags { @apply
+  h-6
+}
+
+.variables-table__tags-input { @apply
+  w-full
+  md:w-32
+}
+
+.variables-table__action { @apply
+  text-right
+  max-w-[42px]
+}
+
+.variables-table__value-td,
+.variables-table__name { @apply
+  min-w-0
+  max-w-0
+  truncate
+}
+
+.variables-table__name { @apply
+  max-w-[192px]
+}
+</style>

package/src/components/ViewModeButtonGroup.vue

@@ -0,0 +1,13 @@
+<template>
+  <p-button-group v-model="activeViewMode" :options="viewOptions" />
+</template>
+
+<script lang="ts" setup>
+  import { ButtonGroupOption } from '@prefecthq/prefect-design'
+  import { activeViewMode } from '@/utilities/activeViewMode'
+
+  const viewOptions: ButtonGroupOption[] = [
+    { value: 'grid', icon: 'Squares2X2Icon' },
+    { value: 'rows', icon: 'Bars4Icon' },
+  ]
+</script>

package/src/components/WorkPoolAverageLateTime.vue

@@ -0,0 +1,41 @@
+<template>
+  <span v-if="lateness" class="work-pool-average-late-time">
+    ({{ secondsToApproximateString(lateness) }} avg.)
+  </span>
+</template>
+
+<script lang="ts" setup>
+  import merge from 'lodash.merge'
+  import { toValue } from 'vue'
+  import { useFlowRunsAverageLateness, useInterval } from '@/compositions'
+  import { FlowRunsFilter, WorkPool } from '@/models'
+  import { Getter, MaybeGetter } from '@/types/reactivity'
+  import { secondsToApproximateString } from '@/utilities'
+
+  const props = defineProps<{
+    workPool: WorkPool,
+    filter?: MaybeGetter<FlowRunsFilter>,
+  }>()
+
+  const options = useInterval()
+
+  const flowRunsFilter: Getter<FlowRunsFilter> = () => {
+    const base = toValue(props.filter)
+    const filter: FlowRunsFilter = {
+      workPools: {
+        id: [props.workPool.id],
+      },
+    }
+
+    return merge({}, base, filter)
+  }
+
+  const { lateness } = useFlowRunsAverageLateness(flowRunsFilter, options)
+</script>
+
+<style>
+.work-pool-average-late-time { @apply
+  text-xs
+  whitespace-nowrap
+}
+</style>

package/src/components/WorkPoolBaseJobTemplateFormSection.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <h3>
+      Base Job Template
+    </h3>
+    <p-tabs :tabs="['Defaults', 'Advanced']" class="overflow-auto">
+      <template #defaults>
+        <template v-if="variablesSchemaHasProperties">
+          <p-message info class="work-pool-base-job-template-section__info_message ">
+            The fields below control the default values for the base job template. These values can be overridden by deployments.
+          </p-message>
+          <SchemaFormFieldsWithValues
+            v-model:values="currentDefaults"
+            :schema="mappedVariablesSchema"
+          />
+        </template>
+        <template v-else>
+          <p-message warning>
+            This work pool's base job template does not have any customizations. To add customizations, edit the base job template directly with the <b>Advanced</b> tab.
+          </p-message>
+        </template>
+      </template>
+      <template #advanced>
+        <div class="work-pool-base-job-template-section__advanced_tab">
+          <p-message info class="work-pool-base-job-template-section__info_message">
+            This is the JSON representation of the base job template. A work pool's  job template controls infrastructure configuration for all flow runs in the work pool, and specifies the configuration that can be overridden by deployments.
+            <br>
+            <br>
+            For more information on the structure of a work pool's base job template, check out
+            <p-link :to="localization.docs.workPools">
+              the docs.
+            </p-link>.
+          </p-message>
+          <p-label :message="jsonError" :state="jsonState">
+            <JsonInput v-model:model-value="localBaseJobTemplateJson" :state="jsonState" show-format-button @update:model-value="onLocalBaseJobTemplateJsonUpdate" />
+          </p-label>
+        </div>
+      </template>
+    </p-tabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useValidation } from '@prefecthq/vue-compositions'
+  import { isEqual } from 'lodash'
+  import { computed, ref, watch } from 'vue'
+  import { SchemaFormFieldsWithValues, JsonInput } from '@/components'
+  import { localization } from '@/localization'
+  import { getSchemaDefaultValues, mapper } from '@/services'
+  import { Schema, SchemaProperties, SchemaValues, WorkerBaseJobTemplate } from '@/types'
+  import { getSchemaWithoutDefaults, isJson, mapValues, stringify } from '@/utilities'
+
+
+  const props = defineProps<{
+    baseJobTemplate: WorkerBaseJobTemplate,
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'update:base-job-template', value: WorkerBaseJobTemplate): void,
+  }>()
+
+  const onLocalBaseJobTemplateJsonUpdate = (): void => {
+    if (localBaseJobTemplate.value !== null) {
+      emit('update:base-job-template', localBaseJobTemplate.value)
+    }
+  }
+
+  const localBaseJobTemplateJson = ref<string>(stringify(props.baseJobTemplate))
+  const { state: jsonState, error: jsonError } = useValidation(localBaseJobTemplateJson, isJson('Base Job Template'))
+  const localBaseJobTemplate = computed<WorkerBaseJobTemplate | null>(() => {
+    try {
+      return JSON.parse(localBaseJobTemplateJson.value)
+    } catch (error) {
+      if (error instanceof SyntaxError) {
+        return null
+      }
+      throw error
+    }
+  })
+  watch(() => props.baseJobTemplate, (template) => {
+    if (!isEqual(template, localBaseJobTemplate.value)) {
+      localBaseJobTemplateJson.value = stringify(template)
+    }
+  })
+  const variablesSchema = computed<Schema>(() => props.baseJobTemplate.variables ?? {})
+  const mappedVariablesSchema = computed<Schema>(() => mapper.map('SchemaResponse', getSchemaWithoutDefaults(variablesSchema.value), 'Schema'))
+  const variablesSchemaProperties = computed<SchemaProperties>(() => variablesSchema.value.properties ?? {})
+  const variablesSchemaHasProperties = computed<boolean>(() => Object.keys(variablesSchemaProperties.value).length > 0)
+  const currentDefaults = computed<SchemaValues>({
+    get() {
+      const schema = mapper.map('SchemaResponse', variablesSchema.value, 'Schema')
+      const defaults = getSchemaDefaultValues(schema)
+      return defaults
+    },
+    set(values) {
+      const newTemplate = {
+        ...props.baseJobTemplate,
+        variables: {
+          ...props.baseJobTemplate.variables,
+          properties: mapValues(variablesSchemaProperties.value, (key, value) => {
+            return {
+              ...value,
+              default: values[key],
+            }
+          }),
+        },
+      }
+      emit('update:base-job-template', newTemplate)
+    },
+  })
+</script>
+
+<style>
+  .work-pool-base-job-template-section__advanced_tab { @apply
+    overflow-auto
+  }
+
+  .work-pool-base-job-template-section__info_message { @apply
+    mb-4
+  }
+</style>

package/src/components/WorkPoolCard.vue

@@ -0,0 +1,121 @@
+<template>
+  <p-card class="work-pool-card">
+    <div class="work-pool-card__header">
+      <div class="work-pool-card__heading">
+        <div class="work-pool-card__name">
+          <p-link class="work-pool-card__name" :to="routes.workPool(workPool.name)">
+            {{ workPool.name }}
+          </p-link>
+          <WorkPoolStatusIcon :work-pool="workPool" />
+        </div>
+        <ProcessTypeBadge :type-label="workPool.typeLabel" />
+        <WorkersLateIndicator v-if="!media.sm" :work-pool-name="workPool.name" />
+      </div>
+
+      <div class="work-pool-card__header-actions">
+        <WorkersLateIndicator v-if="media.sm" :work-pool-name="workPool.name" />
+        <WorkPoolToggle :work-pool="workPool" @update="emit('update')" />
+        <WorkPoolMenu :work-pool="workPool" @delete="emit('update')" />
+      </div>
+    </div>
+
+    <template v-if="workPool.description">
+      <p class="work-pool-card__description">
+        {{ workPool.description }}
+      </p>
+    </template>
+
+    <div class="work-pool-card__details">
+      <div>
+        <span class="work-pool-card__details-label">Concurrency Limit</span>
+        {{ workPool.concurrencyLimit ? workPool.concurrencyLimit : 'Unlimited' }}
+      </div>
+
+
+      <div v-if="lastPolled">
+        <span class="work-pool-card__details-label">Last Polled</span>
+        {{ lastPolled }}
+      </div>
+    </div>
+  </p-card>
+</template>
+
+<script lang="ts" setup>
+  import { media } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import { WorkPoolToggle, WorkersLateIndicator, ProcessTypeBadge, WorkPoolStatusIcon } from '@/components'
+  import { useComponent, useWorkPoolLastPolled, useWorkspaceRoutes } from '@/compositions'
+  import { WorkPool } from '@/models'
+
+  const props = defineProps<{
+    workPool: WorkPool,
+  }>()
+
+  const { WorkPoolMenu } = useComponent()
+
+  const routes = useWorkspaceRoutes()
+
+  const subscriptionOptions = {
+    interval: 30000,
+  }
+  const workPoolName = computed(() => props.workPool.name)
+
+  const { lastPolled } = useWorkPoolLastPolled(workPoolName, subscriptionOptions)
+
+  const emit = defineEmits<{
+    (event: 'update'): void,
+  }>()
+</script>
+
+<style>
+.work-pool-card { @apply
+  grid
+  gap-2
+}
+
+.work-pool-card__header { @apply
+  flex
+  gap-2
+  items-center
+  justify-between
+}
+
+.work-pool-card__name { @apply
+  text-lg
+}
+
+.work-pool-card__header-actions { @apply
+  flex
+  gap-2
+  items-center
+}
+
+.work-pool-card__description { @apply
+  text-sm
+}
+
+.work-pool-card__details { @apply
+  flex
+  gap-8
+  items-center
+  text-sm
+}
+
+.work-pool-card__details-label { @apply
+  font-medium
+  mr-2
+}
+
+.work-pool-card__heading { @apply
+  flex
+  flex-col
+  gap-2
+  items-start
+}
+
+.work-pool-card__name { @apply
+  flex
+  items-center
+  gap-2
+}
+</style>

package/src/components/WorkPoolCombobox.vue

@@ -0,0 +1,68 @@
+<template>
+  <p-combobox v-model="internalValue" v-bind="{ options, emptyMessage, multiple }">
+    <template #combobox-options-empty>
+      No work pools
+    </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, SelectOption } from '@prefecthq/prefect-design'
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import { useWorkspaceApi } from '@/compositions'
+
+  const props = defineProps<{
+    selected: string | string[] | null | undefined,
+    emptyMessage?: string,
+    allowUnset?: boolean,
+    multiple?: boolean,
+  }>()
+
+  const emits = defineEmits<{
+    (event: 'update:selected', value: string | string[] | null | undefined): void,
+  }>()
+
+  const multiple = computed(() => 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 workPoolsSubscription = useSubscription(api.workPools.getWorkPools, [])
+  const workPools = computed(() => workPoolsSubscription.response ?? [])
+
+  const options = computed<SelectOption[]>(() => {
+    const options: SelectOption[] = workPools.value.map(workPool => ({
+      value: workPool.name,
+      label: workPool.name,
+    }))
+
+    if (props.allowUnset) {
+      options.unshift({
+        value: null,
+        label: 'None',
+      })
+    }
+
+    return options
+  })
+</script>

package/src/components/WorkPoolCreateWizard.vue

@@ -0,0 +1,78 @@
+<template>
+  <p-wizard :steps="steps" last-step-text="Create" show-cancel @submit="submit" @cancel="cancel">
+    <template #work-pool-infrastructure-type>
+      <WorkPoolCreateWizardStepInfrastructureType v-model:workPool="workPool" :workers="availableWorkers" />
+    </template>
+    <template #work-pool-information>
+      <WorkPoolCreateWizardStepInformation v-model:workPool="workPool" :workers="availableWorkers" />
+    </template>
+    <template #work-pool-infrastructure-configuration>
+      <WorkPoolCreateWizardStepInfrastructureConfiguration v-model:workPool="workPool" :default-base-job-template="defaultBaseJobTemplate" />
+    </template>
+  </p-wizard>
+</template>
+
+<script lang="ts" setup>
+  import { WizardStep, showToast } from '@prefecthq/prefect-design'
+  import { refreshChannel, useSubscription } from '@prefecthq/vue-compositions'
+  import { computed, ref } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { WorkPoolCreateWizardStepInformation, WorkPoolCreateWizardStepInfrastructureType, WorkPoolCreateWizardStepInfrastructureConfiguration } from '@/components'
+  import { useWorkPoolsCount, useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
+  import { localization } from '@/localization'
+  import { WorkPoolCreate, WorkPoolFormValues } from '@/models'
+  import { getApiErrorMessage } from '@/utilities/errors'
+
+  const router = useRouter()
+  const routes = useWorkspaceRoutes()
+
+  const workPool = ref<WorkPoolFormValues>({})
+
+  const steps: WizardStep[] = [
+    { title: 'Infrastructure Type', key: 'work-pool-infrastructure-type' },
+    { title: 'Details', key: 'work-pool-information' },
+    { title: 'Configuration', key: 'work-pool-infrastructure-configuration' },
+  ]
+
+  const api = useWorkspaceApi()
+
+  const availableWorkersSubscription = useSubscription(api.collections.getWorkerCollection, [])
+  const availableWorkers = computed(() => availableWorkersSubscription.response ?? [])
+
+  const defaultBaseJobTemplate = computed(() => {
+    return availableWorkers.value.find((item) => item.type === workPool.value.type)?.defaultBaseJobConfiguration ?? {}
+  })
+
+  const { subscription: workPoolsCountSubscription } = useWorkPoolsCount()
+
+  async function submit(): Promise<void> {
+    if (!workPool.value.baseJobTemplate) {
+      workPool.value.baseJobTemplate = defaultBaseJobTemplate.value
+    }
+    const values: WorkPoolCreate = {
+      ...workPool.value,
+      description: workPool.value.description ?? '',
+      concurrencyLimit: workPool.value.concurrencyLimit ?? undefined,
+      isPaused: false,
+    }
+
+    try {
+      const { name } = await api.workPools.createWorkPool(values)
+      showToast(localization.success.createWorkPool, 'success')
+      refreshChannel(api.workPools.getWorkPools, [])
+      workPoolsCountSubscription.refresh()
+
+      router.push(routes.workPool(name))
+    } catch (error) {
+      console.error(error)
+      const message = getApiErrorMessage(error, localization.error.createWorkPool)
+      showToast(message, 'error')
+    }
+
+
+  }
+
+  function cancel(): void {
+    router.back()
+  }
+</script>