<!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">
+<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">
-<script src="local.js"></script>
-<body>
+ <script src="local.js"></script>
+<body>
<style>
-#qpschart {
- position: relative;
- left: 40px;
-}
-#qpsy_axis {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 40px;
-}
+ #qpschart {
+ position: relative;
+ left: 40px;
+ }
-#cpuchart {
- position: relative;
- left: 40px;
-}
-#cpuy_axis {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 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;
+ }
</style>
-<table width="100%" border="0"><tr><td><img src="powerdns-logo-220px.png"/></td>
-<td width="75%">
-<form id="serverform" action="javascript:void();">Password: <input type="password" id="password" value="no">
-<span id="connection-status" style="color:red; display:none">No server connection!</span>
-<span id="connection-error" style="color:red"></span>
-</form>
-</td>
-</tr></table>
+<table width="100%" border="0">
+ <tr>
+ <td><img src="powerdns-logo-220px.png"/></td>
+ <td width="75%">
+ <form id="serverform" action="javascript:void();">Password: <input type="password" id="password" value="no">
+ <span id="connection-status" style="color:red; display:none">No server connection!</span>
+ <span id="connection-error" style="color:red"></span>
+ </form>
+ </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/>
-Over-capacity-drops: <span id="over-capacity-drops"></span>, too old: <span id="too-old"></span><br/>
-Packet cache hitrate: <span id="phitrate"></span>%,
-Average response time: <span id="latency"></span> ms, CPU Usage: <span id="cpu"></span>% <br/>
+ Version: <span id="version"></span>, uptime: <span id="uptime"></span>, Number of queries: <span
+ id="questions"></span> (<span id="qps"></span> qps)<br/>
+ Over-capacity-drops: <span id="over-capacity-drops"></span>, too old: <span id="too-old"></span><br/>
+ Packet cache hitrate: <span id="phitrate"></span>%,
+ Average response time: <span id="latency"></span> ms, CPU Usage: <span id="cpu"></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><form>Public filtered: <input id="filter1" type="checkbox"></input></form></td>
- <td><form>Public filtered: <input id="filter2" type="checkbox"></input></form></td>
- </tr>
- <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>
- </table>
- </td>
- </tr>
+ <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>
+ <form>Public filtered: <input id="filter1" type="checkbox"></input></form>
+ </td>
+ <td>
+ <form>Public filtered: <input id="filter2" type="checkbox"></input></form>
+ </td>
+ </tr>
+ <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>
+ </table>
+ </td>
+ </tr>
</table>
<div>
- <br/><br/>
- <p></p><p></p>
+ <br/><br/>
+ <p></p>
+ <p></p>
</div>
-</body>
+</body>
</html>
"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="<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?api-key='+password+'&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?api-key='+password+'&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?api-key='+password+'&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 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 = "<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?api-key=' + password + '&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?api-key=' + password + '&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?api-key=' + password + '&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({
- 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);
projects / pdns / commitdiff