Merge pull request #1171 from weaveworks/npm-updates

React/lodash/babel upgrades + updated linting (linted)

client/app/scripts/utils/__tests__/string-utils-test.js

@@ -1,12 +1,12 @@
 jest.dontMock('../string-utils');
 
-describe('StringUtils', function() {
+describe('StringUtils', () => {
   const StringUtils = require('../string-utils');
 
-  describe('formatMetric', function() {
+  describe('formatMetric', () => {
     const formatMetric = StringUtils.formatMetric;
 
-    it('it should render 0', function() {
+    it('it should render 0', () => {
       expect(formatMetric(0)).toBe('0.00');
     });
   });

client/app/scripts/utils/__tests__/web-api-utils-test.js

@@ -1,24 +1,24 @@
 jest.dontMock('../web-api-utils');
 
-describe('WebApiUtils', function() {
+describe('WebApiUtils', () => {
   const WebApiUtils = require('../web-api-utils');
 
-  describe('basePath', function() {
+  describe('basePath', () => {
     const basePath = WebApiUtils.basePath;
 
-    it('should handle /scope/terminal.html', function() {
+    it('should handle /scope/terminal.html', () => {
       expect(basePath('/scope/terminal.html')).toBe('/scope');
     });
 
-    it('should handle /scope/', function() {
+    it('should handle /scope/', () => {
       expect(basePath('/scope/')).toBe('/scope');
     });
 
-    it('should handle /scope', function() {
+    it('should handle /scope', () => {
       expect(basePath('/scope')).toBe('/scope');
     });
 
-    it('should handle /', function() {
+    it('should handle /', () => {
       expect(basePath('/')).toBe('');
     });
   });

client/app/scripts/utils/color-utils.js

@@ -15,9 +15,8 @@ const letterRange = endLetterRange - startLetterRange;
 function text2degree(text) {
   const input = text.substr(0, 2).toUpperCase();
   let num = 0;
-  let charCode;
   for (let i = 0; i < input.length; i++) {
-    charCode = Math.max(Math.min(input[i].charCodeAt(), endLetterRange), startLetterRange);
+    const charCode = Math.max(Math.min(input[i].charCodeAt(), endLetterRange), startLetterRange);
     num += Math.pow(letterRange, input.length - i - 1) * (charCode - startLetterRange);
   }
   hueScale.domain([0, Math.pow(letterRange, input.length)]);

client/app/scripts/utils/file-utils.js

@@ -8,21 +8,20 @@ const prefix = {
   svg: 'http://www.w3.org/2000/svg'
 };
 const cssSkipValues = {
-  'auto': true,
+  auto: true,
   '0px 0px': true,
-  'visible': true,
-  'pointer': true
+  visible: true,
+  pointer: true
 };
 
 function setInlineStyles(svg, target, emptySvgDeclarationComputed) {
   function explicitlySetStyle(element, targetEl) {
     const cSSStyleDeclarationComputed = getComputedStyle(element);
-    let value;
     let computedStyleStr = '';
     _.each(cSSStyleDeclarationComputed, key => {
-      value = cSSStyleDeclarationComputed.getPropertyValue(key);
+      const value = cSSStyleDeclarationComputed.getPropertyValue(key);
       if (value !== emptySvgDeclarationComputed.getPropertyValue(key) && !cssSkipValues[value]) {
-        computedStyleStr += key + ':' + value + ';';
+        computedStyleStr += `${key}:${value};`;
       }
     });
     targetEl.setAttribute('style', computedStyleStr);
@@ -70,23 +69,22 @@ function download(source, name) {
   if (name) {
     filename = name;
   } else if (window.document.title) {
-    filename = window.document.title.replace(/[^a-z0-9]/gi, '-').toLowerCase()
-      + '-' + (+new Date);
+    filename = `${window.document.title.replace(/[^a-z0-9]/gi, '-').toLowerCase()}-${(+new Date)}`;
   }
 
   const url = window.URL.createObjectURL(new Blob(source,
-    {'type': 'text\/xml'}
+    {type: 'text\/xml'}
   ));
 
   const a = document.createElement('a');
   document.body.appendChild(a);
   a.setAttribute('class', 'svg-crowbar');
-  a.setAttribute('download', filename + '.svg');
+  a.setAttribute('download', `${filename}.svg`);
   a.setAttribute('href', url);
   a.style.display = 'none';
   a.click();
 
-  setTimeout(function() {
+  setTimeout(() => {
     window.URL.revokeObjectURL(url);
   }, 10);
 }
@@ -120,7 +118,7 @@ function getSVG(doc, emptySvgDeclarationComputed) {
 function cleanup() {
   const crowbarElements = document.querySelectorAll('.svg-crowbar');
 
-  [].forEach.call(crowbarElements, function(el) {
+  [].forEach.call(crowbarElements, (el) => {
     el.parentNode.removeChild(el);
   });
 

client/app/scripts/utils/router-utils.js

@@ -23,17 +23,17 @@ export function updateRoute() {
 
   if (shouldReplaceState(prevState, state)) {
     // Replace the top of the history rather than pushing on a new item.
-    page.replace('/state/' + stateUrl, state, dispatch);
+    page.replace(`/state/${stateUrl}`, state, dispatch);
   } else {
-    page.show('/state/' + stateUrl, state, dispatch);
+    page.show(`/state/${stateUrl}`, state, dispatch);
   }
 }
 
-page('/', function() {
+page('/', () => {
   updateRoute();
 });
 
-page('/state/:state', function(ctx) {
+page('/state/:state', (ctx) => {
   const state = JSON.parse(ctx.params.state);
   route(state);
 });

client/app/scripts/utils/topology-utils.js

@@ -10,34 +10,30 @@ export function findTopologyById(subTree, topologyId) {
     if (!foundTopology && topology.has('sub_topologies')) {
       foundTopology = findTopologyById(topology.get('sub_topologies'), topologyId);
     }
-    if (foundTopology) {
-      return false;
-    }
   });
 
   return foundTopology;
 }
 
-
 export function updateNodeDegrees(nodes, edges) {
   return nodes.map(node => {
     const nodeId = node.get('id');
-    const degree = edges.count(edge => {
-      return edge.get('source') === nodeId || edge.get('target') === nodeId;
-    });
+    const degree = edges.count(edge => edge.get('source') === nodeId
+      || edge.get('target') === nodeId);
     return node.set('degree', degree);
   });
 }
 
 /* set topology.id in place on each topology */
 export function updateTopologyIds(topologies) {
-  topologies.forEach(topology => {
-    topology.id = topology.url.split('/').pop();
+  return topologies.map(topology => {
+    const result = Object.assign({}, topology);
+    result.id = topology.url.split('/').pop();
     if (topology.sub_topologies) {
-      updateTopologyIds(topology.sub_topologies);
+      result.sub_topologies = updateTopologyIds(topology.sub_topologies);
     }
+    return result;
   });
-  return topologies;
 }
 
 // adds ID field to topology (based on last part of URL path) and save urls in

client/app/scripts/utils/update-buffer-utils.js

@@ -46,13 +46,14 @@ function consolidateBuffer() {
   let toAdd = _.union(first.add, second.add);
   let toUpdate = _.union(first.update, second.update);
   let toRemove = _.union(first.remove, second.remove);
-  log('Consolidating delta buffer', 'add', _.size(toAdd), 'update', _.size(toUpdate), 'remove', _.size(toRemove));
+  log('Consolidating delta buffer', 'add', _.size(toAdd), 'update',
+    _.size(toUpdate), 'remove', _.size(toRemove));
 
   // check if an added node in first was updated in second -> add second update
   toAdd = _.map(toAdd, node => {
-    const updateNode = _.find(second.update, {'id': node.id});
+    const updateNode = _.find(second.update, {id: node.id});
     if (updateNode) {
-      toUpdate = _.reject(toUpdate, {'id': node.id});
+      toUpdate = _.reject(toUpdate, {id: node.id});
       return updateNode;
     }
     return node;
@@ -63,18 +64,18 @@ function consolidateBuffer() {
 
   // check if an added node in first was removed in second -> dont add, dont remove
   _.each(first.add, node => {
-    const removedNode = _.find(second.remove, {'id': node.id});
+    const removedNode = _.find(second.remove, {id: node.id});
     if (removedNode) {
-      toAdd = _.reject(toAdd, {'id': node.id});
-      toRemove = _.reject(toRemove, {'id': node.id});
+      toAdd = _.reject(toAdd, {id: node.id});
+      toRemove = _.reject(toRemove, {id: node.id});
     }
   });
 
   // check if an updated node in first was removed in second -> remove
   _.each(first.update, node => {
-    const removedNode = _.find(second.remove, {'id': node.id});
+    const removedNode = _.find(second.remove, {id: node.id});
     if (removedNode) {
-      toUpdate = _.reject(toUpdate, {'id': node.id});
+      toUpdate = _.reject(toUpdate, {id: node.id});
     }
   });
 
@@ -82,7 +83,8 @@ function consolidateBuffer() {
   // remove -> add is fine for the store
 
   // update buffer
-  log('Consolidated delta buffer', 'add', _.size(toAdd), 'update', _.size(toUpdate), 'remove', _.size(toRemove));
+  log('Consolidated delta buffer', 'add', _.size(toAdd), 'update',
+    _.size(toUpdate), 'remove', _.size(toRemove));
   deltaBuffer.set(0, {
     add: toAdd.length > 0 ? toAdd : null,
     update: toUpdate.length > 0 ? toUpdate : null,

client/app/scripts/utils/web-api-utils.js

@@ -23,9 +23,7 @@ let controlErrorTimer = 0;
 
 function buildOptionsQuery(options) {
   if (options) {
-    return options.reduce(function(query, value, param) {
-      return `${query}&${param}=${value}`;
-    }, '');
+    return options.reduce((query, value, param) => `${query}&${param}=${value}`, '');
   }
   return '';
 }
@@ -52,11 +50,11 @@ export function basePathSlash(urlPath) {
   // "/scope" -> "/scope/"
   // "/" -> "/"
   //
-  return basePath(urlPath) + '/';
+  return `${basePath(urlPath)}/`;
 }
 
 const wsProto = location.protocol === 'https:' ? 'wss' : 'ws';
-const wsUrl = wsProto + '://' + location.host + basePath(location.pathname);
+const wsUrl = `${wsProto}://${location.host}${basePath(location.pathname)}`;
 
 function createWebsocket(topologyUrl, optionsQuery) {
   if (socket) {
@@ -67,30 +65,29 @@ function createWebsocket(topologyUrl, optionsQuery) {
     // right away
   }
 
-  socket = new WebSocket(wsUrl + topologyUrl
-    + '/ws?t=' + updateFrequency + '&' + optionsQuery);
+  socket = new WebSocket(`${wsUrl}${topologyUrl}/ws?t=${updateFrequency}&${optionsQuery}`);
 
-  socket.onopen = function() {
+  socket.onopen = () => {
     openWebsocket();
   };
 
-  socket.onclose = function() {
+  socket.onclose = () => {
     clearTimeout(reconnectTimer);
-    log('Closing websocket to ' + topologyUrl, socket.readyState);
+    log(`Closing websocket to ${topologyUrl}`, socket.readyState);
     socket = null;
     closeWebsocket();
 
-    reconnectTimer = setTimeout(function() {
+    reconnectTimer = setTimeout(() => {
       createWebsocket(topologyUrl, optionsQuery);
     }, reconnectTimerInterval);
   };
 
-  socket.onerror = function() {
-    log('Error in websocket to ' + topologyUrl);
+  socket.onerror = () => {
+    log(`Error in websocket to ${topologyUrl}`);
     receiveError(currentUrl);
   };
 
-  socket.onmessage = function(event) {
+  socket.onmessage = (event) => {
     const msg = JSON.parse(event.data);
     receiveNodesDelta(msg);
   };
@@ -103,17 +100,17 @@ export function getTopologies(options) {
   const optionsQuery = buildOptionsQuery(options);
   const url = `api/topology?${optionsQuery}`;
   reqwest({
-    url: url,
-    success: function(res) {
+    url,
+    success: (res) => {
       receiveTopologies(res);
-      topologyTimer = setTimeout(function() {
+      topologyTimer = setTimeout(() => {
         getTopologies(options);
       }, TOPOLOGY_INTERVAL);
     },
-    error: function(err) {
-      log('Error in topology request: ' + err.responseText);
+    error: (err) => {
+      log(`Error in topology request: ${err.responseText}`);
       receiveError(url);
-      topologyTimer = setTimeout(function() {
+      topologyTimer = setTimeout(() => {
         getTopologies(options);
       }, TOPOLOGY_INTERVAL / 2);
     }
@@ -139,15 +136,15 @@ export function getNodeDetails(topologyUrlsById, nodeMap) {
     const url = [topologyUrl, '/', encodeURIComponent(obj.id)]
       .join('').substr(1);
     reqwest({
-      url: url,
-      success: function(res) {
+      url,
+      success: (res) => {
         // make sure node is still selected
         if (nodeMap.has(res.node.id)) {
           receiveNodeDetails(res.node);
         }
       },
-      error: function(err) {
-        log('Error in node details request: ' + err.responseText);
+      error: (err) => {
+        log(`Error in node details request: ${err.responseText}`);
         // dont treat missing node as error
         if (err.status === 404) {
           receiveNotFound(obj.id);
@@ -165,13 +162,13 @@ export function getApiDetails() {
   clearTimeout(apiDetailsTimer);
   const url = 'api';
   reqwest({
-    url: url,
-    success: function(res) {
+    url,
+    success: (res) => {
       receiveApiDetails(res);
       apiDetailsTimer = setTimeout(getApiDetails, API_INTERVAL);
     },
-    error: function(err) {
-      log('Error in api details request: ' + err.responseText);
+    error: (err) => {
+      log(`Error in api details request: ${err.responseText}`);
       receiveError(url);
       apiDetailsTimer = setTimeout(getApiDetails, API_INTERVAL / 2);
     }
@@ -184,16 +181,16 @@ export function doControlRequest(nodeId, control) {
     + `${encodeURIComponent(control.nodeId)}/${control.id}`;
   reqwest({
     method: 'POST',
-    url: url,
-    success: function(res) {
+    url,
+    success: (res) => {
       receiveControlSuccess(nodeId);
       if (res && res.pipe) {
         receiveControlPipe(res.pipe, nodeId, res.raw_tty, true);
       }
     },
-    error: function(err) {
+    error: (err) => {
       receiveControlError(nodeId, err.response);
-      controlErrorTimer = setTimeout(function() {
+      controlErrorTimer = setTimeout(() => {
         clearControlError(nodeId);
       }, 10000);
     }
@@ -204,12 +201,12 @@ export function deletePipe(pipeId) {
   const url = `api/pipe/${encodeURIComponent(pipeId)}`;
   reqwest({
     method: 'DELETE',
-    url: url,
-    success: function() {
+    url,
+    success: () => {
       log('Closed the pipe!');
     },
-    error: function(err) {
-      log('Error closing pipe:' + err);
+    error: (err) => {
+      log(`Error closing pipe:${err}`);
       receiveError(url);
     }
   });
@@ -219,11 +216,11 @@ export function getPipeStatus(pipeId) {
   const url = `api/pipe/${encodeURIComponent(pipeId)}/check`;
   reqwest({
     method: 'GET',
-    url: url,
-    error: function(err) {
+    url,
+    error: (err) => {
       log('ERROR: unexpected response:', err);
     },
-    success: function(res) {
+    success: (res) => {
       const status = {
         204: 'PIPE_ALIVE',
         404: 'PIPE_DELETED'