Merge pull request #2053 from weaveworks/lodash-partial-imports

Importing lodash util functions explicitly

client/.babelrc

@@ -1,3 +1,4 @@
 {
+  "plugins": ["lodash"],
   "presets": ["es2015", "react"]
 }

client/app/scripts/actions/app-actions.js

@@ -35,11 +35,11 @@ export function toggleHelp() {
 }
 
 
-export function sortOrderChanged(sortBy, sortedDesc) {
+export function sortOrderChanged(sortedBy, sortedDesc) {
   return (dispatch, getState) => {
     dispatch({
       type: ActionTypes.SORT_ORDER_CHANGED,
-      sortBy, sortedDesc
+      sortedBy, sortedDesc
     });
     updateRoute(getState);
   };

client/app/scripts/charts/edge-container.js

@@ -1,9 +1,9 @@
-import _ from 'lodash';
 import React from 'react';
 import { connect } from 'react-redux';
 import { Motion, spring } from 'react-motion';
 import { Map as makeMap } from 'immutable';
 import { line, curveBasis } from 'd3-shape';
+import { each, omit, times, constant } from 'lodash';
 
 import { uniformSelect } from '../utils/array-utils';
 import { round } from '../utils/math-utils';
@@ -24,7 +24,7 @@ const spline = line()
 
 const buildPath = (points, layoutPrecision) => {
   const extracted = [];
-  _.each(points, (value, key) => {
+  each(points, (value, key) => {
     const axis = key[0];
     const index = key.slice(1);
     if (!extracted[index]) {
@@ -57,7 +57,7 @@ class EdgeContainer extends React.Component {
 
   render() {
     const { layoutPrecision, points } = this.props;
-    const other = _.omit(this.props, 'points');
+    const other = omit(this.props, 'points');
 
     if (layoutPrecision === 0) {
       const path = spline(points.toJS());
@@ -88,7 +88,7 @@ class EdgeContainer extends React.Component {
     if (pointsMissing > 0) {
       // Whenever there are some waypoints missing, we simply populate the beginning of the
       // array with the first element, as this leaves the curve interpolation unchanged.
-      nextPoints = _.times(pointsMissing, _.constant(nextPoints[0])).concat(nextPoints);
+      nextPoints = times(pointsMissing, constant(nextPoints[0])).concat(nextPoints);
     } else if (pointsMissing < 0) {
       // If there are 'too many' waypoints given by dagre, we select a sub-array of
       // uniformly distributed indices. Note that it is very important to keep the first

client/app/scripts/charts/node-container.js

@@ -1,5 +1,5 @@
-import _ from 'lodash';
 import React from 'react';
+import { omit } from 'lodash';
 import { connect } from 'react-redux';
 import { Motion, spring } from 'react-motion';
 
@@ -11,7 +11,7 @@ class NodeContainer extends React.Component {
     const { dx, dy, focused, layoutPrecision, zoomScale } = this.props;
     const animConfig = [80, 20]; // stiffness, damping
     const scaleFactor = focused ? (1 / zoomScale) : 1;
-    const other = _.omit(this.props, 'dx', 'dy');
+    const other = omit(this.props, 'dx', 'dy');
 
     return (
       <Motion style={{

client/app/scripts/charts/nodes-chart.js

@@ -1,7 +1,7 @@
-import _ from 'lodash';
 import debug from 'debug';
 import React from 'react';
 import { connect } from 'react-redux';
+import { assign, pick, includes } from 'lodash';
 import { Map as makeMap, fromJS } from 'immutable';
 import timely from 'timely';
 
@@ -145,7 +145,7 @@ class NodesChart extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     // gather state, setState should be called only once here
-    const state = _.assign({}, this.state);
+    const state = assign({}, this.state);
 
     // wipe node states when showing different topology
     if (nextProps.topologyId !== this.props.topologyId) {
@@ -157,12 +157,12 @@ class NodesChart extends React.Component {
       }
 
       // saving previous zoom state
-      const prevZoom = _.pick(this.state, ZOOM_CACHE_FIELDS);
-      const zoomCache = _.assign({}, this.state.zoomCache);
+      const prevZoom = pick(this.state, ZOOM_CACHE_FIELDS);
+      const zoomCache = assign({}, this.state.zoomCache);
       zoomCache[this.props.topologyId] = prevZoom;
 
       // clear canvas and apply zoom state
-      _.assign(state, nextZoom, { zoomCache }, {
+      assign(state, nextZoom, { zoomCache }, {
         nodes: makeMap(),
         edges: makeMap()
       });
@@ -173,14 +173,14 @@ class NodesChart extends React.Component {
     state.width = nextProps.forceRelayout ? nextProps.width : (state.width || nextProps.width);
 
     if (nextProps.forceRelayout || nextProps.nodes !== this.props.nodes) {
-      _.assign(state, this.updateGraphState(nextProps, state));
+      assign(state, this.updateGraphState(nextProps, state));
     }
 
     if (this.props.selectedNodeId !== nextProps.selectedNodeId) {
-      _.assign(state, this.restoreLayout(state));
+      assign(state, this.restoreLayout(state));
     }
     if (nextProps.selectedNodeId) {
-      _.assign(state, this.centerSelectedNode(nextProps, state));
+      assign(state, this.centerSelectedNode(nextProps, state));
     }
 
     this.setState(state);
@@ -295,8 +295,8 @@ class NodesChart extends React.Component {
     stateEdges = stateEdges.map(edge => {
       if (edge.get('source') === props.selectedNodeId
         || edge.get('target') === props.selectedNodeId
-        || _.includes(adjacentLayoutNodeIds, edge.get('source'))
-        || _.includes(adjacentLayoutNodeIds, edge.get('target'))) {
+        || includes(adjacentLayoutNodeIds, edge.get('source'))
+        || includes(adjacentLayoutNodeIds, edge.get('target'))) {
         const source = stateNodes.get(edge.get('source'));
         const target = stateNodes.get(edge.get('target'));
         return edge.set('points', fromJS([

client/app/scripts/charts/nodes-grid.js

@@ -90,12 +90,12 @@ class NodesGrid extends React.Component {
     this.props.clickNode(node.id, node.label, el.getBoundingClientRect());
   }
 
-  onSortChange(sortBy, sortedDesc) {
-    this.props.sortOrderChanged(sortBy, sortedDesc);
+  onSortChange(sortedBy, sortedDesc) {
+    this.props.sortOrderChanged(sortedBy, sortedDesc);
   }
 
   render() {
-    const { margins, nodes, height, gridSortBy, gridSortedDesc,
+    const { margins, nodes, height, gridSortedBy, gridSortedDesc,
       searchNodeMatches = makeMap(), searchQuery } = this.props;
     const cmpStyle = {
       height,
@@ -129,7 +129,7 @@ class NodesGrid extends React.Component {
           topologyId={this.props.currentTopologyId}
           onSortChange={this.onSortChange}
           onClickRow={this.onClickRow}
-          sortBy={gridSortBy}
+          sortedBy={gridSortedBy}
           sortedDesc={gridSortedDesc}
           selectedNodeId={this.props.selectedNodeId}
           limit={1000}
@@ -144,7 +144,7 @@ class NodesGrid extends React.Component {
 function mapStateToProps(state) {
   return {
     nodes: nodesSelector(state),
-    gridSortBy: state.get('gridSortBy'),
+    gridSortedBy: state.get('gridSortedBy'),
     gridSortedDesc: state.get('gridSortedDesc'),
     currentTopology: state.get('currentTopology'),
     currentTopologyId: state.get('currentTopologyId'),

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>}