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