modules/admin-full/luasrc/view/admin_status/load.htm

   1 <%#
   2 LuCI - Lua Configuration Interface
   3 Copyright 2010 Jo-Philipp Wich <xm@subsignal.org>
   4
   5 Licensed under the Apache License, Version 2.0 (the "License");
   6 you may not use this file except in compliance with the License.
   7 You may obtain a copy of the License at
   8
   9         http://www.apache.org/licenses/LICENSE-2.0
  10
  11 -%>
  12
  13 <%+header%>
  14
  15 <script type="text/javascript" src="<%=resource%>/cbi.js"></script>
  16 <script type="text/javascript">//<![CDATA[
  17         var bwxhr = new XHR();
  18
  19         var G;
  20         var TIME = 0;
  21         var L01   = 1;
  22         var L05   = 2;
  23         var L15  = 3;
  24
  25         var width  = 760;
  26         var height = 300;
  27         var step   = 5;
  28
  29         var data_wanted = Math.floor(width / step);
  30         var data_fill   = 0;
  31         var data_stamp  = 0;
  32
  33         var data_01  = [ ];
  34         var data_05  = [ ];
  35         var data_15 = [ ];
  36
  37         var line_01;
  38         var line_05;
  39         var line_15;
  40
  41         var label_25;
  42         var label_050;
  43         var label_75;
  44
  45         var label_01_cur;
  46         var label_01_avg;
  47         var label_01_peak;
  48
  49         var label_05_cur;
  50         var label_05_avg;
  51         var label_05_peak;
  52
  53         var label_15_cur;
  54         var label_15_avg;
  55         var label_15_peak;
  56
  57         var label_scale;
  58
  59
  60         /* wait for SVG */
  61         window.setTimeout(
  62                 function() {
  63                         var svg = document.getElementById('bwsvg');
  64
  65                         try {
  66                                 G = svg.getSVGDocument
  67                                         ? svg.getSVGDocument() : svg.contentDocument;
  68                         }
  69                         catch(e) {
  70                                 G = document.embeds['bwsvg'].getSVGDocument();
  71                         }
  72
  73                         if (!G)
  74                         {
  75                                 window.setTimeout(arguments.callee, 1000);
  76                         }
  77                         else
  78                         {
  79                                 /* find sizes */
  80                                 width       = svg.offsetWidth  - 2;
  81                                 height      = svg.offsetHeight - 2;
  82                                 data_wanted = Math.ceil(width / step);
  83
  84                                 /* prefill datasets */
  85                                 for (var i = 0; i < data_wanted; i++)
  86                                 {
  87                                         data_01[i] = 0;
  88                                         data_05[i] = 0;
  89                                         data_15[i] = 0;
  90                                 }
  91
  92                                 /* find svg elements */
  93                                 line_01 = G.getElementById('load01');
  94                                 line_05 = G.getElementById('load05');
  95                                 line_15 = G.getElementById('load15');
  96
  97                                 label_25 = G.getElementById('label_25');
  98                                 label_50 = G.getElementById('label_50');
  99                                 label_75 = G.getElementById('label_75');
 100
 101                                 label_01_cur  = document.getElementById('lb_load01_cur');
 102                                 label_01_avg  = document.getElementById('lb_load01_avg');
 103                                 label_01_peak = document.getElementById('lb_load01_peak');
 104
 105                                 label_05_cur  = document.getElementById('lb_load05_cur');
 106                                 label_05_avg  = document.getElementById('lb_load05_avg');
 107                                 label_05_peak = document.getElementById('lb_load05_peak');
 108
 109                                 label_15_cur  = document.getElementById('lb_load15_cur');
 110                                 label_15_avg  = document.getElementById('lb_load15_avg');
 111                                 label_15_peak = document.getElementById('lb_load15_peak');
 112
 113                                 label_scale   = document.getElementById('scale');
 114
 115
 116                                 /* plot horizontal time interval lines */
 117                                 for (var i = width % (step * 60); i < width; i += step * 60)
 118                                 {
 119                                         var line = G.createElementNS('http://www.w3.org/2000/svg', 'line');
 120                                                 line.setAttribute('x1', i);
 121                                                 line.setAttribute('y1', 0);
 122                                                 line.setAttribute('x2', i);
 123                                                 line.setAttribute('y2', '100%');
 124                                                 line.setAttribute('style', 'stroke:black;stroke-width:0.1');
 125
 126                                         var text = G.createElementNS('http://www.w3.org/2000/svg', 'text');
 127                                                 text.setAttribute('x', i + 5);
 128                                                 text.setAttribute('y', 15);
 129                                                 text.setAttribute('style', 'fill:#999999; font-size:9pt');
 130                                                 text.appendChild(G.createTextNode(Math.round((width - i) / step / 60) + 'm'));
 131
 132                                         label_25.parentNode.appendChild(line);
 133                                         label_25.parentNode.appendChild(text);
 134                                 }
 135
 136                                 label_scale.innerHTML = String.format('<%:(%d minute window, %d second interval)%>', data_wanted / 60, 3);
 137
 138                                 /* render datasets, start update interval */
 139                                 XHR.poll(3, '<%=build_url("admin/status/realtime/load_status")%>', null,
 140                                         function(x, data)
 141                                         {
 142                                                 var data_max   = 0;
 143                                                 var data_scale = 0;
 144
 145                                                 var data_01_avg = 0;
 146                                                 var data_05_avg = 0;
 147                                                 var data_15_avg = 0;
 148
 149                                                 var data_01_peak = 0;
 150                                                 var data_05_peak = 0;
 151                                                 var data_15_peak = 0;
 152
 153                                                 for (var i = data_stamp ? 0 : 1; i < data.length; i++)
 154                                                 {
 155                                                         /* skip overlapping entries */
 156                                                         if (data[i][TIME] <= data_stamp)
 157                                                                 continue;
 158
 159                                                         data_01.push(data[i][L01]);
 160                                                         data_05.push(data[i][L05]);
 161                                                         data_15.push(data[i][L15]);
 162                                                 }
 163
 164                                                 /* cut off outdated entries */
 165                                                 data_01 = data_01.slice(data_01.length - data_wanted, data_01.length);
 166                                                 data_05 = data_05.slice(data_05.length - data_wanted, data_05.length);
 167                                                 data_15 = data_15.slice(data_15.length - data_wanted, data_15.length);
 168
 169                                                 /* find peak */
 170                                                 for (var i = 0; i < data_01.length; i++)
 171                                                 {
 172                                                         data_max = Math.max(data_max, data_01[i]);
 173                                                         data_max = Math.max(data_max, data_05[i]);
 174                                                         data_max = Math.max(data_max, data_15[i]);
 175
 176                                                         data_01_peak = Math.max(data_01_peak, data_01[i]);
 177                                                         data_05_peak = Math.max(data_05_peak, data_05[i]);
 178                                                         data_15_peak = Math.max(data_15_peak, data_15[i]);
 179
 180                                                         if (i > 0)
 181                                                         {
 182                                                                 data_01_avg = (data_01_avg + data_01[i]) / 2;
 183                                                                 data_05_avg = (data_05_avg + data_05[i]) / 2;
 184                                                                 data_15_avg = (data_15_avg + data_15[i]) / 2;
 185                                                         }
 186                                                         else
 187                                                         {
 188                                                                 data_01_avg = data_01[i];
 189                                                                 data_05_avg = data_05[i];
 190                                                                 data_15_avg = data_15[i];
 191                                                         }
 192                                                 }
 193
 194                                                 /* remember current timestamp, calculate horizontal scale */
 195                                                 data_stamp = data[data.length-1][TIME];
 196                                                 data_scale = height / (data_max * 1.1);
 197
 198
 199                                                 /* plot data */
 200                                                 var pt_01 = '0,' + height;
 201                                                 var pt_05 = '0,' + height;
 202                                                 var pt_15 = '0,' + height;
 203
 204                                                 var y_01 = 0;
 205                                                 var y_05 = 0;
 206                                                 var y_15 = 0;
 207
 208                                                 for (var i = 0; i < data_01.length; i++)
 209                                                 {
 210                                                         var x = i * step;
 211
 212                                                         y_01 = height - Math.floor(data_01[i] * data_scale);
 213                                                         y_05 = height - Math.floor(data_05[i] * data_scale);
 214                                                         y_15 = height - Math.floor(data_15[i] * data_scale);
 215
 216                                                         pt_01 += ' ' + x + ',' + y_01;
 217                                                         pt_05 += ' ' + x + ',' + y_05;
 218                                                         pt_15 += ' ' + x + ',' + y_15;
 219                                                 }
 220
 221                                                 pt_01 += ' ' + width + ',' + y_01 + ' ' + width + ',' + height;
 222                                                 pt_05 += ' ' + width + ',' + y_05 + ' ' + width + ',' + height;
 223                                                 pt_15 += ' ' + width + ',' + y_15 + ' ' + width + ',' + height;
 224
 225
 226                                                 line_01.setAttribute('points', pt_01);
 227                                                 line_05.setAttribute('points', pt_05);
 228                                                 line_15.setAttribute('points', pt_15);
 229
 230                                                 label_25.firstChild.data = (1.1 * 0.25 * data_max / 100).toFixed(2);
 231                                                 label_50.firstChild.data = (1.1 * 0.50 * data_max / 100).toFixed(2);
 232                                                 label_75.firstChild.data = (1.1 * 0.75 * data_max / 100).toFixed(2);
 233
 234                                                 label_01_cur.innerHTML = (data_01[data_01.length-1] / 100).toFixed(2);
 235                                                 label_05_cur.innerHTML = (data_05[data_05.length-1] / 100).toFixed(2);
 236                                                 label_15_cur.innerHTML = (data_15[data_15.length-1] / 100).toFixed(2);
 237
 238                                                 label_01_avg.innerHTML = (data_01_avg / 100).toFixed(2);
 239                                                 label_05_avg.innerHTML = (data_05_avg / 100).toFixed(2);
 240                                                 label_15_avg.innerHTML = (data_15_avg / 100).toFixed(2);
 241
 242                                                 label_01_peak.innerHTML = (data_01_peak / 100).toFixed(2);
 243                                                 label_05_peak.innerHTML = (data_05_peak / 100).toFixed(2);
 244                                                 label_15_peak.innerHTML = (data_15_peak / 100).toFixed(2);
 245                                         }
 246                                 );
 247                         }
 248                 }, 1000
 249         );
 250 //]]></script>
 251
 252 <h2><a id="content" name="content"><%:Realtime Load%></a></h2>
 253
 254 <embed id="bwsvg" style="width:100%; height:300px; border:1px solid #000000; background-color:#FFFFFF" src="<%=resource%>/load.svg" />
 255 <div style="text-align:right"><small id="scale">-</small></div>
 256 <br />
 257
 258 <table style="width:100%; table-layout:fixed" cellspacing="5">
 259         <tr>
 260                 <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff0000; white-space:nowrap"><%:1 Minute Load:%></strong></td>
 261                 <td id="lb_load01_cur">0</td>
 262
 263                 <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
 264                 <td id="lb_load01_avg">0</td>
 265
 266                 <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
 267                 <td id="lb_load01_peak">0</td>
 268         </tr>
 269         <tr>
 270                 <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ff6600; white-space:nowrap"><%:5 Minute Load:%></strong></td>
 271                 <td id="lb_load05_cur">0</td>
 272
 273                 <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
 274                 <td id="lb_load05_avg">0</td>
 275
 276                 <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
 277                 <td id="lb_load05_peak">0</td>
 278         </tr>
 279         <tr>
 280                 <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid #ffaa00; white-space:nowrap"><%:15 Minute Load:%></strong></td>
 281                 <td id="lb_load15_cur">0</td>
 282
 283                 <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
 284                 <td id="lb_load15_avg">0</td>
 285
 286                 <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
 287                 <td id="lb_load15_peak">0</td>
 288         </tr>
 289 </table>
 290
 291 <%+footer%>