@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/compositions/useFavicon.ts

@@ -0,0 +1,42 @@
+import { onUnmounted, watchEffect, Ref, ref } from 'vue'
+import { StateType } from '@/models/StateType'
+
+function getPreferredColorScheme(): 'dark' | 'light' | 'no-preference' {
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return 'dark'
+  } if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+    return 'light'
+  }
+  return 'no-preference'
+}
+
+export function useFavicon(stateType: StateType | null | Ref<StateType | null | undefined>): void {
+  let favicon16: HTMLElement | null
+  let favicon32: HTMLElement | null
+
+  switch (getPreferredColorScheme()) {
+    case 'dark':
+      favicon16 = document.getElementById('favicon-16-dark')
+      favicon32 = document.getElementById('favicon-32-dark')
+      break
+    default:
+      favicon16 = document.getElementById('favicon-16')
+      favicon32 = document.getElementById('favicon-32')
+      break
+  }
+
+  const stateTypeRef = ref(stateType)
+
+
+  watchEffect(() => {
+    if (stateType) {
+      favicon16?.setAttribute('href', `/ico/${stateTypeRef.value}.svg`)
+      favicon32?.setAttribute('href', `/ico/${stateTypeRef.value}.svg`)
+    }
+  })
+
+  onUnmounted(() => {
+    favicon16?.setAttribute('href', '/ico/favicon-16x16.png')
+    favicon32?.setAttribute('href', '/ico/favicon-32x32.png')
+  })
+}

package/src/compositions/useFilterPagination.ts

@@ -0,0 +1,22 @@
+import { ComputedRef, MaybeRefOrGetter, Ref, computed, toRef, toValue } from 'vue'
+
+// this will eventually need to come from the ui settings
+export const GLOBAL_API_LIMIT = 200
+
+export type UseFilterPagination = {
+  limit: ComputedRef<number>,
+  offset: ComputedRef<number>,
+  page: Ref<number>,
+}
+
+export function useFilterPagination(page: MaybeRefOrGetter<number> = 1, limit?: MaybeRefOrGetter<number | undefined>): UseFilterPagination {
+  const pageRef = toRef(page)
+  const limitRef = computed(() => toValue(limit) ?? GLOBAL_API_LIMIT)
+  const offset = computed(() => (pageRef.value - 1) * limitRef.value)
+
+  return {
+    limit: limitRef,
+    offset,
+    page: pageRef,
+  }
+}

package/src/compositions/useFlow.ts

@@ -0,0 +1,37 @@
+import { SubscriptionOptions, useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+import { computed, MaybeRefOrGetter, toRef, toValue } from 'vue'
+import { useCan } from '@/compositions/useCan'
+import { useWorkspaceApi } from '@/compositions/useWorkspaceApi'
+import { WorkspaceFlowsApi } from '@/services/WorkspaceFlowsApi'
+import { Getter } from '@/types/reactivity'
+import { UseEntitySubscription } from '@/types/useEntitySubscription'
+
+export type UseFlow = UseEntitySubscription<WorkspaceFlowsApi['getFlow'], 'flow'>
+
+export function useFlow(flowId: MaybeRefOrGetter<string | null | undefined>, options?: SubscriptionOptions): UseFlow {
+  const api = useWorkspaceApi()
+  const can = useCan()
+
+  const getter: Getter<[string] | null> = () => {
+    if (!can.read.flow) {
+      return null
+    }
+
+    const id = toValue(flowId)
+
+    if (!id) {
+      return null
+    }
+
+    return [id]
+  }
+
+  const parameters = toRef(getter)
+  const subscription = useSubscriptionWithDependencies(api.flows.getFlow, parameters, options)
+  const flow = computed(() => subscription.response)
+
+  return {
+    subscription,
+    flow,
+  }
+}

package/src/compositions/useFlowRun.ts

@@ -0,0 +1,39 @@
+import { SubscriptionOptions, useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+import { computed, MaybeRefOrGetter, toRef, toValue } from 'vue'
+import { useCan } from '@/compositions/useCan'
+import { useWorkspaceApi } from '@/compositions/useWorkspaceApi'
+import { WorkspaceFlowRunsApi } from '@/services'
+import { Getter } from '@/types/reactivity'
+import { UseEntitySubscription } from '@/types/useEntitySubscription'
+
+export type UseFlowRun = UseEntitySubscription<WorkspaceFlowRunsApi['getFlowRun'], 'flowRun'>
+
+export function useFlowRun(flowRunId: MaybeRefOrGetter<string | null | undefined>, options?: SubscriptionOptions): UseFlowRun {
+  const api = useWorkspaceApi()
+  const can = useCan()
+
+  const getter: Getter<[string] | null> = () => {
+    if (!can.read.flow_run) {
+      return null
+    }
+
+    const id = toValue(flowRunId)
+
+    if (!id) {
+      return null
+    }
+
+    return [id]
+  }
+
+  const parameters = toRef(getter)
+
+  const subscription = useSubscriptionWithDependencies(api.flowRuns.getFlowRun, parameters, options)
+
+  const flowRun = computed(() => subscription.response)
+
+  return {
+    subscription,
+    flowRun,
+  }
+}

package/src/compositions/useFlowRunCompleteness.ts

@@ -0,0 +1,62 @@
+import { SubscriptionOptions } from '@prefecthq/vue-compositions'
+import merge from 'lodash.merge'
+import { ComputedRef, MaybeRefOrGetter, computed, toRef } from 'vue'
+import { useFlowRunsCount } from '@/compositions/useFlowRunsCount'
+import { UseSubscriptions, useSubscriptions } from '@/compositions/useSubscriptions'
+import { FlowRunsFilter } from '@/models/Filters'
+import { WorkspaceFlowRunsApi } from '@/services/WorkspaceFlowRunsApi'
+import { Getter } from '@/types/reactivity'
+import { toPercent } from '@/utilities/numbers'
+
+type FlowRunsAction = WorkspaceFlowRunsApi['getFlowRunsCount'] | (() => undefined)
+
+export type UseFlowRunsCompleteness = {
+  completeness: ComputedRef<number | undefined>,
+  subscriptions: UseSubscriptions<FlowRunsAction>,
+}
+
+export function useFlowRunCompleteness(filter: MaybeRefOrGetter<FlowRunsFilter | null | undefined>, options?: SubscriptionOptions): UseFlowRunsCompleteness {
+  const filterRef = toRef(filter)
+
+  const allRunsCountFilter: Getter<FlowRunsFilter> = () => {
+    const filter: FlowRunsFilter = {
+      flowRuns: {
+        state: {
+          type: ['COMPLETED', 'FAILED', 'CRASHED'],
+        },
+      },
+    }
+    return merge({}, filterRef.value, filter)
+  }
+  const { count: allRunsCount, subscription: allFlowRunsCountSubscription } = useFlowRunsCount(allRunsCountFilter, options)
+
+  const completeRunsCountFilter: Getter<FlowRunsFilter> = () => {
+    const filter: FlowRunsFilter = {
+      flowRuns: {
+        state: {
+          type: ['COMPLETED'],
+        },
+      },
+    }
+    return merge({}, filterRef.value, filter)
+  }
+  const { count: completeRunsCount, subscription: completeFlowRunsSubscription } = useFlowRunsCount(completeRunsCountFilter, options)
+
+  const completeness = computed(() => {
+    if (!completeRunsCount.value || !allRunsCount.value) {
+      return undefined
+    }
+
+    return toPercent(completeRunsCount.value, allRunsCount.value)
+  })
+
+  const subscriptions = useSubscriptions([
+    allFlowRunsCountSubscription,
+    completeFlowRunsSubscription,
+  ])
+
+  return {
+    completeness,
+    subscriptions,
+  }
+}

package/src/compositions/useFlowRunFavicon.ts

@@ -0,0 +1,20 @@
+import { MaybeRefOrGetter, computed, toValue } from 'vue'
+import { useFavicon } from '@/compositions/useFavicon'
+import { useFlowRun } from '@/compositions/useFlowRun'
+import { backgroundSubscriptionManager } from '@/utilities/subscriptions'
+
+export function useFlowRunFavicon(flowRunId: MaybeRefOrGetter<string>): void {
+  const interval = 5000
+  const { flowRun, subscription } = useFlowRun(flowRunId, { interval })
+  const { flowRun: backgroundFlowRun } = useFlowRun(() => {
+    if (subscription.paused) {
+      return toValue(flowRunId)
+    }
+
+    return null
+  }, { interval, manager: backgroundSubscriptionManager })
+
+  const state = computed(() => backgroundFlowRun.value?.stateType ?? flowRun.value?.stateType)
+
+  useFavicon(state)
+}

package/src/compositions/useFlowRuns.ts

@@ -0,0 +1,46 @@
+import { MaybeReadonly } from '@prefecthq/prefect-design'
+import { MaybeRefOrGetter, toValue } from 'vue'
+import { useCan } from '@/compositions/useCan'
+import { PaginationOptions, UsePaginationEntity, usePagination } from '@/compositions/usePagination'
+import { useWorkspaceApi } from '@/compositions/useWorkspaceApi'
+import { FlowRunsFilter } from '@/models'
+import { WorkspaceFlowRunsApi } from '@/services'
+import { Getter } from '@/types/reactivity'
+
+export type UseFlowRuns = UsePaginationEntity<
+WorkspaceFlowRunsApi['getFlowRuns'],
+WorkspaceFlowRunsApi['getFlowRunsCount'],
+'flowRuns'
+>
+
+export function useFlowRuns(filter?: MaybeRefOrGetter<MaybeReadonly<FlowRunsFilter> | null | undefined>, options?: PaginationOptions): UseFlowRuns {
+  const api = useWorkspaceApi()
+  const can = useCan()
+
+  const parameters: Getter<[FlowRunsFilter] | null> = () => {
+    if (!can.read.flow_run) {
+      return null
+    }
+
+    const value = toValue(filter)
+
+    if (!value) {
+      return null
+    }
+
+    return [value]
+  }
+
+  const pagination = usePagination({
+    fetchMethod: api.flowRuns.getFlowRuns,
+    fetchParameters: parameters,
+    countMethod: api.flowRuns.getFlowRunsCount,
+    countParameters: parameters,
+    options,
+  })
+
+  return {
+    ...pagination,
+    flowRuns: pagination.results,
+  }
+}

package/src/compositions/useFlowRunsAverageLateness.ts

@@ -0,0 +1,35 @@
+import { SubscriptionOptions, useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+import { computed, MaybeRefOrGetter, toValue } from 'vue'
+import { useCan } from '@/compositions/useCan'
+import { useWorkspaceApi } from '@/compositions/useWorkspaceApi'
+import { FlowRunsFilter } from '@/models/Filters'
+import { WorkspaceFlowRunsApi } from '@/services/WorkspaceFlowRunsApi'
+import { UseEntitySubscription } from '@/types/useEntitySubscription'
+
+export type UseFlowRunsAverageLateness = UseEntitySubscription<WorkspaceFlowRunsApi['getFlowRunsAverageLateness'], 'lateness'>
+
+export function useFlowRunsAverageLateness(filter: MaybeRefOrGetter<FlowRunsFilter | null | undefined>, options?: SubscriptionOptions): UseFlowRunsAverageLateness {
+  const api = useWorkspaceApi()
+  const can = useCan()
+
+  const parameters = computed<[FlowRunsFilter] | null>(() => {
+    if (!can.read.flow_run) {
+      return null
+    }
+    const value = toValue(filter)
+
+    if (!value) {
+      return null
+    }
+
+    return [value]
+  })
+
+  const subscription = useSubscriptionWithDependencies(api.flowRuns.getFlowRunsAverageLateness, parameters, options)
+  const lateness = computed(() => subscription.response)
+
+  return {
+    subscription,
+    lateness,
+  }
+}

package/src/compositions/useFlowRunsCount.ts

@@ -0,0 +1,45 @@
+import { SubscriptionOptions, UseSubscription, useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+import merge from 'lodash.merge'
+import { ComputedRef, MaybeRefOrGetter, computed, toRef, toValue } from 'vue'
+import { useCan } from '@/compositions/useCan'
+import { useWorkspaceApi } from '@/compositions/useWorkspaceApi'
+import { FlowRunsFilter } from '@/models/Filters'
+import { WorkspaceFlowRunsApi } from '@/services/WorkspaceFlowRunsApi'
+import { Getter } from '@/types/reactivity'
+
+export type UseFlowRunsCount = {
+  subscription: UseSubscription<WorkspaceFlowRunsApi['getFlowRunsCount']>,
+  count: ComputedRef<number | undefined>,
+}
+
+export function useFlowRunsCount(filter: MaybeRefOrGetter<FlowRunsFilter | null | undefined>, options?: SubscriptionOptions): UseFlowRunsCount {
+  const api = useWorkspaceApi()
+  const can = useCan()
+
+  const getter: Getter<[FlowRunsFilter] | null> = () => {
+    if (!can.read.flow_run) {
+      return null
+    }
+
+    const filterValue = toValue(filter)
+
+    if (!filterValue) {
+      return null
+    }
+
+    // merge here is important to track changes to `filter` if it is a reactive
+    const parameter = merge({}, filterValue)
+
+    return [parameter]
+  }
+
+  const parameters = toRef(getter)
+
+  const subscription = useSubscriptionWithDependencies(api.flowRuns.getFlowRunsCount, parameters, options)
+  const count = computed(() => subscription.response)
+
+  return {
+    count,
+    subscription,
+  }
+}

package/src/compositions/useFlows.ts

@@ -0,0 +1,45 @@
+import { MaybeRefOrGetter, toValue } from 'vue'
+import { useCan } from '@/compositions/useCan'
+import { PaginationOptions, UsePaginationEntity, usePagination } from '@/compositions/usePagination'
+import { useWorkspaceApi } from '@/compositions/useWorkspaceApi'
+import { FlowsFilter } from '@/models'
+import { WorkspaceFlowsApi } from '@/services'
+import { Getter } from '@/types/reactivity'
+
+export type UseFlows = UsePaginationEntity<
+WorkspaceFlowsApi['getFlows'],
+WorkspaceFlowsApi['getFlowsCount'],
+'flows'
+>
+
+export function useFlows(filter?: MaybeRefOrGetter<FlowsFilter | null | undefined>, options?: PaginationOptions): UseFlows {
+  const api = useWorkspaceApi()
+  const can = useCan()
+
+  const parameters: Getter<[FlowsFilter?] | null> = () => {
+    if (!can.read.flow) {
+      return null
+    }
+
+    const value = toValue(filter)
+
+    if (!value) {
+      return null
+    }
+
+    return [value]
+  }
+
+  const pagination = usePagination({
+    fetchMethod: api.flows.getFlows,
+    fetchParameters: parameters,
+    countMethod: api.flows.getFlowsCount,
+    countParameters: parameters,
+    options,
+  })
+
+  return {
+    ...pagination,
+    flows: pagination.results,
+  }
+}

package/src/compositions/useFlowsCount.ts

@@ -0,0 +1,41 @@
+import { useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
+import merge from 'lodash.merge'
+import { MaybeRefOrGetter, computed, toRef, toValue } from 'vue'
+import { useCan, useWorkspaceApi } from '@/compositions'
+import { FlowsFilter } from '@/models'
+import { WorkspaceFlowsApi } from '@/services/WorkspaceFlowsApi'
+import { Getter } from '@/types/reactivity'
+import { UseEntitySubscription } from '@/types/useEntitySubscription'
+
+export type UseFlowsCount = UseEntitySubscription<WorkspaceFlowsApi['getFlowsCount'], 'count'>
+
+export function useFlowsCount(filter?: MaybeRefOrGetter<FlowsFilter>): UseFlowsCount {
+  const api = useWorkspaceApi()
+  const can = useCan()
+
+  const getter: Getter<[FlowsFilter] | null> = () => {
+    if (!can.read.flow) {
+      return null
+    }
+
+    const filterValue = toValue(filter)
+
+    if (!filterValue) {
+      return null
+    }
+
+    // merge here is important to track changes to `filter` if it is a reactive
+    const parameter = merge({}, filterValue)
+
+    return [parameter]
+  }
+
+  const parameters = toRef(getter)
+  const subscription = useSubscriptionWithDependencies(api.flows.getFlowsCount, parameters)
+  const count = computed(() => subscription.response)
+
+  return {
+    subscription,
+    count,
+  }
+}

package/src/compositions/useForm.ts

@@ -0,0 +1,29 @@
+import { scrollToValidationError } from '@prefecthq/prefect-design'
+import { useForm as useVeeForm } from 'vee-validate'
+
+export const useForm: typeof useVeeForm = (options) => {
+  const { handleSubmit, ...rest } = useVeeForm(options)
+
+  const submit: typeof handleSubmit = (onSuccess, onError) => {
+    const onSuccessWrapped: typeof onSuccess = (values, context) => {
+      return onSuccess(values, context)
+    }
+
+    const onErrorWrapped: typeof onError = (context) => {
+      if (onError) {
+        onError(context)
+      }
+
+      scrollToValidationError()
+    }
+
+    return handleSubmit(onSuccessWrapped, onErrorWrapped)
+  }
+
+  submit.withControlled = handleSubmit.withControlled
+
+  return {
+    ...rest,
+    handleSubmit: submit,
+  }
+}

package/src/compositions/useInterval.ts

@@ -0,0 +1,10 @@
+import { SubscriptionOptions } from '@prefecthq/vue-compositions'
+import { InjectionKey, inject } from 'vue'
+
+export type UseInterval = Pick<SubscriptionOptions, 'interval'>
+
+export const subscriptionIntervalKey: InjectionKey<UseInterval> = Symbol('SubscriptionIntervalKey')
+
+export function useInterval(defaults?: UseInterval): UseInterval | undefined {
+  return inject(subscriptionIntervalKey, defaults)
+}

package/src/compositions/useJsonRecord.ts

@@ -0,0 +1,47 @@
+import { Ref, ref, watch } from 'vue'
+import { isValidJsonRecord, stringify } from '@/utilities/json'
+
+export type UseJsonRecordValue = Record<string, unknown>
+
+export type UseJsonRecord = {
+  valid: Ref<boolean>,
+  json: Ref<string>,
+  record: Ref<UseJsonRecordValue>,
+}
+
+/**
+ * The UseJsonRecord composition takes a record or record-parsable string
+ * and creates two reactive references: a string and an object.
+ * It then sets up watchers to sync changes between these two references.
+ * @param initialValues UseJsonRecordValue
+ * @returns UseJsonRecord
+ */
+export function useJsonRecord(initialValues?: UseJsonRecordValue | string): UseJsonRecord {
+  const initialValuesIsString = typeof initialValues === 'string'
+  const record = ref<UseJsonRecordValue>(initialValuesIsString ? JSON.parse(initialValues) : initialValues)
+  const json = ref<string>(stringify(record.value))
+  const valid = ref(false)
+
+  watch(json, (newString) => {
+    valid.value = isValidJsonRecord(newString)
+    if (valid.value) {
+      record.value = JSON.parse(newString)
+    }
+  })
+
+  watch(record, (newRecord) => {
+    if (isValidJsonRecord(json.value)) {
+      const stringifiedjson = JSON.stringify(JSON.parse(json.value))
+      const stringifiedRecord = JSON.stringify(newRecord)
+      if (stringifiedjson !== stringifiedRecord) {
+        json.value = JSON.stringify(newRecord)
+      }
+    }
+  }, { deep: true })
+
+  return {
+    valid,
+    json,
+    record,
+  }
+}

package/src/compositions/useLastFlowRun.ts

@@ -0,0 +1,39 @@
+import merge from 'lodash.merge'
+import { computed, ComputedRef, MaybeRefOrGetter, toValue } from 'vue'
+import { useCan } from '@/compositions/useCan'
+import { UseFlowRuns, useFlowRuns } from '@/compositions/useFlowRuns'
+import { FlowRun, FlowRunsFilter, UnionFilter } from '@/models'
+
+export type UseLastFlowRun = Pick<UseFlowRuns, 'subscriptions'> & {
+  flowRun: ComputedRef<FlowRun | undefined>,
+}
+
+export function useLastFlowRun(filter: MaybeRefOrGetter<UnionFilter | null | undefined>): UseLastFlowRun {
+  const can = useCan()
+
+  const getter = (): FlowRunsFilter | null => {
+    if (!can.read.flow_run) {
+      return null
+    }
+
+    const now = new Date()
+    const filterValue = toValue(filter)
+    const latestFilter: FlowRunsFilter = {
+      flowRuns: {
+        expectedStartTimeBefore: now,
+      },
+      sort: 'EXPECTED_START_TIME_DESC',
+      limit: 1,
+    }
+
+    return merge({}, filterValue, latestFilter)
+  }
+
+  const { flowRuns, subscriptions } = useFlowRuns(getter)
+  const flowRun = computed(() => flowRuns.value.at(0))
+
+  return {
+    subscriptions,
+    flowRun,
+  }
+}

package/src/compositions/useLogsSort.ts

@@ -0,0 +1,34 @@
+import { useLocalStorage } from '@prefecthq/vue-compositions'
+import { Ref, computed } from 'vue'
+
+import { LogSortValues, isLogSortValue } from '@/types'
+import { getCacheKey } from '@/utilities/cache'
+
+type UseLogsSort = {
+  sort: Ref<LogSortValues>,
+}
+
+const logsSortStorageKey = getCacheKey('prefect-ui-library-default-logs-sort')
+
+export function useLogsSort(defaultValue: LogSortValues = 'TIMESTAMP_ASC'): UseLogsSort {
+  const { value: cache, set } = useLocalStorage<string>(logsSortStorageKey)
+
+  const sort = computed({
+    get() {
+      if (isLogSortValue(cache.value)) {
+        return cache.value
+      }
+
+      return defaultValue
+    },
+    set(value) {
+      if (isLogSortValue(value)) {
+        set(value)
+      }
+    },
+  })
+
+  return {
+    sort,
+  }
+}

package/src/compositions/useNextFlowRun.ts

@@ -0,0 +1,41 @@
+import { SubscriptionOptions } from '@prefecthq/vue-compositions'
+import merge from 'lodash.merge'
+import { computed, ComputedRef, MaybeRefOrGetter, toValue } from 'vue'
+import { useCan } from '@/compositions/useCan'
+import { UseFlowRuns, useFlowRuns } from '@/compositions/useFlowRuns'
+import { FlowRun, FlowRunsFilter, UnionFilter } from '@/models'
+
+export type UseNextFlowRun = Pick<UseFlowRuns, 'subscriptions'> & {
+  flowRun: ComputedRef<FlowRun | undefined>,
+}
+
+export function useNextFlowRun(filter: MaybeRefOrGetter<UnionFilter | null | undefined>, options?: SubscriptionOptions): UseNextFlowRun {
+  const can = useCan()
+
+  const getter = (): FlowRunsFilter | null => {
+    if (!can.read.flow_run) {
+      return null
+    }
+
+    const filterValue = toValue(filter)
+    const nextFlowRunFilter: FlowRunsFilter = {
+      flowRuns: {
+        state: {
+          name: ['Scheduled'],
+        },
+      },
+      sort: 'EXPECTED_START_TIME_ASC',
+      limit: 1,
+    }
+
+    return merge({}, filterValue, nextFlowRunFilter)
+  }
+
+  const { flowRuns, subscriptions } = useFlowRuns(getter, options)
+  const flowRun = computed(() => flowRuns.value.at(0))
+
+  return {
+    subscriptions,
+    flowRun,
+  }
+}

package/src/compositions/useOptionalPropertiesSchema.ts

@@ -0,0 +1,23 @@
+import { merge } from 'lodash'
+import { ComputedRef, MaybeRef, computed, ref } from 'vue'
+import { SchemaResponse } from '@/models'
+import { mapper } from '@/services'
+import { Schema } from '@/types'
+
+export type UseOptionalPropertiesSchema = {
+  schema: ComputedRef<Schema>,
+}
+
+export function useOptionalPropertiesSchema(rawSchema: MaybeRef<SchemaResponse | Schema>): UseOptionalPropertiesSchema {
+  const rawSchemaRef = ref(rawSchema)
+
+  const computedSchema = computed(() => {
+    const newSchema = merge({}, rawSchemaRef.value)
+    newSchema.required = []
+    return mapper.map('SchemaResponse', newSchema, 'Schema')
+  })
+
+  return {
+    schema: computedSchema,
+  }
+}