Upgrade to React 16

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

@@ -1,6 +1,5 @@
 /* eslint react/jsx-no-bind: "off" */
 import React from 'react';
-import Perf from 'react-addons-perf';
 import { connect } from 'react-redux';
 import { sampleSize, sample, random, range, flattenDeep, times } from 'lodash';
 import { fromJS, Set as makeSet } from 'immutable';
@@ -100,21 +99,6 @@ function addAllMetricVariants(availableMetrics) {
   };
 }
 
-
-function stopPerf() {
-  Perf.stop();
-  const measurements = Perf.getLastMeasurements();
-  Perf.printInclusive(measurements);
-  Perf.printWasted(measurements);
-}
-
-
-function startPerf(delay) {
-  Perf.start();
-  setTimeout(stopPerf, delay * 1000);
-}
-
-
 export function showingDebugToolbar() {
   return (('debugToolbar' in localStorage && JSON.parse(localStorage.debugToolbar))
     || window.location.pathname.indexOf('debug') > -1);
@@ -365,13 +349,6 @@ class DebugToolbar extends React.Component {
           <button onClick={() => this.setShortLived()}>Toggle short-lived nodes</button>
           <button onClick={() => this.setIntermittent()}>Toggle intermittent nodes</button>
         </div>
-
-        <div>
-          <strong>Measure React perf for </strong>
-          <button onClick={() => startPerf(2)}>2s</button>
-          <button onClick={() => startPerf(5)}>5s</button>
-          <button onClick={() => startPerf(10)}>10s</button>
-        </div>
       </div>
     );
   }

client/app/scripts/main.dev.js

@@ -2,15 +2,11 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import Immutable from 'immutable';
-import installDevTools from 'immutable-devtools';
 
 import '../styles/main.scss';
 import '../images/favicon.ico';
 import configureStore from './stores/configureStore.dev';
-import DevTools from './components/dev-tools';
 
-installDevTools(Immutable);
 const store = configureStore();
 
 function renderApp() {
@@ -19,7 +15,6 @@ function renderApp() {
     (
       <Provider store={store}>
         <App />
-        <DevTools />
       </Provider>
     ), document.getElementById('app')
   );

client/app/scripts/reducers/root.js

@@ -8,8 +8,7 @@ import {
   Map as makeMap,
   OrderedMap as makeOrderedMap,
 } from 'immutable';
-
-import { nowInSecondsPrecision } from 'weaveworks-ui-components/lib/utils/time';
+import moment from 'moment';
 
 import ActionTypes from '../constants/action-types';
 import {
@@ -40,6 +39,8 @@ const error = debug('scope:error');
 
 const topologySorter = topology => topology.get('rank');
 
+const nowInSecondsPrecision = moment().startOf('second');
+
 // Initial values
 
 export const initialState = makeMap({

client/app/scripts/stores/configureStore.dev.js

@@ -1,18 +1,16 @@
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 
-import DevTools from '../components/dev-tools';
 import { initialState, rootReducer } from '../reducers/root';
 
 export default function configureStore() {
+  /* eslint-disable no-underscore-dangle */
+  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+  /* eslint-enable */
   const store = createStore(
     rootReducer,
     initialState,
-    compose(
-      // applyMiddleware(thunkMiddleware, createLogger()),
-      applyMiddleware(thunkMiddleware),
-      DevTools.instrument()
-    )
+    composeEnhancers(applyMiddleware(thunkMiddleware)),
   );
 
   if (module.hot) {

client/package.json

@@ -31,9 +31,8 @@
     "page": "1.7.1",
     "prop-types": "15.6.0",
     "rc-slider": "8.3.2",
-    "react": "15.6.1",
-    "react-addons-perf": "15.4.2",
-    "react-dom": "15.6.1",
+    "react": "16.1.0",
+    "react-dom": "16.1.0",
     "react-motion": "0.5.2",
     "react-redux": "5.0.6",
     "redux": "3.7.2",
@@ -43,8 +42,8 @@
     "reqwest": "2.0.5",
     "reselect": "3.0.1",
     "reselect-map": "1.0.3",
-    "styled-components": "^2.2.1",
-    "weaveworks-ui-components": "git+https://github.com/weaveworks/ui-components.git#v0.1.51",
+    "styled-components": "2.2.1",
+    "weaveworks-ui-components": "git+https://github.com/weaveworks/ui-components.git#v0.2.0",
     "whatwg-fetch": "2.0.3",
     "xterm": "2.9.2"
   },
@@ -70,17 +69,12 @@
     "file-loader": "1.1.5",
     "html-webpack-plugin": "2.30.1",
     "http-proxy-rules": "1.1.1",
-    "immutable-devtools": "0.0.7",
     "jest": "21.2.1",
     "jest-cli": "21.2.1",
     "json-loader": "0.5.7",
     "mockdate": "2.0.2",
     "node-sass": "4.5.3",
     "postcss-loader": "1.3.3",
-    "react-addons-perf": "15.4.2",
-    "redux-devtools": "3.4.0",
-    "redux-devtools-dock-monitor": "1.1.2",
-    "redux-devtools-log-monitor": "1.3.0",
     "sass-loader": "6.0.6",
     "style-loader": "0.19.0",
     "url": "0.11.0",