metrics-server
Version:
Basic metrics server and client.
289 lines (264 loc) • 7.76 kB
HTML
<html>
<head>
<link rel="stylesheet" href="http://fastly.github.io/epoch/css/epoch.css">
<script src="http://fastly.github.io/epoch/js/jquery.js"></script>
<script src="http://fastly.github.io/epoch/js/d3.js"></script>
<script src="http://fastly.github.io/epoch/js/epoch.js"></script>
</head>
<body >
<div id="areaChart" class="epoch category20c" style="width: 100%; height: 200px;"></div>
<div id="memory" class="epoch category20c" style="width: 100%; height: 200px;"></div>
<div id="cpu" class="epoch category20c" style="width: 100%; height: 200px;"></div>
<img src="http://localhost:4003/tracking_pixel.gif?token=demo.onmousemove" />
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="cpu1" style="height: 400px; min-width: 310px"></div>
<div id="memory1" style="height: 400px; min-width: 310px"></div>
</body>
<script>
var push = new WebSocket("ws://127.0.0.1:4002/metrics");
var pull = new WebSocket("ws://127.0.0.1:4001/");
var chart = {};
pull.onmessage = function(event) {
var json = JSON.parse(event.data);
chart[json.group].push(json.results.map(function(update) {
return {
time : update[0],
y : update[1]
};
}));
};
$(document).click(function(event) {
var data = ['demo.onmouseclick', 1, Date.now(), 'inc'];
push.send(data.join(' '));
});
$(document).mousemove(function(event) {
var data = ['demo.onmousemove', 1, Date.now(), 'inc'];
push.send(data.join(' '));
});
$(function() {
$.getJSON('http://localhost:4001/metric/demo.onmousemove?from=a minute ago', function(onmousemove) {
$.getJSON('http://localhost:4001/metric/demo.onmouseclick?from=a minute ago', function(onmouseclick) {
$.getJSON('http://localhost:4001/metric/docker.test.memory.cache?from=a minute ago', function(cachememory) {
$.getJSON('http://localhost:4001/metric/docker.test.memory.rss?from=a minute ago', function(rssmemory) {
$.getJSON('http://localhost:4001/metric/docker.test.memory.swap?from=a minute ago', function(swapmemory) {
$.getJSON('http://localhost:4001/metric/docker.test.cpu.system?from=a minute ago', function(cpuSystem) {
$.getJSON('http://localhost:4001/metric/docker.test.cpu.user?from=a minute ago', function(cpuUser) {
console.log(cpu.length)
chart['memory'] = $('#memory').epoch({
type : 'time.line',
axes : ['right', 'bottom', 'left'],
data : [{
label : 'Memory cache',
values : cachememory.map(function(i) {
return {
time : i[0],
y : i[1]
};
})
}, {
label : 'Memory rss',
values : rssmemory.map(function(i) {
return {
time : i[0],
y : i[1]
};
})
}, {
label : 'Memory swap',
values : swapmemory.map(function(i) {
return {
time : i[0],
y : i[1]
};
})
}],
pixelRatio : 1
});
chart['demo'] = $('#areaChart').epoch({
type : 'time.line',
axes : ['right', 'bottom', 'left'],
data : [{
label : 'demo.onmouseclick',
values : onmouseclick.map(function(i) {
return {
time : i[0],
y : i[1]
};
})
}, {
label : 'demo.onmousemove',
values : onmousemove.map(function(i) {
return {
time : i[0],
y : i[1]
};
})
}],
pixelRatio : 1
});
pull.send(JSON.stringify({
event : 'start',
group : 'demo',
schema : 'demo.onmouseclick'
}));
pull.send(JSON.stringify({
event : 'start',
group : 'demo',
schema : 'demo.onmousemove'
}));
pull.send(JSON.stringify({
event : 'start',
group : 'cpu',
schema : 'docker.test.cpu.user'
}));
pull.send(JSON.stringify({
event : 'start',
group : 'cpu',
schema : 'docker.test.cpu.system'
}));
pull.send(JSON.stringify({
event : 'start',
group : 'memory',
schema : 'docker.test.memory.cache'
}));
pull.send(JSON.stringify({
event : 'start',
group : 'memory',
schema : 'docker.test.memory.rss'
}));
pull.send(JSON.stringify({
event : 'start',
group : 'memory',
schema : 'docker.test.memory.swap'
}));
chart['cpu'] = $('#cpu').epoch({
type : 'time.line',
axes : ['right', 'bottom', 'left'],
data : [{
label : 'CPU USER',
values : cpuUser.map(function(i) {
return {
time : i[0],
y : i[1]
};
})
}, {
label : 'CPU SYSTEM',
values : cpuSystem.map(function(i) {
return {
time : i[0],
y : i[1]
};
})
}],
pixelRatio : 1
});
});
});
});
});
});
});
});
});
$(function() {
return;
$.getJSON('http://localhost:4001/metric/docker.test.cpu.system', function(cpuSystem) {
$.getJSON('http://localhost:4001/metric/docker.test.cpu.user', function(cpuUser) {
var seriesOptions = [];
seriesOptions.push({
name : 'cpuSystem',
data : cpuSystem
});
seriesOptions.push({
name : 'cpuUser',
data : cpuUser
});
$('#cpu1').highcharts('StockChart', {
rangeSelector : {
selected : 1,
buttons : [{
type : 'minute',
count : 1,
text : '1m'
}, {
type : 'minute',
count : 10,
text : '10m'
}, {
type : 'minute',
count : 150,
text : '150m'
}, {
type : 'all',
text : 'All'
}]
},
yAxis : {
labels : {
},
plotLines : [{
value : 0,
width : 2,
color : 'silver'
}]
},
series : seriesOptions
});
});
});
$.getJSON('http://localhost:4001/metric/docker.test.memory.cache', function(cache) {
$.getJSON('http://localhost:4001/metric/docker.test.memory.rss', function(rss) {
$.getJSON('http://localhost:4001/metric/docker.test.memory.swap', function(swap) {
var seriesOptions = [];
seriesOptions.push({
name : 'cache',
data : cache
});
seriesOptions.push({
name : 'rss',
data : rss
});
seriesOptions.push({
name : 'swap',
data : swap
});
$('#memory1').highcharts('StockChart', {
rangeSelector : {
selected : 1,
buttons : [{
type : 'minute',
count : 1,
text : '1m'
}, {
type : 'minute',
count : 10,
text : '10m'
}, {
type : 'minute',
count : 150,
text : '150m'
}, {
type : 'all',
text : 'All'
}]
},
yAxis : {
labels : {
},
plotLines : [{
value : 0,
width : 2,
color : 'silver'
}]
},
series : seriesOptions
});
});
});
});
});
</script>
</html>