diff options
| author | Shulhan <ms@kilabit.info> | 2021-01-22 02:50:19 +0700 |
|---|---|---|
| committer | Shulhan <ms@kilabit.info> | 2021-01-22 02:50:19 +0700 |
| commit | 2a1e1c368ce9c3a6105aa85192cbaa8fdcbd28bb (patch) | |
| tree | 4721d843e52c7c6dad28a83b50db4c4a808a7540 /_www | |
| parent | 4f51cd8d9dee4fe57bf060ae66b9dd180e2625d3 (diff) | |
| download | rescached-2a1e1c368ce9c3a6105aa85192cbaa8fdcbd28bb.tar.xz | |
_www: display the list of caches in front page
When user open the rescached web interface, the front page will
render and refresh the list of non-local caches per 10 seconds.
Diffstat (limited to '_www')
| -rw-r--r-- | _www/index.html | 67 | ||||
| -rw-r--r-- | _www/rescached.js | 30 |
2 files changed, 87 insertions, 10 deletions
diff --git a/_www/index.html b/_www/index.html index 3403751..aea85e5 100644 --- a/_www/index.html +++ b/_www/index.html @@ -12,6 +12,18 @@ padding: 1em 0px; border-bottom: 1px solid silver; } + #summary { + margin: 1em 0; + } + #caches { + height: 20em; + overflow: auto; + font-family: monospace; + } + .QType { + width: 3em; + display: inline-block; + } .rr { margin-left: 1em; width: 100%; @@ -37,7 +49,7 @@ } </style> </head> - <body> + <body onload="main()"> <nav class="menu"> <a href="/" class="active"> rescached </a> / @@ -57,10 +69,42 @@ <div id="result"></div> <div id="notif"></div> + <div id="summary"></div> + <div id="caches"></div> + <script src="/index.js"></script> <script src="/rescached.js"></script> <script> - const resc = new Rescached("") + let resc = null + let cachePoller = null + let dateFmt = new Intl.DateTimeFormat(undefined, { + year: "numeric", + month: "numeric", + day: "numeric", + hour: "numeric", + minute: "numeric", + second: "numeric", + }) + + async function main() { + resc = new Rescached("") + const res = await resc.Caches() + if (res.code != 200) { + notifError(`doSearch ${query}: ${res.message}`) + return + } + renderCaches(res.data) + cachePoller = setInterval(pollCaches, 10000) + } + + async function pollCaches() { + const res = await resc.Caches() + if (res.code != 200) { + notifError(`doSearch ${query}: ${res.message}`) + return + } + renderCaches(res.data) + } async function doSearch() { const query = document.getElementsByName("query")[0].value @@ -110,6 +154,25 @@ } } + function renderCaches(answers) { + document.getElementById("summary").innerHTML = ` + Total caches: ${answers.length} + ` + let w = document.getElementById("caches") + let out = ` + ` + for (let x = answers.length - 1; x >= 0; x--) { + let answer = answers[x] + out += ` + <div class="cache"> + <span class="AccessedAt">${dateFmt.format(new Date(answer.AccessedAt * 1000))}</span> + <span class="QType">${resc.GetRRTypeName(answer.QType)}</span> + <span class="QName">${answer.QName}</span> + </div>` + } + w.innerHTML = out + } + function renderRR(listRR, title) { let innerHTML = "" diff --git a/_www/rescached.js b/_www/rescached.js index 5610e4e..1b76331 100644 --- a/_www/rescached.js +++ b/_www/rescached.js @@ -30,6 +30,8 @@ function getRRTypeName(k) { class Rescached { static nanoSeconds = 1000000000 + static apiCaches = "/api/caches" + static apiCachesSearch = "/api/caches/search" static apiHostsd = "/api/hosts.d/" static apiZoned = "/api/zone.d/" @@ -38,6 +40,26 @@ class Rescached { this.env = {} } + async Caches() { + const res = await fetch(this.server + Rescached.apiCaches, { + headers: { + Connection: "keep-alive", + }, + }) + return await res.json() + } + + async Search(query) { + console.log("Search: ", query) + const res = await fetch( + this.server + + Rescached.apiCachesSearch + + "?query=" + + query, + ) + return await res.json() + } + async HostsFileCreate(name) { const httpRes = await fetch( this.server + Rescached.apiHostsd + name, @@ -55,14 +77,6 @@ class Rescached { return res } - async Search(query) { - console.log("Search: ", query) - const res = await fetch( - this.server + "/api/caches" + "?query=" + query, - ) - return await res.json() - } - async getEnvironment() { const httpRes = await fetch(this.server + "/api/environment") const res = await httpRes.json() |