luci-mod-status: use progressbar widgets on main status page

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

diff --git a/modules/luci-mod-status/luasrc/view/admin_status/index.htm b/modules/luci-mod-status/luasrc/view/admin_status/index.htm
index 54e35b82a06a97d57a32175a4790cd1c5c25a8a9..b98ba76f899f620d971d208ef24014d4d4f22b4d 100644 (file)
--- a/modules/luci-mod-status/luasrc/view/admin_status/index.htm
+++ b/modules/luci-mod-status/luasrc/view/admin_status/index.htm
@@ -132,21 +132,17 @@
 <%+header%>
 
 <script type="text/javascript">//<![CDATA[
-       function progressbar(v, m)
+       function progressbar(q, v, m)
        {
-               var vn = parseInt(v) || 0;
-               var mn = parseInt(m) || 100;
-               var pc = Math.floor((100 / mn) * vn);
-
-               return String.format(
-                       '<div style="width:100%%; max-width:200px; position:relative; border:1px solid #999999">' +
-                               '<div style="background-color:#CCCCCC; width:%d%%; height:15px">' +
-                                       '<div style="position:absolute; left:0; top:0; text-align:center; width:100%%; color:#000000">' +
-                                               '<small>%s / %s (%d%%)</small>' +
-                                       '</div>' +
-                               '</div>' +
-                       '</div>', pc, v, m, pc
-               );
+               var pg = document.querySelector(q),
+                   vn = parseInt(v) || 0,
+                   mn = parseInt(m) || 100,
+                   pc = Math.floor((100 / mn) * vn);
+
+               if (pg) {
+                       pg.firstElementChild.style.width = pc + '%';
+                       pg.setAttribute('title', '%s / %s (%d%%)'.format(v, m, pc));
+               }
        }
 
        function labelList(items, offset) {
@@ -350,38 +346,28 @@
                                        info.loadavg[2] / 65535.0
                                );
 
-                       if (e = document.getElementById('memtotal'))
-                               e.innerHTML = progressbar(
-                                       ((info.memory.free + info.memory.buffered) / 1024) + " <%:kB%>",
-                                       (info.memory.total / 1024) + " <%:kB%>"
-                               );
+                       progressbar('#memtotal',
+                               ((info.memory.free + info.memory.buffered) / 1024) + " <%:kB%>",
+                               (info.memory.total / 1024) + " <%:kB%>");
 
-                       if (e = document.getElementById('memfree'))
-                               e.innerHTML = progressbar(
-                                       (info.memory.free / 1024) + " <%:kB%>",
-                                       (info.memory.total / 1024) + " <%:kB%>"
-                               );
+                       progressbar('#memfree',
+                               (info.memory.free / 1024) + " <%:kB%>",
+                               (info.memory.total / 1024) + " <%:kB%>");
 
-                       if (e = document.getElementById('membuff'))
-                               e.innerHTML = progressbar(
-                                       (info.memory.buffered / 1024) + " <%:kB%>",
-                                       (info.memory.total / 1024) + " <%:kB%>"
-                               );
+                       progressbar('#membuff',
+                               (info.memory.buffered / 1024) + " <%:kB%>",
+                               (info.memory.total / 1024) + " <%:kB%>");
 
-                       if (e = document.getElementById('swaptotal'))
-                               e.innerHTML = progressbar(
-                                       (info.swap.free / 1024) + " <%:kB%>",
-                                       (info.swap.total / 1024) + " <%:kB%>"
-                               );
+                       progressbar('#swaptotal',
+                               (info.swap.free / 1024) + " <%:kB%>",
+                               (info.swap.total / 1024) + " <%:kB%>");
 
-                       if (e = document.getElementById('swapfree'))
-                               e.innerHTML = progressbar(
-                                       (info.swap.free / 1024) + " <%:kB%>",
-                                       (info.swap.total / 1024) + " <%:kB%>"
-                               );
+                       progressbar('#swapfree',
+                               (info.swap.free / 1024) + " <%:kB%>",
+                               (info.swap.total / 1024) + " <%:kB%>");
 
-                       if (e = document.getElementById('conns'))
-                               e.innerHTML = progressbar(info.conncount, info.connmax);
+                       progressbar('#conns',
+                               info.conncount, info.connmax);
 
                }
        );
@@ -411,9 +397,9 @@
        <h3><%:Memory%></h3>
 
        <div class="table" width="100%">
-               <div class="tr"><div class="td left" width="33%"><%:Total Available%></div><div class="td left" id="memtotal">-</div></div>
-               <div class="tr"><div class="td left" width="33%"><%:Free%></div><div class="td left" id="memfree">-</div></div>
-               <div class="tr"><div class="td left" width="33%"><%:Buffered%></div><div class="td left" id="membuff">-</div></div>
+               <div class="tr"><div class="td left" width="33%"><%:Total Available%></div><div class="td left"><div id="memtotal" class="cbi-progressbar" title="-"><div></div></div></div></div>
+               <div class="tr"><div class="td left" width="33%"><%:Free%></div><div class="td left"><div id="memfree" class="cbi-progressbar" title="-"><div></div></div></div></div>
+               <div class="tr"><div class="td left" width="33%"><%:Buffered%></div><div class="td left"><div id="membuff" class="cbi-progressbar" title="-"><div></div></div></div></div>
        </div>
 </div>
 
@@ -422,8 +408,8 @@
        <h3><%:Swap%></h3>
 
        <div class="table" width="100%">
-               <div class="tr"><div class="td left" width="33%"><%:Total Available%></div><div class="td left" id="swaptotal">-</div></div>
-               <div class="tr"><div class="td left" width="33%"><%:Free%></div><div class="td left" id="swapfree">-</div></div>
+               <div class="tr"><div class="td left" width="33%"><%:Total Available%></div><div class="td left"><div id="swaptotal" class="cbi-progressbar" title="-"><div></div></div></div></div>
+               <div class="tr"><div class="td left" width="33%"><%:Free%></div><div class="td left"><div id="swapfree" class="cbi-progressbar" title="-"><div></div></div></div></div>
        </div>
 </div>
 <% end %>
@@ -436,7 +422,7 @@
        </div>
 
        <div class="table" width="100%">
-               <div class="tr"><div class="td left" width="33%"><%:Active Connections%></div><div class="td left" id="conns">-</div></div>
+               <div class="tr"><div class="td left" width="33%"><%:Active Connections%></div><div class="td left"><div id="conns" class="cbi-progressbar" title="-"><div></div></div></div></div>
        </div>
 </div>