fix: fetch BOS indexerdata from near RPC call and conditionally rende…

…r metadata if available in databricks (#873) BOS component data is fetched from NEAR RPC call 'list_all'. We use a map to set a k/v pair for indexer metadata recieved on databricks. When we render each card we check the map to see if the indexer to be rendered from NEAR RPC exist in the map. If it does exist we conditionally render metadata.
near · Jul 17, 2024 · 6643318 · 6643318
1 parent d25763d
commit 6643318
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 22 deletions.
diff --git a/frontend/widgets/src/QueryApi.IndexerCard.jsx b/frontend/widgets/src/QueryApi.IndexerCard.jsx
@@ -1,6 +1,14 @@
-const { accountId, indexerName, lastDeploymentDate, numDeployements, numQueries, originalDeploymentDate } = props;
+const { accountId, indexerName, indexerMetadata } = props;
+const sanitizedAccountID = accountId.replace(/\./g, '_');
+const key = `${sanitizedAccountID}/${indexerName}`;
+
+const indexer = {
+  accountId,
+  indexerName,
+  ...(indexerMetadata.has(key) && indexerMetadata.get(key))
+};
+
 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.replace(/\./g, '_')}`;
 const formatNumberWithCommas = (number) => number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
@@ -164,7 +172,13 @@ return (
         <TextLink as="a" ellipsis>
           @{accountId}
         </TextLink>
-        <Text>{formatNumberWithCommas(numQueries)} Queries in the past 7 days</Text>
+        {indexer.numQueries >= 0 && (
+          <Text>
+            {indexer.numQueries > 999
+              ? `${formatNumberWithCommas(indexer.numQueries)} Queries in the past 7 days`
+              : `${indexer.numQueries} Queries in the past 7 days`}
+          </Text>
+        )}
       </div>
     </CardBody>
 
@@ -175,11 +189,6 @@ return (
       <ButtonLink
         primary
         href={editUrl}
-        onClick={() =>
-          State.update({
-            activeTab: "editor",
-          })
-        }
       >
         View Indexer
       </ButtonLink>

diff --git a/frontend/widgets/src/QueryApi.IndexerExplorer.jsx b/frontend/widgets/src/QueryApi.IndexerExplorer.jsx
@@ -1,12 +1,31 @@
-const accountId = context.accountId;
-const santizedAccountId = accountId.replaceAll(".", "_");
+const myAccountId = context.accountId;
 
 const [selectedTab, setSelectedTab] = useState(props.tab && props.tab !== "all" ? props.tab : "all");
 const [myIndexers, setMyIndexers] = useState([]);
 const [allIndexers, setAllIndexers] = useState([]);
 const [error, setError] = useState(null);
+const [indexerMetadata, setIndexerMetaData] = useState(new Map());
 
 const fetchIndexerData = () => {
+  Near.asyncView(`${REPL_REGISTRY_CONTRACT_ID}`, "list_all").then((data) => {
+    const allIndexers = [];
+    const myIndexers = [];
+    Object.keys(data).forEach((accId) => {
+      Object.keys(data[accId]).forEach((functionName) => {
+        const indexer = {
+          accountId: accId,
+          indexerName: functionName,
+        };
+        if (accId === myAccountId) myIndexers.push(indexer);
+        allIndexers.push(indexer);
+      });
+    });
+    setMyIndexers(myIndexers);
+    setAllIndexers(allIndexers);
+  });
+}
+
+const storeIndexerMetaData = () => {
   const url = `${REPL_QUERY_API_USAGE_URL}`;
 
   asyncFetch(url)
@@ -16,12 +35,10 @@ const fetchIndexerData = () => {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
       const { data } = JSON.parse(response.body);
-      const allIndexers = [];
-      const myIndexers = [];
+      const map = new Map();
 
       data.forEach(entry => {
         const { indexer_account_id, indexers } = entry;
-
         indexers.forEach(({ indexer_name, last_deployment_date, num_deployements, num_queries, original_deployment_date }) => {
           const indexer = {
             accountId: indexer_account_id,
@@ -31,21 +48,17 @@ const fetchIndexerData = () => {
             numQueries: num_queries,
             originalDeploymentDate: original_deployment_date
           };
-
-          if (indexer_account_id === santizedAccountId) myIndexers.push(indexer);
-          allIndexers.push(indexer);
+          map.set(`${indexer_account_id}/${indexer_name}`, indexer);
         });
       });
-
-      setMyIndexers([myIndexers]);
-      setAllIndexers(allIndexers);
+      setIndexerMetaData(map);
       setError(null);
     })
 }
 
-
 useEffect(() => {
   fetchIndexerData();
+  storeIndexerMetaData();
 }, []);
 
 const Wrapper = styled.div`
@@ -243,7 +256,7 @@ return (
             <Item key={i}>
               <Widget
                 src={`${REPL_ACCOUNT_ID}/widget/QueryApi.IndexerCard`}
-                props={{ ...indexer }}
+                props={{ ...indexer, indexerMetadata }}
               />
             </Item>
           ))}
@@ -271,7 +284,7 @@ return (
             <Item key={i}>
               <Widget
                 src={`${REPL_ACCOUNT_ID}/widget/QueryApi.IndexerCard`}
-                props={{ ...indexer }}
+                props={{ ...indexer, indexerMetadata }}
               />
             </Item>
           ))}