feat: reworked nerdlets

newrelic · Nov 20, 2023 · cdde6c6 · cdde6c6
1 parent ca89e60
commit cdde6c6
Show file tree

Hide file tree

Showing 23 changed files with 712 additions and 40 deletions.
diff --git a/nerdlets/account-details-nerdlet/DetailTable/entityTable.js b/nerdlets/account-details-nerdlet/DetailTable/entityTable.js
@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import {
+  navigation,
+  Table,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  TableRowCell,
+} from 'nr1';
+
+export default function EntityTable(props) {
+  const {
+    entities,
+    entitiesPassing,
+    totalEntities,
+    accountId,
+    accountName,
+    categoryName,
+  } = props;
+  const [column, setColumn] = useState(0);
+  const [sortingType, setSortingType] = useState(
+    TableHeaderCell.SORTING_TYPE.NONE
+  );
+
+  const onClickTableHeaderCell = (nextColumn, { nextSortingType }) => {
+    if (nextColumn === column) {
+      setSortingType(nextSortingType);
+    } else {
+      setSortingType(nextSortingType);
+      setColumn(nextColumn);
+    }
+  };
+
+  const headers = [{ key: 'Name', value: ({ item }) => item.name }];
+
+  const items = [];
+
+  let tempHeaders = [];
+  Object.keys(entities).forEach((guid) => {
+    const value = entities[guid];
+    items.push({ guid, ...value });
+
+    Object.keys(value).forEach((rule) => {
+      if (rule !== 'name') {
+        tempHeaders.push(rule);
+      }
+    });
+  });
+
+  tempHeaders = [...new Set(tempHeaders)];
+
+  tempHeaders.forEach((header) => {
+    headers.push({
+      key: header,
+      value: ({ item }) => (item[header] === false ? false : true),
+    });
+  });
+
+  return (
+    <div style={{ paddingTop: '15px' }}>
+      <Table items={items.length > 5 ? items.slice(0, 5) : items}>
+        <TableHeader>
+          {headers.map((h, i) => (
+            // eslint-disable-next-line react/jsx-key
+            <TableHeaderCell
+              {...h}
+              sortable
+              sortingType={
+                column === i ? sortingType : TableHeaderCell.SORTING_TYPE.NONE
+              }
+              onClick={(event, data) => onClickTableHeaderCell(i, data)}
+            >
+              {h.key}
+            </TableHeaderCell>
+          ))}
+        </TableHeader>
+
+        {({ item }) => {
+          return (
+            <TableRow actions={[]}>
+              <TableRowCell
+                onClick={() => navigation.openStackedEntity(item.guid)}
+              >
+                {item.name}
+              </TableRowCell>
+              {tempHeaders.map((header) => {
+                return (
+                  <TableRowCell key={header}>
+                    {item[header] === false ? '❌' : '✅'}
+                  </TableRowCell>
+                );
+              })}
+            </TableRow>
+          );
+        }}
+      </Table>
+      {totalEntities > 1 && (
+        <>
+          <div style={{ paddingLeft: '20px', paddingTop: '10px' }}>
+            <a
+              onClick={() =>
+                navigation.openStackedNerdlet({
+                  id: 'details-table-nerdlet',
+                  urlState: {
+                    categoryName,
+                    accountId,
+                    accountName,
+                    entities,
+                    entitiesPassing,
+                  },
+                })
+              }
+            >
+              {totalEntities === 1
+                ? 'View all entity data'
+                : `View all ${totalEntities} entities`}{' '}
+            </a>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/...core-details-nerdlet/DetailTable/index.js → ...ount-details-nerdlet/DetailTable/index.js b/...core-details-nerdlet/DetailTable/index.js → ...ount-details-nerdlet/DetailTable/index.js
@@ -10,7 +10,7 @@ import rules from '../../../src/rules';
 
 export default function DetailsTable(props) {
   const { accountSummary, sortBy } = props;
-  const [dataState, setDataState] = useSetState({ sortBy: 'Default' });
+  const [dataState, setDataState] = useSetState({});
 
   useEffect(() => {
     let categories = [];
@@ -37,6 +37,8 @@ export default function DetailsTable(props) {
       categories = categories.sort((a, b) => b.score - a.score);
     }
 
+    state.categories = categories;
+
     setDataState(state);
   }, [accountSummary, sortBy]);
 
@@ -177,6 +179,13 @@ export default function DetailsTable(props) {
                     {Object.keys(accountSummary[`${cat.name}.entities`])
                       .length > 0 && (
                       <EntityTable
+                        categoryName={cat.name}
+                        accountId={accountSummary.id}
+                        accountName={accountSummary.name}
+                        totalEntities={totalEntities}
+                        entitiesPassing={
+                          accountSummary[`${cat.name}.entitiesPassing`]
+                        }
                         entities={accountSummary[`${cat.name}.entities`]}
                       />
                     )}

diff --git a/nerdlets/score-details-nerdlet/index.js → nerdlets/account-details-nerdlet/index.js b/nerdlets/score-details-nerdlet/index.js → nerdlets/account-details-nerdlet/index.js
@@ -11,7 +11,7 @@ import { scoreToColor } from '../../src/utils';
 import { useSetState } from '@mantine/hooks';
 import DetailsTable from './DetailTable';
 
-export default function ScoreDetailRoot() {
+export default function AccountDetailsNerdlet() {
   const platformContext = useContext(PlatformStateContext);
   const nerdletContext = useContext(NerdletStateContext);
   const { accountName, accountId, accountSummary, accountPercentage } =
@@ -25,8 +25,6 @@ export default function ScoreDetailRoot() {
     sortBy: 'Lowest score',
   });
 
-  console.log(nerdletContext);
-
   const updateSortBy = (sortBy) => {
     setDataState({ sortBy });
   };

diff --git a/nerdlets/account-details-nerdlet/nr1.json b/nerdlets/account-details-nerdlet/nr1.json
@@ -0,0 +1,6 @@
+{
+    "schemaType": "NERDLET",
+    "id": "account-details-nerdlet",
+    "description": "",
+    "displayName": "Account Details"
+}
diff --git a/...etails-nerdlet/DetailTable/entityTable.js → ...etails-nerdlet/DetailTable/entityTable.js b/...etails-nerdlet/DetailTable/entityTable.js → ...etails-nerdlet/DetailTable/entityTable.js
@@ -9,7 +9,14 @@ import {
 } from 'nr1';
 
 export default function EntityTable(props) {
-  const { entities } = props;
+  const {
+    entities,
+    entitiesPassing,
+    totalEntities,
+    accountId,
+    accountName,
+    categoryName,
+  } = props;
   const [column, setColumn] = useState(0);
   const [sortingType, setSortingType] = useState(
     TableHeaderCell.SORTING_TYPE.NONE
@@ -51,7 +58,7 @@ export default function EntityTable(props) {
 
   return (
     <div style={{ paddingTop: '15px' }}>
-      <Table items={items}>
+      <Table items={items.length > 5 ? items.slice(0, 5) : items}>
         <TableHeader>
           {headers.map((h, i) => (
             // eslint-disable-next-line react/jsx-key
@@ -87,6 +94,28 @@ export default function EntityTable(props) {
           );
         }}
       </Table>
+      <>
+        <div style={{ paddingLeft: '20px', paddingTop: '10px' }}>
+          <a
+            onClick={() =>
+              navigation.openStackedNerdlet({
+                id: 'details-table-nerdlet',
+                urlState: {
+                  categoryName,
+                  accountId,
+                  accountName,
+                  entities,
+                  entitiesPassing,
+                },
+              })
+            }
+          >
+            {totalEntities === 1
+              ? 'View all entity data'
+              : `View all ${totalEntities} entities`}
+          </a>
+        </div>
+      </>
     </div>
   );
 }