diff --git a/frontend/package.json b/frontend/package.json
index 78e6e0c6..e4ab5592 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -97,9 +97,12 @@
"node-hook": "^0.4.0",
"nyc": "^10.1.2",
"pre-commit": "^1.2.2",
+ "react-addons-perf": "^15.4.2",
"react-addons-test-utils": "^15.4.2",
"react-dev-utils": "^0.5.1",
+ "react-perf": "^1.0.1",
"redux-ava": "^2.2.0",
+ "redux-perf-middleware": "^1.2.2",
"require-hacker": "^2.1.4",
"simple-mock": "^0.7.3",
"style-loader": "^0.13.2",
diff --git a/frontend/src/containers/app.js b/frontend/src/containers/app.js
index f5e2f594..5f4da0dc 100644
--- a/frontend/src/containers/app.js
+++ b/frontend/src/containers/app.js
@@ -10,6 +10,7 @@ import Home from '@containers/home';
import NotFound from '@containers/not-found';
import Nav from '@components/navigation';
import OrgNavigation from '@components/navigation/org';
+import PerfProfiler from '../perf-profiler';
import React from 'react';
const App = connect()(React.createClass({
@@ -49,17 +50,21 @@ const App = connect()(React.createClass({
}));
export default (props) => (
-
-
-
-
-
-
-
-
-
-
-
+
+ { process.env.NODE_ENV !== 'production' &&
}
+
+
+
+
+
+
+
+
+
+
+
+
+
);
diff --git a/frontend/src/index.js b/frontend/src/index.js
index a69ef325..0ea313d6 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -5,6 +5,7 @@ import qs from 'querystring';
import a11y from 'react-a11y';
import ReactDOM from 'react-dom';
import React from 'react';
+import Perf from 'react-addons-perf';
import App from '@containers/app';
import MockStateTesting from './mock-state-testing.json';
@@ -17,6 +18,8 @@ if (process.env.NODE_ENV !== 'production') {
a11y(React, {
ReactDOM
});
+
+ window.Perf = Perf;
}
const states = {
diff --git a/frontend/src/perf-profiler/index.js b/frontend/src/perf-profiler/index.js
new file mode 100644
index 00000000..6bd6f4be
--- /dev/null
+++ b/frontend/src/perf-profiler/index.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import Perf from 'react-addons-perf';
+import styled from 'styled-components';
+
+const Profiler = styled.div`
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ right: 50px;
+ top: 20px;
+ padding: 10px;
+ background: #bada55;
+ border: 2px solid black;
+ text-align: center;
+
+ & > h1 {
+ font-size: 1.5em;
+ }
+
+ & > h1 {
+ font-size: 1.5em;
+ }
+`;
+
+export default class PerfProfiler extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ started: false
+ };
+ }
+
+ handleToggle = () => {
+ const {
+ started
+ } = this.state;
+
+ started ? Perf.stop() : Perf.start();
+
+ this.setState({
+ started: !started
+ });
+ }
+
+ handlePrintWasted = () => {
+ const lastMeasurements = Perf.getLastMeasurements();
+
+ Perf.printWasted(lastMeasurements);
+ }
+
+ handlePrintOperations = () => {
+ const lastMeasurements = Perf.getLastMeasurements();
+
+ Perf.printOperations(lastMeasurements);
+ }
+
+ render() {
+ const {
+ started
+ } = this.state;
+
+ return (
+
+ Performance Profiler
+
+
+
+
+ );
+ }
+}
diff --git a/frontend/src/state/store.js b/frontend/src/state/store.js
index 78fba0c0..450d9bdd 100644
--- a/frontend/src/state/store.js
+++ b/frontend/src/state/store.js
@@ -3,6 +3,7 @@ import { enableBatching } from 'redux-batched-actions';
import promiseMiddleware from 'redux-promise-middleware';
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
+import perflogger from 'redux-perf-middleware';
import createReducer from '@state/reducers';
@@ -16,7 +17,8 @@ export default (state = Object.freeze({})) => {
applyMiddleware(
createLogger(),
promiseMiddleware(),
- thunk
+ thunk,
+ process.env.NODE_ENV !== 'production' && perflogger
)
)
);
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index c507b2a4..79cdbb06 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -5825,6 +5825,10 @@ prepend-http@^1.0.0, prepend-http@^1.0.1:
version "1.0.4"
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+present@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/present/-/present-1.0.0.tgz#6d2f865be7a96885118f4660e83e2161fb71cf2b"
+
preserve@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
@@ -5991,6 +5995,13 @@ react-a11y@^0.3.3:
dependencies:
object.assign "^4.0.3"
+react-addons-perf:
+ version "15.4.2"
+ resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.4.2.tgz#110bdcf5c459c4f77cb85ed634bcd3397536383b"
+ dependencies:
+ fbjs "^0.8.4"
+ object-assign "^4.1.0"
+
react-addons-test-utils@^15.4.2:
version "15.4.2"
resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.2.tgz#93bcaa718fcae7360d42e8fb1c09756cc36302a2"
@@ -6046,6 +6057,10 @@ react-intl@^2.2.3:
intl-relativeformat "^1.3.0"
invariant "^2.1.1"
+react-perf:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/react-perf/-/react-perf-1.0.1.tgz#11c9ef3330b8f7d9431150d3dfc9dd7d1a781a3e"
+
react-redux@^5.0.3:
version "5.0.3"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.3.tgz#86c3b68d56e74294a42e2a740ab66117ef6c019f"
@@ -6270,6 +6285,12 @@ redux-logger@^2.8.1:
dependencies:
deep-diff "0.3.4"
+redux-perf-middleware:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/redux-perf-middleware/-/redux-perf-middleware-1.2.2.tgz#099b4ca38d1f0a3beb77b66617d196ed0ef2f514"
+ dependencies:
+ present "^1.0.0"
+
redux-promise-middleware@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/redux-promise-middleware/-/redux-promise-middleware-4.2.0.tgz#052a7ac2df0e3468e196279f14bdefe711d10cac"