corrade-nucleus-nucleons – Blame information for rev 1

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