corrade-nucleus-nucleons – Blame information for rev 1
?pathlinks?
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>© 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>> |