integrate metrics-server with plotly
This commit is contained in:
Sérgio Ramos
parent
bb82f33b25
commit
9f5fe02812
@ -1,5 +0,0 @@
|
|||||||
const Storybook = require('@kadira/storybook');
|
|
||||||
|
|
||||||
Storybook.configure(() => {
|
|
||||||
require('../stories');
|
|
||||||
}, module);
|
|
||||||
46
spikes/graphs-fe/plotly/client/index.js
Normal file
46
spikes/graphs-fe/plotly/client/index.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
const ReactDOM = require('react-dom');
|
||||||
|
const React = require('react');
|
||||||
|
const store = require('./store')();
|
||||||
|
const nes = require('nes/dist/client');
|
||||||
|
|
||||||
|
const {
|
||||||
|
Client
|
||||||
|
} = nes;
|
||||||
|
|
||||||
|
const client = new Client(`ws://${document.location.host}`);
|
||||||
|
|
||||||
|
client.connect((err) => {
|
||||||
|
if (err) {
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('connected');
|
||||||
|
|
||||||
|
client.subscribe('/stats/5', (update, flag) => {
|
||||||
|
store.dispatch({
|
||||||
|
type: 'UPDATE_STATS',
|
||||||
|
payload: update
|
||||||
|
})
|
||||||
|
}, (err) => {
|
||||||
|
if (err) {
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('subscribed');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const render = () => {
|
||||||
|
const Root = require('./root');
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<Root store={store} />,
|
||||||
|
document.getElementById('root')
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
render();
|
||||||
|
|
||||||
|
if (module.hot) {
|
||||||
|
module.hot.accept('./root', render);
|
||||||
|
}
|
||||||
58
spikes/graphs-fe/plotly/client/plotly-graph/index.js
Normal file
58
spikes/graphs-fe/plotly/client/plotly-graph/index.js
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
const ReactRedux = require('react-redux');
|
||||||
|
const React = require('react');
|
||||||
|
const Plot = require('./plot');
|
||||||
|
|
||||||
|
const {
|
||||||
|
connect
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
const PlotlyGraph = React.createClass({
|
||||||
|
render: function() {
|
||||||
|
const {
|
||||||
|
data = []
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const cpu = data.map((d) => Math.floor(d.cpu));
|
||||||
|
const datatime = data.map((d, i) => i);
|
||||||
|
|
||||||
|
const graphTypes = [{
|
||||||
|
type: 'scatter',
|
||||||
|
mode: 'lines+markers'
|
||||||
|
}, {
|
||||||
|
type: 'scatter',
|
||||||
|
mode: 'line'
|
||||||
|
}, {
|
||||||
|
type: 'bar'
|
||||||
|
}];
|
||||||
|
|
||||||
|
const graphs = graphTypes.map((graphType, i) => {
|
||||||
|
console.log(cpu, datatime);
|
||||||
|
return (
|
||||||
|
<Plot
|
||||||
|
key={i}
|
||||||
|
name={`plot-${i}`}
|
||||||
|
xData={datatime}
|
||||||
|
yData={cpu}
|
||||||
|
type={graphType.type}
|
||||||
|
mode={graphType.mode}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{graphs}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapStateToProps = ({
|
||||||
|
data
|
||||||
|
}) => {
|
||||||
|
return {
|
||||||
|
data
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = connect(mapStateToProps)(PlotlyGraph);
|
||||||
@ -2,7 +2,6 @@ const React = require('react');
|
|||||||
const Plotly = require('plotly.js');
|
const Plotly = require('plotly.js');
|
||||||
|
|
||||||
const Plot = React.createClass({
|
const Plot = React.createClass({
|
||||||
|
|
||||||
propTypes: {
|
propTypes: {
|
||||||
name: React.PropTypes.string.isRequired,
|
name: React.PropTypes.string.isRequired,
|
||||||
xdata: React.PropTypes.object,
|
xdata: React.PropTypes.object,
|
||||||
@ -10,7 +9,6 @@ const Plot = React.createClass({
|
|||||||
type: React.PropTypes.string,
|
type: React.PropTypes.string,
|
||||||
mode: React.PropTypes.string,
|
mode: React.PropTypes.string,
|
||||||
},
|
},
|
||||||
|
|
||||||
componentDidMount: function() {
|
componentDidMount: function() {
|
||||||
const {
|
const {
|
||||||
name,
|
name,
|
||||||
@ -36,14 +34,13 @@ const Plot = React.createClass({
|
|||||||
displayModeBar: false
|
displayModeBar: false
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
const {
|
const {
|
||||||
name
|
name
|
||||||
} = this.props
|
} = this.props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id={name}></div>
|
<div id={name} />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
25
spikes/graphs-fe/plotly/client/root.js
Normal file
25
spikes/graphs-fe/plotly/client/root.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const ReactHotLoader = require('react-hot-loader');
|
||||||
|
const ReactRedux = require('react-redux');
|
||||||
|
const PlotlyGraph = require('./plotly-graph');
|
||||||
|
|
||||||
|
|
||||||
|
const {
|
||||||
|
AppContainer
|
||||||
|
} = ReactHotLoader;
|
||||||
|
|
||||||
|
const {
|
||||||
|
Provider
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
module.exports = ({
|
||||||
|
store
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<AppContainer>
|
||||||
|
<Provider store={store}>
|
||||||
|
<PlotlyGraph />
|
||||||
|
</Provider>
|
||||||
|
</AppContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
25
spikes/graphs-fe/plotly/client/store.js
Normal file
25
spikes/graphs-fe/plotly/client/store.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
const takeRight = require('lodash.takeright');
|
||||||
|
const redux = require('redux');
|
||||||
|
|
||||||
|
const {
|
||||||
|
createStore,
|
||||||
|
compose,
|
||||||
|
applyMiddleware
|
||||||
|
} = redux;
|
||||||
|
|
||||||
|
const reducer = (state, action) => {
|
||||||
|
if (action.type !== 'UPDATE_STATS') {
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = (state.data || []).concat([action.payload]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
data: takeRight(data, 10)
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = (state = Object.freeze({})) => {
|
||||||
|
return createStore(reducer, state);
|
||||||
|
};
|
||||||
@ -1,408 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
"cols": [
|
|
||||||
"Datetime",
|
|
||||||
"CPU"
|
|
||||||
],
|
|
||||||
"data": [
|
|
||||||
[
|
|
||||||
"13-04-17",
|
|
||||||
26
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"17-06-16",
|
|
||||||
10
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"28-04-16",
|
|
||||||
63
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"01-01-16",
|
|
||||||
7
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"03-03-17",
|
|
||||||
42
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"09-03-16",
|
|
||||||
8
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"31-03-17",
|
|
||||||
57
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"19-03-16",
|
|
||||||
51
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"25-07-17",
|
|
||||||
82
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"18-03-16",
|
|
||||||
23
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"17-06-17",
|
|
||||||
71
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"15-06-17",
|
|
||||||
64
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"25-09-16",
|
|
||||||
70
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"11-06-16",
|
|
||||||
75
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"12-05-16",
|
|
||||||
24
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"09-05-17",
|
|
||||||
48
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"04-01-17",
|
|
||||||
58
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"15-04-17",
|
|
||||||
74
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"31-12-15",
|
|
||||||
46
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"20-06-16",
|
|
||||||
2
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"25-01-16",
|
|
||||||
85
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"25-12-16",
|
|
||||||
96
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"29-11-15",
|
|
||||||
11
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"22-10-17",
|
|
||||||
66
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"19-05-17",
|
|
||||||
79
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"16-03-16",
|
|
||||||
3
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"24-01-17",
|
|
||||||
76
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"19-05-16",
|
|
||||||
59
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"05-03-17",
|
|
||||||
42
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"08-10-16",
|
|
||||||
14
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"04-05-17",
|
|
||||||
83
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"15-06-16",
|
|
||||||
8
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"30-12-16",
|
|
||||||
25
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"10-12-15",
|
|
||||||
90
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"09-12-16",
|
|
||||||
81
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"23-04-16",
|
|
||||||
77
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"14-04-16",
|
|
||||||
12
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"20-05-16",
|
|
||||||
62
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"24-07-16",
|
|
||||||
33
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"21-06-17",
|
|
||||||
41
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"08-04-17",
|
|
||||||
93
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"25-07-16",
|
|
||||||
22
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"24-03-17",
|
|
||||||
27
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"21-03-16",
|
|
||||||
57
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"25-08-16",
|
|
||||||
75
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"06-07-17",
|
|
||||||
96
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"30-11-16",
|
|
||||||
63
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"27-10-16",
|
|
||||||
16
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"27-03-16",
|
|
||||||
23
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"13-09-17",
|
|
||||||
92
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"25-10-17",
|
|
||||||
81
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"07-11-16",
|
|
||||||
71
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"14-10-17",
|
|
||||||
96
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"27-10-17",
|
|
||||||
22
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"13-03-17",
|
|
||||||
86
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"03-11-16",
|
|
||||||
91
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"11-09-16",
|
|
||||||
25
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"14-01-17",
|
|
||||||
19
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"04-06-16",
|
|
||||||
68
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"30-07-17",
|
|
||||||
24
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"15-04-17",
|
|
||||||
60
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"20-03-17",
|
|
||||||
46
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"07-02-17",
|
|
||||||
3
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"02-11-17",
|
|
||||||
68
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"14-08-16",
|
|
||||||
53
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"06-09-17",
|
|
||||||
69
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"12-09-17",
|
|
||||||
51
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"01-05-16",
|
|
||||||
14
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"26-03-17",
|
|
||||||
75
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"05-11-15",
|
|
||||||
86
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"01-02-17",
|
|
||||||
73
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"20-03-17",
|
|
||||||
14
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"20-03-16",
|
|
||||||
81
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"01-06-16",
|
|
||||||
35
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"28-11-16",
|
|
||||||
33
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"20-08-17",
|
|
||||||
50
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"18-05-17",
|
|
||||||
31
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"15-06-16",
|
|
||||||
93
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"17-10-17",
|
|
||||||
81
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"26-08-16",
|
|
||||||
60
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"11-05-17",
|
|
||||||
34
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"11-04-16",
|
|
||||||
12
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"21-07-16",
|
|
||||||
59
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"11-07-17",
|
|
||||||
21
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"20-08-17",
|
|
||||||
13
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"07-05-16",
|
|
||||||
14
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"03-11-16",
|
|
||||||
45
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"23-02-16",
|
|
||||||
30
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"22-03-16",
|
|
||||||
56
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"15-11-15",
|
|
||||||
62
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"26-10-16",
|
|
||||||
26
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"10-12-16",
|
|
||||||
71
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"21-06-17",
|
|
||||||
78
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"25-01-16",
|
|
||||||
26
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"04-06-17",
|
|
||||||
23
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"29-10-17",
|
|
||||||
31
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"17-03-17",
|
|
||||||
50
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"01-02-16",
|
|
||||||
25
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"23-06-16",
|
|
||||||
34
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"18-04-17",
|
|
||||||
55
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -2,16 +2,7 @@
|
|||||||
"name": "redux-thunks-spike",
|
"name": "redux-thunks-spike",
|
||||||
"private": true,
|
"private": true,
|
||||||
"license": "private",
|
"license": "private",
|
||||||
"main": "src/index.js",
|
"main": "server/index.js",
|
||||||
"scripts": {
|
|
||||||
"start": "webpack-dev-server --open --config webpack.config.js",
|
|
||||||
"lint": "eslint .",
|
|
||||||
"test": "NODE_ENV=test nyc ava test/*.js --fail-fast --verbose --tap",
|
|
||||||
"open": "nyc report --reporter=html & open coverage/index.html",
|
|
||||||
"coverage": "nyc check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
|
|
||||||
"storybook": "start-storybook -p 6006",
|
|
||||||
"build-storybook": "build-storybook"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"autoprefixer": "^6.5.1",
|
"autoprefixer": "^6.5.1",
|
||||||
"babel-eslint": "^7.0.0",
|
"babel-eslint": "^7.0.0",
|
||||||
@ -24,7 +15,13 @@
|
|||||||
"babel-preset-react": "^6.16.0",
|
"babel-preset-react": "^6.16.0",
|
||||||
"babel-preset-react-hmre": "^1.1.1",
|
"babel-preset-react-hmre": "^1.1.1",
|
||||||
"babel-runtime": "^6.11.6",
|
"babel-runtime": "^6.11.6",
|
||||||
|
"component-emitter": "^1.2.1",
|
||||||
"css-loader": "^0.25.0",
|
"css-loader": "^0.25.0",
|
||||||
|
"hapi": "^15.2.0",
|
||||||
|
"hapi-webpack-dev-plugin": "^1.1.4",
|
||||||
|
"inert": "^4.0.2",
|
||||||
|
"lodash.takeright": "^4.1.1",
|
||||||
|
"nes": "^6.3.1",
|
||||||
"plotly.js": "^1.1.0",
|
"plotly.js": "^1.1.0",
|
||||||
"postcss-loader": "^1.0.0",
|
"postcss-loader": "^1.0.0",
|
||||||
"postcss-modules-values": "^1.2.2",
|
"postcss-modules-values": "^1.2.2",
|
||||||
@ -32,15 +29,15 @@
|
|||||||
"react": "^15.3.2",
|
"react": "^15.3.2",
|
||||||
"react-dom": "^15.3.2",
|
"react-dom": "^15.3.2",
|
||||||
"react-hot-loader": "^3.0.0-beta.6",
|
"react-hot-loader": "^3.0.0-beta.6",
|
||||||
|
"react-redux": "^4.4.5",
|
||||||
|
"redux": "^3.6.0",
|
||||||
|
"require-dir": "^0.3.1",
|
||||||
"style-loader": "^0.13.1",
|
"style-loader": "^0.13.1",
|
||||||
"webpack": "^1.13.2",
|
"webpack": "^1.13.2",
|
||||||
"webpack-dev-server": "^1.16.2"
|
"webpack-dev-server": "^1.16.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@kadira/storybook": "^2.24.1",
|
|
||||||
"ava": "^0.16.0",
|
|
||||||
"babel-register": "^6.16.3",
|
"babel-register": "^6.16.3",
|
||||||
"enzyme": "^2.5.1",
|
|
||||||
"eslint": "^3.8.1",
|
"eslint": "^3.8.1",
|
||||||
"eslint-config-semistandard": "^7.0.0",
|
"eslint-config-semistandard": "^7.0.0",
|
||||||
"eslint-config-standard": "^6.2.0",
|
"eslint-config-standard": "^6.2.0",
|
||||||
@ -48,9 +45,7 @@
|
|||||||
"eslint-plugin-promise": "^3.3.0",
|
"eslint-plugin-promise": "^3.3.0",
|
||||||
"eslint-plugin-react": "^6.4.1",
|
"eslint-plugin-react": "^6.4.1",
|
||||||
"eslint-plugin-standard": "^2.0.1",
|
"eslint-plugin-standard": "^2.0.1",
|
||||||
"json-loader": "^0.5.4",
|
"json-loader": "^0.5.4"
|
||||||
"nyc": "^8.3.1",
|
|
||||||
"react-addons-test-utils": "^15.3.2"
|
|
||||||
},
|
},
|
||||||
"ava": {
|
"ava": {
|
||||||
"require": [
|
"require": [
|
||||||
|
|||||||
29
spikes/graphs-fe/plotly/server/index.js
Normal file
29
spikes/graphs-fe/plotly/server/index.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
const requireDir = require('require-dir');
|
||||||
|
const plugins = require('./plugins');
|
||||||
|
const routes = requireDir('./routes');
|
||||||
|
const Hapi = require('hapi');
|
||||||
|
const path = require('path');
|
||||||
|
const fs = require('fs');
|
||||||
|
|
||||||
|
const server = new Hapi.Server();
|
||||||
|
|
||||||
|
server.connection({
|
||||||
|
host: 'localhost',
|
||||||
|
port: 8000
|
||||||
|
});
|
||||||
|
|
||||||
|
server.register(plugins, (err) => {
|
||||||
|
if (err) {
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.keys(routes).forEach((name) => {
|
||||||
|
routes[name](server);
|
||||||
|
});
|
||||||
|
|
||||||
|
server.start((err) => {
|
||||||
|
server.connections.forEach((conn) => {
|
||||||
|
console.log(`started at: ${conn.info.uri}`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
34
spikes/graphs-fe/plotly/server/metric.js
Normal file
34
spikes/graphs-fe/plotly/server/metric.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
const Emitter = require('component-emitter');
|
||||||
|
|
||||||
|
const cdm = {};
|
||||||
|
|
||||||
|
module.exports = (server) => ({
|
||||||
|
on: (id) => {
|
||||||
|
console.log('on', cdm[id]);
|
||||||
|
if (cdm[id] && (cdm[id].sockets > 0)) {
|
||||||
|
cdm[id].sockets +=1;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let messageId = 0;
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
console.log(`publishing /stats/${id}`);
|
||||||
|
|
||||||
|
server.publish(`/stats/${id}`, {
|
||||||
|
when: new Date().getTime(),
|
||||||
|
cpu: Math.random() * 100
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
cdm[id] = {
|
||||||
|
interval,
|
||||||
|
sockets: 1
|
||||||
|
};
|
||||||
|
},
|
||||||
|
off: (id) => {
|
||||||
|
if (!(cdm[id].sockets -= 1)) {
|
||||||
|
clearInterval(cdm[id].interval);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
15
spikes/graphs-fe/plotly/server/plugins.js
Normal file
15
spikes/graphs-fe/plotly/server/plugins.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
const webpack = require('webpack');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const cfg = require('../webpack.config.js');
|
||||||
|
|
||||||
|
module.exports = [
|
||||||
|
require('inert'),
|
||||||
|
require('nes'), {
|
||||||
|
register: require('hapi-webpack-dev-plugin'),
|
||||||
|
options: {
|
||||||
|
compiler: webpack(cfg),
|
||||||
|
devIndex: path.join(__dirname, '../static')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
11
spikes/graphs-fe/plotly/server/routes/home.js
Normal file
11
spikes/graphs-fe/plotly/server/routes/home.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = (server) => {
|
||||||
|
server.route({
|
||||||
|
method: 'GET',
|
||||||
|
path: '/',
|
||||||
|
handler: (request, reply) => {
|
||||||
|
reply.file(path.join(__dirname, '../../static/index.html'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
18
spikes/graphs-fe/plotly/server/routes/metrics.js
Normal file
18
spikes/graphs-fe/plotly/server/routes/metrics.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
const Metric = require('../metric');
|
||||||
|
|
||||||
|
module.exports = (server) => {
|
||||||
|
const metric = Metric(server);
|
||||||
|
|
||||||
|
server.subscription('/stats/{id}', {
|
||||||
|
onSubscribe: (socket, path, params, next) => {
|
||||||
|
console.log('onSubscribe');
|
||||||
|
metric.on(params.id);
|
||||||
|
next();
|
||||||
|
},
|
||||||
|
onUnsubscribe: (socket, path, params, next) => {
|
||||||
|
console.log('onUnsubscribe');
|
||||||
|
metric.off(params.id);
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
15
spikes/graphs-fe/plotly/server/routes/static.js
Normal file
15
spikes/graphs-fe/plotly/server/routes/static.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = (server) => {
|
||||||
|
// server.route({
|
||||||
|
// method: 'GET',
|
||||||
|
// path: '/{param*}',
|
||||||
|
// handler: {
|
||||||
|
// directory: {
|
||||||
|
// path: path.join(__dirname, '../../static'),
|
||||||
|
// redirectToSlash: true,
|
||||||
|
// index: true
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
||||||
18
spikes/graphs-fe/plotly/server/routes/version.js
Normal file
18
spikes/graphs-fe/plotly/server/routes/version.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
const Pkg = require('../../package.json');
|
||||||
|
|
||||||
|
const internals = {
|
||||||
|
response: {
|
||||||
|
version: Pkg.version
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = (server) => {
|
||||||
|
server.route({
|
||||||
|
method: 'GET',
|
||||||
|
path: '/ops/version',
|
||||||
|
config: {
|
||||||
|
description: 'Returns the version of the server',
|
||||||
|
handler: (request, reply) => reply(internals.response)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -1,103 +0,0 @@
|
|||||||
@value color_primary_dark, font_primary, font_secondary, font_tertiary from "./variables.css";
|
|
||||||
|
|
||||||
.base {
|
|
||||||
:global {
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
p,
|
|
||||||
li {
|
|
||||||
color: color_primary_dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3 {
|
|
||||||
font-family: font_primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4,
|
|
||||||
p,
|
|
||||||
li {
|
|
||||||
font-family: font_secondary;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-family: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h5,
|
|
||||||
p,
|
|
||||||
li {
|
|
||||||
& > a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 6px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 20px;
|
|
||||||
letter-spacing: -0.025em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
font-family: font_tertiary;
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 18px;
|
|
||||||
letter-spacing: -0.025em;
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.small {
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
select,
|
|
||||||
a {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Removes the grey background when you tap on a link in IOS */
|
|
||||||
button,
|
|
||||||
a {
|
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
const React = require('react');
|
|
||||||
const styles = require('./index.css');
|
|
||||||
|
|
||||||
module.exports = ({
|
|
||||||
children
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div className={styles.base}>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
@value font_primary: "freddiesflowerstitle-webfont", "Times", serif;
|
|
||||||
@value font_secondary: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
||||||
@value font_tertiary: Georgia, Times, "Times New Roman", serif;
|
|
||||||
|
|
||||||
@value color_primary: #ccc;
|
|
||||||
@value color_primary_dark: #222;
|
|
||||||
@value color_primary_mid: #959595;
|
|
||||||
@value color_primary_light: #f4f4f4;
|
|
||||||
@value color_warning: #C93F3F;
|
|
||||||
@value color_valid: #547954;
|
|
||||||
@value color_cta_primary: #60b4d6;
|
|
||||||
@value color_cta_secondary: #e5eef2;
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
const React = require('react');
|
|
||||||
|
|
||||||
module.exports = (props) => {
|
|
||||||
return (
|
|
||||||
<button>
|
|
||||||
{props.children}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
@value color_background from "../base/variables.css";
|
|
||||||
|
|
||||||
.container {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
padding-left: 15px;
|
|
||||||
padding-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container::after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 544px) {
|
|
||||||
.container {
|
|
||||||
max-width: 576px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.container {
|
|
||||||
max-width: 720px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
.container {
|
|
||||||
max-width: 940px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
.container {
|
|
||||||
max-width: 1140px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
const React = require('react');
|
|
||||||
const styles = require('./index.css');
|
|
||||||
|
|
||||||
module.exports = ({
|
|
||||||
children
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div className={styles.container}>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
Button: require('./button'),
|
|
||||||
Container: require('./container'),
|
|
||||||
Base: require('./base'),
|
|
||||||
PlotlyGraph: require('./plotlyGraph'),
|
|
||||||
};
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
const React = require('react');
|
|
||||||
const Plot = require('./plot');
|
|
||||||
const localData = require('../../../lib/data');
|
|
||||||
|
|
||||||
const PlotlyGraph = React.createClass({
|
|
||||||
|
|
||||||
getInitialState: function() {
|
|
||||||
return this.fetchData(this.props)
|
|
||||||
},
|
|
||||||
|
|
||||||
fetchData: function(data = localData) {
|
|
||||||
let datetime = [];
|
|
||||||
let cpu = [];
|
|
||||||
|
|
||||||
localData.data.forEach( d => {
|
|
||||||
datetime.push(d[0]);
|
|
||||||
cpu.push(d[1]);
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: localData,
|
|
||||||
cpu,
|
|
||||||
datetime
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function() {
|
|
||||||
|
|
||||||
const graphTypes = [
|
|
||||||
{
|
|
||||||
type: 'scatter',
|
|
||||||
mode: 'lines+markers'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'scatter',
|
|
||||||
mode: 'line'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'bar'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const graphs = graphTypes.map( (graphType, i) => {
|
|
||||||
return (
|
|
||||||
<Plot
|
|
||||||
key={i}
|
|
||||||
name={`plot-${i}`}
|
|
||||||
xData={this.state.datatime}
|
|
||||||
yData={this.state.cpu}
|
|
||||||
type={graphType.type}
|
|
||||||
mode={graphType.mode}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{graphs}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
module.exports = PlotlyGraph;
|
|
||||||
@ -1 +0,0 @@
|
|||||||
module.exports = require('./components');
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
const ReactDOM = require('react-dom');
|
|
||||||
const React = require('react');
|
|
||||||
|
|
||||||
const render = () => {
|
|
||||||
const Root = require('./root');
|
|
||||||
|
|
||||||
ReactDOM.render(
|
|
||||||
<Root />,
|
|
||||||
document.getElementById('root')
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
render();
|
|
||||||
|
|
||||||
if (module.hot) {
|
|
||||||
module.hot.accept('./root', render);
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
const React = require('react');
|
|
||||||
const ReactHotLoader = require('react-hot-loader');
|
|
||||||
|
|
||||||
const {
|
|
||||||
Button,
|
|
||||||
Container,
|
|
||||||
Base,
|
|
||||||
PlotlyGraph
|
|
||||||
} = require('../');
|
|
||||||
|
|
||||||
const {
|
|
||||||
AppContainer
|
|
||||||
} = ReactHotLoader;
|
|
||||||
|
|
||||||
module.exports = () => {
|
|
||||||
return (
|
|
||||||
<AppContainer>
|
|
||||||
<Base>
|
|
||||||
<Container>
|
|
||||||
<p>Hello</p>
|
|
||||||
<PlotlyGraph />
|
|
||||||
</Container>
|
|
||||||
</Base>
|
|
||||||
</AppContainer>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
const React = require('react');
|
|
||||||
const Storybook = require('@kadira/storybook');
|
|
||||||
|
|
||||||
const Home = require('../src/client/containers/home');
|
|
||||||
|
|
||||||
const homeStories = Storybook.storiesOf('Home', module);
|
|
||||||
|
|
||||||
homeStories.add('with nothing', () => (
|
|
||||||
<Home />
|
|
||||||
));
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
const test = require('ava');
|
|
||||||
const enzyme = require('enzyme');
|
|
||||||
const React = require('react');
|
|
||||||
|
|
||||||
const {
|
|
||||||
shallow
|
|
||||||
} = enzyme;
|
|
||||||
|
|
||||||
test('renders <Home> without exploding', (t) => {
|
|
||||||
const Home = require('../src/client/containers/home');
|
|
||||||
const wrapper = shallow(<Home />);
|
|
||||||
t.deepEqual(wrapper.length, 1);
|
|
||||||
});
|
|
||||||
@ -3,13 +3,14 @@ const path = require('path');
|
|||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
debug: true,
|
debug: true,
|
||||||
devtool: 'eval',
|
devtool: 'source-map',
|
||||||
context: path.join(__dirname, './src'),
|
context: path.join(__dirname, './client'),
|
||||||
|
app: path.join(__dirname, './client/index.js'),
|
||||||
entry: [
|
entry: [
|
||||||
'webpack-dev-server/client?http://localhost:8080',
|
'webpack-dev-server/client?http://localhost:8080',
|
||||||
'webpack/hot/only-dev-server',
|
'webpack/hot/only-dev-server',
|
||||||
'react-hot-loader/patch',
|
'react-hot-loader/patch',
|
||||||
'./showcase/index.js'
|
'./index.js'
|
||||||
],
|
],
|
||||||
output: {
|
output: {
|
||||||
path: path.join(__dirname, './static'),
|
path: path.join(__dirname, './static'),
|
||||||
@ -32,21 +33,21 @@ const config = {
|
|||||||
test: /js?$/,
|
test: /js?$/,
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
include: [
|
include: [
|
||||||
path.join(__dirname, './src')
|
path.join(__dirname, './client')
|
||||||
],
|
],
|
||||||
loaders: ['babel']
|
loaders: ['babel']
|
||||||
}, {
|
}, {
|
||||||
test: /\.json?$/,
|
test: /\.json?$/,
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
include: [
|
include: [
|
||||||
path.join(__dirname, './src')
|
path.join(__dirname, './client')
|
||||||
],
|
],
|
||||||
loaders: ['json']
|
loaders: ['json']
|
||||||
}, {
|
}, {
|
||||||
test: /\.css$/,
|
test: /\.css$/,
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
include: [
|
include: [
|
||||||
path.join(__dirname, './src')
|
path.join(__dirname, './client')
|
||||||
],
|
],
|
||||||
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
|
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
|
||||||
}]
|
}]
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user