From: bert hubert Date: Sat, 5 Dec 2015 15:23:30 +0000 (+0100) Subject: cleanup dnsdist javascript & html, plus make it look a lot prettier X-Git-Tag: dnsdist-1.0.0-alpha1~125 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5024c067490bc6dc41453a18720cdd6475301218;p=thirdparty%2Fpdns.git cleanup dnsdist javascript & html, plus make it look a lot prettier --- diff --git a/pdns/dnsdistdist/html/index.html b/pdns/dnsdistdist/html/index.html index 960adc495e..9349f6ca3a 100644 --- a/pdns/dnsdistdist/html/index.html +++ b/pdns/dnsdistdist/html/index.html @@ -1,102 +1,100 @@ - - - - - - - - - - + + + + + + + + + + - - - + + + Fork me on GitHub - + - - -
-
-

-Version: , uptime: , Number of queries: ( qps)
-Average response time: ms, CPU Usage: %, Server selection policy:
-

- - - - -
- - - - - - -
QPS / SERVFAILPS
-
-
-
-
-
CPU
-
-
-
-
-
- 		- - - - - - - - - - - - +
+ +
+
+

+ Version: , uptime: , Number of queries: ( qps)
+ Average response time: ms, CPU Usage: %, Server selection policy:
+

+ + + + + - -
+ + + + + + +
QPS / SERVFAILPS
+
+
+
+
+
CPU
+
+
+
+
+
+ 		+ + + + + + + + + + -
-
+
+ + + -
-

-

-
- +
+

+

+
+ diff --git a/pdns/dnsdistdist/html/local.js b/pdns/dnsdistdist/html/local.js index 8a54533da8..ded7ecc2af 100644 --- a/pdns/dnsdistdist/html/local.js +++ b/pdns/dnsdistdist/html/local.js @@ -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=""; - 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+(""); - }); - bouw+=""; - bouw=bouw+"
NumberDomainType
"+b[0]+""+b[1]+""+b[2]+"
"+rest+"Rest
"; - $("#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=""; - 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+(""); - }); - bouw+=""; - bouw=bouw+"
NumberServfail domainType
"+b[0]+""+b[1]+""+b[2]+"
"+rest+"Rest
"; - $("#servfailqueryring").html(bouw); - - }); - - $.getJSON('jsonstat?command=get-remote-ring&name=remotes', - function(data) { - var bouw=""; - 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+(""); - }); - bouw+=""; - bouw=bouw+"
NumberRemote
"+b[0]+""+b[1]+"
"+rest+"Rest
"; - $("#remotering").html(bouw); - - }); - - $.getJSON('jsonstat?command=get-remote-ring&name=servfail-remotes', - function(data) { - var bouw=""; - 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+(""); - }); - bouw+=""; - bouw=bouw+"
NumberServfail Remote
"+b[0]+""+b[1]+"
"+rest+"Rest
"; - $("#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=""; + 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+(""); + }); + bouw+=""; + bouw=bouw+"
NumberDomainType
"+b[0]+""+b[1]+""+b[2]+"
"+rest+"Rest
"; + $("#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=""; + 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+(""); + }); + bouw+=""; + bouw=bouw+"
NumberServfail domainType
"+b[0]+""+b[1]+""+b[2]+"
"+rest+"Rest
"; + $("#servfailqueryring").html(bouw); + + }); + + $.getJSON('jsonstat?command=get-remote-ring&name=remotes', + function(data) { + var bouw=""; + 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+(""); + }); + bouw+=""; + bouw=bouw+"
NumberRemote
"+b[0]+""+b[1]+"
"+rest+"Rest
"; + $("#remotering").html(bouw); + + }); + + $.getJSON('jsonstat?command=get-remote-ring&name=servfail-remotes', + function(data) { + var bouw=""; + 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+(""); + }); + bouw+=""; + bouw=bouw+"
NumberServfail Remote
"+b[0]+""+b[1]+"
"+rest+"Rest
"; + $("#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=""; - $.each(data["servers"], function(a,b) { - bouw = bouw + (""); + + $.ajax({ url: 'api/v1/servers/localhost', type: 'GET', dataType: 'json', + success: function(data) { + $("#version").text(data["daemon_type"]+" "+data["version"]); + var bouw='
#NameAddressStatusQueriesDropsQPSOutWeightOrderPools
"+b["id"]+""+b["name"]+""+b["address"]+""+b["state"]+"
'; + $.each(data["servers"], function(a,b) { + bouw = bouw + (""); bouw = bouw + (""); bouw = bouw + (""); - }); + }); bouw = bouw + "
#NameAddressStatusQueriesDropsQPSOutWeightOrderPools
"+b["id"]+""+b["name"]+""+b["address"]+""+b["state"]+""+b["queries"]+""+b["reuseds"]+""+b["qps"]+""+b["outstanding"]+""+b["weight"]+""+b["order"]+""+b["pools"]+"
"; - $("#queryring").html(bouw); - - bouw=""; - $.each(data["rules"], function(a,b) { - bouw = bouw + (""); - bouw = bouw + (""); - }); + $("#downstreams").html(bouw); + + bouw='
#RuleActionMatches
"+b["id"]+""+b["rule"]+""+b["action"]+""+b["matches"]+"
'; + if(data["rules"].length) { + $.each(data["rules"], function(a,b) { + bouw = bouw + (""); + bouw = bouw + (""); + }); + } + else + bouw = bouw + ''; bouw = bouw + "
#RuleActionMatches
"+b["id"]+""+b["rule"]+""+b["action"]+""+b["matches"]+"
No rules defined
"; - $("#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=''; + if(data.length) { + $.each(data, function(a,b) { + bouw=bouw+(""); + }); + } + else + bouw = bouw + ''; - $.ajax({ url: 'jsonstat?command=dynblocklist', type: 'GET', dataType: 'json', - success: function(data) { - var bouw="
Dyn blocked netmaskReason
"+a+""+b+"
No dynamic blocks active
"; - $.each(data, function(a,b) { - bouw=bouw+(""); - }); - bouw=bouw+"
NetmaskReason
"+a+""+b+"
"; - $("#dynblock").html(bouw); + bouw=bouw+""; + $("#dynblock").html(bouw); - }}); + }}); }; - + $("#filter1").click(updateRingBuffers); $("#filter2").click(updateRingBuffers);