From 4ee3f391129d09221356045e365295c3a84bccc6 Mon Sep 17 00:00:00 2001
From: Kav91 <kav.pather@gmail.com>
Date: Tue, 30 Jul 2024 03:59:32 +0000
Subject: [PATCH] fix: full dashboard list #98

---
 .../node/edit/drilldown-dashboard.js          | 139 ++++++++++--------
 .../observability-maps-nerdlet/lib/utils.js   |  13 +-
 2 files changed, 89 insertions(+), 63 deletions(-)

diff --git a/nerdlets/observability-maps-nerdlet/components/node/edit/drilldown-dashboard.js b/nerdlets/observability-maps-nerdlet/components/node/edit/drilldown-dashboard.js
index 4c25a05..f316876 100644
--- a/nerdlets/observability-maps-nerdlet/components/node/edit/drilldown-dashboard.js
+++ b/nerdlets/observability-maps-nerdlet/components/node/edit/drilldown-dashboard.js
@@ -3,10 +3,17 @@ no-console: 0
 */
 
 import React from 'react';
-import { Button, Form, Table, Radio, Input } from 'semantic-ui-react';
+import { Button, Form, Radio, Input } from 'semantic-ui-react';
 import { DataConsumer } from '../../../context/data';
 import { nerdGraphQuery, DashboardQuery } from '../../../lib/utils';
-import { Spinner } from 'nr1';
+import {
+  Spinner,
+  Table,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  TableRowCell
+} from 'nr1';
 
 export default class DrilldownDashboard extends React.PureComponent {
   constructor(props) {
@@ -16,40 +23,39 @@ export default class DrilldownDashboard extends React.PureComponent {
       searchedDashboards: [],
       showSearchMsg: false,
       selectedDash: null,
-      searchText: ''
+      searchText: '',
+      fetchingDashboards: false
     };
   }
 
-  fetchDashboards = async cursor => {
-    let { selectedAccount, searchedDashboards } = this.state;
-    // if no cursor its a new search so empty entities
-    if (!cursor) {
-      searchedDashboards = [];
-    }
+  fetchDashboards = async (init, cursor, incomingResults) => {
+    const { selectedAccount } = this.state;
+
+    let results = init ? [] : incomingResults;
 
     const nerdGraphResult = await nerdGraphQuery(
-      DashboardQuery(selectedAccount)
+      DashboardQuery(selectedAccount, cursor)
     );
     const dashboardSearchResults =
       (((nerdGraphResult || {}).actor || {}).entitySearch || {}).results || {};
     // let foundGuids = ((entitySearchResults || {}).entities || []).map((result)=>result.guid)
 
-    searchedDashboards = [
-      ...searchedDashboards,
-      ...dashboardSearchResults.entities
-    ];
-    this.setState({ searchedDashboards }, () => {
-      if (dashboardSearchResults.nextCursor) {
-        console.log(
-          'collecting next dashboardSearch batch guid:',
-          dashboardSearchResults.nextCursor
-        );
-        this.fetchEntities(dashboardSearchResults.nextCursor);
-      } else {
-        // console.log("complete", this.state.searchedEntities.length)
+    results = [...results, ...dashboardSearchResults.entities];
+
+    if (dashboardSearchResults.nextCursor) {
+      console.log(
+        'collecting next dashboardSearch batch guid:',
+        dashboardSearchResults.nextCursor
+      );
+      this.fetchDashboards(false, dashboardSearchResults.nextCursor, results);
+    } else {
+      console.log('complete', results.length);
+      this.setState({ searchedDashboards: results, fetchingDashboards: false });
+
+      if (results.length === 0) {
+        this.setState({ showSearchMsg: true });
       }
-      this.setState({ showSearchMsg: true });
-    });
+    }
   };
 
   updateDashboard = async (
@@ -72,7 +78,8 @@ export default class DrilldownDashboard extends React.PureComponent {
       searchedDashboards,
       showSearchMsg,
       selectedDash,
-      searchText
+      searchText,
+      fetchingDashboards
     } = this.state;
 
     return (
@@ -87,6 +94,12 @@ export default class DrilldownDashboard extends React.PureComponent {
           const currentDash = mapConfig.nodeData[selectedNode].dashboard;
           const addDisabled = selectedAccount === null || selectedDash === null;
 
+          const filteredDashboards = searchedDashboards.filter(dash =>
+            dash.name
+              ? dash.name.toLowerCase().includes(searchText.toLowerCase())
+              : false
+          );
+
           if (accountOptions) {
             return (
               <>
@@ -102,12 +115,17 @@ export default class DrilldownDashboard extends React.PureComponent {
                     }
                   />
                   <Form.Button
-                    disabled={!selectedAccount}
+                    disabled={!selectedAccount || fetchingDashboards}
                     label="&nbsp;"
                     width={4}
                     content="Fetch Dashboards"
                     onClick={() => {
-                      this.fetchDashboards();
+                      this.setState(
+                        { fetchingDashboards: true, searchedDashboards: [] },
+                        () => {
+                          this.fetchDashboards(true);
+                        }
+                      );
                     }}
                   />
                 </Form.Group>
@@ -126,6 +144,15 @@ export default class DrilldownDashboard extends React.PureComponent {
                     }
                   />
                 </Form.Group>
+                <div
+                  style={{
+                    overflowY: 'scroll',
+                    height: '300px',
+                    display: fetchingDashboards ? '' : 'none'
+                  }}
+                >
+                  <Spinner />
+                </div>
                 <div
                   style={{
                     overflowY: 'scroll',
@@ -138,42 +165,38 @@ export default class DrilldownDashboard extends React.PureComponent {
                 >
                   No entities found with accountId = {selectedAccount}.
                 </div>
+                {}
                 <div
                   style={{
                     overflowY: 'scroll',
                     height: '300px',
-                    display: searchedDashboards.length === 0 ? 'none' : ''
+                    display:
+                      searchedDashboards.length === 0 || fetchingDashboards
+                        ? 'none'
+                        : ''
                   }}
                 >
-                  <Table compact>
-                    <Table.Body>
-                      {searchedDashboards
-                        .filter(dash =>
-                          dash.name
-                            ? dash.name
-                                .toLowerCase()
-                                .includes(searchText.toLowerCase())
-                            : false
-                        )
-                        .map((dash, i) => {
-                          return (
-                            <Table.Row key={i}>
-                              <Table.Cell>{dash.name}</Table.Cell>
-                              <Table.Cell>
-                                <Radio
-                                  value={dash.guid}
-                                  checked={
-                                    (selectedDash || currentDash) === dash.guid
-                                  }
-                                  onChange={() =>
-                                    this.setState({ selectedDash: dash.guid })
-                                  }
-                                />
-                              </Table.Cell>
-                            </Table.Row>
-                          );
-                        })}
-                    </Table.Body>
+                  <Table items={filteredDashboards}>
+                    <TableHeader>
+                      <TableHeaderCell>Name</TableHeaderCell>
+                      <TableHeaderCell>Select</TableHeaderCell>
+                    </TableHeader>
+                    {({ item }) => (
+                      <TableRow key={item.guid}>
+                        <TableRowCell>{item.name}</TableRowCell>
+                        <TableRowCell>
+                          <Radio
+                            value={item.guid}
+                            checked={
+                              (selectedDash || currentDash) === item.guid
+                            }
+                            onChange={() =>
+                              this.setState({ selectedDash: item.guid })
+                            }
+                          />
+                        </TableRowCell>
+                      </TableRow>
+                    )}
                   </Table>
                 </div>
                 <br />
diff --git a/nerdlets/observability-maps-nerdlet/lib/utils.js b/nerdlets/observability-maps-nerdlet/lib/utils.js
index d3bdf80..1fe74de 100644
--- a/nerdlets/observability-maps-nerdlet/lib/utils.js
+++ b/nerdlets/observability-maps-nerdlet/lib/utils.js
@@ -119,9 +119,11 @@ export const entitySearchByAccountQuery = (domain, accountId, cursor) => {
 
   return ngql`{
   actor {
-    entitySearch(query: "domain IN ('${domain}') ${subType ? `AND type = '${subType}'` : ``
-    } AND reporting = 'true' ${accountId ? `AND tags.accountId IN ('${accountId}')` : ''
-    }") {
+    entitySearch(query: "domain IN ('${domain}') ${
+    subType ? `AND type = '${subType}'` : ``
+  } AND reporting = 'true' ${
+    accountId ? `AND tags.accountId IN ('${accountId}')` : ''
+  }") {
       query
       results${cursor ? `(cursor: "${cursor}")` : ''} {
         nextCursor
@@ -571,10 +573,11 @@ export const InfraEntityBatchQuery = guids => {
   }`;
 };
 
-export const DashboardQuery = accountId => `{
+export const DashboardQuery = (accountId, cursor) => `{
   actor {
     entitySearch(query: "accountId=${accountId} and type='DASHBOARD'") {
-      results {
+      results${cursor ? `(cursor: "${cursor}")` : ''} {
+        nextCursor
         entities {
           accountId
           guid