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

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