Importing lodash util functions explicitly.

client/app/scripts/components/debug-toolbar.js

@@ -1,8 +1,8 @@
 /* eslint react/jsx-no-bind: "off" */
 import React from 'react';
-import _ from 'lodash';
 import Perf from 'react-addons-perf';
 import { connect } from 'react-redux';
+import { sampleSize, sample, random, range, flattenDeep } from 'lodash';
 import { fromJS, Set as makeSet } from 'immutable';
 import { hsl } from 'd3-color';
 
@@ -28,7 +28,7 @@ ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor i
 voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
 
-const sample = (collection, n = 4) => _.sampleSize(collection, _.random(n));
+const sampleArray = (collection, n = 4) => sampleSize(collection, random(n));
 
 
 const shapeTypes = {
@@ -39,7 +39,7 @@ const shapeTypes = {
 };
 
 
-const LABEL_PREFIXES = _.range('A'.charCodeAt(), 'Z'.charCodeAt() + 1)
+const LABEL_PREFIXES = range('A'.charCodeAt(), 'Z'.charCodeAt() + 1)
   .map(n => String.fromCharCode(n));
 
 
@@ -80,7 +80,7 @@ function label(shape, stacked) {
 
 
 function addAllVariants(dispatch) {
-  const newNodes = _.flattenDeep(STACK_VARIANTS.map(stack => (SHAPES.map(s => {
+  const newNodes = flattenDeep(STACK_VARIANTS.map(stack => (SHAPES.map(s => {
     if (!stack) return [deltaAdd(label(s, stack), [], s, stack, 1)];
     return NODE_COUNTS.map(n => deltaAdd(label(s, stack), [], s, stack, n));
   }))));
@@ -92,7 +92,7 @@ function addAllVariants(dispatch) {
 
 
 function addAllMetricVariants(availableMetrics) {
-  const newNodes = _.flattenDeep(METRIC_FILLS.map((v, i) => (
+  const newNodes = flattenDeep(METRIC_FILLS.map((v, i) => (
     SHAPES.map(s => [addMetrics(availableMetrics, deltaAdd(label(s) + i, [], s), v)])
   )));
 
@@ -201,7 +201,7 @@ class DebugToolbar extends React.Component {
         // remove random node
         const ns = this.props.nodes;
         const nodeNames = ns.keySeq().toJS();
-        const randomNode = _.sample(nodeNames);
+        const randomNode = sample(nodeNames);
         this.asyncDispatch(receiveNodesDelta({
           remove: [randomNode]
         }));
@@ -219,7 +219,7 @@ class DebugToolbar extends React.Component {
         // filter random node
         const ns = this.props.nodes;
         const nodeNames = ns.keySeq().toJS();
-        const randomNode = _.sample(nodeNames);
+        const randomNode = sample(nodeNames);
         if (randomNode) {
           let nextNodes = ns.setIn([randomNode, 'filtered'], true);
           this.shortLivedNodes = this.shortLivedNodes.add(randomNode);
@@ -240,9 +240,9 @@ class DebugToolbar extends React.Component {
     const nodeNames = ns.keySeq().toJS();
     this.asyncDispatch(receiveNodesDelta({
       add: this._addNodes(7),
-      update: sample(nodeNames).map(n => ({
+      update: sampleArray(nodeNames).map(n => ({
         id: n,
-        adjacency: sample(nodeNames),
+        adjacency: sampleArray(nodeNames),
       }), nodeNames.length),
       remove: this._removeNode(),
     }));
@@ -251,18 +251,18 @@ class DebugToolbar extends React.Component {
   _addNodes(n, prefix = 'zing') {
     const ns = this.props.nodes;
     const nodeNames = ns.keySeq().toJS();
-    const newNodeNames = _.range(ns.size, ns.size + n).map(i => (
+    const newNodeNames = range(ns.size, ns.size + n).map(i => (
       // `${randomLetter()}${randomLetter()}-zing`
       `${prefix}${i}`
     ));
-    const allNodes = _(nodeNames).concat(newNodeNames).value();
+    const allNodes = nodeNames.concat(newNodeNames);
     return newNodeNames.map((name) => deltaAdd(
       name,
-      sample(allNodes),
-      _.sample(SHAPES),
-      _.sample(STACK_VARIANTS),
-      _.sample(NODE_COUNTS),
-      sample(NETWORKS, 10)
+      sampleArray(allNodes),
+      sample(SHAPES),
+      sample(STACK_VARIANTS),
+      sample(NODE_COUNTS),
+      sampleArray(NETWORKS, 10)
     ));
   }
 
@@ -278,7 +278,7 @@ class DebugToolbar extends React.Component {
   _removeNode() {
     const ns = this.props.nodes;
     const nodeNames = ns.keySeq().toJS();
-    return [nodeNames[_.random(nodeNames.length - 1)]];
+    return [nodeNames[random(nodeNames.length - 1)]];
   }
 
   removeNode() {

client/app/scripts/components/loading.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import _ from 'lodash';
+import { sample } from 'lodash';
 
 import { findTopologyById } from '../utils/topology-utils';
 import NodesError from '../charts/nodes-error';
@@ -41,7 +41,7 @@ export class Loading extends React.Component {
     super(props, context);
 
     this.state = {
-      template: _.sample(LOADING_TEMPLATES)
+      template: sample(LOADING_TEMPLATES)
     };
   }
 

client/app/scripts/components/node-details/__tests__/node-details-table-test.js

@@ -68,7 +68,7 @@ describe('NodeDetailsTable', () => {
         <Provider store={configureStore()}>
           <NodeDetailsTable
             columns={columns}
-            sortBy="kubernetes_ip"
+            sortedBy="kubernetes_ip"
             nodeIdKey="id"
             nodes={nodes}
           />
@@ -89,7 +89,7 @@ describe('NodeDetailsTable', () => {
         <Provider store={configureStore()}>
           <NodeDetailsTable
             columns={columns}
-            sortBy="kubernetes_namespace"
+            sortedBy="kubernetes_namespace"
             nodeIdKey="id"
             nodes={nodes}
           />

client/app/scripts/components/node-details/node-details-controls.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import _ from 'lodash';
+import { sortBy } from 'lodash';
 
 import NodeDetailsControlButton from './node-details-control-button';
 
@@ -18,7 +18,7 @@ export default function NodeDetailsControls({controls, error, nodeId, pending})
         <span className="node-details-controls-error-messages">{error}</span>
       </div>}
       <span className="node-details-controls-buttons">
-        {_.sortBy(controls, 'rank').map(control => <NodeDetailsControlButton
+        {sortBy(controls, 'rank').map(control => <NodeDetailsControlButton
           nodeId={nodeId} control={control} pending={pending} key={control.id} />)}
       </span>
       {controls && <span title="Applying..." className={spinnerClassName}></span>}

client/app/scripts/components/node-details/node-details-table.js

@@ -1,6 +1,6 @@
-import _ from 'lodash';
 import React from 'react';
 import classNames from 'classnames';
+import { find, get, union, sortBy, groupBy, concat } from 'lodash';
 
 import ShowMore from '../show-more';
 import NodeDetailsTableRow from './node-details-table-row';
@@ -57,16 +57,16 @@ const COLUMN_WIDTHS = {
 };
 
 
-function getDefaultSortBy(columns, nodes) {
+function getDefaultSortedBy(columns, nodes) {
   // default sorter specified by columns
-  const defaultSortColumn = _.find(columns, {defaultSort: true});
+  const defaultSortColumn = find(columns, {defaultSort: true});
   if (defaultSortColumn) {
     return defaultSortColumn.id;
   }
   // otherwise choose first metric
-  const firstNodeWithMetrics = _.find(nodes, n => _.get(n, ['metrics', 0]));
+  const firstNodeWithMetrics = find(nodes, n => get(n, ['metrics', 0]));
   if (firstNodeWithMetrics) {
-    return _.get(firstNodeWithMetrics, ['metrics', 0, 'id']);
+    return get(firstNodeWithMetrics, ['metrics', 0, 'id']);
   }
 
   return 'label';
@@ -84,7 +84,7 @@ function maybeToLower(value) {
 function getNodeValue(node, header) {
   const fieldId = header && header.id;
   if (fieldId !== null) {
-    let field = _.union(node.metrics, node.metadata).find(f => f.id === fieldId);
+    let field = union(node.metrics, node.metadata).find(f => f.id === fieldId);
 
     if (field) {
       if (isIP(header)) {
@@ -112,14 +112,14 @@ function getNodeValue(node, header) {
 }
 
 
-function getValueForSortBy(sortByHeader) {
-  return (node) => maybeToLower(getNodeValue(node, sortByHeader));
+function getValueForSortedBy(sortedByHeader) {
+  return (node) => maybeToLower(getNodeValue(node, sortedByHeader));
 }
 
 
 function getMetaDataSorters(nodes) {
   // returns an array of sorters that will take a node
-  return _.get(nodes, [0, 'metadata'], []).map((field, index) => node => {
+  return get(nodes, [0, 'metadata'], []).map((field, index) => node => {
     const nodeMetadataField = node.metadata && node.metadata[index];
     if (nodeMetadataField) {
       if (isNumber(nodeMetadataField)) {
@@ -133,7 +133,7 @@ function getMetaDataSorters(nodes) {
 
 
 function sortNodes(nodes, getValue, sortedDesc) {
-  const sortedNodes = _.sortBy(
+  const sortedNodes = sortBy(
     nodes,
     getValue,
     getMetaDataSorters(nodes)
@@ -145,16 +145,16 @@ function sortNodes(nodes, getValue, sortedDesc) {
 }
 
 
-function getSortedNodes(nodes, sortByHeader, sortedDesc) {
-  const getValue = getValueForSortBy(sortByHeader);
-  const withAndWithoutValues = _.groupBy(nodes, (n) => {
+function getSortedNodes(nodes, sortedByHeader, sortedDesc) {
+  const getValue = getValueForSortedBy(sortedByHeader);
+  const withAndWithoutValues = groupBy(nodes, (n) => {
     const v = getValue(n);
     return v !== null && v !== undefined ? 'withValues' : 'withoutValues';
   });
   const withValues = sortNodes(withAndWithoutValues.withValues, getValue, sortedDesc);
   const withoutValues = sortNodes(withAndWithoutValues.withoutValues, getValue, sortedDesc);
 
-  return _.concat(withValues, withoutValues);
+  return concat(withValues, withoutValues);
 }
 
 
@@ -188,19 +188,19 @@ export default class NodeDetailsTable extends React.Component {
     this.state = {
       limit: props.limit || this.DEFAULT_LIMIT,
       sortedDesc: this.props.sortedDesc,
-      sortBy: this.props.sortBy
+      sortedBy: this.props.sortedBy
     };
     this.handleLimitClick = this.handleLimitClick.bind(this);
   }
 
-  handleHeaderClick(ev, headerId, currentSortBy, currentSortedDesc) {
+  handleHeaderClick(ev, headerId, currentSortedBy, currentSortedDesc) {
     ev.preventDefault();
     const header = this.getColumnHeaders().find(h => h.id === headerId);
-    const sortBy = header.id;
-    const sortedDesc = header.id === currentSortBy
+    const sortedBy = header.id;
+    const sortedDesc = header.id === currentSortedBy
       ? !currentSortedDesc : defaultSortDesc(header);
-    this.setState({sortBy, sortedDesc});
-    this.props.onSortChange(sortBy, sortedDesc);
+    this.setState({sortedBy, sortedDesc});
+    this.props.onSortChange(sortedBy, sortedDesc);
   }
 
   handleLimitClick() {
@@ -213,7 +213,7 @@ export default class NodeDetailsTable extends React.Component {
     return [{id: 'label', label: this.props.label}].concat(columns);
   }
 
-  renderHeaders(sortBy, sortedDesc) {
+  renderHeaders(sortedBy, sortedDesc) {
     if (!this.props.nodes || this.props.nodes.length === 0) {
       return null;
     }
@@ -226,10 +226,10 @@ export default class NodeDetailsTable extends React.Component {
         {headers.map((header, i) => {
           const headerClasses = ['node-details-table-header', 'truncate'];
           const onHeaderClick = ev => {
-            this.handleHeaderClick(ev, header.id, sortBy, sortedDesc);
+            this.handleHeaderClick(ev, header.id, sortedBy, sortedDesc);
           };
           // sort by first metric by default
-          const isSorted = header.id === sortBy;
+          const isSorted = header.id === sortedBy;
           const isSortedDesc = isSorted && sortedDesc;
           const isSortedAsc = isSorted && !isSortedDesc;
 
@@ -261,13 +261,13 @@ export default class NodeDetailsTable extends React.Component {
     const { nodeIdKey, columns, topologyId, onClickRow, onMouseEnter, onMouseLeave,
       onMouseEnterRow, onMouseLeaveRow } = this.props;
 
-    const sortBy = this.state.sortBy || getDefaultSortBy(columns, this.props.nodes);
-    const sortByHeader = this.getColumnHeaders().find(h => h.id === sortBy);
+    const sortedBy = this.state.sortedBy || getDefaultSortedBy(columns, this.props.nodes);
+    const sortedByHeader = this.getColumnHeaders().find(h => h.id === sortedBy);
     const sortedDesc = this.state.sortedDesc !== null ?
       this.state.sortedDesc :
-      defaultSortDesc(sortByHeader);
+      defaultSortDesc(sortedByHeader);
 
-    let nodes = getSortedNodes(this.props.nodes, sortByHeader, sortedDesc);
+    let nodes = getSortedNodes(this.props.nodes, sortedByHeader, sortedDesc);
     const limited = nodes && this.state.limit > 0 && nodes.length > this.state.limit;
     const expanded = this.state.limit === 0;
     const notShown = nodes.length - this.state.limit;
@@ -283,7 +283,7 @@ export default class NodeDetailsTable extends React.Component {
         <div className="node-details-table-wrapper">
           <table className="node-details-table">
             <thead>
-              {this.renderHeaders(sortBy, sortedDesc)}
+              {this.renderHeaders(sortedBy, sortedDesc)}
             </thead>
             <tbody style={this.props.tbodyStyle} onMouseEnter={onMouseEnter}
               onMouseLeave={onMouseLeave}>
@@ -319,5 +319,5 @@ NodeDetailsTable.defaultProps = {
   nodeIdKey: 'id',  // key to identify a node in a row (used for topology links)
   onSortChange: () => {},
   sortedDesc: null,
-  sortBy: null,
+  sortedBy: null,
 };

client/app/scripts/components/search.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import _ from 'lodash';
+import { debounce } from 'lodash';
 
 import { blurSearch, doSearch, focusSearch, showHelp } from '../actions/app-actions';
 import { slugify } from '../utils/string-utils';
@@ -48,7 +48,7 @@ class Search extends React.Component {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
-    this.doSearch = _.debounce(this.doSearch.bind(this), 200);
+    this.doSearch = debounce(this.doSearch.bind(this), 200);
     this.state = {
       value: ''
     };

client/app/scripts/components/terminal.js

@@ -4,7 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
-import _ from 'lodash';
+import { debounce } from 'lodash';
 
 import { clickCloseTerminal } from '../actions/app-actions';
 import { getNeutralColor } from '../utils/color-utils';
@@ -98,7 +98,7 @@ class Terminal extends React.Component {
     this.handleCloseClick = this.handleCloseClick.bind(this);
     this.handlePopoutTerminal = this.handlePopoutTerminal.bind(this);
     this.handleResize = this.handleResize.bind(this);
-    this.handleResizeDebounced = _.debounce(this.handleResize, 500);
+    this.handleResizeDebounced = debounce(this.handleResize, 500);
   }
 
   createWebsocket(term) {