Mercurial > code > home > repos > collector
diff index.html @ 0:e2d855c00e57
initial move from homeauto/ repo
| author | drewp@bigasterisk.com |
|---|---|
| date | Tue, 29 Mar 2022 21:44:04 -0700 |
| parents | |
| children | c48b7bbc3a64 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/index.html Tue Mar 29 21:44:04 2022 -0700 @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<html> + <head> + <title>collector</title> + <meta charset="utf-8" /> + </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> + <script type="module"> + import { LitElement, html, css, customElement } from "https://cdn.skypack.dev/lit-element"; + export class CollectorState extends LitElement { + static get properties() { + return { + latestState: { type: Object }, + }; + } + + constructor() { + super(); + } + + 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="${d.url.replace("/events", "")}">[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> + </body> +</html>