pretty display structured logs

Author: jsajal

package.json

@@ -64,6 +64,7 @@
     "react-dom": "^18.2.0",
     "react-edit-text": "^5.1.1",
     "react-icons": "^5.0.1",
+    "react-json-view-lite": "^1.4.0",
     "react-perfect-scrollbar": "^1.5.8",
     "react-router": "^6.15.0",
     "react-router-dom": "^6.22.2",

pnpm-lock.yaml

@@ -159,7 +159,7 @@ class Graph {
         const sNode = new setVarNode(node.data, prevNodeOutputData, this.envVariables);
         const newVariable = sNode.evaluate();
         if (newVariable != undefined) {
-          this.logger.add(LogLevel.INFO, 'Set Variable', {
+          this.logger.add(LogLevel.INFO, '', {
             type: 'setVarNode',
             data: {
               name: Object.keys(newVariable)[0],
@@ -177,7 +177,6 @@ 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) {

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

@@ -52,7 +52,7 @@ class assertNode extends Node {
       default:
         throw 'Unsupported operator';
     }
-    this.logger.add(LogLevel.INFO, '', { type: 'assertNode', data: { var1, var2, result } });
+    this.logger.add(LogLevel.INFO, '', { type: 'assertNode', data: { var1, var2, operator, result } });
 
     return result;
   }

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

@@ -13,6 +13,9 @@ import 'react-sliding-pane/dist/react-sliding-pane.css';
 import TimeoutSelector from 'components/atoms/common/TimeoutSelector';
 import { timeoutForGraphRun } from 'components/molecules/flow/utils';
 import HorizontalDivider from 'components/atoms/common/HorizontalDivider';
+import { JsonView, allExpanded, collapseAllNested, darkStyles, defaultStyles } from 'react-json-view-lite';
+import 'react-json-view-lite/dist/index.css';
+import { LogLevel } from '../flow/graph/GraphLogger';
 
 const TabPanelHeader = () => {
   const focusTabId = useTabStore((state) => state.focusTabId);
@@ -31,6 +34,84 @@ const TabPanelHeader = () => {
 
   const [generateFlowTestModalOpen, setGenerateFlowTestModalOpen] = useState(false);
 
+  const renderLog = (log) => {
+    if (log.logLevel === LogLevel.INFO) {
+      let message = '';
+      let json = undefined;
+      if (log.message.trim() != '') {
+        message = log.message;
+      }
+
+      if (log.node != undefined) {
+        const type = log.node.type;
+        if (type === 'outputNode') {
+          json = {
+            output: log.node.data,
+          };
+        }
+
+        if (type === 'assertNode') {
+          const data = log.node.data;
+          message = `Assert : ${data.var1} ${data.operator} ${data.var2} = ${data.result}`;
+        }
+
+        if (type === 'delayNode') {
+          message = `Waiting for ${log.node.data} ms`;
+        }
+
+        if (type === 'setVarNode') {
+          const data = log.node.data;
+          message = `Setting Variable:  ${data.name} = ${data.value}`;
+        }
+
+        if (type === 'requestNode') {
+          const data = log.node.data;
+          message = `${data.request.type.toUpperCase()} ${data.request.url}`;
+          json = data;
+        }
+      }
+
+      return (
+        <div className='flex flex-col items-start'>
+          <div className='flex flex-row items-start'>
+            <div>
+              <p style={{ color: 'red' }}>{log.timestamp}</p>
+            </div>
+            <div>
+              <p> : {message}</p>
+            </div>
+          </div>
+          <div>
+            {json != undefined ? (
+              <React.Fragment>
+                <JsonView data={json} shouldExpandNode={collapseAllNested} style={defaultStyles} />
+              </React.Fragment>
+            ) : (
+              <></>
+            )}
+          </div>
+        </div>
+      );
+    } else {
+      return (
+        <div className='flex flex-col items-start'>
+          <p style={{ color: 'red' }}>
+            {log.timestamp} : {log.message}
+          </p>
+          <div>
+            {log.node != undefined ? (
+              <React.Fragment>
+                <JsonView data={log.node.data} shouldExpandNode={collapseAllNested} style={defaultStyles} />
+              </React.Fragment>
+            ) : (
+              <></>
+            )}
+          </div>
+        </div>
+      );
+    }
+  };
+
   return (
     <>
       {focusTab ? (
@@ -97,11 +178,9 @@ const TabPanelHeader = () => {
                       aria-label='close sidebar'
                       className='drawer-overlay'
                     ></label>
-                    <ul className='min-h-full p-4 menu w-80 bg-base-200 text-base-content'>
+                    <ul className='min-h-full p-4 menu bg-base-200 text-base-content'>
                       {graphRunLogs.map((item, index) => (
-                        <li key={index}>
-                          <a>{JSON.stringify(item)}</a>
-                        </li>
+                        <li key={index}>{renderLog(item)}</li>
                       ))}
                     </ul>
                   </SlidingPane>