feat: Improvements for indexer function execution Logging (#76)

* feat: group blocks in console window + remove warning * feat: Show Mutation + query details better * feat: Show indexer function completion time in browser * chore: improve console.log message * feat: Add explicity field for data returned by mutation/query * chore: remove unnessary logging * feat: show user an info warning to let them know how mutations and queries function * feat: context.set logging * refactor: refactor logging into IndexerRunner + put warning for mutations + fix time calculation * feat: name of operation in the group name * refactor: rename class
near · May 25, 2023 · f0971ad · f0971ad
1 parent 4dc8819
commit f0971ad
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 41 deletions.
diff --git a/frontend/src/components/Editor/Editor.js b/frontend/src/components/Editor/Editor.js
@@ -9,16 +9,14 @@ import { queryIndexerFunctionDetails } from "../../utils/queryIndexerFunction";
 import { Alert } from "react-bootstrap";
 import primitives from "!!raw-loader!../../../primitives.d.ts";
 import { request, useInitialPayload } from "near-social-bridge";
-import Indexer from "../../utils/indexerRunner";
+import IndexerRunner from "../../utils/indexerRunner";
 import { block_details } from "./block_details";
 import ResizableLayoutEditor from "./ResizableLayoutEditor";
 import { ResetChangesModal } from "../Modals/resetChanges";
 import { FileSwitcher } from "./FileSwitcher";
 import EditorButtons from "./EditorButtons";
 import { PublishModal } from "../Modals/PublishModal";
 const BLOCKHEIGHT_LIMIT = 3600;
-const BLOCK_FETCHER_API =
-  "https://70jshyr5cb.execute-api.eu-central-1.amazonaws.com/block/";
 
 const contractRegex = RegExp(
   "^(([a-zd]+[-_])*[a-zd]+.)*([a-zd]+[-_])*[a-zd]+$"
@@ -38,16 +36,17 @@ const Editor = ({
   const [originalSQLCode, setOriginalSQLCode] = useState(defaultSchema);
   const [originalIndexingCode, setOriginalIndexingCode] = useState(defaultCode);
   const [debugMode, setDebugMode] = useState(false);
-  const [logs, setLogs] = useState([]);
   const [heights, setHeights] = useState([]);
   const [showPublishModal, setShowPublishModal] = useState(false);
   const [debugModeInfoDisabled, setDebugModeInfoDisabled] = useState(false);
-  const handleLog = (blockHeight, log) => {
-    console.log(`Block #${blockHeight}: ${log}`);
-    setLogs((prevLogs) => [...prevLogs, log]);
+  const handleLog = (blockHeight, log, callback) => {
+    if(log) console.log(log);
+    if (callback) {
+      callback();
+    }
   };
 
-  const indexerRunner = new Indexer(handleLog);
+  const indexerRunner = new IndexerRunner(handleLog);
 
   const [indexingCode, setIndexingCode] = useState(defaultCode);
   const [schema, setSchema] = useState(defaultSchema);
@@ -272,7 +271,6 @@ const Editor = ({
     const modifiedEditor = editor.getModifiedEditor();
     modifiedEditor.onDidChangeModelContent((_) => {
       if (fileName == "indexingLogic.js") {
-        console.log("mountin");
         setIndexingCode(modifiedEditor.getValue());
       }
       if (fileName == "schema.sql") {
@@ -303,28 +301,8 @@ const Editor = ({
     }
   }
 
-  async function fetchBlockDetails(blockHeight) {
-    try {
-      const response = await fetch(
-        `${BLOCK_FETCHER_API}${String(blockHeight)}`
-      );
-      const block_details = await response.json();
-      return block_details;
-    } catch {
-      console.log(`Error Fetching Block Height details at ${blockHeight}`);
-    }
-  }
-
   async function executeIndexerFunction() {
-    setLogs(() => []);
-    let innerCode = indexingCode.match(/getBlock\s*\([^)]*\)\s*{([\s\S]*)}/)[1];
-    // for loop with await
-    for await (const height of heights) {
-      const block_details = await fetchBlockDetails(height);
-      if (block_details) {
-        await indexerRunner.runFunction(block_details, height, innerCode);
-      }
-    }
+    await indexerRunner.executeIndexerFunction(heights,indexingCode)
   }
 
   return (
@@ -431,7 +409,6 @@ const Editor = ({
           options={options}
           handleEditorWillMount={handleEditorWillMount}
           handleEditorMount={handleEditorMount}
-          logs={logs}
         />
       </div>
     </div>

diff --git a/frontend/src/components/Editor/ResizableLayoutEditor.jsx b/frontend/src/components/Editor/ResizableLayoutEditor.jsx
@@ -139,7 +139,6 @@ export default function ResizableLayoutEditor({
   options,
   handleEditorWillMount,
   handleEditorMount,
-  logs,
 }) {
   const {
     dragBarRef: dragBarRefConsole,

diff --git a/frontend/src/components/Playground/graphiql.jsx b/frontend/src/components/Playground/graphiql.jsx
@@ -7,7 +7,6 @@ const HASURA_ENDPOINT =
   "https://queryapi-hasura-graphql-24ktefolwq-ew.a.run.app/v1/graphql";
 
 const graphQLFetcher = async (graphQLParams, accountId) => {
-  console.log(HASURA_ENDPOINT, "Hashura Endpoint");
   const response = await fetch(HASURA_ENDPOINT, {
     method: "post",
     credentials: "omit",

diff --git a/frontend/src/utils/fetchBlock.js b/frontend/src/utils/fetchBlock.js
@@ -0,0 +1,14 @@
+const BLOCK_FETCHER_API =
+  "https://70jshyr5cb.execute-api.eu-central-1.amazonaws.com/block/";
+
+export async function fetchBlockDetails(blockHeight) {
+    try {
+      const response = await fetch(
+        `${BLOCK_FETCHER_API}${String(blockHeight)}`
+      );
+      const block_details = await response.json();
+      return block_details;
+    } catch {
+      console.log(`Error Fetching Block Height details at ${blockHeight}`);
+    }
+  }
diff --git a/frontend/src/utils/indexerRunner.js b/frontend/src/utils/indexerRunner.js
@@ -1,10 +1,35 @@
 import { Block } from "@near-lake/primitives";
 import { Buffer } from "buffer";
+import {fetchBlockDetails} from "./fetchBlock";
+
 global.Buffer = Buffer;
-export default class Indexer {
+export default class IndexerRunner {
   constructor(handleLog) {
     this.handleLog = handleLog;
   }
+
+  async executeIndexerFunction(heights, indexingCode) {
+    console.clear()
+    console.group('%c Welcome! Lets test your indexing logic on some Near Blocks!', 'color: white; background-color: navy; padding: 5px;');
+    if(heights.length === 0) {
+      console.warn("No Block Heights Selected")
+    }
+    console.log("Note: GraphQL Mutations & Queries will not be executed on your database. They will simply return an empty object. Please keep this in mind as this may cause unintended behavior of your indexer function.")
+    let innerCode = indexingCode.match(/getBlock\s*\([^)]*\)\s*{([\s\S]*)}/)[1];
+    // for loop with await
+    for await (const height of heights) {
+      console.group(`Block Height #${height}`)
+      const block_details = await fetchBlockDetails(height);
+      console.time('Indexing Execution Complete')
+      if (block_details) {
+        await this.runFunction(block_details, height, innerCode);
+      }
+      console.timeEnd('Indexing Execution Complete')
+      console.groupEnd()
+    }
+    console.groupEnd()
+  }
+
   async runFunction(streamerMessage, blockHeight, indexerCode) {
     const innerCodeWithBlockHelper =
       `
@@ -25,21 +50,40 @@ export default class Indexer {
 
     // Define the custom context object
     const context = {
-      set: async () => {
+      set: async (key, value) => {
         this.handleLog(
           blockHeight,
-          "Context.set() is not supported in debug mode."
+          "",
+          () => {
+            console.group(`Setting Key/Value`);
+            console.log({key: value});
+            console.groupEnd();
+          }
         );
         return {};
       },
       graphql: async (query, mutationData) => {
         this.handleLog(
           blockHeight,
-          "Context.graphql() is not supported in debug mode."
-        );
-        this.handleLog(
-          blockHeight,
-          `mutationData: ${JSON.stringify(mutationData)}`
+          "",
+          () => {
+            let operationType, operationName
+        const match = query.match(/(query|mutation)\s+(\w+)\s*(\(.*?\))?\s*\{([\s\S]*)\}/);
+        if (match) {
+          operationType = match[1];
+          operationName = match[2];
+        }
+
+        console.group(`Executing GraphQL ${operationType}: (${operationName})`);
+        if (operationType === 'mutation') console.log('%c Mutations in debug mode do not alter the database', 'color: black; background-color: yellow; padding: 5px;');
+        console.group(`Data passed to ${operationType}`);
+        console.dir(mutationData); 
+        console.groupEnd();
+        console.group(`Data returned by ${operationType}`);
+        console.log({})
+        console.groupEnd();
+        console.groupEnd();
+          }
         );
         return {};
       },