| 1 |
95b003ff
|
Origo
|
<html>
|
| 2 |
|
|
<head>
|
| 3 |
|
|
<title>Metrics</title>
|
| 4 |
|
|
</head>
|
| 5 |
|
|
<body>
|
| 6 |
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
| 7 |
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
| 8 |
|
|
|
| 9 |
|
|
<div id="chartCpuLoad"></div>
|
| 10 |
|
|
<div id="chartIO"></div>
|
| 11 |
|
|
<div id="chartNetworkActivity"></div>
|
| 12 |
|
|
|
| 13 |
|
|
<script>
|
| 14 |
|
|
$(document).ready(function() {
|
| 15 |
|
|
initApexCharts();
|
| 16 |
|
|
updateApexCharts("4922c983-7788-47bc-82f2-8ed8de25e9aa");
|
| 17 |
|
|
// window.setInterval(function () {
|
| 18 |
|
|
// updateApexCharts();
|
| 19 |
|
|
// }, 10000)
|
| 20 |
|
|
});
|
| 21 |
|
|
|
| 22 |
|
|
function initApexCharts() {
|
| 23 |
|
|
var options = {
|
| 24 |
|
|
chart: {
|
| 25 |
|
|
height: 200,
|
| 26 |
|
|
type: 'area',
|
| 27 |
|
|
nogroup: 'metrics',
|
| 28 |
|
|
animations: {
|
| 29 |
|
|
enabled: false,
|
| 30 |
|
|
easing: 'linear',
|
| 31 |
|
|
dynamicAnimation: {
|
| 32 |
|
|
speed: 1000
|
| 33 |
|
|
}
|
| 34 |
|
|
}
|
| 35 |
|
|
},
|
| 36 |
|
|
markers: {
|
| 37 |
|
|
size: 3
|
| 38 |
|
|
},
|
| 39 |
|
|
colors: ['#008FFB'],
|
| 40 |
|
|
dataLabels: {enabled: false},
|
| 41 |
|
|
series: [],
|
| 42 |
|
|
noData: {text: 'Loading...'},
|
| 43 |
|
|
xaxis: {
|
| 44 |
|
|
type: 'datetime',
|
| 45 |
|
|
labels: {
|
| 46 |
|
|
formatter: function (value, timestamp) {
|
| 47 |
|
|
if (timestamp > 100000) {
|
| 48 |
|
|
var d = new Date(timestamp * 1000);
|
| 49 |
|
|
var h = ("0" + d.getHours()).substr(-2);
|
| 50 |
|
|
var m = ("0" + d.getMinutes()).substr(-2);
|
| 51 |
|
|
var s = ("0" + d.getSeconds()).substr(-2);
|
| 52 |
|
|
var dstring = d.getDate() + "/" + (1+d.getMonth()) + "/" + d.getFullYear() + " " + h + ":" + m + ":" + s;
|
| 53 |
|
|
return dstring;
|
| 54 |
|
|
}
|
| 55 |
|
|
}
|
| 56 |
|
|
}
|
| 57 |
|
|
},
|
| 58 |
|
|
yaxis: {
|
| 59 |
|
|
labels: {
|
| 60 |
|
|
minWidth: "100px"
|
| 61 |
|
|
},
|
| 62 |
|
|
forceNiceScale: true,
|
| 63 |
|
|
decimalsInFloat: 2
|
| 64 |
|
|
}
|
| 65 |
|
|
}
|
| 66 |
|
|
|
| 67 |
|
|
var cpu_options = options;
|
| 68 |
|
|
cpu_options.title = {text: 'CPU Load'};
|
| 69 |
|
|
cpu_options.chart.id = 'cpu';
|
| 70 |
|
|
chart_cpu = new ApexCharts(document.querySelector("#chartCpuLoad"), cpu_options);
|
| 71 |
|
|
|
| 72 |
|
|
var disk_options = options;
|
| 73 |
|
|
disk_options.title = {text: 'Disk I/O (kbytes/s)'};
|
| 74 |
|
|
disk_options.yaxis.decimalsInFloat = 0;
|
| 75 |
|
|
disk_options.chart.id = 'disk';
|
| 76 |
|
|
disk_options.colors = ['#2980b9', '#e74c3c'];
|
| 77 |
|
|
chart_disk = new ApexCharts(document.querySelector("#chartIO"), disk_options);
|
| 78 |
|
|
|
| 79 |
|
|
var net_options = options;
|
| 80 |
|
|
net_options.title = {text: 'Network traffic (kbytes/s)'};
|
| 81 |
|
|
net_options.chart.id = 'network';
|
| 82 |
|
|
net_options.colors = ['#f39c12', '#9b59b6'];
|
| 83 |
|
|
chart_net = new ApexCharts(document.querySelector("#chartNetworkActivity"), net_options);
|
| 84 |
|
|
|
| 85 |
|
|
chart_cpu.render();
|
| 86 |
|
|
chart_disk.render();
|
| 87 |
|
|
chart_net.render();
|
| 88 |
|
|
}
|
| 89 |
|
|
|
| 90 |
|
|
function updateApexCharts(uuid) {
|
| 91 |
|
|
var until = Math.round((new Date()).getTime() / 1000);
|
| 92 |
|
|
var from = until - 60*30;
|
| 93 |
|
|
var url = "/graphite/graphite.wsgi/render?format=json&from=" + from + "&until=" + until + "&target=domains." + uuid + ".cpuLoad";
|
| 94 |
|
|
$.getJSON(url, function(response) {
|
| 95 |
|
|
var rawdata = response[0].datapoints;
|
| 96 |
|
|
chart_cpu.updateSeries([{
|
| 97 |
|
|
name: 'CPU load',
|
| 98 |
|
|
data: prepApexData(rawdata)
|
| 99 |
|
|
}])
|
| 100 |
|
|
});
|
| 101 |
|
|
|
| 102 |
|
|
url = "/graphite/graphite.wsgi/render?format=json&from=" + from + "&until=" + until + "&target=domains." + uuid + ".wr_kbytes_s";
|
| 103 |
|
|
$.getJSON(url, function(response) {
|
| 104 |
|
|
var rawdata_1 = response[0].datapoints;
|
| 105 |
|
|
url = "/graphite/graphite.wsgi/render?format=json&from=" + from + "&until=" + until + "&target=domains." + uuid + ".rd_kbytes_s";
|
| 106 |
|
|
$.getJSON(url, function(response) {
|
| 107 |
|
|
var rawdata_2 = response[0].datapoints;
|
| 108 |
|
|
chart_disk.updateSeries([
|
| 109 |
|
|
{
|
| 110 |
|
|
name: 'Disk writes',
|
| 111 |
|
|
data: prepApexData(rawdata_1)
|
| 112 |
|
|
},
|
| 113 |
|
|
{
|
| 114 |
|
|
name: 'Disk reads',
|
| 115 |
|
|
data: prepApexData(rawdata_2)
|
| 116 |
|
|
}
|
| 117 |
|
|
])
|
| 118 |
|
|
});
|
| 119 |
|
|
});
|
| 120 |
|
|
|
| 121 |
|
|
url = "/graphite/graphite.wsgi/render?format=json&from=" + from + "&until=" + until + "&target=domains." + uuid + ".rx_kbytes_s";
|
| 122 |
|
|
$.getJSON(url, function(response) {
|
| 123 |
|
|
var rawdata_1 = response[0].datapoints;
|
| 124 |
|
|
url = "/graphite/graphite.wsgi/render?format=json&from=" + from + "&until=" + until + "&target=domains." + uuid + ".tx_kbytes_s";
|
| 125 |
|
|
$.getJSON(url, function(response) {
|
| 126 |
|
|
var rawdata_2 = response[0].datapoints;
|
| 127 |
|
|
chart_net.updateSeries([
|
| 128 |
|
|
{
|
| 129 |
|
|
name: 'Traffic in',
|
| 130 |
|
|
data: prepApexData(rawdata_1)
|
| 131 |
|
|
},
|
| 132 |
|
|
{
|
| 133 |
|
|
name: 'Traffic out',
|
| 134 |
|
|
data: prepApexData(rawdata_2)
|
| 135 |
|
|
}
|
| 136 |
|
|
])
|
| 137 |
|
|
});
|
| 138 |
|
|
});
|
| 139 |
|
|
}
|
| 140 |
|
|
|
| 141 |
|
|
function prepApexData(rdata) {
|
| 142 |
|
|
var data = [];
|
| 143 |
|
|
rdata.forEach(
|
| 144 |
|
|
function(item, index) {
|
| 145 |
|
|
data.push({"x": item[1], "y": item[0]})
|
| 146 |
|
|
}
|
| 147 |
|
|
)
|
| 148 |
|
|
return data;
|
| 149 |
|
|
};
|
| 150 |
|
|
|
| 151 |
|
|
</script>
|
| 152 |
|
|
</body>
|
| 153 |
|
|
</html>
|