feat: display the number of queries in the past 7 days on each indexe…

…r card in the dashboard (#837)

BOS component indexercard now queries past 7 day query count.

frontend/replacement.dev.json

@@ -2,5 +2,6 @@
     "REPL_ACCOUNT_ID": "dev-queryapi.dataplatform.near",
     "REPL_GRAPHQL_ENDPOINT": "https://near-queryapi.dev.api.pagoda.co",
     "REPL_EXTERNAL_APP_URL": "https://queryapi-frontend-vcqilefdcq-ew.a.run.app",
-    "REPL_REGISTRY_CONTRACT_ID": "dev-queryapi.dataplatform.near"
+    "REPL_REGISTRY_CONTRACT_ID": "dev-queryapi.dataplatform.near",
+    "REPL_QUERY_API_USAGE_URL": "https://storage.googleapis.com/databricks-near-query-runner/output/query-api-usage/indexers_dev.json"
 }

frontend/replacement.local.json

@@ -2,5 +2,6 @@
     "REPL_ACCOUNT_ID": "dataplatform.near",
     "REPL_GRAPHQL_ENDPOINT": "https://near-queryapi.api.pagoda.co",
     "REPL_EXTERNAL_APP_URL": "http://localhost:3000",
-    "REPL_REGISTRY_CONTRACT_ID": "queryapi.dataplatform.near"
+    "REPL_REGISTRY_CONTRACT_ID": "queryapi.dataplatform.near",
+    "REPL_QUERY_API_USAGE_URL": "https://storage.googleapis.com/databricks-near-query-runner/output/query-api-usage/indexers.json"
 }

frontend/replacement.mainnet.json

@@ -2,5 +2,6 @@
     "REPL_ACCOUNT_ID": "dataplatform.near",
     "REPL_GRAPHQL_ENDPOINT": "https://near-queryapi.api.pagoda.co",
     "REPL_EXTERNAL_APP_URL": "https://queryapi-frontend-24ktefolwq-ew.a.run.app",
-    "REPL_REGISTRY_CONTRACT_ID": "queryapi.dataplatform.near"
+    "REPL_REGISTRY_CONTRACT_ID": "queryapi.dataplatform.near",
+    "REPL_QUERY_API_USAGE_URL": "https://storage.googleapis.com/databricks-near-query-runner/output/query-api-usage/indexers.json"
 }

frontend/widgets/src/QueryApi.IndexerCard.jsx

@@ -1,11 +1,9 @@
-const accountId = props.accountId || context.accountId;
-const indexerName = props.indexerName;
+const { accountId, indexerName, lastDeploymentDate, numDeployements, numQueries, originalDeploymentDate } = props;
 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(
-  ".",
-  "_"
-)}`;
+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, ",");
+
 const Card = styled.div`
   position: relative;
   width: 100%;
@@ -166,6 +164,7 @@ return (
         <TextLink as="a" ellipsis>
           @{accountId}
         </TextLink>
+        <Text>{formatNumberWithCommas(numQueries)} Queries in the past 7 days</Text>
       </div>
     </CardBody>
 

frontend/widgets/src/QueryApi.IndexerExplorer.jsx

@@ -1,46 +1,52 @@
-const limitPerPage = 5;
-let totalIndexers = 0;
 const accountId = context.accountId;
-State.init({
-  currentPage: 0,
-  selectedTab: props.tab || "all",
-  total_indexers: 0,
-  my_indexers: [],
-  all_indexers: [],
-});
-
-if (props.tab && props.tab !== state.selectedTab) {
-  State.update({
-    selectedTab: props.tab,
-  });
-}
+const santizedAccountId = accountId.replaceAll(".", "_");
+
+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 fetchIndexerData = () => {
+  const url = `${REPL_QUERY_API_USAGE_URL}`;
+
+  asyncFetch(url)
+    .then(response => {
+      if (!response.ok) {
+        setError('There was an error fetching the data');
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const { data } = JSON.parse(response.body);
+      const allIndexers = [];
+      const myIndexers = [];
+
+      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,
+            indexerName: indexer_name,
+            lastDeploymentDate: last_deployment_date,
+            numDeployements: num_deployements,
+            numQueries: num_queries,
+            originalDeploymentDate: original_deployment_date
+          };
 
-Near.asyncView(`${REPL_REGISTRY_CONTRACT_ID}`, "list_all").then((data) => {
-  const indexers = [];
-  const total_indexers = 0;
-  Object.keys(data).forEach((accountId) => {
-    Object.keys(data[accountId]).forEach((functionName) => {
-      indexers.push({
-        accountId: accountId,
-        indexerName: functionName,
+          if (indexer_account_id === santizedAccountId) myIndexers.push(indexer);
+          allIndexers.push(indexer);
+        });
       });
-      total_indexers += 1;
-    });
-  });
-
-  let my_indexers = indexers.filter(
-    (indexer) => indexer.accountId === accountId
-  );
-  // const results = indexers.slice(
-  //   0,
-  //   state.currentPage * limitPerPage + limitPerPage
-  // );
-  State.update({
-    my_indexers: my_indexers,
-    all_indexers: indexers,
-    total_indexers: total_indexers,
-  });
-});
+
+      setMyIndexers([myIndexers]);
+      setAllIndexers(allIndexers);
+      setError(null);
+    })
+}
+
+
+useEffect(() => {
+  fetchIndexerData();
+}, []);
 
 const Wrapper = styled.div`
   display: flex;
@@ -217,38 +223,36 @@ return (
   <Wrapper className="container-xl">
     <Tabs>
       <TabsButton
-        onClick={() => State.update({ selectedTab: "my-indexers" })}
-        selected={state.selectedTab === "my-indexers"}
+        onClick={() => setSelectedTab("my-indexers")}
+        selected={selectedTab === "my-indexers"}
       >
         My Indexers
       </TabsButton>
       <TabsButton
-        onClick={() => State.update({ selectedTab: "all" })}
-        selected={state.selectedTab === "all"}
+        onClick={() => setSelectedTab("all")}
+        selected={selectedTab === "all"}
       >
         All
       </TabsButton>
     </Tabs>
-
-    {state.selectedTab === "all" && (
+    {error && <Text>{error}</Text>}
+    {selectedTab === "all" && (
       <>
         <Items>
-          {state.all_indexers.map((indexer, i) => (
-            <Item>
+          {allIndexers.map((indexer, i) => (
+            <Item key={i}>
               <Widget
                 src={`${REPL_ACCOUNT_ID}/widget/QueryApi.IndexerCard`}
-                props={{
-                  accountId: indexer.accountId,
-                  indexerName: indexer.indexerName,
-                }}
+                props={{ ...indexer }}
               />
             </Item>
           ))}
         </Items>
       </>
     )}
-    {state.selectedTab == "my-indexers" && state.my_indexers.length == 0 && (
+    {selectedTab === "my-indexers" && myIndexers.length === 0 && (
       <Header>
+        <H2>You don't have any indexers yet.</H2>
         <H2>
           QueryAPI streamlines the process of querying specific data from the Near Blockchain. Explore new Indexers and fork them to try it out!
         </H2>
@@ -261,16 +265,13 @@ return (
       </Header>
     )}
     <Items>
-      {state.selectedTab == "my-indexers" && (
+      {selectedTab === "my-indexers" && (
         <>
-          {state.my_indexers.map((indexer, i) => (
-            <Item>
+          {myIndexers.map((indexer, i) => (
+            <Item key={i}>
               <Widget
                 src={`${REPL_ACCOUNT_ID}/widget/QueryApi.IndexerCard`}
-                props={{
-                  accountId: indexer.accountId,
-                  indexerName: indexer.indexerName,
-                }}
+                props={{ ...indexer }}
               />
             </Item>
           ))}