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