QueryAPI Logging Features + UI/UX changes (#388)

This PR addresses a few painpoints of logging and QueryAPI Indexer development. 1. Logs can now be seen through the QueryAPI editor window via a `Show Logs` button. - No need to switch between `Indexer Status` & `Editor` window anymore saving time and frustration with the editor taking a few seconds to load. - Enables more powerful integrations with the editor for future PRs (e.g: adding blocks to debug directly from the indexer Logs table) 2. Logs are easier to digest now and search now. - Logs are grouped by `block_height` so now the user sees all the messages belonging to a block's execution together. - Additionally the user can use the `search` functionality to search for any block_height where the function was executed to view its log in entirety. - Logs have relative dates now e.g (4 mins ago...) - BlockHeights can be clicked on to take you to the explorer link 3. Simplifying QueryAPI links. - There is no need for `&view=status/editor-window` to be passed in anymore. - As long as `selectedIndexerPath` is defined, the user is sent to the editor window. If `&view=status` is passed the user is redirected to the indexer logs page within the editor window. - Note: I have a PR on `queryapi/docs` to reflect these changes: near/docs#1584 Notes: Instead of using GraphQL to fetch logs, we are using a feature of Hasura which `restifies` your graphql queries. You can find details here: https://near-queryapi.api.pagoda.co/console/api/rest/list - The Old Indexer Status Widget should still be avalaible if needed via the following link: https://near.org/dataplatform.near/widget/QueryApi.IndexerStatus?accountId=dataplatform.near&indexer_name=social_feed Other small updates - If a invalid indexer path is chosen, the editor will show an error - QueryAPI is avalaible for users in read only mode even if they are not logged in on near.org ### This PR does not add WS support. This will be done in a future PR. ![image](https://github.com/near/queryapi/assets/25015977/0e94ede2-6cca-41ae-9dd4-827ff388ba48) ![image](https://github.com/near/queryapi/assets/25015977/01e655cb-786d-4913-9b09-e00014037863) ![queryapi logs testing](https://github.com/near/queryapi/assets/25015977/c66d980c-0988-492e-b225-46371ff7572e)
near · Nov 16, 2023 · 59cc68d · 59cc68d
1 parent 84d129a
commit 59cc68d
Show file tree

Hide file tree

Showing 15 changed files with 646 additions and 114 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,6 +12,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@apollo/client": "^3.8.7",
     "@graphiql/plugin-code-exporter": "0.3.5",
     "@graphiql/plugin-explorer": "0.3.5",
     "@monaco-editor/react": "^4.1.3",
@@ -25,7 +26,8 @@
     "eslint": "8.34.0",
     "eslint-config-next": "13.1.6",
     "graphiql": "3.0.6",
-    "graphql": "^16.6.0",
+    "graphql": "^16.8.1",
+    "gridjs": "6.0.6",
     "near-api-js": "1.1.0",
     "near-social-bridge": "^1.4.1",
     "next": "13.1.6",

diff --git a/frontend/src/components/Editor/Editor.js b/frontend/src/components/Editor/Editor.js
@@ -381,6 +381,12 @@ const Editor = ({
         height: "85vh",
       }}
     >
+      {!indexerDetails.code && (
+        <Alert className="px-3 pt-3" variant="danger">
+          Indexer Function could not be found. Are you sure this indexer exists?
+        </Alert>
+      )}
+    {indexerDetails.code && <>
       <EditorButtons
         handleFormating={handleFormating}
         handleCodeGen={handleCodeGen}
@@ -455,6 +461,7 @@ const Editor = ({
           handleEditorMount={handleEditorMount}
         />
       </div>
+      </>}
     </div>
   );
 };

diff --git a/frontend/src/components/Editor/EditorButtons.jsx b/frontend/src/components/Editor/EditorButtons.jsx
@@ -19,7 +19,8 @@ import {
   TrashFill,
   XCircle,
   NodePlus,
-  Code
+  Code,
+  FileText,
 } from "react-bootstrap-icons";
 import { BlockPicker } from "./BlockPicker";
 import { IndexerDetailsContext } from '../../contexts/IndexerDetailsContext';
@@ -49,7 +50,9 @@ const EditorButtons = ({
     debugMode,
     isCreateNewIndexer,
     indexerNameField,
-    setIndexerNameField
+    setIndexerNameField,
+    setShowLogsView,
+    showLogsView,
   } = useContext(IndexerDetailsContext);
 
   const removeHeight = (index) => {
@@ -69,7 +72,6 @@ const EditorButtons = ({
         >
           <Row className="w-100">
             <Col style={{ display: "flex", justifyContent: "start", flexDirection: "column" }}>
-
               <Breadcrumb className="flex">
                 <Breadcrumb.Item className="flex align-center " href="#">
                   {accountId}
@@ -107,7 +109,7 @@ const EditorButtons = ({
               )}
             </Col>
             <Col
-              style={{ display: "flex", justifyContent: "end", height: "40px" }}
+              style={{ display: "flex", justifyContent: "end", flexDirection: "column", alignItems: "flex-end" }}
             >
               <ButtonGroup
                 className="inline-block"
@@ -144,47 +146,22 @@ const EditorButtons = ({
                     </>
                 )}
 
-                <OverlayTrigger
-                  placement="bottom"
-                  overlay={<Tooltip>Reset Changes To Code</Tooltip>}
-                >
-                  <Button
-                    size="sm"
-                    className="flex align-center"
-                    variant="secondary"
-                    onClick={() => setShowResetCodeModel(true)}
-                  >
-                    <ArrowCounterclockwise size={22} />
-                  </Button>
-                </OverlayTrigger>
-
-                <OverlayTrigger
-                  placement="bottom"
-                  overlay={<Tooltip>Format Code</Tooltip>}
-                >
-                  <Button
-                    size="sm"
-                    variant="secondary"
-                    className="flex align-center"
-                    onClick={() => handleFormating()}
-                  >
-                    <Justify style={{ paddingRight: "2px" }} size={24} />
-                  </Button>
-                </OverlayTrigger>
-
-                <OverlayTrigger
-                  placement="bottom"
-                  overlay={<Tooltip>Generate Types</Tooltip>}
-                >
-                  <Button
-                    size="sm"
-                    variant="secondary"
-                    className="flex align-center"
-                    onClick={() => handleCodeGen()}
+                {!isCreateNewIndexer && (
+                  <OverlayTrigger
+                    placement="bottom"
+                    overlay={<Tooltip>Open Logs</Tooltip>}
                   >
-                    <Code style={{ paddingRight: "2px" }} size={24} />
-                  </Button>
-                </OverlayTrigger>
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      className="flex align-center"
+                      onClick={() => setShowLogsView(true)}
+                    >
+                      <FileText style={{ paddingRight: "2px" }} size={24} />
+                      Show Logs
+                    </Button>
+                  </OverlayTrigger>
+                )}
                 {(!isUserIndexer && !isCreateNewIndexer) ? (
                   <OverlayTrigger
                     placement="bottom"
@@ -213,6 +190,51 @@ const EditorButtons = ({
                   </OverlayTrigger>
                 )}
               </ButtonGroup>
+              <Row
+                style={{ display: "flex", justifyContent: "center", width: "60%", padding: "5px" }}
+              >
+                <ButtonGroup>
+                  <OverlayTrigger
+                    placement="bottom"
+                    overlay={<Tooltip>Reset Changes To Code</Tooltip>}
+                  >
+                    <Button
+                      size="sm"
+                      className="flex align-center"
+                      variant="secondary"
+                      onClick={() => setShowResetCodeModel(true)}
+                    >
+                      <ArrowCounterclockwise size={22} />
+                    </Button>
+                  </OverlayTrigger>
+                  <OverlayTrigger
+                    placement="bottom"
+                    overlay={<Tooltip>Format Code</Tooltip>}
+                  >
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      className="flex align-center"
+                      onClick={() => handleFormating()}
+                    >
+                      <Justify style={{ paddingRight: "2px" }} size={24} />
+                    </Button>
+                  </OverlayTrigger>
+                  <OverlayTrigger
+                    placement="bottom"
+                    overlay={<Tooltip>Generate Types</Tooltip>}
+                  >
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      className="flex align-center"
+                      onClick={() => handleCodeGen()}
+                    >
+                      <Code style={{ paddingRight: "2px" }} size={24} />
+                    </Button>
+                  </OverlayTrigger>
+                </ButtonGroup>
+              </Row>
             </Col>
           </Row>
           {debugMode && heights.length > 0 && (