corrade-nucleus-nucleons – Blame information for rev 20

Subversion Repositories:
Rev:
Rev Author Line No. Line
1 office 1 <!DOCTYPE html>
2  
3 <html lang="en">
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
5 office 7 <meta name="viewport" content="width=device-width, initial-scale=1">
1 office 8 <meta name="description" content="Corrade Nucleon">
9 <meta name="author" content="Wizardry and Steamworks">
10 <link rel="icon" href="favicon.ico">
11  
12 <title>Corrade Nucleus</title>
13  
14 <!-- Bootstrap core CSS -->
20 office 15 <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
1 office 16 <!-- Corrade Nucleus Fonts -->
17 <link href="/css/nucleus/fonts.css" rel="stylesheet" type="text/css">
18 <!-- Customized bootstrap style. -->
19 <link href="/css/nucleus/nucleus.css" rel="stylesheet" type="text/css">
20 office 20  
21 <!-- HighCharts.js CSS -->
22 <link href="/node_modules/highcharts/css/highcharts.css" rel="stylesheet" type="text/css
1 office 23 </head>
24  
25 <body>
26 <div class="container">
27 <div class="jumbotron">
28 <h1>Nucleus</h1>
29  
30 <p class="lead">The Corrade Nucleus is a built-in management interface for the Corrade scripted agent that allows you to query general information, toggle and configure various aspects and monitor the uptime and health of your Corrade directly through your web browser.</p>
31 <img src="/img/corrade-nucleus.png"></div>
32  
33 <div class="panel panel-default">
34 <div class="panel-heading">
35 <h3 class="panel-title">HeartBeat</h3>
36 </div>
37 <div class="panel-body">
38 <div id="heartbeat" class="row"></div>
39 </div>
40 </div>
41  
42 <div class="panel panel-default">
43 <div class="panel-heading">
44 <h3 class="panel-title">Nucleons</h3>
45 </div>
46 <div class="panel-body">
47 <div id="nucleons" class="row"></div>
48 </div>
49 </div>
50  
51 </div>
52  
53 <footer class="footer">
54 <p>&copy; 2016 Wizardry and Steamworks</p>
55 </footer>
7 office 56 <!-- jQuery -->
20 office 57 <script src="/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
7 office 58 <!-- Wizardry and Steamworks JavaScript Includes -->
20 office 59 <script src="/node_modules/was/dist/was.min.js" type="text/javascript"></script>
7 office 60 <!-- HighCharts -->
20 office 61 <script src="/node_modules/highcharts/js/highcharts.js" type="text/javascript"></script>
62 <script src="/node_modules/highcharts/js/modules/exporting.js" type="text/javascript"></script>
1 office 63 <script type="text/javascript">
64 $(document).ready(function() {
65 // Search and load all nucleons.
66 $.get('/nucleons', function(data) {
67 var nucleons = wasCSVToArray(data);
68 $.each(nucleons, function(index, value) {
69 // Skip files starting with full stop (POSIX).
70 if (/^\./.test(value)) return;
71 $.get('/nucleons/' + value, function(doc) {
72 var div = $('<div class="col-xs-6 col-md-3">').html(doc);
73 $('#nucleons').append(div);
74 });
75 });
76 });
77  
78 // Display Corrade Heartbeat using HighCharts.
79 var updateInterval = 1000;
80 var plotPoints = 20;
81  
82 function retrieveStats(series_1, series_2) {
83 $.ajax({
84 type: 'POST',
85 url: '/',
86 data: {
87 command: 'getheartbeatdata',
88 data: wasArrayToCSV(
89 [
90 'AverageCPUUsage',
91 'AverageRAMUsage',
92 ]
93 )
94 },
95 dataType: 'json'
96 }).done(function(response) {
97 var data = wasCSVToArray(response.data);
98 var time = (new Date()).getTime();
99 var ram, cpu;
100 $.each(data, function(i, value) {
101 switch (value) {
102 case 'AverageCPUUsage':
103 cpu = parseInt(data[i + 1]);
104 break;
105 case 'AverageRAMUsage':
106 // Convert bytes to MiB
107 ram = Math.floor(parseInt(data[i + 1]) / 1048576);
108 break;
109 }
110 });
111 series_1.addPoint(
112 [
113 time,
114 cpu
115 ],
116 false, // false for all but last
117 true
118 );
119 series_2.addPoint(
120 [
121 time,
122 ram
123 ],
124 true, // false for all but last
125 true
126 );
127 /*setTimeout(
128 retrieveStats,
129 updateInterval,
130 series_1,
131 series_2
132 );*/
133 });
134 }
135  
136 Highcharts.setOptions({
137 global: {
138 useUTC: true
139 }
140 });
141  
142 $('#heartbeat').highcharts({
143 chart: {
144 type: 'spline',
145 zoomType: 'xy',
146 //animation: Highcharts.svg, // don't animate in old IE
147 //marginRight: 10,
148 //shadow: true,
149 events: {
150 load: function() {
151 // set up the updating of the chart each second
152 //retrieveStats(this.series[0], this.series[1]);
153 setInterval(
154 retrieveStats,
155 updateInterval,
156 this.series[0],
157 this.series[1]
158 );
159 }
160 }
161 },
162 title: {
163 text: null,
164 enabled: false
165 },
166 credits: {
167 enabled: false
168 },
169 xAxis: [{
170 type: 'datetime' //,
171 //tickPixelInterval: 150,
172 }],
173 yAxis: [{
174 //type: 'linear',
175 //allowDecimals: false,
176 //min: 0,
177 labels: {
178 enabled: false
179 },
180 title: {
181 text: null
182 }
183 }, {
184 //type: 'linear',
185 //allowDecimals: false,
186 //min: 0,
187 labels: {
188 enabled: false
189 },
190 title: {
191 text: null
192 }
193 }],
194 /*tooltip: {
195 formatter: function() {
196 switch(this.series.name) {
197 case 'CPU':
198 return '<b>' + this.series.name + '</b><br/>' +
199 Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
200 this.y + '%';
201 break;
202 case 'RAM':
203 return '<b>' + this.series.name + '</b><br/>' +
204 Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
205 Highcharts.numberFormat(this.y/1048576, 0) + 'MiB';
206 break;
207 }
208 }
209 },*/
210 tooltip: {
211 shared: true
212 },
213 legend: {
214 enabled: true
215 },
216 exporting: {
217 enabled: true
218 },
219 series: [{
220 name: 'CPU',
221 color: '#FF0000',
222 tooltip: {
223 valueSuffix: ' %'
224 },
225 yAxis: 0,
226 data: (function() {
227 var data = [],
228 time = (new Date()).getTime(),
229 j = -(plotPoints - 1);
230 $.ajax({
231 type: 'POST',
232 url: '/',
233 data: {
234 command: 'getheartbeatdata',
235 data: wasArrayToCSV(
236 [
237 'CPUAverageUsageHistory'
238 ]
239 )
240 },
241 dataType: 'json',
242 async: false,
243 success: function(response) {
244 var responseData = wasCSVToArray(response.data).slice(1);
245 $.each($.stride(responseData.slice(1), 2).slice(-20), function(i, e) {
246 data.push({
247 x: time + ++j * updateInterval,
248 y: parseInt(e)
249 });
250 });
251 }
252 });
253  
254 var result = [];
255 while (result.length < plotPoints - data.length)
256 result.push({
257 x: time + ++j * updateInterval,
258 y: 0
259 });
260  
261 return result.concat(data);
262 }())
263 }, {
264 name: 'RAM',
265 color: '#0000FF',
266 tooltip: {
267 valueSuffix: ' MiB'
268 },
269 yAxis: 1,
270 data: (function() {
271 var data = [],
272 time = (new Date()).getTime(),
273 j = -(plotPoints - 1);
274 $.ajax({
275 type: 'POST',
276 url: '/',
277 data: {
278 command: 'getheartbeatdata',
279 data: wasArrayToCSV(
280 [
281 'RAMAverageUsageHistory'
282 ]
283 )
284 },
285 dataType: 'json',
286 async: false,
287 success: function(response) {
288 var responseData = wasCSVToArray(response.data).slice(1);
289 $.each($.stride(responseData.slice(1), 2).slice(-20), function(i, e) {
290 data.push({
291 x: time + ++j * updateInterval,
292 // Convert bytes to MiB.
293 y: Math.floor(parseInt(e) / 1048576)
294 });
295 });
296 }
297 });
298  
299 var result = [];
300 while (result.length < plotPoints - data.length)
301 result.push({
302 x: time + ++j * updateInterval,
303 y: 0
304 });
305  
306 return result.concat(data);
307 }())
308 }]
309 });
310 });
311 </script>
312 </body>
313 </html>