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