corrade-nucleus-nucleons – Blame information for rev 39

Subversion Repositories:
Rev:
Rev Author Line No. Line
31 office 1 <div id="doctor">
2 <!-- HighCharts.js CSS -->
3 <link href="/doctor/node_modules/highcharts/css/highcharts.css" rel="stylesheet" type="text/css">
4 <!-- HighCharts -->
5 <script src="/doctor/node_modules/highcharts/js/highcharts.js" type="text/javascript"></script>
6 <script src="/doctor/node_modules/highcharts/js/modules/exporting.js" type="text/javascript"></script>
7  
39 office 8 <div class="panel panel-default window-manager-window" data-target="doctor">
31 office 9 <div class="panel-heading">
10 <button type="button" class="close window-manager-close-button" data-target="doctor"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
11 <h3 class="panel-title">HeartBeat</h3>
12 </div>
13 <div class="panel-body">
14 <div id="heartbeat" class="row"></div>
15 </div>
16 </div>
17  
18 <!-- Highcharts Chart -->
19 <script type="text/javascript">
20 $(document).ready(function() {
21 // Display Corrade Heartbeat using HighCharts.
22 var updateInterval = 1000;
23 var plotPoints = 20;
24  
25 function retrieveStats(series_1, series_2) {
26 $.ajax({
27 type: 'POST',
28 url: '/',
29 data: {
30 command: 'getheartbeatdata',
31 data: wasArrayToCSV(
32 [
33 'AverageCPUUsage',
34 'AverageRAMUsage',
35 ]
36 )
37 },
38 dataType: 'json'
39 }).done(function(response) {
40 var data = wasCSVToArray(response.data);
41 var time = (new Date()).getTime();
42 var ram, cpu;
43 $.each(data, function(i, value) {
44 switch (value) {
45 case 'AverageCPUUsage':
46 cpu = parseInt(data[i + 1]);
47 break;
48 case 'AverageRAMUsage':
49 // Convert bytes to MiB
50 ram = Math.floor(parseInt(data[i + 1]) / 1048576);
51 break;
52 }
53 });
54 series_1.addPoint(
55 [
56 time,
57 cpu
58 ],
59 false, // false for all but last
60 true
61 );
62 series_2.addPoint(
63 [
64 time,
65 ram
66 ],
67 true, // false for all but last
68 true
69 );
70 /*setTimeout(
71 retrieveStats,
72 updateInterval,
73 series_1,
74 series_2
75 );*/
76 });
77 }
78  
79 Highcharts.setOptions({
80 global: {
81 useUTC: true
82 }
83 });
84  
85 $('#heartbeat').highcharts({
86 chart: {
87 type: 'spline',
88 zoomType: 'xy',
89 //animation: Highcharts.svg, // don't animate in old IE
90 //marginRight: 10,
91 //shadow: true,
92 events: {
93 load: function() {
94 // set up the updating of the chart each second
95 //retrieveStats(this.series[0], this.series[1]);
96 setInterval(
97 retrieveStats,
98 updateInterval,
99 this.series[0],
100 this.series[1]
101 );
102 }
103 }
104 },
105 title: {
106 text: null,
107 enabled: false
108 },
109 credits: {
110 enabled: false
111 },
112 xAxis: [{
113 type: 'datetime' //,
114 //tickPixelInterval: 150,
115 }],
116 yAxis: [{
117 //type: 'linear',
118 //allowDecimals: false,
119 //min: 0,
120 labels: {
121 enabled: false
122 },
123 title: {
124 text: null
125 }
126 }, {
127 //type: 'linear',
128 //allowDecimals: false,
129 //min: 0,
130 labels: {
131 enabled: false
132 },
133 title: {
134 text: null
135 }
136 }],
137 /*tooltip: {
138 formatter: function() {
139 switch(this.series.name) {
140 case 'CPU':
141 return '<b>' + this.series.name + '</b><br/>' +
142 Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
143 this.y + '%';
144 break;
145 case 'RAM':
146 return '<b>' + this.series.name + '</b><br/>' +
147 Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
148 Highcharts.numberFormat(this.y/1048576, 0) + 'MiB';
149 break;
150 }
151 }
152 },*/
153 tooltip: {
154 shared: true
155 },
156 legend: {
157 enabled: true
158 },
159 exporting: {
160 enabled: true
161 },
162 series: [{
163 name: 'CPU',
164 color: '#FF0000',
165 tooltip: {
166 valueSuffix: ' %'
167 },
168 yAxis: 0,
169 data: (function() {
170 var data = [],
171 time = (new Date()).getTime(),
172 j = -(plotPoints - 1);
173 $.ajax({
174 type: 'POST',
175 url: '/',
176 data: {
177 command: 'getheartbeatdata',
178 data: wasArrayToCSV(
179 [
180 'CPUAverageUsageHistory'
181 ]
182 )
183 },
184 dataType: 'json',
185 async: false,
186 success: function(response) {
187 var responseData = wasCSVToArray(response.data).slice(1);
188 $.each($.stride(responseData.slice(1), 2).slice(-20), function(i, e) {
189 data.push({
190 x: time + ++j * updateInterval,
191 y: parseInt(e)
192 });
193 });
194 }
195 });
196  
197 var result = [];
198 while (result.length < plotPoints - data.length)
199 result.push({
200 x: time + ++j * updateInterval,
201 y: 0
202 });
203  
204 return result.concat(data);
205 }())
206 }, {
207 name: 'RAM',
208 color: '#0000FF',
209 tooltip: {
210 valueSuffix: ' MiB'
211 },
212 yAxis: 1,
213 data: (function() {
214 var data = [],
215 time = (new Date()).getTime(),
216 j = -(plotPoints - 1);
217 $.ajax({
218 type: 'POST',
219 url: '/',
220 data: {
221 command: 'getheartbeatdata',
222 data: wasArrayToCSV(
223 [
224 'RAMAverageUsageHistory'
225 ]
226 )
227 },
228 dataType: 'json',
229 async: false,
230 success: function(response) {
231 var responseData = wasCSVToArray(response.data).slice(1);
232 $.each($.stride(responseData.slice(1), 2).slice(-20), function(i, e) {
233 data.push({
234 x: time + ++j * updateInterval,
235 // Convert bytes to MiB.
236 y: Math.floor(parseInt(e) / 1048576)
237 });
238 });
239 }
240 });
241  
242 var result = [];
243 while (result.length < plotPoints - data.length)
244 < plotPoints - data.length) result.push({
245 < plotPoints - data.length) x: time + ++j * updateInterval,
246 < plotPoints - data.length) y: 0
247 < plotPoints - data.length) });
248  
249 < plotPoints - data.length) return result.concat(data);
250 < plotPoints - data.length) }())
251 < plotPoints - data.length) }]
252 < plotPoints - data.length) });
253 < plotPoints - data.length) });
254 < plotPoints - data.length) script>
255 < plotPoints - data.length)</div>