cleanup, data of the monitor page refreshed automaticly (not using page refresh)
authorJean-Philippe Orsini <jeanfi@gmail.com>
Tue, 13 Sep 2011 10:26:09 +0000 (10:26 +0000)
committerJean-Philippe Orsini <jeanfi@gmail.com>
Tue, 13 Sep 2011 10:26:09 +0000 (10:26 +0000)
www/monitor.html
www/psensor.js
www/style.css

index 04bfdc8..1764194 100644 (file)
     <script type="text/javascript" src="jquery.js"></script>
     <script type="text/javascript" src="psensor.js"></script>
     <script>  
-      $(document).ready(function() {          
-      
-          update_summary_sensors();
+       $(document).ready(function() {          
+               update_summary_sensors();
+               update_summary_sysinfo();      
+
+               $(document).ready(function() {
+                       setInterval(function() {
+                               update_summary_sensors();
+                               update_summary_sysinfo();
+                       }, 1000);
+               });
+         
 
-          $.getJSON("/api/1.0/sysinfo", function(data) {
-              var load = Math.round(data["load"] * 100);
-              var load_1 = Math.round(data["load_1"]*1000)/1000;
-              var load_5 = Math.round(data["load_5"]*1000)/1000;
-              var load_15 = Math.round(data["load_15"]*1000)/1000;
-              var uptime = data["uptime"];
-              var uptime_s = uptime % 60;
-              var uptime_mn = Math.floor((uptime / 60) % 60);
-              var uptime_h = Math.floor((uptime / (60*60)) % 24);
-              var uptime_d = Math.floor(uptime / (60*60*24));
-
-              $("#cpu").append("<tr><td>"+load+"%</td><td>"+load_1+"</td><td>"+load_5+"</td><td>"+load_15+"</td></tr>");
-
-              $("#uptime").append(uptime_d+"d "+uptime_h+"h "+uptime_mn+"mn");
-
-              var ram = data["ram"];
-              var swap = data["swap"];
-              var mu = data["mem_unit"];
-
-             var ramtotal = ram["total"]*mu;
-              var ramfree = ram["free"]*mu;
-              var ramused = (ram["total"] - ram["free"])*mu;
-              var ramshared = ram["shared"]*mu;
-              var rambuffer = ram["buffer"]*mu;
-              
-  
-              $("#memory").append("<td>"+format_mem_size(ramtotal)+"</td>"
-                                  +"<td>"+format_mem_size(ramused)+"</td>"
-                                  +"<td>"+format_mem_size(ramfree)+"</td>"
-                                  +"<td>"+format_mem_size(ramshared)+"</td>"
-                                  +"<td>"+format_mem_size(rambuffer)+"</td>");
-
-              $("#swap").append("<td>"+format_mem_size(swap["total"]*mu)+"</td>"
-                                +"<td>"+format_mem_size(swap["total"]*mu-swap["free"]*mu)+"</td>"
-                                +"<td>"+format_mem_size(swap["free"]*mu)+"</td>");
-
-              var netdata = data["net"];
-              $.each(netdata, function(i, item) {
-                  $("#net").append("<tr><td>"+item["name"]+"</td>"
-                                   +"<td>"+format_mem_size(item["bytes_in"])+"</td>"
-                                   +"<td>"+format_mem_size(item["bytes_out"])+"</td></tr>");
-              });
-          });
       });
     </script>
   </head>
   <body>
-    <div class='page'>
-      <div class='page-header'>
-       <h1>Psensor Server Monitoring</h1>
-      </div>
-
-      <div class='page-content'>
-
-       <p id='uptime'><strong>Uptime</strong>: </p>
-
-       <h2>CPU</h2>
-
-       <div>
-         <table id='cpu' border='0' cellspacing='0' cellpadding='0'>
-           <thead>
-             <tr>
-               <th>Current usage</th>
-               <th>Load 1mn</th>
-               <th>Load 5mn</th>
-               <th>Load 15mn</th>
-             </tr>
-           </thead>
-           <tbody></tbody>
-         </table>
-       </div>
-       
-       <h2>Memory</h2>
-
-       <div>
-         <table border='0' cellspacing='0' cellpadding='0'>
-           <thead>
-             <tr>
-               <th></th>
-               <th>Total</th>
-               <th>Used</th>
-               <th>Free</th>
-               <th>Shared</th>
-               <th>Buffer</th>
-             </tr>
-           </thead>
-             <tbody>
-               <tr id='memory'><td>Memory</td></tr>
-               <tr id='swap'><td>Swap</td></tr>
-             </tbody>
-           </table>
-       </div>
-
-       <h2>Network</h2>
-
-       <div>
-         <table id='net' border='0' cellspacing='0' cellpadding='0'>
-           <thead>
-             <tr>
-               <th>Interface</th>
-               <th>Bytes In</th>
-               <th>Bytes Out</th>
-             </tr>
-           </thead>
-           <tbody>
-           </tbody>
-         </table>
-       </div>
-
-       <h2>Sensors</h2>
-
-       <div>
-         <table id='sensors' border='0' cellspacing='0' cellpadding='0'>
-           <thead>
-             <tr>
-               <th>Name</th>
-               <th>Value</th>
-               <th>Min</th>
-               <th>Max</th>
-               <th>Type</th>
-             </tr>
-           </thead>
-           <tbody></tbody>
-         </table>
-       </div>
-      </div>
-      </div>
+    <h1>Psensor Server Monitoring</h1>
+
+    <p><em>Uptime</em>: <span id='uptime'></span></p>
+
+    <h2>CPU</h2>
+    
+    <table id='cpu' border='0' cellspacing='0' cellpadding='0'>
+      <thead>
+       <tr>
+         <th>Current usage</th>
+         <th>Load 1mn</th>
+         <th>Load 5mn</th>
+         <th>Load 15mn</th>
+       </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+    
+    <h2>Memory</h2>
+    
+    <table border='0' cellspacing='0' cellpadding='0'>
+      <thead>
+       <tr>
+         <th></th>
+         <th>Total</th>
+         <th>Used</th>
+         <th>Free</th>
+         <th>Shared</th>
+         <th>Buffer</th>
+       </tr>
+      </thead>
+      <tbody>
+       <tr id='memory'></tr>
+       <tr id='swap'></tr>
+      </tbody>
+    </table>
+
+    <h2>Network</h2>
+    
+    <table id='net' border='0' cellspacing='0' cellpadding='0'>
+      <thead>
+       <tr>
+         <th>Interface</th>
+         <th>Bytes In</th>
+         <th>Bytes Out</th>
+       </tr>
+      </thead>
+      <tbody>
+      </tbody>
+    </table>
+
+    <h2>Sensors</h2>
+    
+    <table id='sensors' border='0' cellspacing='0' cellpadding='0'>
+      <thead>
+       <tr>
+         <th>Name</th>
+         <th>Value</th>
+         <th>Min</th>
+         <th>Max</th>
+         <th>Type</th>
+       </tr>
+      </thead>
+      <tbody id ="sensors"></tbody>
+    </table>
+
+    <div id="footer">
+      Generated by <a href='http://wpitchoune.net/psensor'>psensor-server</a>
     </div>
-
-    <div id="footer">Generated by <a href='http://wpitchoune.net/psensor'>psensor-server</a></div>
   </body>
 </html>
index 862aa1d..c59a268 100644 (file)
@@ -41,7 +41,7 @@ function format_mem_size(s) {
         return o+"o";
 
     return "0";
-};
+}
 
 function type_to_str(stype) {
     var stype_str;
@@ -63,7 +63,7 @@ function type_to_str(stype) {
        stype_str += " Fan";
 
     return stype_str;
-};
+}
 
 function type_to_unit(stype) {
     if (stype & 0x0001)
@@ -78,8 +78,7 @@ function value_to_str(value, type) {
     return value+type_to_unit(type);
 }
 
-function get_url_params()
-{
+function get_url_params() {
     var vars, hashes, i;
 
     vars = [];
@@ -172,7 +171,11 @@ function update_summary_sensors() {
     var name, value_str, min_str, max_str, type, type_str, url;
 
     $.getJSON("/api/1.0/sensors", function(data) {
+       $("#sensors tbody").html("");
+
         $.each(data, function(i, item) {
+           
+
             name = item["name"];
             type = item["type"];
             value_str = value_to_str(item["last_measure"]["value"], type);
@@ -181,7 +184,7 @@ function update_summary_sensors() {
            type_str = type_to_str(type);
            url = "details.html?id="+escape("/api/1.0/sensors/"+item["id"]);
 
-            $("#sensors").append("<tr>"
+            $("#sensors tbody").append("<tr>"
                                 +"<td><a href='"+url+"'>"+name+"</a></td>"
                                 +"<td>"+value_str+"</td>"
                                 +"<td>"+min_str+"</td>"
@@ -190,4 +193,61 @@ function update_summary_sensors() {
                                 +"</tr>");                 
         });          
     });
+}
+
+function update_summary_sysinfo() {
+    $.getJSON("/api/1.0/sysinfo", function(data) {
+       $("#uptime").html("");
+       $("#cpu tbody").html("");
+       $("#memory").html("");
+       $("#swap").html("");
+       $("#net tbody").html("");
+
+        var load = Math.round(data["load"] * 100);
+        var load_1 = Math.round(data["load_1"]*1000)/1000;
+        var load_5 = Math.round(data["load_5"]*1000)/1000;
+        var load_15 = Math.round(data["load_15"]*1000)/1000;
+        var uptime = data["uptime"];
+        var uptime_s = uptime % 60;
+        var uptime_mn = Math.floor((uptime / 60) % 60);
+        var uptime_h = Math.floor((uptime / (60*60)) % 24);
+        var uptime_d = Math.floor(uptime / (60*60*24));
+       
+        $("#cpu").append("<tr><td>"+load+"%</td><td>"
+                        +load_1+"</td><td>"
+                        +load_5+"</td><td>"
+                        +load_15+"</td></tr>");
+       
+        $("#uptime").append(uptime_d+"d "+uptime_h+"h "+uptime_mn+"mn");
+       
+        var ram = data["ram"];
+        var swap = data["swap"];
+        var mu = data["mem_unit"];
+       
+       var ramtotal = ram["total"]*mu;
+        var ramfree = ram["free"]*mu;
+        var ramused = (ram["total"] - ram["free"])*mu;
+        var ramshared = ram["shared"]*mu;
+        var rambuffer = ram["buffer"]*mu;
+        
+       
+        $("#memory").append("<td>Memory</td>"
+                           +"<td>"+format_mem_size(ramtotal)+"</td>"
+                           +"<td>"+format_mem_size(ramused)+"</td>"
+                           +"<td>"+format_mem_size(ramfree)+"</td>"
+                           +"<td>"+format_mem_size(ramshared)+"</td>"
+                           +"<td>"+format_mem_size(rambuffer)+"</td>");
+       
+        $("#swap").append("<td>Swap</td>"
+                         +"<td>"+format_mem_size(swap["total"]*mu)+"</td>"
+                         +"<td>"+format_mem_size(swap["total"]*mu-swap["free"]*mu)+"</td>"
+                         +"<td>"+format_mem_size(swap["free"]*mu)+"</td>");
+       
+        var netdata = data["net"];
+        $.each(netdata, function(i, item) {
+            $("#net").append("<tr><td>"+item["name"]+"</td>"
+                             +"<td>"+format_mem_size(item["bytes_in"])+"</td>"
+                             +"<td>"+format_mem_size(item["bytes_out"])+"</td></tr>");
+        });
+    });
 }
\ No newline at end of file
index d2075ac..885996c 100644 (file)
@@ -38,21 +38,18 @@ p {
 
 table {
        text-align: left;
-       width: 100%;
        padding-left: 8px;
        padding-right: 8px;
 }
 
 thead {
-    background-color: #aea79f;
-    color: #ffffff;
-    font-weight: bold;
+    background-color: #000;
+    color: #fff;
     padding-top: 4px;
     padding-bottom: 4px;
 }
 
 tbody {
-    color: #333333;
     padding-top: 4px;
     padding-bottom: 4px;
 }
@@ -61,6 +58,11 @@ th, td {
     padding: 4px 4px 4px 4px;
 }
 
+th {
+    font-style: normal;
+    font-weight: normal;
+}
+
 .chart {
     color: #000;
 }