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