Project

General

Profile

Download (4.44 KB) Statistics
| Branch: | Revision:
1
<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>
(7-7/13)