corrade-nucleus-nucleons – Blame information for rev 30

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