]> git.ipfire.org Git - thirdparty/pdns.git/commitdiff
cleanup dnsdist javascript & html, plus make it look a lot prettier
authorbert hubert <bert.hubert@powerdns.com>
Sat, 5 Dec 2015 15:23:30 +0000 (16:23 +0100)
committerbert hubert <bert.hubert@powerdns.com>
Sat, 5 Dec 2015 15:23:30 +0000 (16:23 +0100)
pdns/dnsdistdist/html/index.html
pdns/dnsdistdist/html/local.js

index 960adc495e2dafa4e4352f5bbcec7287a4532f15..9349f6ca3aae69cad356d4471c938b7b37df85f5 100644 (file)
 <!DOCTYPE html>
 <head>                                                                  
-<meta charset="utf-8" />
-<script src="js/jquery-1.8.3.min.js"></script>        
-<script src="js/d3.v3.js"></script>        
-<script src="js/rickshaw.min.js"></script>        
-<script src="js/purl.js"></script>
-<script src="js/moment.min.js"></script>
-<link type="text/css" rel="stylesheet" href="graph.css">
-<link type="text/css" rel="stylesheet" href="detail.css">
-<link type="text/css" rel="stylesheet" href="legend.css">
-<link type="text/css" rel="stylesheet" href="lines.css">
+  <meta charset="utf-8" />
+  <script src="js/jquery-1.8.3.min.js"></script>        
+  <script src="js/d3.v3.js"></script>        
+  <script src="js/rickshaw.min.js"></script>        
+  <script src="js/purl.js"></script>
+  <script src="js/moment.min.js"></script>
+  <link type="text/css" rel="stylesheet" href="graph.css">
+  <link type="text/css" rel="stylesheet" href="detail.css">
+  <link type="text/css" rel="stylesheet" href="legend.css">
+  <link type="text/css" rel="stylesheet" href="lines.css">
 
-<script src="local.js"></script>
-<body>                                                                  
-<a href="https://github.com/ahuPowerDNS/pdns"><img style="position: absolute; top: 0;
-right: 0; border: 0;"
-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"
-alt="Fork me on GitHub"></a>
+  <script src="local.js"></script>
+  <body>                                                                  
+    <a href="https://github.com/ahuPowerDNS/pdns"><img style="position: absolute; top: 0;
+                                                              right: 0; border: 0;"
+                                                       src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"
+                                                       alt="Fork me on GitHub"></a>
 
-<style>
-#qpschart {
-       position: relative;
-       left: 40px;
-}
-#qpsy_axis {
-       position: absolute;
-       top: 0;
-       bottom: 0;
-       width: 40px;
-}
+    <style>
+      #qpschart {
+      position: relative;
+      left: 40px;
+      }
+      #qpsy_axis {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 40px;
+      }
 
-#cpuchart {
-       position: relative; 
-       left: 40px;
-}
-#cpuy_axis {
-       position: absolute;
-       top: 0;
-       bottom: 0;
-       width: 40px;
-}
+      #cpuchart {
+      position: relative; 
+      left: 40px;
+      }
+      #cpuy_axis {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 40px;
+      }
 
 
-</style>
+    </style>
 
 
-<table width="100%" border="0"><tr><td><img src="https://www.powerdns.com/img/powerdns-logo-220px.png"/></td>
-<td width="75%">
-</td>
-</tr></table>
-<p>
-Version: <span id="version"></span>, uptime: <span id="uptime"></span>, Number of queries: <span id="questions"></span> (<span id="qps"></span> qps)<br/>
-Average response time: <span id="latency"></span> ms, CPU Usage: <span id="cpu"></span>%, Server selection policy: <span id="server-policy"></span> <br/>
-</p>
-<table width="100%" cellpadding="20">
-  <tr valign="top">
-    <td>
-      <table cellpadding="12">
-       <tr><td align="center">QPS / SERVFAILPS</td></tr>
-       <tr><td>
-           <div id="chart_container">
-             <div id="qpsy_axis"></div>
-             <div id="qpschart"></div>
-           </div>
-       </td></tr>
-       <tr><td align="center">CPU</td></tr>
-       <tr><td>
-           <div id="chart_container">
-             <div id="cpuy_axis"></div>
-             <div id="cpuchart"></div>
-           </div>
-         </td>
-       </tr>
-      </table>
-    </td>
-    
-    <td>
-      <table cellpadding="15">
-       <tr>
-         <td><div id="queryring"></div> </td>
-         <td><div id="servfailqueryring"></div></td>
-       </tr>
-       <tr>
-         <td><div id="remotering"></div></td>
-         <td><div id="servfailremotering"></div></td>
-       </tr>
-       <tr>
-         <td><div id="dynblock"></div></td>
-       </tr>
+    <table width="100%" border="0"><tr><td><img src="https://www.powerdns.com/img/powerdns-logo-220px.png"/></td>
+        <td width="75%">
+        </td>
+    </tr></table>
+    <p>
+      Version: <span id="version"></span>, uptime: <span id="uptime"></span>, Number of queries: <span id="questions"></span> (<span id="qps"></span> qps)<br/>
+      Average response time: <span id="latency"></span> ms, CPU Usage: <span id="cpu"></span>%, Server selection policy: <span id="server-policy"></span> <br/>
+    </p>
+    <table width="100%" cellpadding="20">
+      <tr valign="top">
+        <td>
+          <table cellpadding="12">
+            <tr><td align="center">QPS / SERVFAILPS</td></tr>
+            <tr><td>
+                <div id="chart_container">
+                  <div id="qpsy_axis"></div>
+                  <div id="qpschart"></div>
+                </div>
+            </td></tr>
+            <tr><td align="center">CPU</td></tr>
+            <tr><td>
+                <div id="chart_container">
+                  <div id="cpuy_axis"></div>
+                  <div id="cpuchart"></div>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </td>
+        
+        <td>
+          <table cellpadding="15" width="100%" border="1">
+            <tr>
+              <td><div id="downstreams"></div> </td>
+            </tr>
+            <tr>
+              <td><div id="rules"></div></td>
+            </tr>
+            <tr>
+              <td><div id="dynblock"></div></td>
+            </tr>
 
-      </table>
-    </td>
-  </tr>
-</table>
+          </table>
+        </td>
+      </tr>
+    </table>
 
-<div>
-  <br/><br/>
-  <p></p><p></p>
-</div>
-</body>                                                                 
+    <div>
+      <br/><br/>
+      <p></p><p></p>
+    </div>
+  </body>                                                                 
 </html>
index 8a54533da80a5fb50d8f41ce6251c7028ac6de0a..ded7ecc2af1f13b2a12632f519a8fdbb96aafca8 100644 (file)
@@ -6,41 +6,41 @@ $(document).ready(function() {
     $.ajaxSetup({ cache: false });
     
     var qpsgraph = new Rickshaw.Graph( {
-       element: document.getElementById("qpschart"),
-       width: 400,
-       height: 200,
-       renderer: 'line',
-       series: new Rickshaw.Series.FixedDuration([{ name: 'servfailps' }, {name: 'qps'}], undefined, {
+        element: document.getElementById("qpschart"),
+        width: 400,
+        height: 200,
+        renderer: 'line',
+        series: new Rickshaw.Series.FixedDuration([{ name: 'servfailps' }, {name: 'qps'}], undefined, {
             timeInterval: 1000,
             maxDataPoints: 100,
             timeBase: new Date().getTime() / 1000
-       }) 
+        }) 
     } );
     var y_ticks = new Rickshaw.Graph.Axis.Y( {
-       graph: qpsgraph,
-       orientation: 'left',
-       tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
-       element: document.getElementById('qpsy_axis')
+        graph: qpsgraph,
+        orientation: 'left',
+        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
+        element: document.getElementById('qpsy_axis')
     } );
 
     qpsgraph.render();
 
     var cpugraph = new Rickshaw.Graph( {
-       element: document.getElementById("cpuchart"),
-       width: 400,
-       height: 200,
-       renderer: 'line',
-       series: new Rickshaw.Series.FixedDuration([{ name: 'one' }], undefined, {
+        element: document.getElementById("cpuchart"),
+        width: 400,
+        height: 200,
+        renderer: 'line',
+        series: new Rickshaw.Series.FixedDuration([{ name: 'one' }], undefined, {
             timeInterval: 1000,
             maxDataPoints: 100,
             timeBase: new Date().getTime() / 1000
-       }) 
+        }) 
     } );
     var y_ticks = new Rickshaw.Graph.Axis.Y( {
-       graph: cpugraph,
-       orientation: 'left',
-       tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
-       element: document.getElementById('cpuy_axis')
+        graph: cpugraph,
+        orientation: 'left',
+        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
+        element: document.getElementById('cpuy_axis')
     } );
 
     cpugraph.render();
@@ -48,185 +48,188 @@ $(document).ready(function() {
 
     function updateRingBuffers()
     {
-       var filtered=$("#filter1").is(':checked')
-       var qstring='jsonstat?command=get-query-ring&name=queries';
-       if(filtered)
-           qstring=qstring+"&public-filtered=1";
-
-       $.getJSON(qstring,
-                 function(data) {
-                     console.log(data);
-                     var bouw="<table><tr><th>Number</th><th>Domain</th><th>Type</th></tr>";
-                     var num=0;
-                     var total=0, rest=0;
-                     $.each(data["entries"], function(a,b) {
-                         total+=b[0];
-                         if(num++ > 10) {
-                             rest+=b[0];
-                             return;
-                         }
-                         if(b[1].length > 25)
-                             b[1]=b[1].substring(0,25);
-
-                         bouw=bouw+("<tr><td>"+b[0]+"</td><td>"+b[1]+"</td><td>"+b[2]+"</td></tr>");
-                     });
-                     bouw+="<tr><td>"+rest+"</td><td>Rest</td></tr>";
-                     bouw=bouw+"</table>";
-                     $("#queryring").html(bouw);
-
-                 });
-
-       filtered=$("#filter2").is(':checked')
-       qstring='jsonstat?command=get-query-ring&name=servfail-queries';
-       if(filtered)
-           qstring=qstring+"&public-filtered=1";
-
-       $.getJSON(qstring, 
-                 function(data) {
-                     var bouw="<table><tr><th>Number</th><th>Servfail domain</th><th>Type</th></tr>";
-                     var num=0, total=0, rest=0;
-                     $.each(data["entries"], function(a,b) {
-                         total+=b[0];
-                         if(num++ > 10) {
-                             rest+=b[0];
-                             return;
-                         }
-                         if(b[1].length > 25)
-                             b[1]=b[1].substring(0,25);
-                         bouw=bouw+("<tr><td>"+b[0]+"</td><td>"+b[1]+"</td><td>"+b[2]+"</td></tr>");
-                     });
-                     bouw+="<tr><td>"+rest+"</td><td>Rest</td></tr>";
-                     bouw=bouw+"</table>";
-                     $("#servfailqueryring").html(bouw);
-
-                 });
-
-       $.getJSON('jsonstat?command=get-remote-ring&name=remotes', 
-                 function(data) {
-                     var bouw="<table><tr><th>Number</th><th>Remote</th></tr>";
-                     var num=0, total=0, rest=0;
-                     $.each(data["entries"], function(a,b) {
-                         total+=b[0];
-                         if(num++ > 10) {
-                             rest +=b[0];
-                             return;
-                         }
-                         bouw=bouw+("<tr><td>"+b[0]+"</td><td>"+b[1]+"</td></tr>");
-                     });
-                     bouw+="<tr><td>"+rest+"</td><td>Rest</td></tr>";
-                     bouw=bouw+"</table>";
-                     $("#remotering").html(bouw);
-
-                 });
-
-       $.getJSON('jsonstat?command=get-remote-ring&name=servfail-remotes', 
-                 function(data) {
-                     var bouw="<table><tr><th>Number</th><th>Servfail Remote</th></tr>";
-                     var num=0, total=0, rest=0;
-                     $.each(data["entries"], function(a,b) {
-                         total+=b[0];
-                         if(num++ > 10) {
-                             rest += b[0];
-                             return;
-                         }
-                         bouw=bouw+("<tr><td>"+b[0]+"</td><td>"+b[1]+"</td></tr>");
-                     });
-                     bouw+="<tr><td>"+rest+"</td><td>Rest</td></tr>";
-                     bouw=bouw+"</table>";
-                     $("#servfailremotering").html(bouw);
-
-                 });
-       
-
+        var filtered=$("#filter1").is(':checked')
+        var qstring='jsonstat?command=get-query-ring&name=queries';
+        if(filtered)
+            qstring=qstring+"&public-filtered=1";
+
+        $.getJSON(qstring,
+                  function(data) {
+                      console.log(data);
+                      var bouw="<table><tr><th>Number</th><th>Domain</th><th>Type</th></tr>";
+                      var num=0;
+                      var total=0, rest=0;
+                      $.each(data["entries"], function(a,b) {
+                          total+=b[0];
+                          if(num++ > 10) {
+                              rest+=b[0];
+                              return;
+                          }
+                          if(b[1].length > 25)
+                              b[1]=b[1].substring(0,25);
+
+                          bouw=bouw+("<tr><td>"+b[0]+"</td><td>"+b[1]+"</td><td>"+b[2]+"</td></tr>");
+                      });
+                      bouw+="<tr><td>"+rest+"</td><td>Rest</td></tr>";
+                      bouw=bouw+"</table>";
+                      $("#queryring").html(bouw);
+
+                  });
+
+        filtered=$("#filter2").is(':checked')
+        qstring='jsonstat?command=get-query-ring&name=servfail-queries';
+        if(filtered)
+            qstring=qstring+"&public-filtered=1";
+
+        $.getJSON(qstring, 
+                  function(data) {
+                      var bouw="<table><tr><th>Number</th><th>Servfail domain</th><th>Type</th></tr>";
+                      var num=0, total=0, rest=0;
+                      $.each(data["entries"], function(a,b) {
+                          total+=b[0];
+                          if(num++ > 10) {
+                              rest+=b[0];
+                              return;
+                          }
+                          if(b[1].length > 25)
+                              b[1]=b[1].substring(0,25);
+                          bouw=bouw+("<tr><td>"+b[0]+"</td><td>"+b[1]+"</td><td>"+b[2]+"</td></tr>");
+                      });
+                      bouw+="<tr><td>"+rest+"</td><td>Rest</td></tr>";
+                      bouw=bouw+"</table>";
+                      $("#servfailqueryring").html(bouw);
+
+                  });
+
+        $.getJSON('jsonstat?command=get-remote-ring&name=remotes', 
+                  function(data) {
+                      var bouw="<table><tr><th>Number</th><th>Remote</th></tr>";
+                      var num=0, total=0, rest=0;
+                      $.each(data["entries"], function(a,b) {
+                          total+=b[0];
+                          if(num++ > 10) {
+                              rest +=b[0];
+                              return;
+                          }
+                          bouw=bouw+("<tr><td>"+b[0]+"</td><td>"+b[1]+"</td></tr>");
+                      });
+                      bouw+="<tr><td>"+rest+"</td><td>Rest</td></tr>";
+                      bouw=bouw+"</table>";
+                      $("#remotering").html(bouw);
+
+                  });
+
+        $.getJSON('jsonstat?command=get-remote-ring&name=servfail-remotes', 
+                  function(data) {
+                      var bouw="<table><tr><th>Number</th><th>Servfail Remote</th></tr>";
+                      var num=0, total=0, rest=0;
+                      $.each(data["entries"], function(a,b) {
+                          total+=b[0];
+                          if(num++ > 10) {
+                              rest += b[0];
+                              return;
+                          }
+                          bouw=bouw+("<tr><td>"+b[0]+"</td><td>"+b[1]+"</td></tr>");
+                      });
+                      bouw+="<tr><td>"+rest+"</td><td>Rest</td></tr>";
+                      bouw=bouw+"</table>";
+                      $("#servfailremotering").html(bouw);
+                  });
     }
 
     function update()
     {
-
-       $.ajax({
+        $.ajax({
             url: 'jsonstat?command=stats',
             type: 'GET',
             dataType: 'jsonp',
             success: function(data, x, y) {
-               $("#questions").text(data["queries"]);
-               $("#over-capacity-drops").text(data["over-capacity-drops"]);
-               $("#too-old").text(data["too-old-drops"]);
-               $("#uptime").text(moment.duration(data["uptime"]*1000.0).humanize());
-               $("#latency").text((data["latency-avg100"]/1000.0).toFixed(2));
-               if(!gdata["cpu-sys-msec"]) 
-                   gdata=data;
-
-               var cpu=((1.0*data["cpu-sys-msec"]+1.0*data["cpu-user-msec"] - 1.0*gdata["cpu-sys-msec"]-1.0*gdata["cpu-user-msec"])/10.0);
-
-               $("#cpu").text(cpu.toFixed(2));
-               var qps=1.0*data["queries"]-1.0*gdata["queries"];
-               $("#qps").text(qps);
-               $("#server-policy").text(data["server-policy"]);
-
-               var servfailps=1.0*data["servfail-responses"]-1.0*gdata["servfail-responses"];
-
-               var totpcache=1.0*data["packetcache-hits"]-1.0*gdata["packetcache-hits"]+1.0*data["packetcache-misses"]-1.0*gdata["packetcache-misses"];
-               if(totpcache > 0)
-                   $("#phitrate").text((100.0*(data["packetcache-hits"]-1.0*gdata["packetcache-hits"])/totpcache).toFixed(2));
-               else
-                   $("#phitrate").text(0);
-               
-               qpsgraph.series.addData({ qps: qps, servfailps: servfailps});
-               qpsgraph.render();
-
-               cpugraph.series.addData({ one: cpu});
-               cpugraph.render();
-
-               gdata=data;
+                $("#questions").text(data["queries"]);
+                $("#over-capacity-drops").text(data["over-capacity-drops"]);
+                $("#too-old").text(data["too-old-drops"]);
+                $("#uptime").text(moment.duration(data["uptime"]*1000.0).humanize());
+                $("#latency").text((data["latency-avg100"]/1000.0).toFixed(2));
+                if(!gdata["cpu-sys-msec"]) 
+                    gdata=data;
+
+                var cpu=((1.0*data["cpu-sys-msec"]+1.0*data["cpu-user-msec"] - 1.0*gdata["cpu-sys-msec"]-1.0*gdata["cpu-user-msec"])/10.0);
+
+                $("#cpu").text(cpu.toFixed(2));
+                var qps=1.0*data["queries"]-1.0*gdata["queries"];
+                $("#qps").text(qps);
+                $("#server-policy").text(data["server-policy"]);
+
+                var servfailps=1.0*data["servfail-responses"]-1.0*gdata["servfail-responses"];
+
+                var totpcache=1.0*data["packetcache-hits"]-1.0*gdata["packetcache-hits"]+1.0*data["packetcache-misses"]-1.0*gdata["packetcache-misses"];
+                if(totpcache > 0)
+                    $("#phitrate").text((100.0*(data["packetcache-hits"]-1.0*gdata["packetcache-hits"])/totpcache).toFixed(2));
+                else
+                    $("#phitrate").text(0);
+                
+                qpsgraph.series.addData({ qps: qps, servfailps: servfailps});
+                qpsgraph.render();
+
+                cpugraph.series.addData({ one: cpu});
+                cpugraph.render();
+
+                gdata=data;
             },
             error:  function() {
 
             },
         });
-       
-       $.ajax({ url: 'api/v1/servers/localhost', type: 'GET', dataType: 'json',
-                success: function(data) {
-                    $("#version").text(data["daemon_type"]+" "+data["version"]);
-                    var bouw="<table><tr align=right><th>#</th><th align=left>Name</th><th align=left>Address</th><th>Status</th><th>Queries</th><th>Drops</th><th>QPS</th><th>Out</th><th>Weight</th><th>Order</th><th align=left>Pools</th></tr>";
-                    $.each(data["servers"], function(a,b) {
-                        bouw = bouw + ("<tr align=right><td>"+b["id"]+"</td><td align=left>"+b["name"]+"</td><td align=left>"+b["address"]+"</td><td>"+b["state"]+"</td>");
+        
+        $.ajax({ url: 'api/v1/servers/localhost', type: 'GET', dataType: 'json',
+                 success: function(data) {
+                     $("#version").text(data["daemon_type"]+" "+data["version"]);
+                     var bouw='<table width="100%"><tr align=right><th>#</th><th align=left>Name</th><th align=left>Address</th><th>Status</th><th>Queries</th><th>Drops</th><th>QPS</th><th>Out</th><th>Weight</th><th>Order</th><th align=left>Pools</th></tr>';
+                     $.each(data["servers"], function(a,b) {
+                         bouw = bouw + ("<tr align=right><td>"+b["id"]+"</td><td align=left>"+b["name"]+"</td><td align=left>"+b["address"]+"</td><td>"+b["state"]+"</td>");
                          bouw = bouw + ("<td>"+b["queries"]+"</td><td>"+b["reuseds"]+"</td><td>"+b["qps"]+"</td><td>"+b["outstanding"]+"</td>");
                          bouw = bouw + ("<td>"+b["weight"]+"</td><td>"+b["order"]+"</td><td align=left>"+b["pools"]+"</td></tr>");
-                        }); 
+                     }); 
                      bouw = bouw + "</table>";
-                     $("#queryring").html(bouw);
-
-                    bouw="<table><tr align=left><th>#</th><th align=left>Rule</th><th>Action</th><th>Matches</th></tr>";
-                    $.each(data["rules"], function(a,b) {
-                        bouw = bouw + ("<tr align=left><td>"+b["id"]+"</td><td align=left>"+b["rule"]+"</td><td>"+b["action"]+"</td>");
-                         bouw = bouw + ("<td>"+b["matches"]+"</td></tr>");
-                        }); 
+                     $("#downstreams").html(bouw);
+                     
+                     bouw='<table width="100%"><tr align=left><th>#</th><th align=left>Rule</th><th>Action</th><th>Matches</th></tr>';
+                     if(data["rules"].length) {
+                         $.each(data["rules"], function(a,b) {
+                             bouw = bouw + ("<tr align=left><td>"+b["id"]+"</td><td align=left>"+b["rule"]+"</td><td>"+b["action"]+"</td>");
+                             bouw = bouw + ("<td>"+b["matches"]+"</td></tr>");
+                         }); 
+                     }
+                     else
+                         bouw = bouw + '<tr><td align="center" colspan="4"><font color="#aaaaaa">No rules defined</font></td></tr>';
                      bouw = bouw + "</table>";
-                     $("#remotering").html(bouw);
+                     $("#rules").html(bouw);
+                 }
+               });
 
-                     
-                }
-              });
 
+        if((intervalcount++)%5)
+            return;
+        //      updateRingBuffers();
 
-       if((intervalcount++)%5)
-           return;
-//     updateRingBuffers();
+        $.ajax({ url: 'jsonstat?command=dynblocklist', type: 'GET', dataType: 'json',
+                 success: function(data) {
+                     var bouw='<table width="100%"><tr align=left><th>Dyn blocked netmask</th><th align=left>Reason</th></tr>';
+                     if(data.length) {
+                         $.each(data, function(a,b) {
+                             bouw=bouw+("<tr><td>"+a+"</td><td>"+b+"</td></tr>");
+                         });
+                     }
+                     else 
+                         bouw = bouw + '<tr><td align="center" colspan="2"><font color="#aaaaaa">No dynamic blocks active</font></td></tr>';
 
-       $.ajax({ url: 'jsonstat?command=dynblocklist', type: 'GET', dataType: 'json',
-                success: function(data) {
-                    var bouw="<table><tr align=left><th>Netmask</th><th align=left>Reason</th></tr>";
-                    $.each(data, function(a,b) {
-                        bouw=bouw+("<tr><td>"+a+"</td><td>"+b+"</td></tr>");
-                    });
-                    bouw=bouw+"</table>";
-                    $("#dynblock").html(bouw);
+                     bouw=bouw+"</table>";
+                     $("#dynblock").html(bouw);
 
-                }});
+                 }});
 
 
     };
-                
+    
     $("#filter1").click(updateRingBuffers);
     $("#filter2").click(updateRingBuffers);