corrade-nucleus-nucleons – Diff between revs 30 and 31

Subversion Repositories:
Rev:
Show entire file – Ignore whitespace
Rev 30 Rev 31
Line 17... Line 17...
17 <link href="/css/nucleus/fonts.css" rel="stylesheet" type="text/css"> 17 <link href="/css/nucleus/fonts.css" rel="stylesheet" type="text/css">
18 <!-- Customized bootstrap style. --> 18 <!-- Customized bootstrap style. -->
19 <link href="/css/nucleus/nucleus.css" rel="stylesheet" type="text/css"> 19 <link href="/css/nucleus/nucleus.css" rel="stylesheet" type="text/css">
20 <!-- Manager for Windows. --> 20 <!-- Manager for Windows. -->
21 <link href="/css/wm/wm.css" rel="stylesheet" type="text/css"> 21 <link href="/css/wm/wm.css" rel="stylesheet" type="text/css">
22 -  
23 <!-- HighCharts.js CSS --> -  
24 <link href="/node_modules/highcharts/css/highcharts.css" rel="stylesheet" type="text/css"> -  
25 </head> 22 </head>
Line 26... Line 23...
26   23  
27 <body> 24 <body>
28 <div class="container"> 25 <div class="container">
Line 56... Line 53...
56 <script src="/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script> 53 <script src="/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
57 <!-- Bootstrap Javascript --> 54 <!-- Bootstrap Javascript -->
58 <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script> 55 <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
59 <!-- Wizardry and Steamworks JavaScript Includes --> 56 <!-- Wizardry and Steamworks JavaScript Includes -->
60 <script src="/node_modules/was/dist/was.min.js" type="text/javascript"></script> 57 <script src="/node_modules/was/dist/was.min.js" type="text/javascript"></script>
61 <!-- HighCharts --> -  
62 <script src="/node_modules/highcharts/js/highcharts.js" type="text/javascript"></script> -  
63 <script src="/node_modules/highcharts/js/modules/exporting.js" type="text/javascript"></script> -  
64 <!-- Interact JS --> 58 <!-- Interact JS -->
65 <script src="/node_modules/interactjs/dist/interact.min.js" type="text/javascript"></script> 59 <script src="/node_modules/interactjs/dist/interact.min.js" type="text/javascript"></script>
66 <!-- Manager for Windows. --> 60 <!-- Manager for Windows. -->
67 <script src="/js/wm/wm.js" type="text/javascript"></script> 61 <script src="/js/wm/wm.js" type="text/javascript"></script>
68 <!-- Nucleons Loader --> 62 <!-- Nucleons Loader -->
69 <script src="/js/nucleus/load-nucleons.js" type="text/javascript"></script> 63 <script src="/js/nucleus/load-nucleons.js" type="text/javascript"></script>
70 <script type="text/javascript"> -  
71 $(document).ready(function() { -  
72 // Display Corrade Heartbeat using HighCharts. -  
73 var updateInterval = 1000; -  
74 var plotPoints = 20; -  
75   -  
76 function retrieveStats(series_1, series_2) { -  
77 $.ajax({ -  
78 type: 'POST', -  
79 url: '/', -  
80 data: { -  
81 command: 'getheartbeatdata', -  
82 data: wasArrayToCSV( -  
83 [ -  
84 'AverageCPUUsage', -  
85 'AverageRAMUsage', -  
86 ] -  
87 ) -  
88 }, -  
89 dataType: 'json' -  
90 }).done(function(response) { -  
91 var data = wasCSVToArray(response.data); -  
92 var time = (new Date()).getTime(); -  
93 var ram, cpu; -  
94 $.each(data, function(i, value) { -  
95 switch (value) { -  
96 case 'AverageCPUUsage': -  
97 cpu = parseInt(data[i + 1]); -  
98 break; -  
99 case 'AverageRAMUsage': -  
100 // Convert bytes to MiB -  
101 ram = Math.floor(parseInt(data[i + 1]) / 1048576); -  
102 break; -  
103 } -  
104 }); -  
105 series_1.addPoint( -  
106 [ -  
107 time, -  
108 cpu -  
109 ], -  
110 false, // false for all but last -  
111 true -  
112 ); -  
113 series_2.addPoint( -  
114 [ -  
115 time, -  
116 ram -  
117 ], -  
118 true, // false for all but last -  
119 true -  
120 ); -  
121 /*setTimeout( -  
122 retrieveStats, -  
123 updateInterval, -  
124 series_1, -  
125 series_2 -  
126 );*/ -  
127 }); -  
128 } -  
129   -  
130 Highcharts.setOptions({ -  
131 global: { -  
132 useUTC: true -  
133 } -  
134 }); -  
135   -  
136 $('#heartbeat').highcharts({ -  
137 chart: { -  
138 type: 'spline', -  
139 zoomType: 'xy', -  
140 //animation: Highcharts.svg, // don't animate in old IE -  
141 //marginRight: 10, -  
142 //shadow: true, -  
143 events: { -  
144 load: function() { -  
145 // set up the updating of the chart each second -  
146 //retrieveStats(this.series[0], this.series[1]); -  
147 setInterval( -  
148 retrieveStats, -  
149 updateInterval, -  
150 this.series[0], -  
151 this.series[1] -  
152 ); -  
153 } -  
154 } -  
155 }, -  
156 title: { -  
157 text: null, -  
158 enabled: false -  
159 }, -  
160 credits: { -  
161 enabled: false -  
162 }, -  
163 xAxis: [{ -  
164 type: 'datetime' //, -  
165 //tickPixelInterval: 150, -  
166 }], -  
167 yAxis: [{ -  
168 //type: 'linear', -  
169 //allowDecimals: false, -  
170 //min: 0, -  
171 labels: { -  
172 enabled: false -  
173 }, -  
174 title: { -  
175 text: null -  
176 } -  
177 }, { -  
178 //type: 'linear', -  
179 //allowDecimals: false, -  
180 //min: 0, -  
181 labels: { -  
182 enabled: false -  
183 }, -  
184 title: { -  
185 text: null -  
186 } -  
187 }], -  
188 /*tooltip: { -  
189 formatter: function() { -  
190 switch(this.series.name) { -  
191 case 'CPU': -  
192 return '<b>' + this.series.name + '</b><br/>' + -  
193 Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + -  
194 this.y + '%'; -  
195 break; -  
196 case 'RAM': -  
197 return '<b>' + this.series.name + '</b><br/>' + -  
198 Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + -  
199 Highcharts.numberFormat(this.y/1048576, 0) + 'MiB'; -  
200 break; -  
201 } -  
202 } -  
203 },*/ -  
204 tooltip: { -  
205 shared: true -  
206 }, -  
207 legend: { -  
208 enabled: true -  
209 }, -  
210 exporting: { -  
211 enabled: true -  
212 }, -  
213 series: [{ -  
214 name: 'CPU', -  
215 color: '#FF0000', -  
216 tooltip: { -  
217 valueSuffix: ' %' -  
218 }, -  
219 yAxis: 0, -  
220 data: (function() { -  
221 var data = [], -  
222 time = (new Date()).getTime(), -  
223 j = -(plotPoints - 1); -  
224 $.ajax({ -  
225 type: 'POST', -  
226 url: '/', -  
227 data: { -  
228 command: 'getheartbeatdata', -  
229 data: wasArrayToCSV( -  
230 [ -  
231 'CPUAverageUsageHistory' -  
232 ] -  
233 ) -  
234 }, -  
235 dataType: 'json', -  
236 async: false, -  
237 success: function(response) { -  
238 var responseData = wasCSVToArray(response.data).slice(1); -  
239 $.each($.stride(responseData.slice(1), 2).slice(-20), function(i, e) { -  
240 data.push({ -  
241 x: time + ++j * updateInterval, -  
242 y: parseInt(e) -  
243 }); -  
244 }); -  
245 } -  
246 }); -  
247   -  
248 var result = []; -  
249 while (result.length < plotPoints - data.length) -  
250 result.push({ -  
251 x: time + ++j * updateInterval, -  
252 y: 0 -  
253 }); -  
254   -  
255 return result.concat(data); -  
256 }()) -  
257 }, { -  
258 name: 'RAM', -  
259 color: '#0000FF', -  
260 tooltip: { -  
261 valueSuffix: ' MiB' -  
262 }, -  
263 yAxis: 1, -  
264 data: (function() { -  
265 var data = [], -  
266 time = (new Date()).getTime(), -  
267 j = -(plotPoints - 1); -  
268 $.ajax({ -  
269 type: 'POST', -  
270 url: '/', -  
271 data: { -  
272 command: 'getheartbeatdata', -  
273 data: wasArrayToCSV( -  
274 [ -  
275 'RAMAverageUsageHistory' -  
276 ] -  
277 ) -  
278 }, -  
279 dataType: 'json', -  
280 async: false, -  
281 success: function(response) { -  
282 var responseData = wasCSVToArray(response.data).slice(1); -  
283 $.each($.stride(responseData.slice(1), 2).slice(-20), function(i, e) { -  
284 data.push({ -  
285 x: time + ++j * updateInterval, -  
286 // Convert bytes to MiB. -  
287 y: Math.floor(parseInt(e) / 1048576) -  
288 }); -  
289 }); -  
290 } -  
291 }); -  
292   -  
293 var result = []; -  
294 while (result.length < plotPoints - data.length) -  
295 < plotPoints - data.length) result.push({ -  
296 < plotPoints - data.length) x: time + ++j * updateInterval, -  
297 < plotPoints - data.length) y: 0 -  
298 < plotPoints - data.length) }); -  
299 < plotPoints - data.length) -  
300 < plotPoints - data.length) return result.concat(data); -  
301 < plotPoints - data.length) }()) -  
302 < plotPoints - data.length) }] -  
303 < plotPoints - data.length) }); -  
304 < plotPoints - data.length) }); -  
305 < plotPoints - data.length) script> -  
306 < plotPoints - data.length)</body> 64 </body>
307 < plotPoints - data.length)html> 65 </html>