@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/components/FlowRunArtifacts.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="flow-run-artifacts">
+    <template v-if="hasArtifacts">
+      <div class="flow-run-artifacts__button-group-container">
+        <slot name="actions" />
+        <ViewModeButtonGroup class="flow-run-artifacts__view-mode-button-group" />
+      </div>
+
+      <p-heading heading="6" class="flow-run-artifacts__subheading">
+        {{ localization.info.flowRun }}
+      </p-heading>
+
+      <RowGridLayoutList :items="flowRunArtifacts">
+        <template #default="{ item }">
+          <router-link :to="routes.artifact(item.id)">
+            <ArtifactCard :artifact="item" :condense="condense" interactive />
+          </router-link>
+        </template>
+
+        <template #empty>
+          <div class="flow-run-artifacts__none">
+            <p-markdown-renderer :text="localization.info.none" />
+          </div>
+        </template>
+      </RowGridLayoutList>
+
+      <p-divider />
+
+      <p-heading heading="6" class="flow-run-artifacts__subheading">
+        {{ localization.info.taskRuns }}
+      </p-heading>
+
+      <RowGridLayoutList :items="taskRunArtifacts">
+        <template #default="{ item }">
+          <router-link :to="routes.artifact(item.id)">
+            <ArtifactCard :artifact="item" :condense="condense" interactive />
+          </router-link>
+        </template>
+
+        <template #empty>
+          <div class="flow-run-artifacts__none">
+            <p-markdown-renderer :text="localization.info.none" />
+          </div>
+        </template>
+      </RowGridLayoutList>
+    </template>
+
+    <template v-else-if="artifactsSubscription.executed">
+      <p-empty-state>
+        <template #description>
+          <p-markdown-renderer :text="emptyMessage" />
+        </template>
+      </p-empty-state>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useSubscription } from '@prefecthq/vue-compositions'
+  import { computed, toRefs } from 'vue'
+  import ArtifactCard from '@/components/ArtifactCard.vue'
+  import RowGridLayoutList from '@/components/RowGridLayoutList.vue'
+  import ViewModeButtonGroup from '@/components/ViewModeButtonGroup.vue'
+  import { useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
+  import { useStatePolling } from '@/compositions/useStatePolling'
+  import { localization } from '@/localization'
+  import { FlowRun, isTerminalStateType } from '@/models'
+  import { ArtifactsFilter } from '@/models/Filters'
+  import { activeViewMode } from '@/utilities/activeViewMode'
+
+  const props = defineProps<{
+    flowRun: FlowRun,
+  }>()
+
+  const { flowRun } = toRefs(props)
+  const condense = computed(() => activeViewMode.value !== 'grid')
+
+  const api = useWorkspaceApi()
+  const routes = useWorkspaceRoutes()
+
+  const artifactsFilter = computed<ArtifactsFilter>(() => {
+    return {
+      artifacts: {
+        flowRunId: [props.flowRun.id],
+        notType: ['result'],
+      },
+    }
+  })
+
+  const artifactsSubscriptionOptions = useStatePolling(flowRun)
+  const artifactsSubscription = useSubscription(api.artifacts.getArtifacts, [artifactsFilter], artifactsSubscriptionOptions)
+  const artifacts = computed(() => artifactsSubscription.response ?? [])
+
+  const taskRunArtifacts = computed(() => artifacts.value.filter(artifact => !!artifact.taskRunId))
+  const flowRunArtifacts = computed(() => artifacts.value.filter(artifact => !!artifact.flowRunId && !artifact.taskRunId))
+
+  const hasArtifacts = computed(() => artifactsSubscription.executed && artifacts.value.length > 0)
+  const isTerminal = computed(() => isTerminalStateType(props.flowRun.state?.type))
+  const emptyMessage = computed(() => {
+    if (artifactsSubscription.executed && artifacts.value.length === 0) {
+      if (isTerminal.value) {
+
+        return localization.info.terminalFlowRunNoArtifacts
+      }
+
+      return localization.info.nonTerminalFlowRunNoArtifacts
+    }
+
+    return ''
+  })
+</script>
+
+
+<style>
+.flow-run-artifacts { @apply
+  flex
+  flex-col
+  gap-4
+}
+
+.flow-run-artifacts__button-group-container { @apply
+  flex
+  justify-end
+  gap-4
+}
+
+.flow-run-artifacts__none { @apply
+  text-subdued
+}
+</style>

package/src/components/FlowRunBreadCrumbs.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="flow-run-bread-crumbs">
+    <FlowRouterLink v-if="!hideFlowName" :flow-id="flowRun.flowId" class="flow-run-bread-crumbs__flow-link">
+      <template #after>
+        <p-icon icon="ChevronRightIcon" size="small" />
+      </template>
+    </FlowRouterLink>
+    <component :is="component" :to="routes.flowRun(flowRun.id)" class="flow-run-bread-crumbs__flow-run-link">
+      <span>{{ flowRun.name }}</span>
+    </component>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { PLink } from '@prefecthq/prefect-design'
+  import { useRouteParam } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import FlowRouterLink from '@/components/FlowRouterLink.vue'
+  import { useWorkspaceRoutes } from '@/compositions/useWorkspaceRoutes'
+  import { FlowRun } from '@/models'
+
+  const props = defineProps<{
+    flowRun: FlowRun,
+    hideFlowName?: boolean,
+  }>()
+
+  const routes = useWorkspaceRoutes()
+
+  const flowRunId = useRouteParam('flowRunId')
+
+  const component = computed(() => {
+    if (flowRunId.value && props.flowRun.id === flowRunId.value) {
+      return 'span'
+    }
+
+    return PLink
+  })
+</script>
+
+<style>
+.flow-run-bread-crumbs { @apply
+  text-subdued
+}
+
+.flow-run-bread-crumbs__flow-link { @apply
+  font-semibold
+}
+
+.flow-run-bread-crumbs__flow-run-link:not(a) { @apply
+  text-default
+}
+
+.flow-run-bread-crumbs__flow-run-link { @apply
+  font-normal
+}
+</style>

package/src/components/FlowRunCancelButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <p-tooltip v-if="disableCancel" :text="localization.info.disableFlowRunCancel">
+    <p-button
+      disabled
+      dangerous
+    >
+      Cancel
+    </p-button>
+  </p-tooltip>
+  <p-button
+    v-else-if="canCancel"
+    dangerous
+    @click="open"
+  >
+    Cancel
+  </p-button>
+  <FlowRunCancelModal
+    v-model:showModal="showModal"
+    :flow-run-id="flowRun.id"
+    @change="showModal"
+  />
+</template>
+
+  <script lang="ts" setup>
+  import { computed } from 'vue'
+  import FlowRunCancelModal from '@/components/FlowRunCancelModal.vue'
+  import { useCan } from '@/compositions/useCan'
+  import { useShowModal } from '@/compositions/useShowModal'
+  import { localization } from '@/localization'
+  import { FlowRun, isStuckStateType } from '@/models'
+
+  const props = defineProps<{
+    flowRun: FlowRun,
+  }>()
+
+  const can = useCan()
+  const { showModal, open } = useShowModal()
+
+  const canCancel = computed(() => {
+    if (!can.update.flow_run || !props.flowRun.stateType) {
+      return false
+    }
+    return isStuckStateType(props.flowRun.stateType)
+  })
+
+  const disableCancel = computed(() => {
+    if (!props.flowRun.deploymentId && canCancel.value) {
+      return true
+    }
+    return false
+  })
+</script>

package/src/components/FlowRunCancelModal.vue

@@ -0,0 +1,87 @@
+<template>
+  <p-modal v-if="flowRun" v-model:showModal="internalValue" title="Cancel Flow Run">
+    <template #icon>
+      <p-icon icon="ExclamationCircleIcon" class="flow-run-cancel-modal__icon" />
+    </template>
+    <p-label label="Current Flow Run State">
+      <StateBadge :state="flowRun.state" />
+    </p-label>
+    <div class="flow-run-cancel-modal__message">
+      This will put flow run {{ flowRun.name }} into a <StateBadge :state="{ name: 'Cancelling', type: 'cancelled' }" /> state.
+    </div>
+
+    <template #actions>
+      <p-button variant="destructive" @click="cancel">
+        Confirm
+      </p-button>
+    </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 StateBadge from '@/components/StateBadge.vue'
+  import { useWorkspaceApi } from '@/compositions'
+  import { localization } from '@/localization'
+  import { StateUpdateDetails } from '@/models'
+  import { getApiErrorMessage } from '@/utilities/errors'
+
+  const props = defineProps<{
+    showModal: boolean,
+    flowRunId: string,
+  }>()
+
+
+  const emit = defineEmits<{
+    (event: 'update:showModal', value: boolean): void,
+    (event: 'cancel'): void,
+  }>()
+
+  const api = useWorkspaceApi()
+
+  const internalValue = computed({
+    get() {
+      return props.showModal
+    },
+    set(value: boolean) {
+      emit('update:showModal', value)
+    },
+  })
+
+  const flowRunSubscription = useSubscription(api.flowRuns.getFlowRun, [props.flowRunId], { interval: 30000 })
+  const flowRun = computed(() => flowRunSubscription.response)
+
+  const cancel = async (): Promise<void> => {
+    try {
+      const values: StateUpdateDetails = {
+        type: 'cancelling',
+        name: 'Cancelling',
+      }
+      await api.flowRuns.setFlowRunState(props.flowRunId, { state: values })
+      flowRunSubscription.refresh()
+      internalValue.value = false
+      emit('cancel')
+      showToast(localization.success.cancelFlowRun, 'success')
+    } catch (error) {
+      console.error(error)
+      const message = getApiErrorMessage(error, localization.error.cancelFlowRun)
+      showToast(message, 'error')
+    }
+  }
+</script>
+
+<style>
+.flow-run-cancel-modal__message { @apply
+  inline-flex
+  flex-wrap
+  gap-1
+  items-center
+}
+
+.flow-run-cancel-modal__icon { @apply
+  stroke-sentiment-negative
+}
+</style>

package/src/components/FlowRunCreateFormTags.vue

@@ -0,0 +1,29 @@
+<template>
+  <p-tags-input v-model="tags" class="flow-run-create-form-tags" :options="options" />
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import { Deployment } from '@/models/Deployment'
+
+  const props = defineProps<{
+    deployment: Deployment,
+    tags: string[],
+  }>()
+
+  const emit = defineEmits<{
+    'update:tags': [string[]],
+  }>()
+
+  const tags = computed({
+    get() {
+      return props.tags
+    },
+    set(value) {
+      emit('update:tags', value)
+    },
+  })
+
+  // makes sure the user cannot unselect the tags present on the deployment itself
+  const options = computed(() => props.deployment.tags?.map((tag) => ({ label: tag, value: tag, disabled: true })))
+</script>

package/src/components/FlowRunCreateFormV2.vue

@@ -0,0 +1,196 @@
+<template>
+  <p-form class="flow-run-create-form-v2 p-background" novalidate @submit="submit">
+    <p-content>
+      <p-label label="Run Name" :state="nameState" :message="nameError">
+        <FlowRunNameInput v-model="name" :state="nameState" />
+      </p-label>
+
+      <template v-if="hasParameters">
+        <p-divider />
+
+        <p-content>
+          <SchemaInputV2 v-model:values="parameters" :schema="schema" :errors="errors" :kinds="['json', 'workspace_variable']">
+            <template #default="{ kind, setKind }">
+              <div class="flow-run-create-form-v2__header">
+                <h3>{{ 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="shouldValidate" label="Validate parameters before submitting" />
+        </p-content>
+      </template>
+
+      <p-divider />
+      <h3>Start</h3>
+      <FlowRunCreateFormWhen v-model:start="scheduledTime" />
+
+      <p-accordion :sections="['Additional Options']">
+        <template #heading="{ section }">
+          <h3>{{ section }}</h3>
+        </template>
+
+        <template #content>
+          <p-content class="pt-4">
+            <p-label label="Message (Optional)">
+              <p-textarea v-model="stateMessage" placeholder="Created from the Prefect UI" />
+            </p-label>
+
+            <p-label label="Tags (Optional)">
+              <FlowRunCreateFormTags v-model:tags="tags" :deployment="deployment" />
+            </p-label>
+
+            <template v-if="deployment.workPoolName">
+              <FlowRunCreateFormWorkQueueCombobox v-model:work-queue-name="workQueueName" :work-pool-name="deployment.workPoolName" />
+            </template>
+
+            <div class="flow-run-create-form-v2__retries">
+              <p-label label="Retries (Optional)">
+                <p-number-input v-model="retries" :min="0" />
+              </p-label>
+
+              <p-label label="Retry Delay (Optional)">
+                <p-number-input v-model="retryDelay" :min="0" append="Seconds" />
+              </p-label>
+            </div>
+
+            <FlowRunJobVariableOverridesLabeledInput v-model="jobVariables" />
+          </p-content>
+        </template>
+      </p-accordion>
+    </p-content>
+
+    <template #footer>
+      <p-button @click="emit('cancel')">
+        Cancel
+      </p-button>
+      <p-button variant="default" type="submit">
+        Submit
+      </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 FlowRunCreateFormTags from '@/components/FlowRunCreateFormTags.vue'
+  import FlowRunCreateFormWhen from '@/components/FlowRunCreateFormWhen.vue'
+  import FlowRunCreateFormWorkQueueCombobox from '@/components/FlowRunCreateFormWorkQueueCombobox.vue'
+  import FlowRunJobVariableOverridesLabeledInput from '@/components/FlowRunJobVariableOverridesLabeledInput.vue'
+  import FlowRunNameInput from '@/components/FlowRunNameInput.vue'
+  import ToastParameterValidationError from '@/components/ToastParameterValidationError.vue'
+  import { useCan } from '@/compositions/useCan'
+  import { localization } from '@/localization'
+  import { Deployment } from '@/models/Deployment'
+  import { DeploymentFlowRunCreateV2 } from '@/models/DeploymentFlowRunCreate'
+  import { SchemaInputV2, SchemaValuesV2 } from '@/schemas'
+  import { useSchemaValidation } from '@/schemas/compositions/useSchemaValidation'
+  import { SchemaValues } from '@/schemas/types/schemaValues'
+  import { isEmptyObject } from '@/utilities/object'
+  import { isRequired } from '@/utilities/validation'
+
+  const props = defineProps<{
+    deployment: Deployment,
+    parameters?: SchemaValues,
+    name?: string,
+  }>()
+
+  const emit = defineEmits<{
+    (event: 'submit', value: DeploymentFlowRunCreateV2): void,
+    (event: 'cancel'): void,
+  }>()
+
+  const can = useCan()
+
+  const shouldValidate = ref(true)
+  const schema = computed(() => props.deployment.parameterOpenApiSchemaV2)
+  const hasParameters = computed(() => !isEmptyObject(props.deployment.parameterOpenApiSchemaV2.properties ?? {}))
+
+  const { validate } = useValidationObserver()
+
+  const name = ref(props.name)
+  const { state: nameState, error: nameError } = useValidation(name, isRequired('name'))
+
+  const parameters = ref<SchemaValuesV2>({ ...props.deployment.parametersV2, ...props.parameters ?? {} })
+  const scheduledTime = ref<Date | null>(null)
+  const stateMessage = ref<string>('')
+  const tags = ref<string[]>(props.deployment.tags ?? [])
+  const workQueueName = ref<string | null>(props.deployment.workQueueName)
+  const retries = ref<number | null>(null)
+  const retryDelay = ref<number | null>(null)
+  const jobVariables = ref<string | undefined>(can.access.flowRunInfraOverrides ? '{}' : undefined)
+
+  const { errors, validate: validateParameters } = useSchemaValidation(schema, parameters)
+
+  async function submit(): Promise<void> {
+    if (shouldValidate.value) {
+      try {
+        const valid = (await Promise.all([
+          validate(),
+          validateParameters(),
+        ])).every(value => Boolean(value))
+
+        if (!valid) {
+          return
+        }
+      } catch (error) {
+        console.error(error)
+        showToast(h(ToastParameterValidationError), 'error')
+        return
+      }
+    }
+
+    const request: DeploymentFlowRunCreateV2 = {
+      state: {
+        type: 'scheduled',
+        message: stateMessage.value,
+        stateDetails: {
+          scheduledTime: scheduledTime.value,
+        },
+      },
+      tags: tags.value,
+      workQueueName: workQueueName.value,
+      empiricalPolicy: {
+        retries: retries.value,
+        retryDelay: retryDelay.value,
+        maxRetries: null,
+        retryDelaySeconds: null,
+      },
+      name: name.value,
+      parameters: parameters.value,
+      jobVariables: jobVariables.value ? JSON.parse(jobVariables.value) : undefined,
+    }
+
+    emit('submit', request)
+  }
+</script>
+
+<style>
+.flow-run-create-form-v2 { @apply
+  p-6
+  rounded-default
+}
+
+.flow-run-create-form-v2__header { @apply
+  flex
+  items-center
+  justify-between
+}
+
+.flow-run-create-form-v2__retries { @apply
+  grid
+  grid-cols-2
+  gap-4
+}
+
+.flow-run-create-form-v2 .p-accordion__header { @apply
+  mt-2
+  pt-6
+}
+</style>

package/src/components/FlowRunCreateFormWhen.vue

@@ -0,0 +1,38 @@
+<template>
+  <p-content class="flow-run-create-form-when">
+    <p-button-group v-model="when" :options="['Now', 'Later']" small />
+
+    <template v-if="when == 'Later'">
+      <p-label label="Start date" :message="startErrorMessage" :state="startState">
+        <DateInput v-model="start" show-time />
+      </p-label>
+    </template>
+  </p-content>
+</template>
+
+<script lang="ts" setup>
+  import { useValidation } from '@prefecthq/vue-compositions'
+  import { computed, ref } from 'vue'
+  import DateInput from '@/components/DateInput.vue'
+  import { isRequiredIf } from '@/utilities/validation'
+
+  const props = defineProps<{
+    start: Date | null,
+  }>()
+
+  const emit = defineEmits<{
+    'update:start': [Date | null],
+  }>()
+
+  const start = computed({
+    get() {
+      return props.start
+    },
+    set(value) {
+      emit('update:start', value)
+    },
+  })
+
+  const when = ref<'Now' | 'Later'>('Now')
+  const { state: startState, error: startErrorMessage } = useValidation(start, isRequiredIf(() => when.value === 'Later')('Start date'))
+</script>

package/src/components/FlowRunCreateFormWorkQueueCombobox.vue

@@ -0,0 +1,33 @@
+<template>
+  <template v-if="!workPool?.isPushPool">
+    <p-label :label="`Work Queue for ${workPoolName} (Optional)`" class="flow-run-create-form-work-queue-combobox">
+      <WorkPoolQueueCombobox v-model:selected="workQueueName" :work-pool-name="workPoolName" />
+    </p-label>
+  </template>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import WorkPoolQueueCombobox from '@/components/WorkPoolQueueCombobox.vue'
+  import { useWorkPool } from '@/compositions/useWorkPool'
+
+  const props = defineProps<{
+    workQueueName: string | null,
+    workPoolName: string,
+  }>()
+
+  const emit = defineEmits<{
+    'update:workQueueName': [string | null],
+  }>()
+
+  const { workPool } = useWorkPool(() => props.workPoolName)
+
+  const workQueueName = computed({
+    get() {
+      return props.workQueueName
+    },
+    set(value) {
+      emit('update:workQueueName', value)
+    },
+  })
+</script>

package/src/components/FlowRunDeployment.vue

@@ -0,0 +1,22 @@
+<template>
+  <div v-if="deployment?.name" class="flow-run-deployment">
+    <span>Deployment</span> <DeploymentIconText :deployment-id="deploymentId" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import DeploymentIconText from '@/components/DeploymentIconText.vue'
+  import { useDeployment } from '@/compositions'
+
+  const props = defineProps<{
+    deploymentId: string,
+  }>()
+
+  const { deployment } = useDeployment(props.deploymentId)
+</script>
+
+<style>
+.flow-run-deployment { @apply
+  flex gap-1
+}
+</style>