@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/services/schemas/utilities.ts

@@ -0,0 +1,295 @@
+import { JsonInput } from '@/components'
+import { isBlockDocumentReferenceValue, isBlockDocumentValue } from '@/models'
+import { schemaPropertyServiceFactory } from '@/services/schemas/properties'
+import { SchemaProperty, SchemaPropertyInputAttrs, Schema, SchemaValues, SchemaValue, schemaHas, SchemaPropertyAnyOf, SchemaPropertyAllOf } from '@/types/schemas'
+import { isArray } from '@/utilities'
+import { withPropsWithoutExcludedFactory } from '@/utilities/components'
+import { stringify } from '@/utilities/json'
+import { isRecord } from '@/utilities/object'
+import { parseUnknownJson } from '@/utilities/parseUnknownJson'
+import { isGreaterThan, isGreaterThanOrEqual, isLessThan, isLessThanOrEqual, isRequired, fieldRules, ValidationMethod, ValidationMethodFactory } from '@/utilities/validation'
+
+export type SchemaPropertyComponentWithProps = ReturnType<typeof schemaPropertyComponentWithProps> | null
+
+/*
+ * Used for creating SchemaProperty meta. Defines the component and props necessary for rendering a SchemaProperty.
+ */
+export const schemaPropertyComponentWithProps = withPropsWithoutExcludedFactory('modelValue')
+
+/*
+ * Gets a UI friendly version of an empty value for a specific schema. Used for create forms that have no existing value.
+ */
+export function getSchemaDefaultValues(schema: Schema): SchemaValues {
+  return getSchemaResponseValue(schema, {}) as SchemaValues
+}
+
+
+/*
+ * Gets a UI friendly version of an empty value for a specific schema. Used for create forms that have no existing value.
+ */
+export function getSchemaPropertyDefaultValue(property: SchemaProperty, level: number = 0): SchemaValue {
+  if (schemaHas(property, 'properties')) {
+    return getSchemaPropertyResponseValue(property, {}) as SchemaValues
+  }
+
+  const service = schemaPropertyServiceFactory(property, level)
+
+  return service.getDefaultValue()
+}
+
+/*
+ * Gets a ui friendly version a schema's api friendly values. Used for mapping.
+ */
+export function getSchemaResponseValue(schema: Schema, values: SchemaValues): SchemaValues {
+  return getSchemaPropertyResponseValue(schema, values) as SchemaValues
+}
+
+/*
+ * Gets a api friendly version a schema's ui friendly values. Used for mapping.
+ */
+export function getSchemaRequestValue(schema: Schema, values: SchemaValues): SchemaValues {
+  return (getSchemaPropertyRequestValue(schema, values) ?? {}) as SchemaValues
+}
+
+/*
+ * Gets a UI friendly version of a property's api friendly value. Used for mapping.
+ */
+export function getSchemaPropertyResponseValue(property: SchemaProperty, value: SchemaValue, level: number = 0): SchemaValue {
+  const service = schemaPropertyServiceFactory(property, level)
+
+  return service.mapResponseValue(value)
+}
+
+/*
+ * Gets a api friendly version of a property's UI friendly value. Used for mapping.
+ */
+export function getSchemaPropertyRequestValue(property: SchemaProperty, value: SchemaValue, level: number = 0): SchemaValue {
+  const service = schemaPropertyServiceFactory(property, level)
+
+  return service.mapRequestValue(value)
+}
+
+/*
+ * Gets any attributes for a property that should be bound to the component used to edit a property.
+ * Attrs are added to the property's meta in the meta resolver.
+ */
+export function getSchemaPropertyAttrs(property: SchemaProperty): SchemaPropertyInputAttrs {
+  const attrs: SchemaPropertyInputAttrs = {
+    autocomplete: 'off',
+  }
+
+  const placeholder = getSchemaPropertyPlaceholder(property)
+
+  if (placeholder) {
+    attrs.placeholder = placeholder
+  }
+
+  if (property.minLength !== undefined || property.minimum !== undefined) {
+    attrs.min = property.minLength ?? property.minimum
+  }
+
+  if (property.maxLength !== undefined || property.maximum !== undefined) {
+    attrs.max = property.maxLength ?? property.maximum
+  }
+
+  if (property.multipleOf) {
+    attrs.step = property.multipleOf
+  }
+
+  if (property.format === 'password') {
+    attrs.type = 'password'
+  }
+
+  return attrs
+}
+
+export function getSchemaPropertyPlaceholder(property: SchemaProperty): string | undefined {
+  const placeholder = property.default ?? property.example
+
+  if (!placeholder) {
+    return undefined
+  }
+
+  if (typeof placeholder === 'string') {
+    return placeholder
+  }
+
+  if (isArray(placeholder) && property.meta?.component !== JsonInput) {
+    return placeholder.join(', ')
+  }
+
+  return stringify(placeholder)
+}
+
+export function getSchemaPropertyComponentWithDefaultProps({ component, props }: NonNullable<SchemaPropertyComponentWithProps>): NonNullable<SchemaPropertyComponentWithProps> {
+  switch (component) {
+    case JsonInput:
+      return schemaPropertyComponentWithProps(JsonInput, {
+        showFormatButton: true,
+        showLineNumbers: true,
+        minLines: 3,
+        ...props,
+      })
+    default:
+      return { component, props }
+  }
+}
+
+/*
+ * Gets any validation rules necessary for creating/updating a property in the ui.
+ * Validators are added to the property's meta in the meta resolver.
+ */
+export function getSchemaPropertyDefaultValidators(property: SchemaProperty, required: boolean): ValidationMethod[] {
+  const { title = 'Property' } = property
+  const validators: ValidationMethodFactory[] = []
+
+  const greaterThanOrEqualValue = property.minLength ?? property.minimum ?? property.minItems
+
+  if (greaterThanOrEqualValue !== undefined) {
+    validators.push(isGreaterThanOrEqual(greaterThanOrEqualValue))
+  }
+
+  const lessThanOrEqualValue = property.maxLength ?? property.maximum ?? property.maxItems
+
+  if (lessThanOrEqualValue !== undefined) {
+    validators.push(isLessThanOrEqual(lessThanOrEqualValue))
+  }
+
+  if (property.exclusiveMinimum !== undefined) {
+    validators.push(isGreaterThan(property.exclusiveMinimum))
+  }
+
+  if (property.exclusiveMaximum !== undefined) {
+    validators.push(isLessThan(property.exclusiveMaximum))
+  }
+
+  if (required) {
+    validators.push(isRequired)
+  }
+
+  return fieldRules(title, ...validators)
+}
+
+export type ResolverCallback<T> = (schema: T) => T
+
+/*
+ * A utility for passing a value through an array of resolver methods.
+ */
+export function resolve<T>(value: T, resolvers: ResolverCallback<T>[]): T {
+  return resolvers.reduce((resolved, resolver) => resolver(resolved), value)
+}
+
+/*
+ * Sometimes we have to guess which schema an anyOf property is using
+ */
+export function getSchemaValueDefinition(property: SchemaProperty, value: SchemaValue): Schema | null {
+  if (property.anyOf) {
+    return getSchemaValueAnyOfDefinition(property as SchemaPropertyAnyOf, value)
+  }
+
+  if (property.allOf) {
+    return getSchemaValueAllOfDefinition(property as SchemaPropertyAllOf, value)
+  }
+
+  throw new Error('Schema property missing allOf and anyOf definitions')
+}
+
+/*
+ * Sometimes we have to guess which schema an anyOf property is using
+ */
+export function getSchemaValueAnyOfDefinition(property: SchemaPropertyAnyOf, value: SchemaValue): Schema | null {
+  const index = getSchemaValueAnyOfDefinitionIndex(property, value)
+
+  if (index === null || index === -1) {
+    console.log('Schema property with anyOf had a value but could not be associated with a definition', property, value)
+
+    return null
+  }
+
+  return property.anyOf[index]
+}
+
+export function getSchemaValueAnyOfDefinitionIndex({ anyOf: definitions }: SchemaPropertyAnyOf, value: SchemaValue): number | null {
+  return getSchemaValueDefinitionIndex(definitions, value)
+}
+
+/*
+ * Sometimes we have to guess which schema an allOf property is using
+ */
+export function getSchemaValueAllOfDefinition(property: SchemaPropertyAllOf, value: SchemaValue): Schema | null {
+  const index = getSchemaValueAllOfDefinitionIndex(property, value)
+
+  if (index === null || index === -1) {
+    console.log('Schema property with allOf had a value but could not be associated with a definition', property, value)
+
+    return null
+  }
+
+  return property.allOf[index]
+}
+
+export function getSchemaValueAllOfDefinitionIndex({ allOf: definitions }: SchemaPropertyAllOf, value: SchemaValue): number | null {
+  return getSchemaValueDefinitionIndex(definitions, value)
+}
+
+export function getSchemaValueDefinitionIndex(definitions: Schema[], value: SchemaValue): number | null {
+  if (isBlockDocumentReferenceValue(value)) {
+    return definitions.findIndex(definition => definition.type === 'block')
+  }
+
+  const parsedValue = parseUnknownJson(value)
+
+  if (isRecord(parsedValue) || Array.isArray(parsedValue)) {
+    return findObjectDefinitionIndex(definitions, parsedValue)
+  }
+
+  switch (typeof value) {
+    case 'number':
+      return definitions.findIndex(definition => definition.type == 'number' || definition.type === 'integer')
+    case 'string':
+      return definitions.findIndex(definition => definition.type == 'string')
+    case 'boolean':
+      return definitions.findIndex(definition => definition.type == 'boolean')
+    case 'object':
+      return findObjectDefinitionIndex(definitions, value)
+    default:
+      return null
+  }
+}
+
+function findObjectDefinitionIndex(definitions: Schema[], value: object | null): number | null {
+  if (value === null) {
+    return null
+  }
+
+  if (isBlockDocumentValue(value)) {
+    return definitions.findIndex(definition => definition.blockTypeSlug === value.blockTypeSlug)
+  }
+
+  if (Array.isArray(value)) {
+    return definitions.findIndex(definition => definition.type === 'array')
+  }
+
+  const valueKeys = Object.keys(value)
+
+  if (valueKeys.length === 0) {
+    return definitions.findIndex(definition => definition.type === 'object')
+  }
+
+  const [index, keysInCommon] = definitions.reduce<[number, number]>(([resultIndex, resultKeysInCommon], definition, definitionIndex) => {
+    const definitionKeys = Object.keys(definition.properties ?? {})
+    const definitionKeysInCommon = valueKeys.filter(value => definitionKeys.includes(value)).length
+
+    if (definitionKeysInCommon > resultKeysInCommon) {
+      return [definitionIndex, definitionKeysInCommon]
+    }
+
+    return [resultIndex, resultKeysInCommon]
+  }, [0, 0])
+
+  if (keysInCommon === 0) {
+    return null
+  }
+
+  return index
+}

package/src/services/storage/Storage.ts

@@ -0,0 +1,83 @@
+import { isDefined, randomId } from '@prefecthq/prefect-design'
+import { reactive } from 'vue'
+import { StorageItem } from '@/services/storage/StorageItem'
+
+type Store<T extends StorageItem> = Map<string, T | undefined>
+type Subscriptions = Map<string, Set<string> | undefined>
+
+export type Unsubscribe = () => void
+
+export class Storage<T extends StorageItem> {
+  private readonly subscriptions: Subscriptions = new Map()
+  private readonly store: Store<T> = reactive(new Map())
+
+  public add(value: T): void {
+    if (this.isNewValue(value)) {
+      this.store.set(value.id, value)
+    }
+  }
+
+  public remove(id: string): void {
+    this.subscriptions.delete(id)
+    this.store.delete(id)
+  }
+
+  public get(id: string): T | undefined {
+    return this.store.get(id)
+  }
+
+  public addAll(values: T[]): void {
+    values.forEach(value => this.add(value))
+  }
+
+  public removeAll(ids: string[]): void {
+    ids.forEach(id => this.remove(id))
+  }
+
+  public getAll(ids: string[]): T[] {
+    return ids.map(id => this.get(id)).filter(isDefined)
+  }
+
+  public subscribe(id: string): Unsubscribe {
+    const subscriptionId = randomId()
+    const subscriptions = this.getSubscription(id)
+
+    subscriptions.add(subscriptionId)
+
+    return () => this.unsubscribe(id, subscriptionId)
+  }
+
+  public unsubscribe(id: string, subscriptionId: string): void {
+    const subscriptions = this.getSubscription(id)
+
+    subscriptions.delete(subscriptionId)
+
+    if (subscriptions.size === 0) {
+      this.remove(id)
+    }
+  }
+
+  private getSubscription(id: string): Set<string> {
+    const existing = this.subscriptions.get(id)
+
+    if (existing) {
+      return existing
+    }
+
+    const newSubscriptionSet = new Set<string>()
+
+    this.subscriptions.set(id, newSubscriptionSet)
+
+    return newSubscriptionSet
+  }
+
+  private isNewValue(input: T): boolean {
+    const existing = this.store.get(input.id)
+
+    if (existing && existing.storageTimestamp.getTime() > input.storageTimestamp.getTime()) {
+      return false
+    }
+
+    return true
+  }
+}

package/src/services/storage/StorageItem.ts

@@ -0,0 +1,5 @@
+export abstract class StorageItem {
+  public abstract readonly id: string
+
+  public readonly storageTimestamp = new Date()
+}

package/src/services/storage/flowRunStorage.ts

@@ -0,0 +1,7 @@
+import { FlowRun } from '@/models/FlowRun'
+import { Storage } from '@/services/storage/Storage'
+import { useStorage } from '@/services/storage/useStorage'
+
+export const flowRunStorage = new Storage<FlowRun>()
+
+export const useFlowRunStorage = useStorage(flowRunStorage)

package/src/services/storage/index.ts

@@ -0,0 +1,4 @@
+export * from './Storage'
+export * from './StorageItem'
+export * from './flowRunStorage'
+export * from './useStorage'

package/src/services/storage/useStorage.ts

@@ -0,0 +1,53 @@
+import { Storage, Unsubscribe } from '@/services/storage/Storage'
+import { StorageItem } from '@/services/storage/StorageItem'
+import { tryOnScopeDispose } from '@/utilities/tryOnScopeDispose'
+
+export type UseStorage<T extends StorageItem> = {
+  add: (value: T) => void,
+  addAll: (value: T[]) => void,
+  remove: (id: string) => void,
+  removeAll: (ids: string[]) => void,
+  get: (id: string) => T | undefined,
+  getAll: (ids: string[]) => T[],
+}
+
+export function useStorage<T extends StorageItem>(storage: Storage<T>): () => UseStorage<T> {
+  return () => {
+
+    let getUnsubscribe: Unsubscribe | undefined = undefined
+    let getAllUnsubscribe: Unsubscribe | undefined = undefined
+
+    tryOnScopeDispose(() => {
+      getUnsubscribe?.()
+      getAllUnsubscribe?.()
+    })
+
+    const get = (id: string): T | undefined => {
+      const unsubscribe = getUnsubscribe
+
+      getUnsubscribe = storage.subscribe(id)
+      unsubscribe?.()
+
+      return storage.get(id)
+    }
+
+    const getAll = (ids: string[]): T[] => {
+      const unsubscribe = getAllUnsubscribe
+      const unsubscribes = ids.map<Unsubscribe>(id => storage.subscribe(id))
+
+      getAllUnsubscribe = () => unsubscribes.forEach(unsubscribe => unsubscribe())
+      unsubscribe?.()
+
+      return storage.getAll(ids)
+    }
+
+    return {
+      add: (value: T) => storage.add(value),
+      addAll: (values: T[]) => storage.addAll(values),
+      remove: (id: string) => storage.remove(id),
+      removeAll: (ids: string[]) => storage.removeAll(ids),
+      get,
+      getAll,
+    }
+  }
+}

package/src/services/workspaceEventsApi.ts

@@ -0,0 +1,69 @@
+import { HistogramData } from '@prefecthq/vue-charts'
+import { WorkspaceEventsCountResponse, WorkspaceEventsResponse } from '@/models/api/workspaceEvents'
+import { WorkspaceEvent } from '@/models/workspaceEvent'
+import { WorkspaceEvents } from '@/models/workspaceEvents'
+import { WorkspaceEventsCount, WorkspaceEventsCountable } from '@/models/workspaceEventsCount'
+import { mapper } from '@/services/Mapper'
+import { WorkspaceApi } from '@/services/WorkspaceApi'
+import { WorkspaceEventsFilter } from '@/types/workspaceEventsFilter'
+import { WorkspaceEventsHistory } from '@/types/workspaceEventsHistory'
+import { dateFunctions } from '@/utilities/timezone'
+
+export class WorkspaceEventsApi extends WorkspaceApi {
+
+  protected override routePrefix = '/events'
+
+  public async getEvents(filter: WorkspaceEventsFilter): Promise<WorkspaceEvents> {
+    const request = mapper.map('WorkspaceEventsFilter', filter, 'WorkspaceEventsFilterRequest')
+    const { data } = await this.post<WorkspaceEventsResponse>('/filter', request)
+
+    return mapper.map('WorkspaceEventsResponse', data, 'WorkspaceEvents')
+  }
+
+  public async getEvent(eventId: string, occurred: Date): Promise<WorkspaceEvent> {
+    const since = dateFunctions.startOfDay(occurred)
+    const until = dateFunctions.endOfDay(occurred)
+
+    const filter: WorkspaceEventsFilter = {
+      id: { id: [eventId] },
+      occurred: {
+        since,
+        until,
+      },
+    }
+
+    const { events } = await this.getEvents(filter)
+    const [event] = events
+
+    return event
+  }
+
+  public async getFirstEvent(filter: WorkspaceEventsFilter): Promise<WorkspaceEvent> {
+    const { events } = await this.getEvents(filter)
+    const [event] = events
+
+    return event
+  }
+
+  public async getNextPage(pageToken: string): Promise<WorkspaceEvents> {
+    const { data } = await this.get<WorkspaceEventsResponse>(`/filter/next${pageToken}`)
+
+    return mapper.map('WorkspaceEventsResponse', data, 'WorkspaceEvents')
+  }
+
+  public async getEventsCount(countable: WorkspaceEventsCountable, filter: WorkspaceEventsFilter): Promise<WorkspaceEventsCount[]> {
+    const request = mapper.map('WorkspaceEventsFilter', filter, 'WorkspaceEventsFilterRequest')
+    const { data } = await this.post<WorkspaceEventsCountResponse[]>(`/count-by/${countable}`, request)
+
+    return mapper.map('WorkspaceEventsCountResponse', data, 'WorkspaceEventsCount')
+  }
+
+  public async getEventsHistory(eventsHistory: WorkspaceEventsHistory): Promise<HistogramData> {
+    const { unit = 'hour', interval = 1 } = eventsHistory
+    const request = mapper.map('WorkspaceEventsHistory', { ...eventsHistory, unit, interval }, 'WorkspaceEventsHistoryRequest')
+    const { data } = await this.post<WorkspaceEventsCountResponse[]>('/count-by/time', request)
+
+    return mapper.map('WorkspaceEventsCountResponse', data, 'HistogramDataPoint')
+  }
+
+}

package/src/shims-svg.d.ts

@@ -0,0 +1,11 @@
+declare module '*.svg' {
+
+  import { VNode } from 'vue'
+
+  type Svg = VNode
+
+  const content: Svg
+
+  // eslint-disable-next-line import/no-default-export
+  export default content
+}