Merge pull request #85 from newrelic/dev

Dev
newrelic · Mar 27, 2024 · 2d27164 · 2d27164
2 parents b51754c + e5bd1dd
commit 2d27164
Show file tree

Hide file tree

Showing 13 changed files with 10,895 additions and 4,530 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,30 +1,37 @@
 module.exports = {
-  "env": {
-      "browser": true,
-      "es6": true
-  },
-  "extends": [
-      'plugin:@newrelic/eslint-plugin-newrelic/react',
-      'plugin:@newrelic/eslint-plugin-newrelic/jest',
-      'plugin:@newrelic/eslint-plugin-newrelic/prettier'
+  extends: [
+    'eslint:recommended',
+    'plugin:import/recommended',
+    'plugin:promise/recommended',
+    'plugin:eslint-comments/recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
   ],
-  "globals": {
-      "Atomics": "readonly",
-      "SharedArrayBuffer": "readonly"
+  env: {
+    browser: true,
+    es6: true,
+    jest: true,
   },
-  "parser": "babel-eslint",
-  "parserOptions": {
-      "ecmaFeatures": {
-          "jsx": true
-      },
-      "ecmaVersion": 2018,
-      "sourceType": "module"
+  globals: {
+    __nr: true,
   },
-  "plugins": [
-      "react",
-      "prettier"
-  ],
-  "rules": {
-      "prettier/prettier": "error"
-  }
-};
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  plugins: ['import', 'promise', 'eslint-comments', 'react', 'prettier'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    'import/no-unresolved': 'off',
+    'no-empty-function': ['error', { allow: ['arrowFunctions'] }],
+    'react/no-unescaped-entities': 'off',
+  },
+};
diff --git a/babel.config.json b/babel.config.json
@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", {"runtime": "automatic"}]
+  ],
+  "plugins": [
+    "@babel/plugin-transform-flow-strip-types"
+  ]
+}
diff --git a/components/heat-map.js b/components/heat-map.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { NrqlQuery, Tooltip, Stack, StackItem } from 'nr1';
 import PropTypes from 'prop-types';
 import { groupBy, keys, sortBy } from 'lodash';
@@ -134,15 +135,8 @@ export default class Heatmap extends React.Component {
 }
 
 function Node(props) {
-  const {
-    name,
-    value,
-    max,
-    selected,
-    onClick,
-    formatValue,
-    formatLabel,
-  } = props;
+  const { name, value, max, selected, onClick, formatValue, formatLabel } =
+    props;
 
   const normalizedValue = Math.max(Math.min(value / max, 1), 0);
   const color = heatMapColor(normalizedValue);
@@ -164,6 +158,16 @@ function Node(props) {
   );
 }
 
+Node.propTypes = {
+  name: PropTypes.string,
+  value: PropTypes.number,
+  max: PropTypes.any,
+  selected: PropTypes.bool,
+  onClick: PropTypes.func,
+  formatValue: PropTypes.func,
+  formatLabel: PropTypes.func,
+};
+
 function SingleHeatmap(props) {
   const { title, selection, onSelect, data, onClickTitle } = props;
 
@@ -204,6 +208,14 @@ function SingleHeatmap(props) {
   );
 }
 
+SingleHeatmap.propTypes = {
+  title: PropTypes.string,
+  selection: PropTypes.string,
+  data: PropTypes.object,
+  onSelect: PropTypes.func,
+  onClickTitle: PropTypes.func,
+};
+
 function GroupedHeatMap(props) {
   const { data } = props;
 
@@ -227,6 +239,10 @@ function GroupedHeatMap(props) {
   );
 }
 
+GroupedHeatMap.propTypes = {
+  data: PropTypes.object,
+};
+
 function prepare({ data, max }) {
   let maxValue = 0;
   const isMultiFacet = Array.isArray(data.metadata.facet);
@@ -284,7 +300,7 @@ function ValueSpectrum() {
 /**
  * renders a Heatmap legend as a color spectrum
  */
-export function Legend({ title, max, formatValue }) {
+export function Legend({ max, formatValue }) {
   if (formatValue) max = formatValue(max);
   return (
     <div className="heat-map-legend">
@@ -294,3 +310,8 @@ export function Legend({ title, max, formatValue }) {
     </div>
   );
 }
+
+Legend.propTypes = {
+  max: PropTypes.any,
+  formatValue: PropTypes.func,
+};
diff --git a/lib/find-related-account-with.js b/lib/find-related-account-with.js
@@ -32,6 +32,7 @@ export default async function findRelatedAccountsWith({
           account.hitCount = hitCount;
           result.push(account);
         }
+        return null;
       });
     })
   );

diff --git a/nerdlets/container-explorer/container-explorer-nerdlet.js b/nerdlets/container-explorer/container-explorer-nerdlet.js
@@ -1,6 +1,7 @@
 import React from 'react';
-import { Spinner } from 'nr1';
-import { EmptyState } from '@newrelic/nr1-community';
+import { EmptyState, Icon, nerdlet, Spinner } from 'nr1';
+
+import { HelpModal, Messages } from '@newrelic/nr-labs-components';
 
 import quote from '../../lib/quote';
 import nrdbQuery from '../../lib/nrdb-query';
@@ -25,10 +26,24 @@ export default class ContainerExplorerNerdlet extends React.Component {
     this.state = {
       filters: [],
       plot: PLOTS[0],
+      helpModalOpen: false,
     };
   }
 
   async componentDidMount() {
+    nerdlet.setConfig({
+      actionControls: true,
+      actionControlButtons: [
+        {
+          label: 'Help',
+          hint: 'Quick links to get support',
+          type: 'primary',
+          iconType: Icon.TYPE.INTERFACE__INFO__HELP,
+          onClick: () => this.setHelpModalOpen(true),
+        },
+      ],
+    });
+
     const find = {
       eventType: 'ProcessSample',
       where: 'containerId IS NOT NULL',
@@ -100,8 +115,12 @@ export default class ContainerExplorerNerdlet extends React.Component {
     this.setState({ counts });
   }
 
+  setHelpModalOpen = (helpModalOpen) => {
+    this.setState({ helpModalOpen });
+  };
+
   render() {
-    const { counts, accounts } = this.state;
+    const { counts, accounts, helpModalOpen } = this.state;
 
     if (!accounts) {
       return <Spinner />;
@@ -110,19 +129,21 @@ export default class ContainerExplorerNerdlet extends React.Component {
     if (accounts.length === 0) {
       return (
         <EmptyState
-          heading="No Data"
+          fullHeight
+          iconType={EmptyState.ICON_TYPE.DATAVIZ__DATAVIZ__SERVICE_MAP_CHART}
+          title="No Data"
           description="Could not find any infrastructure data with container instrumentation."
-          buttonText="Install New Relic Infrastructure today!"
-          buttonOnClick={() => {
-            const url = 'https://newrelic.com/products/infrastructure';
-            window.open(url);
+          additionalInfoLink={{
+            label: 'Install New Relic Infrastructure today!',
+            to: 'https://newrelic.com/products/infrastructure',
           }}
         />
       );
     }
 
     return (
       <div style={{ height: '100%' }}>
+        <Messages repo="nr1-container-explorer" branch="main" />
         <Header
           {...this.state}
           setAccount={this.setAccount}
@@ -140,6 +161,32 @@ export default class ContainerExplorerNerdlet extends React.Component {
             setGroup={this.setGroup}
           />
         )}
+        <HelpModal
+          isModalOpen={helpModalOpen}
+          setModalOpen={this.setHelpModalOpen}
+          urls={{
+            docs: 'https://github.com/newrelic/nr1-container-explorer#readme',
+            createIssue:
+              'https://github.com/newrelic/nr1-container-explorer/issues/new?assignees=&labels=bug%2C+needs-triage&template=bug_report.md&title=',
+            createFeature:
+              'https://github.com/newrelic/nr1-container-explorer/issues/new?assignees=&labels=enhancement%2C+needs-triage&template=enhancement.md&title=',
+            createQuestion:
+              'https://github.com/newrelic/nr1-container-explorer/discussions/new/choose',
+          }}
+          ownerBadge={{
+            logo: {
+              src: 'https://drive.google.com/thumbnail?id=1BdXVy2X34rufvG4_1BYb9czhLRlGlgsT',
+              alt: 'New Relic Labs',
+            },
+            blurb: {
+              text: 'This is a New Relic Labs open source app.',
+              link: {
+                text: 'Take a look at our other repos',
+                url: 'https://github.com/newrelic?q=nrlabs-viz&type=all&language=&sort=',
+              },
+            },
+          }}
+        />
       </div>
     );
   }

diff --git a/nerdlets/container-explorer/container-explorer.js b/nerdlets/container-explorer/container-explorer.js
@@ -147,14 +147,8 @@ export default class ContainerExplorer extends React.Component {
   }
 
   render() {
-    const {
-      addFilter,
-      counts,
-      account,
-      filters,
-      group,
-      removeFilter,
-    } = this.props;
+    const { addFilter, counts, account, filters, group, removeFilter } =
+      this.props;
     const { groups, containerId } = this.state || {};
 
     const tooMany = counts.containers > 2000;

diff --git a/nerdlets/container-explorer/container-heat-map.js b/nerdlets/container-explorer/container-heat-map.js
@@ -59,13 +59,8 @@ export default class ContainerHeatMap extends React.Component {
   }
 
   renderHeatMap(plot) {
-    const {
-      account,
-      setFacetValue,
-      selectContainer,
-      containerId,
-      group,
-    } = this.props;
+    const { account, setFacetValue, selectContainer, containerId, group } =
+      this.props;
     const nrql = this.getNrql(plot.select);
 
     // if the user clicks on a title (facet value) when viewing as a group, then

diff --git a/nerdlets/container-explorer/styles.scss b/nerdlets/container-explorer/styles.scss
@@ -1,5 +1,4 @@
 @import "../../components/heat-map.scss";
-@import '~@newrelic/nr1-community/dist/index.css';
 
 .facet-table {
   width: 100%;

diff --git a/nerdlets/service-containers/heat-maps.js b/nerdlets/service-containers/heat-maps.js
@@ -89,7 +89,7 @@ export default class ContainerHeatMap extends React.PureComponent {
     const { entity, infraAccount, selectContainer, containerId } = this.props;
     const { timeRange, where } = this.state;
 
-    if (!infraAccount || !timeRange) return <div />;
+    if (!infraAccount || !timeRange) return null;
     return (
       <div>
         {HEAT_MAPS.map(({ title, select, formatValue, eventType, max }) => {
@@ -100,7 +100,7 @@ export default class ContainerHeatMap extends React.PureComponent {
           // a heatmap for infra metrics
           // ALSO need a different time window to get accurate values
           if (eventType === 'ProcessSample') {
-            if (!infraAccount) return <div />;
+            if (!infraAccount) return null;
             accountId = infraAccount.id;
           }
 

diff --git a/nerdlets/service-containers/service-containers.js b/nerdlets/service-containers/service-containers.js
@@ -11,7 +11,7 @@ import {
 } from 'nr1';
 
 import nrdbQuery from '../../lib/nrdb-query';
-import { timeRangeToNrql } from '@newrelic/nr1-community';
+import { timeRangeToNrql } from '@newrelic/nr-labs-components';
 import findRelatedAccountsWith from '../../lib/find-related-account-with';
 import accountsWithData from '../../lib/accounts-with-data';
 

diff --git a/nerdlets/shared/container-charts.js b/nerdlets/shared/container-charts.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { PlatformStateContext, LineChart, NrqlQuery, ChartGroup } from 'nr1';
-import { timeRangeToNrql } from '@newrelic/nr1-community';
+import { timeRangeToNrql } from '@newrelic/nr-labs-components';
 
 // roll up all of the facet data into a single summarized series.
 function summarizeFacets(data) {