From cd0067cd779156dba950f5d5d972978c0f9af53c Mon Sep 17 00:00:00 2001 From: Konrad Wojas Date: Tue, 7 Nov 2017 22:41:13 +0800 Subject: [PATCH] rec: reformat web UI code Reformat web UI code before refactoring. --- pdns/recursordist/html/index.html | 200 +++++++++------- pdns/recursordist/html/local.js | 369 +++++++++++++++--------------- 2 files changed, 297 insertions(+), 272 deletions(-) diff --git a/pdns/recursordist/html/index.html b/pdns/recursordist/html/index.html index c38cf75b4..473cd4fc6 100644 --- a/pdns/recursordist/html/index.html +++ b/pdns/recursordist/html/index.html @@ -1,104 +1,130 @@ - - - - - - - - - - - + + + + + + + + + + + - - + + - - -
-
Password: - - -
-
+ + + + + +
+
Password: + + +
+

-Version: , uptime: , Number of queries: ( qps)
-Over-capacity-drops: , too old:
-Packet cache hitrate: %, -Average response time: ms, CPU Usage: %
+ Version: , uptime: , Number of queries: ( qps)
+ Over-capacity-drops: , too old:
+ Packet cache hitrate: %, + Average response time: ms, CPU Usage: %

- - - - - + + + + +
- - - - - - -
QPS / SERVFAILPS
-
-
-
-
-
CPU
-
-
-
-
-
- 		- - - - - - - - - - - - - - -
Public filtered:
Public filtered:
-
+ + + + + + + + + + + + + +
QPS / SERVFAILPS
+
+
+
+
+
CPU
+
+
+
+
+
+ 		+ + + + + + + + + + + + + + +
+
Public filtered:
+ 		+
Public filtered:
+
+
+ 		+
+
+
+ 		+
+
+
-

-

+

+

+

- + diff --git a/pdns/recursordist/html/local.js b/pdns/recursordist/html/local.js index 1cad60468..40a8e9809 100644 --- a/pdns/recursordist/html/local.js +++ b/pdns/recursordist/html/local.js @@ -1,222 +1,221 @@ "use strict"; // var moment= require('moment'); -var gdata={} - -$(document).ready(function() { - $.ajaxSetup({ cache: false }); - - var password=$("#password").val(); - $("#password").change(function(e) { - password=$("#password").val(); +var gdata = {} + +$(document).ready(function () { + $.ajaxSetup({cache: false}); + + var password = $("#password").val(); + $("#password").change(function (e) { + password = $("#password").val(); update(); }); - 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, { + 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, { 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') - } ); + }) + }); + var y_ticks = new Rickshaw.Graph.Axis.Y({ + 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, { + var cpugraph = new Rickshaw.Graph({ + 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') - } ); + }) + }); + var y_ticks = new Rickshaw.Graph.Axis.Y({ + graph: cpugraph, + orientation: 'left', + tickFormat: Rickshaw.Fixtures.Number.formatKMBT, + element: document.getElementById('cpuy_axis') + }); cpugraph.render(); - var intervalcount=0; - - function updateRingBuffers() - { - var filtered=$("#filter1").is(':checked') - var qstring='jsonstat?api-key='+password+'&command=get-query-ring&name=queries'; - - if(filtered) - qstring=qstring+"&public-filtered=1"; - - $.getJSON(qstring, - function(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?api-key='+password+'&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?api-key='+password+'&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?api-key='+password+'&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 intervalcount = 0; + + function updateRingBuffers() { + var filtered = $("#filter1").is(':checked') + var qstring = 'jsonstat?api-key=' + password + '&command=get-query-ring&name=queries'; + + if (filtered) + qstring = qstring + "&public-filtered=1"; + + $.getJSON(qstring, + function (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?api-key=' + password + '&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?api-key=' + password + '&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?api-key=' + password + '&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({ - url: 'api/v1/servers/localhost/statistics?api-key='+password, + function update() { + $.ajax({ + url: 'api/v1/servers/localhost/statistics?api-key=' + password, type: 'GET', dataType: 'json', - success: function(adata, x, y) { + success: function (adata, x, y) { $("#connection-status").hide(); $("#connection-error").html(""); - var data={}; - $.each(adata, function(key, val) { - data[val.name]=val.value; - }); - $("#questions").text(data["questions"]); - $("#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["qa-latency"]/1000.0); - if(!gdata["sys-msec"]) - gdata=data; - - var cpu=((1.0*data["sys-msec"]+1.0*data["user-msec"] - 1.0*gdata["sys-msec"]-1.0*gdata["user-msec"])/10.0); - - $("#cpu").text(cpu.toFixed(2)); - var qps=1.0*data["questions"]-1.0*gdata["questions"]; - $("#qps").text(qps); - - var servfailps=1.0*data["servfail-answers"]-1.0*gdata["servfail-answers"]; - - 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; + var data = {}; + $.each(adata, function (key, val) { + data[val.name] = val.value; + }); + $("#questions").text(data["questions"]); + $("#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["qa-latency"] / 1000.0); + if (!gdata["sys-msec"]) + gdata = data; + + var cpu = ((1.0 * data["sys-msec"] + 1.0 * data["user-msec"] - 1.0 * gdata["sys-msec"] - 1.0 * gdata["user-msec"]) / 10.0); + + $("#cpu").text(cpu.toFixed(2)); + var qps = 1.0 * data["questions"] - 1.0 * gdata["questions"]; + $("#qps").text(qps); + + var servfailps = 1.0 * data["servfail-answers"] - 1.0 * gdata["servfail-answers"]; + + 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(o) { + error: function (o) { $("#connection-status").show(); - $("#connection-error").html(o.status+" "+o.statusText); + $("#connection-error").html(o.status + " " + o.statusText); }, - beforeSend: function(xhr) { + beforeSend: function (xhr) { xhr.setRequestHeader('X-API-Key', 'changeme'); - - - return true; - } + + + return true; + } + }); + + $.ajax({ + url: 'api/v1/servers/localhost?api-key=' + password, type: 'GET', dataType: 'json', + success: function (data) { + $("#version").text("PowerDNS " + data["daemon_type"] + " " + data["version"]); + } }); - - $.ajax({ url: 'api/v1/servers/localhost?api-key='+password, type: 'GET', dataType: 'json', - success: function(data) { - $("#version").text("PowerDNS "+data["daemon_type"]+" "+data["version"]); - } - }); - if((intervalcount++)%5) - return; - updateRingBuffers(); + if ((intervalcount++) % 5) + return; + updateRingBuffers(); }; - + $("#filter1").click(updateRingBuffers); $("#filter2").click(updateRingBuffers); -- 2.49.0