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