Skip to content

Commit

Permalink
fix: full dashboard list #98 (#107)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kav91
Kav91 authored Jul 30, 2024
1 parent 6879034 commit 0ad5e76
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 63 deletions.
139 changes: 81 additions & 58 deletions nerdlets/observability-maps-nerdlet/components/node/edit/drilldown-dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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 (
Expand All @@ -72,7 +78,8 @@ export default class DrilldownDashboard extends React.PureComponent {
searchedDashboards,
showSearchMsg,
selectedDash,
searchText
searchText,
fetchingDashboards
} = this.state;

return (
Expand All @@ -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 (
<>
Expand All @@ -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>
Expand All @@ -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',
Expand All @@ -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 />
Expand Down
13 changes: 8 additions & 5 deletions nerdlets/observability-maps-nerdlet/lib/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 0ad5e76

Please sign in to comment.