www/monitor.html

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