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