Create and manage automations in the UI

ui/.vscode/settings.json

@@ -18,6 +18,7 @@
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "cSpell.words": [
+ "automations",
  "camelcase",
  "Combobox",
  "kubernetes",

ui/src/components/AutomationActionTypeSelect.vue

@@ -0,0 +1,28 @@
+<template>
+ <p-select v-model="type" :options="options" class="automation-action-type-select" />
+</template>
+
+<script lang="ts" setup>
+ import { SelectOption } from '@prefecthq/prefect-design'
+ import { AutomationActionType, automationActionTypeLabels, automationActionTypes } from '@prefecthq/prefect-ui-library'
+ import { computed } from 'vue'
+
+ const type = defineModel<AutomationActionType | null>('type', { required: true })
+
+ const options = computed<SelectOption[]>(() => {
+ const allOptions = automationActionTypes.map(type => {
+ const label = automationActionTypeLabels[type]
+
+ return {
+ label,
+ value: type,
+ }
+ })
+
+ if (type.value === 'do-nothing') {
+ return allOptions
+ }
+
+ return allOptions.filter(option => option.value !== 'do-nothing')
+ })
+</script>

ui/src/components/AutomationCard.vue

@@ -0,0 +1,78 @@
+<template>
+ <p-card class="automation-card">
+ <p-content>
+ <p-content secondary>
+ <div class="automation-card__header">
+ <p-link class="automation-card__name" :to="routes.automation(automation.id)">
+ {{ automation.name }}
+ </p-link>
+ <div class="automation-card__header-actions">
+ <AutomationToggle :automation="automation" @update="emit('update')" />
+ <AutomationMenu :automation="automation" @delete="emit('update')" />
+ </div>
+ </div>
+ <template v-if="automation.description">
+ <p class="automation-card__description">
+ {{ automation.description }}
+ </p>
+ </template>
+ </p-content>
+
+ <p-content secondary>
+ <span class="automation-card__label">Trigger</span>
+ <AutomationTriggerDescription :trigger="automation.trigger" />
+ </p-content>
+
+ <p-content secondary>
+ <span class="automation-card__label">{{ toPluralString('Action', automation.actions.length) }}</span>
+ <template v-for="action in automation.actions" :key="action.id">
+ <p-card><AutomationActionDescription :action="action" /></p-card>
+ </template>
+ </p-content>
+ </p-content>
+ </p-card>
+</template>
+
+<script lang="ts" setup>
+ import { toPluralString } from '@prefecthq/prefect-design'
+ import { AutomationMenu, AutomationToggle, AutomationTriggerDescription, AutomationActionDescription, useWorkspaceRoutes } from '@prefecthq/prefect-ui-library'
+ import { Automation } from '@/types/automation'
+
+ defineProps<{
+ automation: Automation,
+ }>()
+
+ const emit = defineEmits<{
+ (event: 'update'): void,
+ }>()
+
+ const routes = useWorkspaceRoutes()
+</script>
+
+<style>
+.automation-card__header { @apply
+ flex
+ gap-2
+ items-center
+ justify-between
+}
+
+.automation-card__header-actions { @apply
+ flex
+ gap-2
+ items-center
+}
+
+.automation-card__name { @apply
+ text-lg
+}
+
+.automation-card__description { @apply
+ text-sm
+}
+
+.automation-card__label { @apply
+ font-medium
+ mr-2
+}
+</style>

ui/src/components/AutomationTriggerJsonInput.vue

@@ -0,0 +1,59 @@
+<template>
+ <p-message info>
+ Custom triggers allow advanced configuration of the conditions on which a trigger executes its actions.
+
+ <template #action>
+ <DocumentationButton :to="localization.docs.automationTriggers" small />
+ </template>
+ </p-message>
+
+ <p-label label="Trigger" :state="state" :message="error">
+ <JsonInput v-model="model" class="automation-trigger-json-input__json-input" show-format-button :state="state" />
+ </p-label>
+</template>
+
+<script setup lang="ts">
+ import { DocumentationButton, JsonInput, isEmptyArray, isEmptyString, isInvalidDate, isNullish, localization } from '@prefecthq/prefect-ui-library'
+ import { ValidationRule, useValidation } from '@prefecthq/vue-compositions'
+ import { mapper } from '@/services/mapper'
+
+ const model = defineModel<string>({ required: true })
+
+ const isMappableAutomationTriggerJson: ValidationRule<string> = (value) => {
+ try {
+ const json = JSON.parse(value)
+
+ mapper.map('AutomationTriggerResponse', json, 'AutomationTrigger')
+ } catch (error) {
+ return false
+ }
+
+ return true
+ }
+
+ const isRequired: ValidationRule<unknown> = (value, name) => {
+ if (isNullish(value) || isEmptyArray(value) || isEmptyString(value) || isInvalidDate(value)) {
+ return `${name} is required`
+ }
+
+ return true
+ }
+
+ const isJson: ValidationRule<string> = (value, name) => {
+ try {
+ JSON.parse(value)
+ } catch {
+ return `${name} must be valid JSON`
+ }
+
+ return true
+ }
+
+ const { state, error } = useValidation(model, 'Trigger', [isRequired, isJson, isMappableAutomationTriggerJson])
+</script>
+
+<style>
+.automation-trigger-json-input__json-input {
+ min-height: 400px;
+}
+</style>

ui/src/components/AutomationTriggerTemplateSelect.vue

@@ -0,0 +1,21 @@
+<template>
+ <p-select v-model="template" empty-message="Select template" :options="options" class="automation-trigger-template-select" />
+</template>
+
+<script lang="ts" setup>
+ import { SelectOptionNormalized } from '@prefecthq/prefect-design'
+ import { AutomationTriggerTemplate, automationTriggerTemplates, getAutomationTriggerTemplateLabel } from '@prefecthq/prefect-ui-library'
+ import { computed } from 'vue'
+
+ const template = defineModel<AutomationTriggerTemplate | null>('template', { required: true })
+ /**
+ * Currently OSS doesn't have support for enabled/disabled trigger templates like cloud does.
+ * Only because it wasn't needed at the time of porting automations to OSS.
+ */
+ const options = computed<SelectOptionNormalized[]>(() => automationTriggerTemplates.map(type => {
+ return {
+ label: getAutomationTriggerTemplateLabel(type),
+ value: type,
+ }
+ }))
+</script>

ui/src/components/AutomationWizard.vue

@@ -0,0 +1,68 @@
+<template>
+ <p-wizard
+ ref="wizardRef"
+ class="automation-wizard"
+ :steps="steps"
+ :last-step-text="lastStepText"
+ show-cancel
+ :nonlinear="editing"
+ :show-save-and-exit="editing"
+ @cancel="cancel"
+ @submit="submit"
+ >
+ <template #trigger-step>
+ <AutomationWizardStepTrigger v-model:automation="automation" />
+ </template>
+ <template #actions-step>
+ <template v-if="isAutomationActionFormValues(automation)">
+ <AutomationWizardStepActions v-model:automation="automation" />
+ </template>
+ </template>
+ <template #details-step>
+ <AutomationWizardStepDetails v-model:automation="automation" />
+ </template>
+ </p-wizard>
+</template>
+
+<script lang="ts" setup>
+ import { PWizard, WizardStep } from '@prefecthq/prefect-design'
+ import { isAutomationTriggerEvent } from '@prefecthq/prefect-ui-library'
+ import { computed, ref } from 'vue'
+ import { useRouter } from 'vue-router'
+ import AutomationWizardStepActions from '@/components/AutomationWizardStepActions.vue'
+ import AutomationWizardStepDetails from '@/components/AutomationWizardStepDetails.vue'
+ import AutomationWizardStepTrigger from '@/components/AutomationWizardStepTrigger.vue'
+ import { mapper } from '@/services/mapper'
+ import { Automation, AutomationFormValues, IAutomation, isAutomationActionFormValues } from '@/types/automation'
+
+ const props = defineProps<{
+ automation?: Partial<Automation>,
+ editing?: boolean,
+ }>()
+
+ const automation = ref<AutomationFormValues>(props.automation ?? {})
+
+ const emit = defineEmits<{
+ (event: 'submit', value: Automation): void,
+ }>()
+
+ const router = useRouter()
+
+ const lastStepText = computed(() => props.automation ? 'Save' : 'Create')
+
+ const steps: WizardStep[] = [
+ { title: 'Trigger', key: 'trigger-step' },
+ { title: 'Actions', key: 'actions-step' },
+ { title: 'Details', key: 'details-step' },
+ ]
+
+ const wizardRef = ref<InstanceType<typeof PWizard>>()
+
+ function submit(): void {
+ emit('submit', new Automation(automation.value as IAutomation))
+ }
+
+ function cancel(): void {
+ router.back()
+ }
+</script>

ui/src/components/AutomationWizardAction.vue

@@ -0,0 +1,91 @@
+<template>
+ <div class="automation-wizard-action">
+ <div class="automation-wizard-action__header">
+ <span class="automation-wizard-action__heading">Action {{ index + 1 }}</span>
+ <p-button size="sm" icon="TrashIcon" @click="emit('delete')" />
+ </div>
+
+ <p-content>
+ <p-label label="Action Type" :state :message>
+ <template #default="{ id }">
+ <AutomationActionTypeSelect :id v-model:type="type" :state />
+ </template>
+ </p-label>
+
+
+ <template v-if="input">
+ <component :is="input.component" v-bind="input.props" @update:action="updateAction" />
+ </template>
+ </p-content>
+ </div>
+</template>
+
+<script lang="ts" setup>
+ import { withProps, AutomationActionInput, AutomationAction, isNullish, getAutomationTriggerTemplate, getDefaultValueForAction } from '@prefecthq/prefect-ui-library'
+ import { useValidation } from '@prefecthq/vue-compositions'
+ import { computed } from 'vue'
+ import AutomationActionTypeSelect from '@/components/AutomationActionTypeSelect.vue'
+ import { AutomationActionFormValues } from '@/types/automation'
+
+ const props = defineProps<{
+ index: number,
+ action: Partial<AutomationAction>,
+ automation: AutomationActionFormValues,
+ }>()
+
+ const emit = defineEmits<{
+ (event: 'delete'): void,
+ (event: 'update:action', value: Partial<AutomationAction>): void,
+ }>()
+
+ const type = computed({
+ get() {
+ return props.action.type ?? null
+ },
+ set(value) {
+ if (isNullish(value)) {
+ emit('update:action', {})
+ return
+ }
+
+ const template = getAutomationTriggerTemplate(props.automation.trigger)
+ const action = getDefaultValueForAction(value, template)
+
+ emit('update:action', action)
+ },
+ })
+
+ const { state, error: message } = useValidation(type, 'Action Type', value => !!value)
+
+ const input = computed(() => {
+ if (!props.action.type) {
+ return null
+ }
+
+ return withProps(AutomationActionInput, {
+ action: props.action,
+ 'onUpdate:action': value => emit('update:action', value),
+ })
+ })
+
+ function updateAction(action: Partial<AutomationAction>): void {
+ emit('update:action', action)
+ }
+</script>
+
+<style>
+.automation-wizard-action { @apply
+ grid
+ gap-1
+}
+
+.automation-wizard-action__header { @apply
+ flex
+ items-center
+ justify-between
+}
+
+.automation-wizard-action__heading { @apply
+ font-bold
+}
+</style>