corrade-nucleus-nucleons – Blame information for rev 7

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