Added Feature to calculate BH, Modified Redirect Links, and Resolved …

…Minor Bugs (#775) Enhanced the logs table by adding contextual information such as timestamps and the number of blocks from NEAR's latest block for developers on the Logs Table.
near · Jun 6, 2024 · eb87759 · eb87759
1 parent 0c3b7cf
commit eb87759
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 11 deletions.
diff --git a/frontend/src/components/Editor/EditorView/DeveloperToolsView.jsx b/frontend/src/components/Editor/EditorView/DeveloperToolsView.jsx
@@ -41,7 +41,7 @@ const DeveloperToolsView = ({
                     </button>
 
 
-                    <div class="h-full border-r border-gray-300 mx-4"></div>
+                    <div className="h-full border-r border-gray-300 mx-4"></div>
 
                     <div className={`relative flex items-center justify-center px-2 py-1 bg-gray-200 hover:bg-gray-300 text-gray-700 text-xs rounded ${diffView ? 'bg-gray-600 hover:bg-gray-700 text-white' : 'bg-gray-200 hover:bg-gray-300'}`} onClick={handleCodeGen}>
                         <span className="px-3">Diff View</span>

diff --git a/frontend/src/components/Logs/LogsMenu.tsx b/frontend/src/components/Logs/LogsMenu.tsx
@@ -3,6 +3,7 @@ import { useQuery, gql } from "@apollo/client";
 import { Button, Navbar, Container, ButtonGroup, Spinner } from "react-bootstrap";
 import { ArrowCounterclockwise, Code } from "react-bootstrap-icons";
 import { IndexerDetailsContext } from "../../contexts/IndexerDetailsContext";
+import { calculateBlockTimeDifference } from "../../utils/calculateBlockTimeDifference";
 
 interface LogsMenuProps {
   currentUserAccountId: string;
@@ -78,7 +79,7 @@ const LogsMenu: React.FC<LogsMenuProps> = ({
       console.error('Error reloading data:', error);
     }
   };
-  
+
   return (
     <Navbar bg="white" variant="light" className="shadow-sm p-3 mb-4 bg-white rounded">
       <Container fluid className="d-flex flex-wrap justify-content-between align-items-center">
@@ -92,9 +93,16 @@ const LogsMenu: React.FC<LogsMenuProps> = ({
           <span className="me-4 text-secondary text-sm">
             Height: <strong>{loading ? <Spinner animation="border" size="sm" /> : blockHeight ?? "N/A"}</strong>
           </span>
-          <span className="text-secondary text-sm">
+          <span className="me-4 text-secondary text-sm">
             Status:  <strong>{loading ? <Spinner animation="border" size="sm" /> : status ?? "UNKNOWN"}</strong>
           </span>
+          {!loading && blockHeight && latestHeight && (
+            <div className="bg-gray-100 border border-gray-300 rounded p-1 text-xs text-gray-700">
+              <span className="text-secondary">
+                Indexer is {Number(latestHeight) - Number(blockHeight)} blocks or {calculateBlockTimeDifference(Number(latestHeight), Number(blockHeight))} behind tip.
+              </span>
+            </div>
+          )}
         </div>
         <ButtonGroup className="mt-3 mt-md-0">
           <Button size="sm" variant="outline-primary" className="d-flex align-items-center" onClick={handleReload}>

diff --git a/frontend/src/components/Modals/ModalsContainer/PublishFormContainer.tsx b/frontend/src/components/Modals/ModalsContainer/PublishFormContainer.tsx
@@ -71,7 +71,7 @@ const ViewContainer: React.FC<Props> = ({ updateConfig }) => {
         }
         setBlockHeightError(null);
         updateConfig(indexerNameField, contractFilter, blockHeight, startBlock);
-    }, [indexerNameField, contractFilter, startBlock, blockHeight, latestHeight, updateConfig]);
+    }, [indexerNameField, contractFilter, startBlock, blockHeight, latestHeight]);
 
     return (
         <PublishFormView
@@ -89,6 +89,7 @@ const ViewContainer: React.FC<Props> = ({ updateConfig }) => {
             setBlockHeight={setBlockHeight}
             handleSetContractFilter={handleSetContractFilter}
             updateConfig={updateConfig}
+            indexerDetails={indexerDetails}
         />
     );
 };

diff --git a/frontend/src/components/Modals/ModalsView/PublishFormView.jsx b/frontend/src/components/Modals/ModalsView/PublishFormView.jsx
@@ -15,6 +15,7 @@ const PublishFormView = ({
     setBlockHeight,
     handleSetContractFilter,
     updateConfig,
+    indexerDetails,
 }) => (
     <div className="space-y-6">
         <div className="flex flex-col">

diff --git a/frontend/src/utils/calculateBlockTimeDifference.ts b/frontend/src/utils/calculateBlockTimeDifference.ts
@@ -0,0 +1,25 @@
+export const calculateBlockTimeDifference = (latestBlockHeight: number, currentBlockHeight: number): string => {
+    const averageBlockTimeSeconds: number = 1.3;
+    const blocksDifference: number = Math.abs(currentBlockHeight - latestBlockHeight);
+
+    const timeDifferenceSeconds: number = blocksDifference * averageBlockTimeSeconds;
+
+    const days: number = Math.floor(timeDifferenceSeconds / (3600 * 24));
+    const hours: number = Math.floor((timeDifferenceSeconds % (3600 * 24)) / 3600);
+    const minutes: number = Math.floor((timeDifferenceSeconds % 3600) / 60);
+    const seconds: number = Math.floor(timeDifferenceSeconds % 60);
+
+    let timeDifferenceString: string = '';
+    if (days > 0) {
+        timeDifferenceString += `${days}day${days > 1 ? 's' : ''} `;
+    }
+    if (hours > 0) {
+        timeDifferenceString += `${hours}hr${hours > 1 ? 's' : ''} `;
+    }
+    if (minutes > 0 || hours > 0) {
+        timeDifferenceString += `${minutes}min${minutes > 1 ? 's' : ''} `;
+    }
+    timeDifferenceString += `${seconds}s`;
+
+    return timeDifferenceString.trim();
+}
diff --git a/frontend/widgets/examples/feed/src/QueryApi.Feed.ActivityPage.jsx b/frontend/widgets/examples/feed/src/QueryApi.Feed.ActivityPage.jsx
@@ -21,7 +21,7 @@ if (props.tab && props.tab !== state.selectedTab) {
   });
 }
 
-const activityUrl = `/#/${APP_OWNER}/widget/QueryApi.Feed`;
+const activityUrl = `/${APP_OWNER}/widget/QueryApi.Feed`;
 
 const Wrapper = styled.div`
   margin-top: calc(var(--body-top-padding) * -1);

diff --git a/frontend/widgets/src/QueryApi.Dashboard.jsx b/frontend/widgets/src/QueryApi.Dashboard.jsx
@@ -324,8 +324,8 @@ const selectIndexerPage = (viewName) => {
   });
 };
 const indexerView = (accountId, indexerName) => {
-  const editUrl = `https://dev.near.org/#/${REPL_ACCOUNT_ID}/widget/QueryApi.App?selectedIndexerPath=${accountId}/${indexerName}`;
-  const statusUrl = `https://dev.near.org/#/${REPL_ACCOUNT_ID}/widget/QueryApi.App?selectedIndexerPath=${accountId}/${indexerName}&view=indexer&activeIndexerView=status`;
+  const editUrl = `https://dev.near.org/${REPL_ACCOUNT_ID}/widget/QueryApi.App?selectedIndexerPath=${accountId}/${indexerName}`;
+  const statusUrl = `https://dev.near.org/${REPL_ACCOUNT_ID}/widget/QueryApi.App?selectedIndexerPath=${accountId}/${indexerName}&view=indexer&activeIndexerView=status`;
   const playgroundLink = `https://cloud.hasura.io/public/graphiql?endpoint=${REPL_GRAPHQL_ENDPOINT}/v1/graphql&header=x-hasura-role%3A${accountId.replaceAll(
     ".",
     "_"
@@ -406,7 +406,7 @@ return (
     <Main>
       <Section active={state.activeTab === "explore"}>
         <NavBarLogo
-          href={`https://dev.near.org/#/${REPL_ACCOUNT_ID}/widget/QueryApi.App`}
+          href={`https://dev.near.org/${REPL_ACCOUNT_ID}/widget/QueryApi.App`}
           title="QueryApi"
           onClick={() => selectTab("explore")}
         >
@@ -429,7 +429,7 @@ return (
           </SignUpLink>
         <div>
           <ButtonLink
-            href={`/#/${REPL_ACCOUNT_ID}/widget/QueryApi.App/?view=create-new-indexer`}
+            href={`/${REPL_ACCOUNT_ID}/widget/QueryApi.App/?view=create-new-indexer`}
             style={{ "margin-top": "10px" }}
             onClick={() => {
               State.update({

diff --git a/frontend/widgets/src/QueryApi.IndexerCard.jsx b/frontend/widgets/src/QueryApi.IndexerCard.jsx
@@ -1,7 +1,7 @@
 const accountId = props.accountId || context.accountId;
 const indexerName = props.indexerName;
-const editUrl = `https://dev.near.org/#/${REPL_ACCOUNT_ID}/widget/QueryApi.App?selectedIndexerPath=${accountId}/${indexerName}`;
-const statusUrl = `https://dev.near.org/#/${REPL_ACCOUNT_ID}/widget/QueryApi.App?selectedIndexerPath=${accountId}/${indexerName}&view=indexer&activeIndexerView=status`;
+const editUrl = `https://dev.near.org/${REPL_ACCOUNT_ID}/widget/QueryApi.App?selectedIndexerPath=${accountId}/${indexerName}`;
+const statusUrl = `https://dev.near.org/${REPL_ACCOUNT_ID}/widget/QueryApi.App?selectedIndexerPath=${accountId}/${indexerName}&view=indexer&activeIndexerView=status`;
 const playgroundLink = `https://cloud.hasura.io/public/graphiql?endpoint=${REPL_GRAPHQL_ENDPOINT}/v1/graphql&header=x-hasura-role%3A${accountId.replaceAll(
   ".",
   "_"