www/monitor.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>Psensor Server Monitoring</title>
   6
   7     <link type="text/css" href="style.css" rel="stylesheet" />
   8     <script type="text/javascript" src="jquery.js"></script>
   9
  10     <script>
  11       function format_mem_size(s) {
  12           var mo_bytes = 1024 * 1024;
  13           var go_bytes = 1024 * mo_bytes;
  14
  15           var o = s % 1024;
  16           var k = Math.round((s / 1024) % 1024);
  17           var m = Math.round((s / (1024*1024)) % 1024);
  18           var g = Math.round(s / (1024*1024*1024));
  19
  20           if (g >= 1)
  21                return g+"Go ";
  22
  23           if (m >= 1)
  24                return m+"Mo";
  25
  26           if (k >= 1)
  27                return k+"Ko";
  28
  29           if (o > 0)
  30                return o+"o";
  31
  32           return "0";
  33       };
  34
  35       $(document).ready(function() {
  36           $.getJSON("/api/1.0/sensors", function(data) {
  37               $.each(data, function(i, item) {
  38                   var sname = item["name"];
  39                   var svalue = item["last_measure"]["value"];
  40                   var smin = item["min"];
  41                   var smax = item["max"];
  42                   var stype = item["type"];
  43                   var stype_str = "N/A";
  44                   var unit = "";
  45
  46                   if (stype & 0x0100) {
  47                       stype_str = "Sensor";
  48                   } else if (stype & 0x0200) {
  49                       stype_str = "NVidia";
  50                   } else if (stype & 0x0400) {
  51                       stype_str = "HDD";
  52                   } else if (stype & 0x0800) {
  53                       stype_str = "Fan";
  54                   }
  55
  56                   if (stype & 0x0001) {
  57                       stype_str += " Temperature";
  58                       unit = " C";
  59                   } else if (stype & 0x0002) {
  60                       unit = " RPM";
  61                   }
  62
  63                   $("#sensors").append("<tr><td>"+sname+"</td><td>"+svalue+unit+"</td><td>"+smin+unit+"</td><td>"+smax+unit+"</td><td>"+stype_str+"</td></tr>");
  64               });
  65           });
  66
  67           $.getJSON("/api/1.0/sysinfo", function(data) {
  68               var load = Math.round(data["load"] * 100);
  69               var load_1 = Math.round(data["load_1"]*1000)/1000;
  70               var load_5 = Math.round(data["load_5"]*1000)/1000;
  71               var load_15 = Math.round(data["load_15"]*1000)/1000;
  72               var uptime = data["uptime"];
  73               var uptime_s = uptime % 60;
  74               var uptime_mn = Math.floor((uptime / 60) % 60);
  75               var uptime_h = Math.floor((uptime / (60*60)) % 24);
  76               var uptime_d = Math.floor(uptime / (60*60*24));
  77
  78               $("#cpu").append("<tr><td>"+load+"%</td><td>"+load_1+"</td><td>"+load_5+"</td><td>"+load_15+"</td></tr>");
  79
  80               $("#uptime").append(uptime_d+"d "+uptime_h+"h "+uptime_mn+"mn");
  81
  82               var ram = data["ram"];
  83               var swap = data["swap"];
  84               var mu = data["mem_unit"];
  85
  86               var ramtotal = ram["total"]*mu;
  87               var ramfree = ram["free"]*mu;
  88               var ramused = (ram["total"] - ram["free"])*mu;
  89               var ramshared = ram["shared"]*mu;
  90               var rambuffer = ram["buffer"]*mu;
  91
  92
  93               $("#memory").append("<td>"+format_mem_size(ramtotal)+"</td>"
  94                                   +"<td>"+format_mem_size(ramused)+"</td>"
  95                                   +"<td>"+format_mem_size(ramfree)+"</td>"
  96                                   +"<td>"+format_mem_size(ramshared)+"</td>"
  97                                   +"<td>"+format_mem_size(rambuffer)+"</td>");
  98
  99               $("#swap").append("<td>"+format_mem_size(swap["total"]*mu)+"</td>"
 100                                 +"<td>"+format_mem_size(swap["total"]*mu-swap["free"]*mu)+"</td>"
 101                                 +"<td>"+format_mem_size(swap["free"]*mu)+"</td>");
 102
 103               var netdata = data["net"];
 104               $.each(netdata, function(i, item) {
 105                   $("#net").append("<tr><td>"+item["name"]+"</td>"
 106                                    +"<td>"+format_mem_size(item["bytes_in"])+"</td>"
 107                                    +"<td>"+format_mem_size(item["bytes_out"])+"</td></tr>");
 108               });
 109           });
 110       });
 111     </script>
 112   </head>
 113   <body>
 114
 115     <div class='page'>
 116       <div class='page-header'>
 117         <h1>Psensor Server Monitoring</h1>
 118       </div>
 119
 120       <div class='page-content'>
 121         <p id='uptime'><strong>Uptime</strong>: </p>
 122
 123         <h2>CPU</h2>
 124
 125         <table id='cpu' border='0' cellspacing='0' cellpadding='0'>
 126           <thead>
 127             <tr>
 128               <th>Current usage</th>
 129               <th>Load 1mn</th>
 130               <th>Load 5mn</th>
 131               <th>Load 15mn</th>
 132           </tr>
 133           </thead>
 134           <tbody></tbody>
 135         </table>
 136
 137         <h2>Memory</h2>
 138
 139         <table border='0' cellspacing='0' cellpadding='0'>
 140           <thead>
 141             <tr>
 142               <th></th>
 143               <th>Total</th>
 144               <th>Used</th>
 145               <th>Free</th>
 146               <th>Shared</th>
 147               <th>Buffer</th>
 148             </tr>
 149           </thead>
 150           <tbody>
 151             <tr id='memory'><td>Memory</td></tr>
 152             <tr id='swap'><td>Swap</td></tr>
 153           </tbody>
 154         </table>
 155
 156         <h2>Network</h2>
 157
 158         <table id='net' border='0' cellspacing='0' cellpadding='0'>
 159           <thead>
 160             <tr>
 161               <th>Interface</th>
 162               <th>Bytes In</th>
 163               <th>Bytes Out</th>
 164             </tr>
 165           </thead>
 166           <tbody>
 167           </tbody>
 168         </table>
 169
 170         <h2>Sensors</h2>
 171
 172         <table id='sensors' border='0' cellspacing='0' cellpadding='0'>
 173           <thead><tr><th>Name</th><th>Value</th><th>Min</th><th>Max</th><th>Type</th></thead>
 174           <tbody></tbody>
 175         </table>
 176       </div>
 177
 178     </div>
 179       <div class='page-footer'>
 180         <a href='http://wpitchoune.net/psensor'>Psensor Server</a> - (c)2011 jeanfi@gmail.com
 181       </div>
 182
 183   </body>
 184 </html>