Mercurial > code > home > repos > homeauto
diff service/collector/index.html @ 715:fe9cfc088a49
consolidate debug page into ./index.html for now
Ignore-this: 56775a500165c5c707238d99fbdb6739
| author | drewp@bigasterisk.com |
|---|---|
| date | Tue, 04 Feb 2020 22:41:51 -0800 |
| parents | service/collector/static/index.html@25b418e2659e |
| children | 6d84cd3eb277 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/service/collector/index.html Tue Feb 04 22:41:51 2020 -0800 @@ -0,0 +1,156 @@ +<!doctype html> +<html> + <head> + <title>collector</title> + <meta charset="utf-8"> + <script src="/lib/webcomponents/2.4.0/webcomponents-bundle.js"></script> + <script type="module"> + import { LitElement, TemplateResult, html, css } from '/lib/lit-element/2.2.0/lit-element-custom.js'; + + class CollectorState extends LitElement { + static get properties() { + return { + latestState: { type: Object } + }; + } + firstUpdated() { + this.latestState = {graphClients: {}}; + this.refresh(); + } + + delayedRefresh() { + setTimeout(() => { + requestAnimationFrame(() => { + this.refresh(); + }); + }, 5000); + } + + refresh() { + fetch('state') + .then((response) => { + return response.json(); + }) + .then((newState) => { + this.latestState = newState; + this.delayedRefresh(); + }); + } + + static get styles() { + return css` + :host { + display: inline-block; + border: 2px solid gray; + padding: 5px; + }`; + } + + render() { + const sourcesTable = (clients) => { + const clientRow = (client) => { + const d = client.reconnectedPatchSource; + const now = Date.now() / 1000; + const dispSec = (sec) => ( + Math.abs(sec) > now - 1 ? '--' : + Math.abs(sec) > 3600 ? + `${Math.round(sec/3600)} hr` : Math.abs(sec) > 60 ? + `${Math.round(sec/60)} min` : + `${Math.round(sec*10)/10} sec`); + return html` + <tr> + <td><a href="/rdf/browse/?graph=${d.url}">[browse]</a> <a href="${d.url}">${d.url}</a></td> + <td>${d.fullGraphReceived}</td> + <td>${d.patchesReceived}</td> + <td>${dispSec(d.time.open - now)}</td> + <td>${dispSec(d.time.fullGraph - d.time.open)}</td> + <td>${dispSec(d.time.latestPatch - now)}</td> + </tr> + `; + }; + + return html` + <table> + <thead> + <tr> + <th>patch source</th> + <th>full graph recv</th> + <th>patches recv</th> + <th>time open (rel)</th> + <th>time fullGraph (after open)</th> + <th>time latest patch (rel)</th> + </tr> + </thead> + <tbody> + ${clients.map(clientRow)} + </tbody> + </table> + `; + }; + + const handlersTable = (handlers) => { + const handlerRow = (d) => { + return html` + <tr> + <td>${d.created}</td> + <td>${d.ageHours}</td> + <td><a href="/rdf/browse/?graph=/sse_collector/graph/${d.streamId}">${d.streamId}</a></td> + <td>${d.foafAgent}</td> + <td>${d.userAgent}</td> + </tr> + `; + }; + + return html` + <table> + <thead> + <tr> + <th>created</th> + <th>age hours</th> + <th>stream</th> + <th>foaf agent</th> + <th>user agent</th> + </tr> + </thead> + <tbody> + ${handlers.map(handlerRow)} + </tbody> + </table> + `; + }; + + if (!this.latestState) { + return 'loading...'; + } + const d = this.latestState.graphClients; + return html` + <div> + <p> + Graph: ${d.statements ? d.statements.len : 0} statements + </p> + + <p> + Sources: + ${sourcesTable(d.clients || [])} + </p> + + <p> + Listening clients: + ${handlersTable(d.sseHandlers || [])} + </p> + </div>`; + } + } + customElements.define('collector-state', CollectorState); + + </script> + </head> + <body class="rdfBrowsePage"> + <h1>collector</h1> + + <p><a href="/rdf/browse/?graph=/sse_collector/graph/home">See output for graph/home</a></p> + + <collector-state></collector-state> + + </body> +</html>