Log more structued information when running graph

jsajal · jsajal · commit 9f73ae1da2bf · 2024-05-31T22:09:21.000-07:00
diff --git a/packages/flowtest-electron/src/ipc/collection.js b/packages/flowtest-electron/src/ipc/collection.js
@@ -303,6 +303,7 @@ const registerRendererEventHandlers = (mainWindow, watcher) => {
         status: result.status,
         statusText: result.statusText,
         data: result.data,
+        headers: result.headers,
       };
     } catch (error) {
       if (error?.response) {
diff --git a/src/components/molecules/flow/graph/Graph.js b/src/components/molecules/flow/graph/Graph.js
@@ -8,12 +8,13 @@ import complexNode from './compute/complexnode';
 import assertNode from './compute/assertnode';
 import requestNode from './compute/requestnode';
 import setVarNode from './compute/setvarnode';
+import { LogLevel } from './GraphLogger';
 
 class Graph {
-  constructor(nodes, edges, startTime, initialEnvVars, initialLogs) {
+  constructor(nodes, edges, startTime, initialEnvVars, logger) {
     this.nodes = nodes;
     this.edges = edges;
-    this.logs = initialLogs;
+    this.logger = logger;
     this.timeout = useCanvasStore.getState().timeout;
     this.startTime = startTime;
     this.graphRunNodeOutput = {};
@@ -67,7 +68,8 @@ class Graph {
       console.debug('Executing node: ', node);
 
       if (node.type === 'outputNode') {
-        this.logs.push(`Output: ${JSON.stringify(prevNodeOutputData)}`);
+        //this.logs.push(`Output: ${JSON.stringify(prevNodeOutputData)}`);
+        this.logger.add(LogLevel.INFO, '', { type: 'outputNode', data: prevNodeOutputData });
         useCanvasStore.getState().setOutputNode(node.id, prevNodeOutputData);
         result = {
           status: 'Success',
@@ -81,17 +83,15 @@ class Graph {
           node.data.variables,
           prevNodeOutputData,
           this.envVariables,
-          this.logs,
+          this.logger,
         );
         if (eNode.evaluate()) {
-          this.logs.push('Result: true');
           result = {
             status: 'Success',
             data: prevNodeOutputData,
             output: true,
           };
         } else {
-          this.logs.push('Result: false');
           result = {
             status: 'Success',
             data: prevNodeOutputData,
@@ -106,7 +106,7 @@ class Graph {
           return new Promise((resolve) => setTimeout(resolve, Math.min(ms, this.timeout)));
         };
         await wait(delay);
-        this.logs.push(`Wait for: ${delay} ms`);
+        this.logger.add(LogLevel.INFO, '', { type: 'delayNode', data: delay });
         result = {
           status: 'Success',
         };
@@ -121,7 +121,7 @@ class Graph {
       }
 
       if (node.type === 'requestNode') {
-        const rNode = new requestNode(node.data, prevNodeOutputData, this.envVariables, this.auth, this.logs);
+        const rNode = new requestNode(node.data, prevNodeOutputData, this.envVariables, this.auth, this.logger);
         result = await rNode.evaluate();
         // add post response variables if any
         if (result.postRespVars) {
@@ -140,7 +140,7 @@ class Graph {
             cloneDeep(flowData.edges),
             this.startTime,
             this.envVariables,
-            this.logs,
+            this.logger,
           );
           result = await cNode.evaluate();
           this.envVariables = result.envVars;
@@ -155,7 +155,13 @@ class Graph {
         const sNode = new setVarNode(node.data, prevNodeOutputData, this.envVariables);
         const newVariable = sNode.evaluate();
         if (newVariable != undefined) {
-          this.logs.push(`Evaluate variable: ${JSON.stringify(newVariable)}`);
+          this.logger.add(LogLevel.INFO, 'Set Variable', {
+            type: 'setVarNode',
+            data: {
+              name: Object.keys(newVariable)[0],
+              value: newVariable[Object.keys(newVariable)[0]],
+            },
+          });
           this.envVariables = {
             ...this.envVariables,
             ...newVariable,
@@ -167,17 +173,18 @@ class Graph {
       }
 
       if (this.#checkTimeout()) {
+        this.logger.add(LogLevel.ERROR, `Timeout of ${this.timeout} ms exceeded, stopping graph run`, node);
         throw `Timeout of ${this.timeout} ms exceeded, stopping graph run`;
       }
     } catch (err) {
-      this.logs.push(`Flow failed at: ${JSON.stringify(node)} due to ${err}`);
+      this.logger.add(LogLevel.ERROR, `Flow failed due to ${err}`, node);
       return {
         status: 'Failed',
       };
     }
 
     if (result === undefined) {
-      this.logs.push(`Flow failed at: ${JSON.stringify(node)}`);
+      this.logger.add(LogLevel.ERROR, 'Flow failed due to failure to evaluate result', node);
       return {
         status: 'Failed',
       };
@@ -208,11 +215,11 @@ class Graph {
     });
     this.graphRunNodeOutput = {};
 
-    this.logs.push('Start Flowtest');
+    this.logger.add(LogLevel.INFO, 'Start Flowtest');
     const startNode = this.nodes.find((node) => node.type === 'startNode');
     if (startNode == undefined) {
-      this.logs.push('No start node found');
-      this.logs.push('End Flowtest');
+      this.logger.add(LogLevel.INFO, 'No start node found');
+      this.logger.add(LogLevel.INFO, 'End Flowtest');
       return {
         status: 'Success',
         logs: this.logs,
@@ -228,18 +235,14 @@ class Graph {
       // if (result.status == 'Failed') {
       //   console.debug('Flow failed at: ', result.node);
       // }
-      this.logs.push('End Flowtest');
+      this.logger.add(LogLevel.INFO, 'End Flowtest');
       return {
         status: result.status,
-        logs: this.logs,
-        envVars: this.envVariables,
       };
     } else {
-      this.logs.push('End Flowtest');
+      this.logger.add(LogLevel.INFO, 'End Flowtest');
       return {
         status: 'Success',
-        logs: this.logs,
-        envVars: this.envVariables,
       };
     }
   }
diff --git a/src/components/molecules/flow/graph/GraphLogger.js b/src/components/molecules/flow/graph/GraphLogger.js
@@ -0,0 +1,26 @@
+export const LogLevel = Object.freeze({
+  INFO: 0,
+  WARN: 1,
+  ERROR: 2,
+});
+
+class GraphLogger {
+  constructor() {
+    this.logs = [];
+  }
+
+  add(logLevel, message, node) {
+    this.logs.push({
+      logLevel,
+      timestamp: new Date().toISOString(),
+      message,
+      node,
+    });
+  }
+
+  get() {
+    return this.logs;
+  }
+}
+
+export default GraphLogger;
diff --git a/src/components/molecules/flow/graph/compute/assertnode.js b/src/components/molecules/flow/graph/compute/assertnode.js
@@ -1,14 +1,15 @@
 import AssertOperators from '../../constants/assertOperators';
 import { computeNodeVariable } from './utils';
 import Node from './node';
+import { LogLevel } from '../GraphLogger';
 
 class assertNode extends Node {
-  constructor(operator, variables, prevNodeOutputData, envVariables, logs) {
+  constructor(operator, variables, prevNodeOutputData, envVariables, logger) {
     super('assertNode');
     this.operator = operator;
     this.variables = variables;
     this.prevNodeOutputData = prevNodeOutputData;
-    this.logs = logs;
+    this.logger = logger;
     this.envVariables = envVariables;
   }
 
@@ -33,18 +34,27 @@ class assertNode extends Node {
     if (operator == undefined) {
       throw 'Operator undefined';
     }
-    this.logs.push(
-      `Assert var1: ${JSON.stringify(var1)} of type: ${typeof var1}, var2: ${JSON.stringify(var2)} of type: ${typeof var2} with operator: ${operator}`,
-    );
-    if (operator == AssertOperators.isEqualTo) {
-      return var1 === var2;
-    } else if (operator == AssertOperators.isNotEqualTo) {
-      return var1 != var2;
-    } else if (operator == AssertOperators.isGreaterThan) {
-      return var1 > var2;
-    } else if (operator == AssertOperators.isLessThan) {
-      return var1 < var2;
+
+    let result;
+    switch (operator) {
+      case AssertOperators.isEqualTo:
+        result = var1 === var2;
+        break;
+      case AssertOperators.isNotEqualTo:
+        result = var1 != var2;
+        break;
+      case AssertOperators.isGreaterThan:
+        result = var1 > var2;
+        break;
+      case AssertOperators.isLessThan:
+        result = var1 < var2;
+        break;
+      default:
+        throw 'Unsupported operator';
     }
+    this.logger.add(LogLevel.INFO, '', { type: 'assertNode', data: { var1, var2, result } });
+
+    return result;
   }
 }
 
diff --git a/src/components/molecules/flow/graph/compute/complexnode.js b/src/components/molecules/flow/graph/compute/complexnode.js
@@ -2,9 +2,9 @@ import Graph1 from '../Graph';
 import Node from './node';
 
 class complexNode extends Node {
-  constructor(nodes, edges, startTime, initialEnvVars, initialLogs) {
+  constructor(nodes, edges, startTime, initialEnvVars, logger) {
     super('complexNode');
-    this.internalGraph = new Graph1(nodes, edges, startTime, initialEnvVars, initialLogs);
+    this.internalGraph = new Graph1(nodes, edges, startTime, initialEnvVars, logger);
   }
 
   async evaluate() {
diff --git a/src/components/molecules/flow/graph/compute/requestnode.js b/src/components/molecules/flow/graph/compute/requestnode.js
@@ -1,14 +1,15 @@
 import { computeNodeVariables, computeVariables } from '../compute/utils';
+import { LogLevel } from '../GraphLogger';
 import Node from './node';
 
 class requestNode extends Node {
-  constructor(nodeData, prevNodeOutputData, envVariables, auth, logs) {
+  constructor(nodeData, prevNodeOutputData, envVariables, auth, logger) {
     super('requestNode');
     this.nodeData = nodeData;
     this.prevNodeOutputData = prevNodeOutputData;
     this.envVariables = envVariables;
     this.auth = auth;
-    this.logs = logs;
+    this.logger = logger;
   }
 
   async evaluate() {
@@ -32,28 +33,37 @@ class requestNode extends Node {
     const res = await this.runHttpRequest(options);
 
     if (res.error) {
-      //console.debug('Failure at node: ', node);
-      //console.debug('Error encountered: ', JSON.stringify(res.error));
-      this.logs.push(`Request failed: ${JSON.stringify(res.error)}`);
+      this.logger.add(LogLevel.ERROR, 'HTTP request failed', {
+        type: 'requestNode',
+        data: { request: { type: options.method, url: options.url }, response: res.error, preReqVars: evalVariables },
+      });
       return {
         status: 'Failed',
-        //node,
       };
     } else {
-      this.logs.push(`Request successful: ${JSON.stringify(res)}`);
-      console.debug('Response: ', JSON.stringify(res));
       if (this.nodeData.postRespVars) {
         const evalPostRespVars = computeNodeVariables(this.nodeData.postRespVars, res.data);
+        this.logger.add(LogLevel.INFO, 'HTTP request success', {
+          type: 'requestNode',
+          data: {
+            request: { type: options.method, url: options.url },
+            response: res,
+            preReqVars: evalVariables,
+            postRespVars: evalPostRespVars,
+          },
+        });
         return {
           status: 'Success',
-          //node,
           data: res.data,
           postRespVars: evalPostRespVars,
         };
       }
+      this.logger.add(LogLevel.INFO, 'HTTP request success', {
+        type: 'requestNode',
+        data: { request: { type: options.method, url: options.url }, response: res, preReqVars: evalVariables },
+      });
       return {
         status: 'Success',
-        //node,
         data: res.data,
       };
     }
@@ -95,7 +105,6 @@ class requestNode extends Node {
       options.auth.password = this.auth.password;
     }
 
-    this.logs.push(`${restMethod} ${finalUrl}`);
     return options;
   }
 
diff --git a/src/components/molecules/flow/index.js b/src/components/molecules/flow/index.js
@@ -25,6 +25,7 @@ import SetVarNode from './nodes/SetVarNode';
 import { saveHandle } from '../modals/SaveFlowModal';
 import Button from 'components/atoms/common/Button';
 import { BUTTON_INTENT_TYPES, BUTTON_TYPES } from 'constants/Common';
+import GraphLogger, { LogLevel } from './graph/GraphLogger';
 
 const StartNode = () => (
   <FlowNode title='Start' handleLeft={false} handleRight={true} handleRightData={{ type: 'source' }}></FlowNode>
@@ -243,8 +244,6 @@ const Flow = ({ tab, collectionId }) => {
             runnableEdges(true);
             const startTime = Date.now();
             try {
-              let result = undefined;
-              let g = undefined;
               let envVariables = {};
 
               const activeEnv = useCollectionStore
@@ -256,22 +255,18 @@ const Flow = ({ tab, collectionId }) => {
               }
 
               // ============= flow =====================
-              g = new Graph(
+              const logger = new GraphLogger();
+              const g = new Graph(
                 cloneDeep(reactFlowInstance.getNodes()),
                 cloneDeep(reactFlowInstance.getEdges()),
                 startTime,
-                result ? result.envVars : envVariables,
-                result ? result.logs : [],
+                envVariables,
+                logger,
               );
-              result = await g.run();
+              const result = await g.run();
+              logger.add(LogLevel.INFO, `Total time: ${Date.now() - startTime} ms`);
 
-              if (result.status === 'Failed') {
-                onGraphComplete(result.status, result.logs);
-                return;
-              }
-
-              result.logs.push(`Total time: ${Date.now() - startTime} ms`);
-              onGraphComplete(result.status, result.logs);
+              onGraphComplete(result.status, logger.get());
             } catch (error) {
               toast.error(`Error running graph: ${error}`);
               runnableEdges(false);
diff --git a/src/components/molecules/headers/TabPanelHeader.js b/src/components/molecules/headers/TabPanelHeader.js
@@ -100,7 +100,7 @@ const TabPanelHeader = () => {
                     <ul className='min-h-full p-4 menu w-80 bg-base-200 text-base-content'>
                       {graphRunLogs.map((item, index) => (
                         <li key={index}>
-                          <a>{item}</a>
+                          <a>{JSON.stringify(item)}</a>
                         </li>
                       ))}
                     </ul>
