Merge pull request #385

refactor(20321): Refactoring the policy loading

* fix(20360): fix the serialisation of multiple scripts

* refactor(20360): export and refactor function name utilities

* refactor(20321): refactor data policy loading

* refactor(20321): refactor filter loading

* refactor(20321): refactor validator loading

* refactor(20321): refactor data policy pipelines

* refactor(20321): refactor scripts

* refactor(20321): refactor schemas

* refactor(20321): refactor data policy

* refactor(20321): refactor behaviour policy loading

* refactor(20321): refactor behaviour policy node

* refactor(20321): refactor client filter node

* refactor(20321): refactor transition node

* refactor(20321): refactor behaviour pipelines

* fix(20321): fix bug with the dual iteration of transitions and pipelines

* fix(20321): fix typos

* fix(20321): fix condition for dry run status icon

* refactor(21481): remove the unnecessary "as" casts

* refactor(20321): refactor loops!

Author: vanch3d

hivemq-edge/src/frontend/src/extensions/datahub/components/nodes/NodeWrapper.tsx

@@ -36,6 +36,8 @@ export const NodeWrapper: FC<NodeWrapperProps> = ({ selected, children, route, w
     boxShadow: '0 0 10px 2px rgba(0,121,36, 0.75), 0 1px 1px rgb(0 0 0 / 15%)',
   }
 
+  const isDryRun = data.dryRunStatus !== undefined && data.dryRunStatus !== PolicyDryRunStatus.IDLE
+
   return (
     <Card
       variant="elevated"
@@ -52,7 +54,7 @@ export const NodeWrapper: FC<NodeWrapperProps> = ({ selected, children, route, w
         setInternalSelection(true)
       }}
     >
-      {data.dryRunStatus !== PolicyDryRunStatus.IDLE && (
+      {isDryRun && (
         <Avatar
           position="absolute"
           left="-1rem"

hivemq-edge/src/frontend/src/extensions/datahub/components/pages/PolicyEditorLoader.tsx

@@ -2,6 +2,7 @@ import { FC, useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { Spinner, useToast } from '@chakra-ui/react'
+import { Connection, NodeAddChange } from 'reactflow'
 
 import ErrorMessage from '@/components/ErrorMessage.tsx'
 
@@ -44,12 +45,28 @@ export const DataPolicyLoader: FC<PolicyLoaderProps> = ({ policyId }) => {
     if (!dataPolicy || !schemas || !scripts) return
 
     try {
-      // TODO[19966] should be loaded in a temp var until whole graph is correct
       store.reset()
-      loadDataPolicy(dataPolicy, store)
-      loadTopicFilter(dataPolicy, store)
-      loadValidators(dataPolicy, schemas.items || [], store)
-      loadDataPolicyPipelines(dataPolicy, schemas.items || [], scripts.items || [], store)
+      const policyNode = loadDataPolicy(dataPolicy)
+      const filterNode = loadTopicFilter(dataPolicy, policyNode.item)
+      const validatorNodes = loadValidators(dataPolicy, schemas.items || [], policyNode.item)
+      const pipelines = loadDataPolicyPipelines(dataPolicy, schemas.items || [], scripts.items || [], policyNode.item)
+
+      const allArtefactsLoaded = [policyNode, ...filterNode, ...validatorNodes, ...pipelines]
+
+      const nodeChanges = allArtefactsLoaded.reduce<NodeAddChange[]>((acc, element) => {
+        const allIds = acc.map((nodeAddChange) => nodeAddChange.item.id)
+        const nodeChange = element as NodeAddChange
+        if (nodeChange.item && !allIds.includes(nodeChange.item.id)) acc.push(nodeChange)
+        return acc
+      }, [])
+      const edgeConnects = allArtefactsLoaded.filter(
+        (element): element is Connection => !!(element as Connection).source
+      )
+
+      store.onNodesChange(nodeChanges)
+      for (const connection of edgeConnects) {
+        store.onConnect(connection)
+      }
       store.setStatus(DesignerStatus.LOADED, { name: dataPolicy.id })
     } catch (error) {
       let message
@@ -94,11 +111,31 @@ export const BehaviorPolicyLoader: FC<PolicyLoaderProps> = ({ policyId }) => {
     if (!behaviorPolicy || !schemas || !scripts) return
 
     try {
-      // TODO[19966] should be loaded in a temp var until whole graph is correct
       store.reset()
-      loadBehaviorPolicy(behaviorPolicy, store)
-      loadClientFilter(behaviorPolicy, store)
-      loadTransitions(behaviorPolicy, schemas.items || [], scripts.items || [], store)
+      const behaviorPolicyNode = loadBehaviorPolicy(behaviorPolicy)
+      const filterNode = loadClientFilter(behaviorPolicy, behaviorPolicyNode.item)
+      const pipelines = loadTransitions(
+        behaviorPolicy,
+        schemas.items || [],
+        scripts.items || [],
+        behaviorPolicyNode.item
+      )
+
+      const allArtefactsLoaded = [behaviorPolicyNode, ...filterNode, ...pipelines]
+      const nodeChanges = allArtefactsLoaded.reduce<NodeAddChange[]>((acc, element) => {
+        const allIds = acc.map((nodeAddChange) => nodeAddChange.item.id)
+        const nodeChange = element as NodeAddChange
+        if (nodeChange.item && !allIds.includes(nodeChange.item.id)) acc.push(nodeChange)
+        return acc
+      }, [])
+      const edgeConnects = allArtefactsLoaded.filter(
+        (element): element is Connection => !!(element as Connection).source
+      )
+
+      store.onNodesChange(nodeChanges)
+      for (const connection of edgeConnects) {
+        store.onConnect(connection)
+      }
       store.setStatus(DesignerStatus.LOADED, { name: behaviorPolicy.id })
     } catch (error) {
       let message

hivemq-edge/src/frontend/src/extensions/datahub/designer/behavior_policy/BehaviorPolicyNode.utils.ts

@@ -5,14 +5,7 @@ import { enumFromStringValue } from '@/utils/types.utils.ts'
 import i18n from '@/config/i18n.config.ts'
 
 import { PolicyCheckErrors } from '@datahub/designer/validation.errors.ts'
-import {
-  BehaviorPolicyData,
-  BehaviorPolicyType,
-  DataHubNodeType,
-  DryRunResults,
-  WorkspaceAction,
-  WorkspaceState,
-} from '@datahub/types.ts'
+import { BehaviorPolicyData, BehaviorPolicyType, DataHubNodeType, DryRunResults } from '@datahub/types.ts'
 
 export function checkValidityModel(behaviorPolicy: Node<BehaviorPolicyData>): DryRunResults<BehaviorPolicyBehavior> {
   if (!behaviorPolicy.data.model) {
@@ -54,9 +47,7 @@ export function checkValidityBehaviorPolicy(
   }
 }
 
-export const loadBehaviorPolicy = (behaviorPolicy: BehaviorPolicy, store: WorkspaceState & WorkspaceAction) => {
-  const { onNodesChange } = store
-
+export const loadBehaviorPolicy = (behaviorPolicy: BehaviorPolicy): NodeAddChange => {
   const model = enumFromStringValue(BehaviorPolicyType, behaviorPolicy.behavior.id)
   if (!model)
     throw new Error(
@@ -78,5 +69,5 @@ export const loadBehaviorPolicy = (behaviorPolicy: BehaviorPolicy, store: Worksp
     },
   }
 
-  onNodesChange([{ item: behaviorPolicyNode, type: 'add' } as NodeAddChange])
+  return { item: behaviorPolicyNode, type: 'add' }
 }

hivemq-edge/src/frontend/src/extensions/datahub/designer/client_filter/ClientFilterNode.utils.ts

@@ -1,17 +1,10 @@
-import { getIncomers, Node, NodeAddChange, XYPosition } from 'reactflow'
+import { Connection, getIncomers, Node, NodeAddChange, XYPosition } from 'reactflow'
 
 import { getNodeId, isClientFilterNodeType } from '@datahub/utils/node.utils.ts'
 import { BehaviorPolicy } from '@/api/__generated__'
 import i18n from '@/config/i18n.config.ts'
 
-import {
-  BehaviorPolicyData,
-  ClientFilterData,
-  DataHubNodeType,
-  DryRunResults,
-  WorkspaceAction,
-  WorkspaceState,
-} from '@datahub/types.ts'
+import { BehaviorPolicyData, ClientFilterData, DataHubNodeType, DryRunResults, WorkspaceState } from '@datahub/types.ts'
 import { PolicyCheckErrors } from '@datahub/designer/validation.errors.ts'
 import { CANVAS_POSITION } from '@datahub/designer/checks.utils.ts'
 
@@ -45,16 +38,17 @@ export function checkValidityClients(
   }
 }
 
-export const loadClientFilter = (behaviorPolicy: BehaviorPolicy, store: WorkspaceState & WorkspaceAction) => {
-  const { onNodesChange, onConnect } = store
-  const BehaviorPolicyNode = store.nodes.find((node) => node.id === behaviorPolicy.id)
-  if (!BehaviorPolicyNode)
+export const loadClientFilter = (
+  behaviorPolicy: BehaviorPolicy,
+  behaviorPolicyNode: Node<BehaviorPolicyData>
+): (NodeAddChange | Connection)[] => {
+  if (behaviorPolicyNode.id !== behaviorPolicy.id)
     throw new Error(
       i18n.t('datahub:error.loading.connection.notFound', { type: DataHubNodeType.BEHAVIOR_POLICY }) as string
     )
   const position: XYPosition = {
-    x: BehaviorPolicyNode.position.x + CANVAS_POSITION.Client.x,
-    y: BehaviorPolicyNode.position.y + CANVAS_POSITION.Client.y,
+    x: behaviorPolicyNode.position.x + CANVAS_POSITION.Client.x,
+    y: behaviorPolicyNode.position.y + CANVAS_POSITION.Client.y,
   }
 
   const topicNode: Node<ClientFilterData> = {
@@ -66,6 +60,8 @@ export const loadClientFilter = (behaviorPolicy: BehaviorPolicy, store: Workspac
     },
   }
 
-  onNodesChange([{ item: topicNode, type: 'add' } as NodeAddChange])
-  onConnect({ source: topicNode.id, target: BehaviorPolicyNode.id, sourceHandle: null, targetHandle: null })
+  return [
+    { item: topicNode, type: 'add' },
+    { source: topicNode.id, target: behaviorPolicyNode.id, sourceHandle: null, targetHandle: null },
+  ]
 }

hivemq-edge/src/frontend/src/extensions/datahub/designer/data_policy/DataPolicyNode.utils.ts

@@ -1,7 +1,7 @@
 import { getIncomers, getOutgoers, Node, NodeAddChange, XYPosition } from 'reactflow'
 
 import { DataPolicy, DataPolicyValidator, PolicyOperation } from '@/api/__generated__'
-import { DataHubNodeType, DataPolicyData, DryRunResults, WorkspaceAction, WorkspaceState } from '@datahub/types.ts'
+import { DataHubNodeType, DataPolicyData, DryRunResults, WorkspaceState } from '@datahub/types.ts'
 import { PolicyCheckErrors } from '@datahub/designer/validation.errors.ts'
 import { isTopicFilterNodeType } from '@datahub/utils/node.utils.ts'
 
@@ -115,9 +115,7 @@ export const checkValidityDataPolicy = (
   }
 }
 
-export const loadDataPolicy = (policy: DataPolicy, store: WorkspaceState & WorkspaceAction) => {
-  const { onNodesChange } = store
-
+export const loadDataPolicy = (policy: DataPolicy): NodeAddChange => {
   const position: XYPosition = {
     x: 0,
     y: 0,
@@ -130,5 +128,5 @@ export const loadDataPolicy = (policy: DataPolicy, store: WorkspaceState & Works
     data: {},
   }
 
-  onNodesChange([{ item: dataPolicyNode, type: 'add' } as NodeAddChange])
+  return { item: dataPolicyNode, type: 'add' }
 }

hivemq-edge/src/frontend/src/extensions/datahub/designer/operation/OperationNode.utils.ts

@@ -2,7 +2,14 @@ import { Connection, getConnectedEdges, getIncomers, Node, NodeAddChange, XYPosi
 
 import i18n from '@/config/i18n.config.ts'
 
-import { BehaviorPolicy, DataPolicy, PolicyOperation, Schema, SchemaReference, Script } from '@/api/__generated__'
+import {
+  BehaviorPolicyOnTransition,
+  DataPolicy,
+  PolicyOperation,
+  Schema,
+  SchemaReference,
+  Script,
+} from '@/api/__generated__'
 import {
   DataHubNodeType,
   DataPolicyData,
@@ -12,7 +19,6 @@ import {
   PolicyOperationArguments,
   ResourceStatus,
   TransitionData,
-  WorkspaceAction,
   WorkspaceState,
 } from '@datahub/types.ts'
 import {
@@ -96,11 +102,11 @@ export function checkValidityTransformFunction(
   }
 
   const { transform } = operationNode.data.formData as unknown as OperationData.DataHubTransformType
-  const defaultOrder = transform.length ? transform : scriptNodes.map((e) => e.data?.id)
+  const defaultOrder = transform.length ? transform : scriptNodes.map((scriptNode) => scriptNode.data?.id)
 
   const allTransformScripts: DryRunResults<PolicyOperation, Script>[] = []
   for (const scriptId of defaultOrder) {
-    const script = scriptNodes.find((e) => e.data?.id === scriptId)
+    const script = scriptNodes.find((scriptNode) => scriptNode.data?.id === scriptId)
     if (script) {
       const scriptName = script.node as Node<FunctionData>
 
@@ -222,52 +228,66 @@ export function checkValidityPipeline(
 }
 
 export const loadBehaviorPolicyPipelines = (
-  behaviorPolicy: BehaviorPolicy,
-  transitionNode: Node,
+  behaviorPolicyTransition: BehaviorPolicyOnTransition,
+  transitionNode: Node<TransitionData>,
   schemas: Schema[],
-  scripts: Script[],
-  store: WorkspaceState & WorkspaceAction
+  scripts: Script[]
 ) => {
-  for (const transition of behaviorPolicy.onTransitions || []) {
-    const activeTransition = getActiveTransition(transition)
-    if (!activeTransition)
-      throw new Error(i18n.t('datahub:error.loading.operation.noTransition', { source: activeTransition }) as string)
+  const activeTransition = getActiveTransition(behaviorPolicyTransition)
+  if (!activeTransition)
+    throw new Error(i18n.t('datahub:error.loading.operation.noTransition', { source: activeTransition }) as string)
 
-    const transitionOnEvent = transition[activeTransition]
-    if (!transitionOnEvent)
-      throw new Error(i18n.t('datahub:error.loading.operation.noTransition', { source: activeTransition }) as string)
+  const transitionOnEvent = behaviorPolicyTransition[activeTransition]
+  if (!transitionOnEvent)
+    throw new Error(i18n.t('datahub:error.loading.operation.noTransition', { source: activeTransition }) as string)
 
-    loadPipeline(transitionNode, transitionOnEvent.pipeline, null, schemas, scripts, store)
-  }
+  return loadPipeline(transitionNode, transitionOnEvent.pipeline, null, schemas, scripts)
 }
 
 export const loadDataPolicyPipelines = (
   policy: DataPolicy,
   schemas: Schema[],
   scripts: Script[],
-  store: WorkspaceState & WorkspaceAction
+  dataPolicyNode: Node<DataPolicyData>
 ) => {
-  const dataNode = store.nodes.find((node) => node.id === policy.id)
-  if (!dataNode)
+  if (dataPolicyNode.id !== policy.id)
     throw new Error(
       i18n.t('datahub:error.loading.connection.notFound', { type: DataHubNodeType.DATA_POLICY }) as string
     )
 
-  if (policy.onSuccess && policy.onSuccess.pipeline)
-    loadPipeline(dataNode, policy.onSuccess.pipeline, DataPolicyData.Handle.ON_SUCCESS, schemas, scripts, store)
-  if (policy.onFailure && policy.onFailure.pipeline)
-    loadPipeline(dataNode, policy.onFailure.pipeline, DataPolicyData.Handle.ON_ERROR, schemas, scripts, store)
+  const newNodes: (NodeAddChange | Connection)[] = []
+
+  if (policy.onSuccess && policy.onSuccess.pipeline) {
+    const res = loadPipeline(
+      dataPolicyNode,
+      policy.onSuccess.pipeline,
+      DataPolicyData.Handle.ON_SUCCESS,
+      schemas,
+      scripts
+    )
+    newNodes.push(...res)
+  }
+  if (policy.onFailure && policy.onFailure.pipeline) {
+    const res = loadPipeline(
+      dataPolicyNode,
+      policy.onFailure.pipeline,
+      DataPolicyData.Handle.ON_ERROR,
+      schemas,
+      scripts
+    )
+    newNodes.push(...res)
+  }
+
+  return newNodes
 }
 
 export const loadPipeline = (
   parentNode: Node,
   pipeline: Array<PolicyOperation>,
   handle: DataPolicyData.Handle | null,
   schemas: Schema[],
-  scripts: Script[],
-  store: WorkspaceState & WorkspaceAction
+  scripts: Script[]
 ) => {
-  const { onAddNodes, onConnect } = store
   if (!parentNode)
     throw new Error(i18n.t('datahub:error.loading.schema.unknown', { type: DataHubNodeType.DATA_POLICY }) as string)
 
@@ -283,6 +303,8 @@ export const loadPipeline = (
     return position
   }
 
+  const newNodes: (NodeAddChange | Connection)[] = []
+
   let connect: Connection = {
     source: parentNode.id,
     target: null,
@@ -320,24 +342,25 @@ export const loadPipeline = (
             },
           }
 
-          loadSchema(
+          const deserialisers = loadSchema(
             operationNode,
             OperationData.Handle.DESERIALISER,
             -200,
             deserializer.arguments as SchemaReference,
-            schemas,
-            store
+            schemas
           )
-          loadSchema(
+          const serialisers = loadSchema(
             operationNode,
             OperationData.Handle.SERIALISER,
             200,
             policyOperation.arguments as SchemaReference,
-            schemas,
-            store
+            schemas
           )
 
-          loadScripts(operationNode, functions, scripts, store)
+          const allScripts = loadScripts(operationNode, functions, scripts)
+          newNodes.push(...deserialisers)
+          newNodes.push(...serialisers)
+          newNodes.push(...allScripts)
         }
         break
       default:
@@ -355,8 +378,7 @@ export const loadPipeline = (
 
     if (!operationNode) throw new Error(i18n.t('datahub:error.loading.operation.unknown') as string)
     if (!Array.isArray(operationNode)) {
-      onAddNodes([{ item: operationNode, type: 'add' } as NodeAddChange])
-      onConnect({ ...connect, target: operationNode.id })
+      newNodes.push({ item: operationNode, type: 'add' }, { ...connect, target: operationNode.id })
       connect = {
         source: operationNode.id,
         target: null,
@@ -366,4 +388,6 @@ export const loadPipeline = (
       operationNode = undefined
     }
   }
+
+  return newNodes
 }