extract out graph run as separate component

Author: jsajal

src/components/molecules/flow/graph/Graph.js

@@ -2,26 +2,27 @@
 
 import { cloneDeep } from 'lodash';
 import { readFlowTestSync } from 'service/collection';
-import useCanvasStore from 'stores/CanvasStore';
 import authNode from './compute/authnode';
 import nestedFlowNode from './compute/nestedflownode';
 import assertNode from './compute/assertnode';
 import requestNode from './compute/requestnode';
 import setVarNode from './compute/setvarnode';
 import { LogLevel } from './GraphLogger';
+import { useTabStore } from 'stores/TabStore';
 
 class Graph {
-  constructor(nodes, edges, startTime, initialEnvVars, logger, caller, collectionPath) {
+  constructor(nodes, edges, startTime, initialEnvVars, logger, collectionPath, timeout, tab) {
     this.nodes = nodes;
     this.edges = edges;
     this.logger = logger;
-    this.timeout = useCanvasStore.getState().timeout;
+    this.timeout = timeout;
     this.startTime = startTime;
     this.graphRunNodeOutput = {};
     this.auth = undefined;
     this.envVariables = initialEnvVars;
-    this.caller = caller;
+    //this.caller = caller;
     this.collectionPath = collectionPath;
+    this.tab = tab;
   }
 
   #checkTimeout() {
@@ -71,8 +72,21 @@ class Graph {
 
       if (node.type === 'outputNode') {
         this.logger.add(LogLevel.INFO, '', { type: 'outputNode', data: { output: prevNodeOutputData } });
-        if (this.caller === 'main') {
-          useCanvasStore.getState().setOutputNode(node.id, prevNodeOutputData);
+        if (this.tab) {
+          const updatedNodes = this.nodes.map((nd) => {
+            if (nd.id === node.id) {
+              return {
+                ...nd,
+                data: {
+                  ...nd.data,
+                  output: prevNodeOutputData,
+                },
+              };
+            }
+
+            return nd;
+          });
+          useTabStore.getState().updateFlowTestNodes(updatedNodes);
         }
         result = {
           status: 'Success',
@@ -153,8 +167,9 @@ class Graph {
             this.startTime,
             this.envVariables,
             this.logger,
-            node.type,
+            //node.type,
             this.collectionPath,
+            this.timeout,
           );
           result = await cNode.evaluate();
           this.envVariables = result.envVars;
@@ -228,14 +243,20 @@ class Graph {
   }
 
   async run() {
-    // reset every output node for a fresh run
-    if (this.caller === 'main') {
-      this.nodes.forEach((node) => {
+    if (this.tab) {
+      const updatedNodes = this.nodes.map((node) => {
         if (node.type === 'outputNode') {
-          useCanvasStore.getState().unSetOutputNode(node.id);
+          if (node.data.output) {
+            const { ['output']: _, ...data } = node.data;
+            node.data = data;
+          }
         }
+
+        return node;
       });
+      useTabStore.getState().updateFlowTestNodes(updatedNodes);
     }
+
     this.graphRunNodeOutput = {};
 
     this.logger.add(LogLevel.INFO, 'Start Flowtest');

src/components/molecules/flow/graph/GraphRun.js

@@ -3,8 +3,10 @@ import GraphLogger, { LogLevel } from './GraphLogger';
 import Graph from './Graph';
 import { useTabStore } from 'stores/TabStore';
 import { cloneDeep } from 'lodash';
+import { uploadGraphRunLogs } from 'service/collection';
+import { toast } from 'react-toastify';
 
-export const graphRun = async (tab, nodes, edges, collectionPath, selectedEnv) => {
+export const graphRun = async (tab, nodes, edges, timeout, collectionPath, selectedEnv) => {
   useTabStore.getState().updateFlowTestRunStatus(tab.id, true);
 
   //runnableEdges(true);
@@ -26,13 +28,25 @@ export const graphRun = async (tab, nodes, edges, collectionPath, selectedEnv) =
       startTime,
       envVariables,
       logger,
-      'main',
+      //'main',
       collectionPath,
+      timeout,
+      tab,
     );
     const result = await g.run();
     const time = Date.now() - startTime;
     logger.add(LogLevel.INFO, `Total time: ${time} ms`);
+    //useTabStore.getState().updateFlowTestRunStatus(tab.id, false);
+    const logs = logger.get();
+    console.log(logs);
+    const response = await uploadGraphRunLogs(tab.name, result.status, time, logs);
+    useTabStore.getState().updateFlowTestLogs(tab.id, result.status, logs, response);
     useTabStore.getState().updateFlowTestRunStatus(tab.id, false);
+    if (result.status == 'Success') {
+      toast.success(`FlowTest Run Success!`);
+    } else if (result.status == 'Failed') {
+      toast.error(`FlowTest Run Failed!`);
+    }
     //await onGraphComplete(result.status, time, logger.get());
   } catch (error) {
     const time = Date.now() - startTime;

src/components/molecules/flow/graph/compute/authnode.js

@@ -3,25 +3,31 @@ import Node from './node';
 import { LogLevel } from '../GraphLogger';
 
 class authNode extends Node {
-  constructor(auth, envVariables, logger) {
+  constructor(nodeData, envVariables, logger) {
     super('authNode');
-    (this.auth = auth), (this.envVariables = envVariables);
+    (this.nodeData = nodeData), (this.envVariables = envVariables);
     this.logger = logger;
   }
 
   evaluate() {
     console.log('Evaluating an auth node');
-    if (this.auth.type === 'basic-auth') {
+    if (this.nodeData.type === 'basic-auth') {
       this.logger.add(LogLevel.INFO, '', { type: 'authNode', data: { authType: 'Basic Authentication' } });
-      this.auth.username = computeVariables(this.auth.username, this.envVariables);
-      this.auth.password = computeVariables(this.auth.password, this.envVariables);
+      const username = computeVariables(this.nodeData.username, this.envVariables);
+      const password = computeVariables(this.nodeData.password, this.envVariables);
 
-      return this.auth;
+      return {
+        type: 'basic-auth',
+        username,
+        password,
+      };
     } else if (this.auth.type === 'no-auth') {
       this.logger.add(LogLevel.INFO, '', { type: 'authNode', data: { authType: 'No Authentication' } });
-      return this.auth;
+      return {
+        type: 'no-auth',
+      };
     } else {
-      throw Error(`auth type: ${this.auth.type} is not valid`);
+      throw Error(`auth type: ${this.nodeData.type} is not valid`);
     }
   }
 }

src/components/molecules/flow/graph/compute/nestedflownode.js

@@ -2,9 +2,9 @@ import Graph1 from '../Graph';
 import Node from './node';
 
 class nestedFlowNode extends Node {
-  constructor(nodes, edges, startTime, initialEnvVars, logger, caller, collectionPath) {
+  constructor(nodes, edges, startTime, initialEnvVars, logger, collectionPath, timeout) {
     super('flowNode');
-    this.internalGraph = new Graph1(nodes, edges, startTime, initialEnvVars, logger, caller, collectionPath);
+    this.internalGraph = new Graph1(nodes, edges, startTime, initialEnvVars, logger, collectionPath, timeout);
   }
 
   async evaluate() {

src/components/molecules/flow/index.js

@@ -269,8 +269,9 @@ const Flow = ({ tab, collectionId }) => {
             const activeEnv = activeCollection?.environments.find((e) => e.name === useTabStore.getState().selectedEnv);
             const nodes = cloneDeep(reactFlowInstance.getNodes());
             const edges = cloneDeep(reactFlowInstance.getEdges());
+            const timeout = useCanvasStore.getState().timeout;
 
-            graphRun(tab, nodes, edges, activeCollection?.pathname, activeEnv);
+            graphRun(tab, nodes, edges, timeout, activeCollection?.pathname, activeEnv);
           }}
           // onClickHandle={async () => {
           //   runnableEdges(true);

src/stores/CanvasStore.js

@@ -392,42 +392,6 @@ const useCanvasStore = create((set, get) => ({
             },
           };
         }
-
-        return node;
-      }),
-    });
-    useTabStore.getState().updateFlowTestNodes(get().nodes);
-  },
-  setOutputNode: (nodeId, output) => {
-    set({
-      nodes: get().nodes.map((node) => {
-        if (node.id === nodeId) {
-          // it's important to create a new object here, to inform React Flow about the cahnges
-          return {
-            ...node,
-            data: {
-              ...node.data,
-              output,
-            },
-          };
-        }
-
-        return node;
-      }),
-    });
-    useTabStore.getState().updateFlowTestNodes(get().nodes);
-  },
-  unSetOutputNode: (nodeId) => {
-    set({
-      nodes: get().nodes.map((node) => {
-        if (node.id === nodeId) {
-          // it's important to create a new object here, to inform React Flow about the cahnges
-          if (node.data.output) {
-            const { ['output']: _, ...data } = node.data;
-            node.data = data;
-          }
-        }
-
         return node;
       }),
     });