feat: adjusting main menu functionalities

.github/workflows/pr.yml

@@ -73,7 +73,7 @@ jobs:
       - name: Run eslint-check and generate report
         id: eslint-check
         run: |
-          npm run eslint-check -- --output-file eslint_report.json --format json
+          npm run eslint-check
         continue-on-error: true
 
       - name: Annotate Lint Results

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  printWidth: 100,
+  trailingComma: 'es5',
+  tabWidth: 2,
+  singleQuote: true,
+  useTabs: false,
+  jsxSingleQuote: true,
+};

README.md

@@ -1,6 +1,6 @@
 [![New Relic One Catalog Project header](https://github.com/newrelic/opensource-website/raw/master/src/images/categories/New_Relic_One_Catalog_Project.png)](https://opensource.newrelic.com/oss-category/#new-relic-one-catalog-project)
 
-# New Relic One Network Telemetry (nr1-network-telemetry)
+# NR1 Network Telemetry (nr1-network-telemetry)
 
 ![CI](https://github.com/newrelic/nr1-network-telemetry/workflows/CI/badge.svg) ![GitHub release (latest SemVer including pre-releases)](https://img.shields.io/github/v/release/newrelic/nr1-network-telemetry?include_prereleases&sort=semver) [![Snyk](https://snyk.io/test/github/newrelic/nr1-network-telemetry/badge.svg)](https://snyk.io/test/github/newrelic/nr1-network-telemetry)
 
@@ -42,7 +42,9 @@ Next, clone this repository and run the following scripts:
 ```bash
 nr1 nerdpack:clone -r https://github.com/newrelic/nr1-network-telemetry.git
 cd nr1-network-telemetry
-nr1 nerdpack:serve
+nr1 nerdpack:uuid -gf
+npm install
+npm start
 ```
 
 Visit [https://one.newrelic.com/?nerdpacks=local](https://one.newrelic.com/?nerdpacks=local), navigate to the Nerdpack, and :sparkles:

commitlint.config.js

@@ -1,7 +1,7 @@
 module.exports = {
-  extends: ["@commitlint/config-conventional"],
+  extends: ['@commitlint/config-conventional'],
   rules: {
-    "scope-case": [0],
-    "subject-case": [0],
+    'scope-case': [0],
+    'subject-case': [0],
   },
 };

jest.config.js

@@ -1,19 +1,19 @@
 module.exports = {
-  collectCoverageFrom: ["**/*.js?(x)"],
-  coveragePathIgnorePatterns: ["index.js", "test"],
+  collectCoverageFrom: ['**/*.js?(x)'],
+  coveragePathIgnorePatterns: ['index.js', 'test'],
   moduleNameMapper: {
-    "\\.(scss|css)$": "<rootDir>/test/utils/mocks/styleMock.jsx",
-    "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
-      "identity-obj-proxy",
-    "^shared/(.*)$": "<rootDir>/lib/$1",
-    "^testUtils/(.+)$": "<rootDir>/test/utils/$1",
+    '\\.(scss|css)$': '<rootDir>/test/utils/mocks/styleMock.jsx',
+    '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      'identity-obj-proxy',
+    '^shared/(.*)$': '<rootDir>/lib/$1',
+    '^testUtils/(.+)$': '<rootDir>/test/utils/$1',
   },
   // Ignore npm caching to avoid problems with jest and chalk throwing errors
   // when running in grand central. Fix grabbed from this github issue:
   // https://github.com/facebook/jest/issues/4682#issuecomment-352899677
-  modulePathIgnorePatterns: ["npm-cache", ".npm"],
-  rootDir: ".",
-  setupFiles: ["<rootDir>/test/utils/setupTests.jsx"],
-  testMatch: ["<rootDir>/**/*.test.js?(x)"],
-  testPathIgnorePatterns: ["/node_modules/", "/__mocks__/", ".eslintrc.js"],
+  modulePathIgnorePatterns: ['npm-cache', '.npm'],
+  rootDir: '.',
+  setupFiles: ['<rootDir>/test/utils/setupTests.jsx'],
+  testMatch: ['<rootDir>/**/*.test.js?(x)'],
+  testPathIgnorePatterns: ['/node_modules/', '/__mocks__/', '.eslintrc.js'],
 };

nerdlets/network-telemetry-overview/MainMenu.jsx

@@ -1,16 +1,18 @@
-import { BlockText, Checkbox, Radio, RadioGroup, nerdlet } from "nr1";
-import { AccountDropdown } from "../../src/components/account-dropdown";
+import { BlockText, Checkbox, Radio, RadioGroup, nerdlet } from 'nr1';
+import { AccountDropdown } from '../../src/components/account-dropdown';
 import {
   DATA_SOURCES,
   INTERVAL_SECONDS_DEFAULT,
   INTERVAL_SECONDS_MAX,
   INTERVAL_SECONDS_MIN,
   NRQL_QUERY_LIMIT_DEFAULT,
-} from "./constants";
-import InputRange from "react-input-range";
-import PropTypes from "prop-types";
-import React from "react";
-import debounce from "lodash/debounce";
+  NRQL_QUERY_LIMIT_MAX,
+  NRQL_QUERY_LIMIT_MIN,
+} from './constants';
+import InputRange from 'react-input-range';
+import PropTypes from 'prop-types';
+import React from 'react';
+import debounce from 'lodash/debounce';
 
 export default class MainMenu extends React.Component {
   static propTypes = {
@@ -33,10 +35,7 @@ export default class MainMenu extends React.Component {
 
   handleDataSourceChange = value => {
     const dataSource = parseInt(value, 10);
-
-    if (dataSource >= 0) {
-      nerdlet.setUrlState({ dataSource });
-    }
+    nerdlet.setUrlState({ dataSource });
   };
 
   handleIntervalSecondsChange = debounce(value => {
@@ -53,6 +52,20 @@ export default class MainMenu extends React.Component {
     }
   }
 
+  handleLimitChange(evt, value) {
+    const queryLimit = parseInt(value, 10);
+
+    if (queryLimit >= NRQL_QUERY_LIMIT_MIN && queryLimit <= NRQL_QUERY_LIMIT_MAX) {
+      nerdlet.setUrlState({ queryLimit });
+    }
+  }
+
+  handleHideLabelsChange(evt) {
+    const hideLabels = ((evt || {}).target || {}).checked || false;
+
+    nerdlet.setUrlState({ hideLabels });
+  }
+
   render() {
     const dataSource = this.props.nerdletUrlState.dataSource || 0;
     const queryLimit = this.props.nerdletUrlState.queryLimit || NRQL_QUERY_LIMIT_DEFAULT;
@@ -67,6 +80,7 @@ export default class MainMenu extends React.Component {
         <AccountDropdown
           accountFilter={this.accountFilter}
           className='account-dropdown'
+          onLoaded={this.handleAccountChange}
           onSelect={this.handleAccountChange}
           urlState={this.props.nerdletUrlState}
         />

nerdlets/network-telemetry-overview/common.jsx

@@ -1,14 +1,14 @@
-import { BlockText, Icon } from "nr1";
-import React from "react";
+import { BlockText, Icon } from 'nr1';
+import React from 'react';
 
 export const renderDeviceHeader = (deviceName, deviceType) => {
   return (
     <div className='network-summary__header'>
       <Icon type={Icon.TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__NETWORK} />
       <div className='network-summary__header-name'>
-        <BlockText type={BlockText.TYPE.PARAGRAPH}>{deviceName || "All Devices"}</BlockText>
+        <BlockText type={BlockText.TYPE.PARAGRAPH}>{deviceName || 'All Devices'}</BlockText>
         <BlockText className='sub-heading' type={BlockText.TYPE.NORMAL}>
-          {deviceType || "Device"}
+          {deviceType || 'Device'}
         </BlockText>
       </div>
     </div>

nerdlets/network-telemetry-overview/constants.js

@@ -1,5 +1,5 @@
-import Ipfix from "./ipfix";
-import Sflow from "./sflow";
+import Ipfix from './ipfix';
+import Sflow from './sflow';
 
 /*
  * Constants
@@ -12,44 +12,44 @@ export const INTERVAL_SECONDS_DEFAULT = 30;
 
 export const BLURRED_LINK_OPACITY = 0.3;
 export const FOCUSED_LINK_OPACITY = 0.8;
-export const COLOR_END = "#FFC400";
-export const COLOR_START = "#3ED2F2";
+export const COLOR_END = '#FFC400';
+export const COLOR_START = '#3ED2F2';
 export const COLORS = [
-  "#11A893",
-  "#00B3D7",
-  "#FFC400",
-  "#A45AC1",
-  "#83CB4E",
-  "#FA6E37",
-  "#C40685",
-
-  "#4ACAB7",
-  "#3ED2F2",
-  "#FFDD78",
-  "#C07DDB",
-  "#A2E572",
-  "#FF9269",
-  "#E550B0",
-
-  "#0E7365",
-  "#0189A4",
-  "#CE9E00",
-  "#79428E",
-  "#63973A",
-  "#C6562C",
-  "#910662",
+  '#11A893',
+  '#00B3D7',
+  '#FFC400',
+  '#A45AC1',
+  '#83CB4E',
+  '#FA6E37',
+  '#C40685',
+
+  '#4ACAB7',
+  '#3ED2F2',
+  '#FFDD78',
+  '#C07DDB',
+  '#A2E572',
+  '#FF9269',
+  '#E550B0',
+
+  '#0E7365',
+  '#0189A4',
+  '#CE9E00',
+  '#79428E',
+  '#63973A',
+  '#C6562C',
+  '#910662',
 ];
 
 export const NRQL_QUERY_LIMIT_DEFAULT = 50;
 export const NRQL_QUERY_LIMIT_MIN = 1;
 export const NRQL_QUERY_LIMIT_MAX = 100;
 
 export const NRQL_IPFIX_WHERE_NO_PRIVATE_ASN =
-  " WHERE (bgpSourceAsNumber > 1 AND bgpSourceAsNumber < 64495)" +
-  " OR (bgpSourceAsNumber > 65534 AND bgpSourceAsNumber < 4200000000)" +
-  " OR (bgpSourceAsNumber > 4294967294)";
+  ' WHERE (bgpSourceAsNumber > 1 AND bgpSourceAsNumber < 64495)' +
+  ' OR (bgpSourceAsNumber > 65534 AND bgpSourceAsNumber < 4200000000)' +
+  ' OR (bgpSourceAsNumber > 4294967294)';
 
 export const DATA_SOURCES = [
-  { component: Ipfix, eventType: "ipfix", name: "ipfix" },
-  { component: Sflow, eventType: "sflow", name: "sflow" },
+  { component: Ipfix, eventType: 'ipfix', name: 'ipfix' },
+  { component: Sflow, eventType: 'sflow', name: 'sflow' },
 ];

nerdlets/network-telemetry-overview/fetch.js

@@ -1,5 +1,5 @@
-import { COLORS } from "./constants";
-import { fetchNrqlResults } from "../../src/lib/nrql";
+import { COLORS } from './constants';
+import { fetchNrqlResults } from '../../src/lib/nrql';
 
 /*
  * Fetch some node /link stuff via NRQL
@@ -17,7 +17,13 @@ export const fetchRelationshipFacets = async (accountId, nrqlQuery) => {
       const ids = (row.facet || []).map(f => {
         const id = nodes.findIndex(node => node.name === f);
         if (id < 0)
-          return nodes.push({ color: COLORS[nodes.length % COLORS.length], name: f, value: 0 }) - 1;
+          return (
+            nodes.push({
+              color: COLORS[nodes.length % COLORS.length],
+              name: f,
+              value: 0,
+            }) - 1
+          );
 
         return id;
       });

nerdlets/network-telemetry-overview/index.jsx

@@ -1,5 +1,5 @@
-import NetworkTelemetryNerdlet from "./network-telemetry-nerdlet";
-import React from "react";
+import NetworkTelemetryNerdlet from './network-telemetry-nerdlet';
+import React from 'react';
 
 export default class Wrapper extends React.PureComponent {
   render() {

nerdlets/network-telemetry-overview/ip-address.jsx

@@ -1,9 +1,9 @@
-import { Toast, navigation } from "nr1";
-import PropTypes from "prop-types";
-import React from "react";
+import { Toast, navigation } from 'nr1';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-import findRelatedAccountsWith from "../../src/lib/find-related-account-with";
-import nrdbQuery from "../../src/lib/nrdb-query";
+import findRelatedAccountsWith from '../../src/lib/find-related-account-with';
+import nrdbQuery from '../../src/lib/nrdb-query';
 
 /**
  * render an ip address that on click will attempt to find the
@@ -30,11 +30,14 @@ export default class IpAddress extends React.Component {
     const where = `ipV4Address LIKE '${ipAddress}/%'`;
     const notFoundToast = {
       description: `Could not find ${ipAddress} on any monitored hosts.`,
-      title: "IP Address Not Found",
+      title: 'IP Address Not Found',
       type: Toast.TYPE.NORMAL,
     };
 
-    const accounts = await findRelatedAccountsWith({ eventType: "NetworkSample", where });
+    const accounts = await findRelatedAccountsWith({
+      eventType: 'NetworkSample',
+      where,
+    });
     if (accounts.length === 0) {
       Toast.showToast(notFoundToast);
     } else {
@@ -52,7 +55,7 @@ export default class IpAddress extends React.Component {
 
   render() {
     const { searching } = this.state || {};
-    const className = searching ? "ip-address-searching" : "ip-address";
+    const className = searching ? 'ip-address-searching' : 'ip-address';
     return (
       <div
         className={className}
@@ -61,7 +64,7 @@ export default class IpAddress extends React.Component {
         role='button'
         tabIndex={0}
       >
-        {this.props.value || "(unknown)"}
+        {this.props.value || '(unknown)'}
       </div>
     );
   }