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