corrade-nucleus-nucleons – Blame information for rev 28

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