1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

integrate metrics-server with plotly

This commit is contained in:
Sérgio Ramos 2016-11-07 14:35:58 +00:00
parent bb82f33b25
commit 9f5fe02812
29 changed files with 313 additions and 762 deletions

View File

@ -1,5 +0,0 @@
const Storybook = require('@kadira/storybook');
Storybook.configure(() => {
require('../stories');
}, module);

View 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);
}

View 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);

View File

@ -2,7 +2,6 @@ const React = require('react');
const Plotly = require('plotly.js');
const Plot = React.createClass({
propTypes: {
name: React.PropTypes.string.isRequired,
xdata: React.PropTypes.object,
@ -10,7 +9,6 @@ const Plot = React.createClass({
type: React.PropTypes.string,
mode: React.PropTypes.string,
},
componentDidMount: function() {
const {
name,
@ -36,14 +34,13 @@ const Plot = React.createClass({
displayModeBar: false
});
},
render: function() {
const {
name
} = this.props
return (
<div id={name}></div>
<div id={name} />
);
}
});

View 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>
);
};

View 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);
};

View File

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

View File

@ -2,16 +2,7 @@
"name": "redux-thunks-spike",
"private": true,
"license": "private",
"main": "src/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"
},
"main": "server/index.js",
"dependencies": {
"autoprefixer": "^6.5.1",
"babel-eslint": "^7.0.0",
@ -24,7 +15,13 @@
"babel-preset-react": "^6.16.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-runtime": "^6.11.6",
"component-emitter": "^1.2.1",
"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",
"postcss-loader": "^1.0.0",
"postcss-modules-values": "^1.2.2",
@ -32,15 +29,15 @@
"react": "^15.3.2",
"react-dom": "^15.3.2",
"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",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"
},
"devDependencies": {
"@kadira/storybook": "^2.24.1",
"ava": "^0.16.0",
"babel-register": "^6.16.3",
"enzyme": "^2.5.1",
"eslint": "^3.8.1",
"eslint-config-semistandard": "^7.0.0",
"eslint-config-standard": "^6.2.0",
@ -48,9 +45,7 @@
"eslint-plugin-promise": "^3.3.0",
"eslint-plugin-react": "^6.4.1",
"eslint-plugin-standard": "^2.0.1",
"json-loader": "^0.5.4",
"nyc": "^8.3.1",
"react-addons-test-utils": "^15.3.2"
"json-loader": "^0.5.4"
},
"ava": {
"require": [

View 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}`);
});
});
});

View 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);
}
}
});

View 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')
}
}
];

View 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'));
}
});
};

View 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();
}
});
};

View 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
// }
// }
// });
};

View 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)
}
});
};

View File

@ -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);
}
}
}

View File

@ -1,12 +0,0 @@
const React = require('react');
const styles = require('./index.css');
module.exports = ({
children
}) => {
return (
<div className={styles.base}>
{children}
</div>
);
};

View File

@ -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;

View File

@ -1,9 +0,0 @@
const React = require('react');
module.exports = (props) => {
return (
<button>
{props.children}
</button>
);
};

View File

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

View File

@ -1,12 +0,0 @@
const React = require('react');
const styles = require('./index.css');
module.exports = ({
children
}) => {
return (
<div className={styles.container}>
{children}
</div>
);
};

View File

@ -1,6 +0,0 @@
module.exports = {
Button: require('./button'),
Container: require('./container'),
Base: require('./base'),
PlotlyGraph: require('./plotlyGraph'),
};

View File

@ -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;

View File

@ -1 +0,0 @@
module.exports = require('./components');

View File

@ -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);
}

View File

@ -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>
);
};

View File

@ -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 />
));

View File

@ -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);
});

View File

@ -3,13 +3,14 @@ const path = require('path');
const config = {
debug: true,
devtool: 'eval',
context: path.join(__dirname, './src'),
devtool: 'source-map',
context: path.join(__dirname, './client'),
app: path.join(__dirname, './client/index.js'),
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
'./showcase/index.js'
'./index.js'
],
output: {
path: path.join(__dirname, './static'),
@ -32,21 +33,21 @@ const config = {
test: /js?$/,
exclude: /node_modules/,
include: [
path.join(__dirname, './src')
path.join(__dirname, './client')
],
loaders: ['babel']
}, {
test: /\.json?$/,
exclude: /node_modules/,
include: [
path.join(__dirname, './src')
path.join(__dirname, './client')
],
loaders: ['json']
}, {
test: /\.css$/,
exclude: /node_modules/,
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'
}]