corrade-nucleus-nucleons – Blame information for rev 32
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
31 | office | 1 | <div id="doctor"> |
2 | <!-- HighCharts.js CSS --> |
||
3 | <link href="/doctor/node_modules/highcharts/css/highcharts.css" rel="stylesheet" type="text/css"> |
||
4 | <!-- HighCharts --> |
||
5 | <script src="/doctor/node_modules/highcharts/js/highcharts.js" type="text/javascript"></script> |
||
6 | <script src="/doctor/node_modules/highcharts/js/modules/exporting.js" type="text/javascript"></script> |
||
7 | |||
8 | <div class="panel panel-default window-manager-window"> |
||
9 | <div class="panel-heading"> |
||
10 | <button type="button" class="close window-manager-close-button" data-target="doctor"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> |
||
11 | <h3 class="panel-title">HeartBeat</h3> |
||
12 | </div> |
||
13 | <div class="panel-body"> |
||
14 | <div id="heartbeat" class="row"></div> |
||
15 | </div> |
||
16 | </div> |
||
17 | |||
18 | <!-- Highcharts Chart --> |
||
19 | <script type="text/javascript"> |
||
20 | $(document).ready(function() { |
||
21 | // Display Corrade Heartbeat using HighCharts. |
||
22 | var updateInterval = 1000; |
||
23 | var plotPoints = 20; |
||
24 | |||
25 | function retrieveStats(series_1, series_2) { |
||
26 | $.ajax({ |
||
27 | type: 'POST', |
||
28 | url: '/', |
||
29 | data: { |
||
30 | command: 'getheartbeatdata', |
||
31 | data: wasArrayToCSV( |
||
32 | [ |
||
33 | 'AverageCPUUsage', |
||
34 | 'AverageRAMUsage', |
||
35 | ] |
||
36 | ) |
||
37 | }, |
||
38 | dataType: 'json' |
||
39 | }).done(function(response) { |
||
40 | var data = wasCSVToArray(response.data); |
||
41 | var time = (new Date()).getTime(); |
||
42 | var ram, cpu; |
||
43 | $.each(data, function(i, value) { |
||
44 | switch (value) { |
||
45 | case 'AverageCPUUsage': |
||
46 | cpu = parseInt(data[i + 1]); |
||
47 | break; |
||
48 | case 'AverageRAMUsage': |
||
49 | // Convert bytes to MiB |
||
50 | ram = Math.floor(parseInt(data[i + 1]) / 1048576); |
||
51 | break; |
||
52 | } |
||
53 | }); |
||
54 | series_1.addPoint( |
||
55 | [ |
||
56 | time, |
||
57 | cpu |
||
58 | ], |
||
59 | false, // false for all but last |
||
60 | true |
||
61 | ); |
||
62 | series_2.addPoint( |
||
63 | [ |
||
64 | time, |
||
65 | ram |
||
66 | ], |
||
67 | true, // false for all but last |
||
68 | true |
||
69 | ); |
||
70 | /*setTimeout( |
||
71 | retrieveStats, |
||
72 | updateInterval, |
||
73 | series_1, |
||
74 | series_2 |
||
75 | );*/ |
||
76 | }); |
||
77 | } |
||
78 | |||
79 | Highcharts.setOptions({ |
||
80 | global: { |
||
81 | useUTC: true |
||
82 | } |
||
83 | }); |
||
84 | |||
85 | $('#heartbeat').highcharts({ |
||
86 | chart: { |
||
87 | type: 'spline', |
||
88 | zoomType: 'xy', |
||
89 | //animation: Highcharts.svg, // don't animate in old IE |
||
90 | //marginRight: 10, |
||
91 | //shadow: true, |
||
92 | events: { |
||
93 | load: function() { |
||
94 | // set up the updating of the chart each second |
||
95 | //retrieveStats(this.series[0], this.series[1]); |
||
96 | setInterval( |
||
97 | retrieveStats, |
||
98 | updateInterval, |
||
99 | this.series[0], |
||
100 | this.series[1] |
||
101 | ); |
||
102 | } |
||
103 | } |
||
104 | }, |
||
105 | title: { |
||
106 | text: null, |
||
107 | enabled: false |
||
108 | }, |
||
109 | credits: { |
||
110 | enabled: false |
||
111 | }, |
||
112 | xAxis: [{ |
||
113 | type: 'datetime' //, |
||
114 | //tickPixelInterval: 150, |
||
115 | }], |
||
116 | yAxis: [{ |
||
117 | //type: 'linear', |
||
118 | //allowDecimals: false, |
||
119 | //min: 0, |
||
120 | labels: { |
||
121 | enabled: false |
||
122 | }, |
||
123 | title: { |
||
124 | text: null |
||
125 | } |
||
126 | }, { |
||
127 | //type: 'linear', |
||
128 | //allowDecimals: false, |
||
129 | //min: 0, |
||
130 | labels: { |
||
131 | enabled: false |
||
132 | }, |
||
133 | title: { |
||
134 | text: null |
||
135 | } |
||
136 | }], |
||
137 | /*tooltip: { |
||
138 | formatter: function() { |
||
139 | switch(this.series.name) { |
||
140 | case 'CPU': |
||
141 | return '<b>' + this.series.name + '</b><br/>' + |
||
142 | Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + |
||
143 | this.y + '%'; |
||
144 | break; |
||
145 | case 'RAM': |
||
146 | return '<b>' + this.series.name + '</b><br/>' + |
||
147 | Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + |
||
148 | Highcharts.numberFormat(this.y/1048576, 0) + 'MiB'; |
||
149 | break; |
||
150 | } |
||
151 | } |
||
152 | },*/ |
||
153 | tooltip: { |
||
154 | shared: true |
||
155 | }, |
||
156 | legend: { |
||
157 | enabled: true |
||
158 | }, |
||
159 | exporting: { |
||
160 | enabled: true |
||
161 | }, |
||
162 | series: [{ |
||
163 | name: 'CPU', |
||
164 | color: '#FF0000', |
||
165 | tooltip: { |
||
166 | valueSuffix: ' %' |
||
167 | }, |
||
168 | yAxis: 0, |
||
169 | data: (function() { |
||
170 | var data = [], |
||
171 | time = (new Date()).getTime(), |
||
172 | j = -(plotPoints - 1); |
||
173 | $.ajax({ |
||
174 | type: 'POST', |
||
175 | url: '/', |
||
176 | data: { |
||
177 | command: 'getheartbeatdata', |
||
178 | data: wasArrayToCSV( |
||
179 | [ |
||
180 | 'CPUAverageUsageHistory' |
||
181 | ] |
||
182 | ) |
||
183 | }, |
||
184 | dataType: 'json', |
||
185 | async: false, |
||
186 | success: function(response) { |
||
187 | var responseData = wasCSVToArray(response.data).slice(1); |
||
188 | $.each($.stride(responseData.slice(1), 2).slice(-20), function(i, e) { |
||
189 | data.push({ |
||
190 | x: time + ++j * updateInterval, |
||
191 | y: parseInt(e) |
||
192 | }); |
||
193 | }); |
||
194 | } |
||
195 | }); |
||
196 | |||
197 | var result = []; |
||
198 | while (result.length < plotPoints - data.length) |
||
199 | result.push({ |
||
200 | x: time + ++j * updateInterval, |
||
201 | y: 0 |
||
202 | }); |
||
203 | |||
204 | return result.concat(data); |
||
205 | }()) |
||
206 | }, { |
||
207 | name: 'RAM', |
||
208 | color: '#0000FF', |
||
209 | tooltip: { |
||
210 | valueSuffix: ' MiB' |
||
211 | }, |
||
212 | yAxis: 1, |
||
213 | data: (function() { |
||
214 | var data = [], |
||
215 | time = (new Date()).getTime(), |
||
216 | j = -(plotPoints - 1); |
||
217 | $.ajax({ |
||
218 | type: 'POST', |
||
219 | url: '/', |
||
220 | data: { |
||
221 | command: 'getheartbeatdata', |
||
222 | data: wasArrayToCSV( |
||
223 | [ |
||
224 | 'RAMAverageUsageHistory' |
||
225 | ] |
||
226 | ) |
||
227 | }, |
||
228 | dataType: 'json', |
||
229 | async: false, |
||
230 | success: function(response) { |
||
231 | var responseData = wasCSVToArray(response.data).slice(1); |
||
232 | $.each($.stride(responseData.slice(1), 2).slice(-20), function(i, e) { |
||
233 | data.push({ |
||
234 | x: time + ++j * updateInterval, |
||
235 | // Convert bytes to MiB. |
||
236 | y: Math.floor(parseInt(e) / 1048576) |
||
237 | }); |
||
238 | }); |
||
239 | } |
||
240 | }); |
||
241 | |||
242 | var result = []; |
||
243 | while (result.length < plotPoints - data.length)> |
||
244 | < plotPoints - data.length) result.push({> |
||
245 | < plotPoints - data.length) x: time + ++j * updateInterval,> |
||
246 | < plotPoints - data.length) y: 0> |
||
247 | < plotPoints - data.length) });> |
||
248 | |||
249 | < plotPoints - data.length) return result.concat(data);> |
||
250 | < plotPoints - data.length) }())> |
||
251 | < plotPoints - data.length) }]> |
||
252 | < plotPoints - data.length) });> |
||
253 | < plotPoints - data.length) });> |
||
254 | < plotPoints - data.length) script>> |
||
255 | < plotPoints - data.length)</div>> |