support log viewer json formatter on off (#1841)

electrode-io · Mar 12, 2021 · 1862bd4 · 1862bd4
1 parent 30d818f
commit 1862bd4
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 44 deletions.
diff --git a/packages/xarc-app-dev/src/lib/dev-admin/log-view.js b/packages/xarc-app-dev/src/lib/dev-admin/log-view.js
@@ -53,6 +53,7 @@ const Levels = {
 
 const themeArr = ["", "adventure", "acai", "monikai"];
 let curThemeIdx = 0;
+let isPrettyJSONEnabled = true;
 
 /**
  *
@@ -219,7 +220,7 @@ class HashValues {
   }
 }
 
-const hashVal = new HashValues();
+let hashVal = new HashValues();
 
 /**
  *
@@ -256,6 +257,18 @@ function toggleMeta() {
   }
 }
 
+/**
+ * @description turn on/off JSON prettier
+ */
+function toggleJSONPretty() {
+  isPrettyJSONEnabled = !isPrettyJSONEnabled;
+  clearLogs();
+  hashVal = new HashValues();
+  lastEntryId = { ts: 0, tx: 0 };
+  instanceId = -1;
+  startLogStream();
+}
+
 /**
  * @param levelSelections
  * @param scrollToEnd
@@ -340,57 +353,66 @@ function createMetaElement(level) {
   return newMeta;
 }
 
-/**
- * @param message log string
- * @return new span element with log info
- */
-
-function createLogElement(message) {
-  const newLog = document.createElement("span");
-  const matchArr = message.match(/{"[a-zA-Z0-9_]+":.+}/g);
+function getJSONInfo(msg) {
+  const matchArr = msg.match(/{"[a-zA-Z0-9_]+":.+}/g);
 
-  //  if it's json string, pretty it
   if (matchArr && matchArr.length !== 0) {
     try {
       const jsonStr = matchArr[0];
       const jsonObj = JSON.parse(jsonStr);
+      return { jsonStr: jsonStr, jsonObj: jsonObj, startIdx: msg.indexOf(jsonStr) };
+    } catch (e) {
+      return null;
+    }
+  } else {
+    return null;
+  }
+}
 
-      const startIndex = message.indexOf(jsonStr);
+function prettyJSON(jsonObj) {
+  const formatter = new JSONFormatter(jsonObj, 1, {
+    hoverPreviewEnabled: true,
+    hoverPreviewArrayCount: 10,
+    hoverPreviewFieldCount: 5,
+    theme: themeArr[curThemeIdx++],
+    animateOpen: true,
+    animateClose: true,
+    useToJSON: true
+  });
 
-      //  append message before JSON
-      if (startIndex) {
-        const msgBeforeJson = message.slice(0, startIndex);
-        const msgBeforeJsonDiv = document.createElement("div");
-        msgBeforeJsonDiv.innerHTML = msgBeforeJson;
-        newLog.appendChild(msgBeforeJsonDiv);
-      }
+  //  alternatively display different theme
+  if (curThemeIdx === themeArr.length) {
+    curThemeIdx = 0;
+  }
 
-      const formatter = new JSONFormatter(jsonObj, 1, {
-        hoverPreviewEnabled: true,
-        hoverPreviewArrayCount: 10,
-        hoverPreviewFieldCount: 5,
-        theme: themeArr[curThemeIdx++],
-        animateOpen: true,
-        animateClose: true,
-        useToJSON: true
-      });
-
-      //  alternatively display different theme
-      if (curThemeIdx === themeArr.length) {
-        curThemeIdx = 0;
-      }
+  return formatter.render();
+}
 
-      newLog.appendChild(formatter.render());
+/**
+ * @param message log string
+ * @return new span element with log info
+ */
+function createLogElement(message) {
+  const newLog = document.createElement("span");
 
-      //  append message after JSON
-      if (startIndex + jsonStr.length !== message.length) {
-        const msgAfterJson = message.slice(startIndex + jsonStr.length);
-        const msgAfterJsonDiv = document.createElement("div");
-        msgAfterJsonDiv.innerHTML = msgAfterJson;
-        newLog.appendChild(msgAfterJsonDiv);
-      }
-    } catch (e) {
-      newLog.innerHTML = message;
+  const jsonInfo = getJSONInfo(message);
+  if (jsonInfo && isPrettyJSONEnabled) {
+    //  append message before JSON
+    if (jsonInfo.startIdx) {
+      const msgBeforeJson = message.slice(0, jsonInfo.startIdx);
+      const msgBeforeJsonDiv = document.createElement("div");
+      msgBeforeJsonDiv.innerHTML = msgBeforeJson;
+      newLog.appendChild(msgBeforeJsonDiv);
+    }
+
+    newLog.appendChild(prettyJSON(jsonInfo.jsonObj));
+
+    //  append message after JSON
+    if (jsonInfo.startIdx + jsonInfo.jsonStr.length !== message.length) {
+      const msgAfterJson = message.slice(jsonInfo.startIdx + jsonInfo.jsonStr.length);
+      const msgAfterJsonDiv = document.createElement("div");
+      msgAfterJsonDiv.innerHTML = msgAfterJson;
+      newLog.appendChild(msgAfterJsonDiv);
     }
   } else {
     newLog.innerHTML = message;
@@ -546,9 +568,13 @@ window.addEventListener("keypress", event => {
     wipeLogs();
   }
 
-  if (event.ctrlKey && event.code === "KeyH") {
+  if (event.ctrlKey && event.code === "KeyM") {
     toggleMeta();
   }
+
+  if (event.ctrlKey && event.code === "KeyJ") {
+    toggleJSONPretty();
+  }
 });
 
 lastEntryId = parseEntryId(hashVal.get("entryId") || "0");

diff --git a/packages/xarc-app-dev/src/lib/dev-admin/log.html b/packages/xarc-app-dev/src/lib/dev-admin/log.html
@@ -90,7 +90,8 @@
   </head>
   <body>
     <div id="controls" class="navbar">
-      <button type="button" onclick="toggleMeta();">Hide/Show Meta Info [Ctrl+H]</button>
+      <button type="button" onclick="toggleMeta();">Hide/Show Meta Info [Ctrl+M]</button>
+      <button type="button" onclick="toggleJSONPretty();">Turn On/Off JSON Prettier [Ctrl+J]</button>
       <button type="button" onclick="displayLogs();">Refresh Logs</button>
       <button type="button" onclick="wipeLogs();">Wipe Logs [Ctrl+K]</button>
       <label>