corrade-nucleus-nucleons – Blame information for rev 25

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