# HG changeset patch # User drewp@bigasterisk.com # Date 1669437125 28800 # Node ID c48b7bbc3a648184f1e331c7041925ac3b7a7e6e # Parent fd73907cef409f471b610aa86bb0014532b7c0f7 refactor diff -r fd73907cef40 -r c48b7bbc3a64 index.html --- a/index.html Fri Nov 25 20:31:00 2022 -0800 +++ b/index.html Fri Nov 25 20:32:05 2022 -0800 @@ -3,149 +3,14 @@ collector + +

collector

-

See output for graph/home

- - +
+ diff -r fd73907cef40 -r c48b7bbc3a64 src/CollectorState.ts --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/CollectorState.ts Fri Nov 25 20:32:05 2022 -0800 @@ -0,0 +1,132 @@ +import { LitElement, html, css } from "lit"; +import { customElement, property } from "lit/decorators.js"; +export { StreamedGraph } from "@bigasterisk/streamed-graph"; + +@customElement("collector-state") +export class CollectorState extends LitElement { + @property() latestState: { graphClients: any } ; + + constructor() { + super(); + 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: Array) => { + const clientRow = (client: any) => { + const d = client.reconnectedPatchSource; + const now = Date.now() / 1000; + const dispSec = (sec: number) => + 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` + + [browse] ${d.url} + ${d.fullGraphReceived} + ${d.patchesReceived} + ${dispSec(d.time.open - now)} + ${dispSec(d.time.fullGraph - d.time.open)} + ${dispSec(d.time.latestPatch - now)} + + `; + }; + + return html` + rendered! + + + + + + + + + + + + + ${clients.map(clientRow)} + +
patch sourcefull graph recvpatches recvtime open (rel)time fullGraph (after open)time latest patch (rel)
+ `; + }; + + const handlersTable = (handlers: Array) => { + const handlerRow = (d: any) => { + return html` + + ${d.created} + ${d.ageHours} + ${d.streamId} + ${d.foafAgent} + ${d.userAgent} + + `; + }; + + return html` + + + + + + + + + + + + ${handlers.map(handlerRow)} + +
createdage hoursstreamfoaf agentuser agent
+ `; + }; + + if (!this.latestState) { + return "loading..."; + } + const d = this.latestState.graphClients; + return html`
+

Graph: ${d.statements ? d.statements.len : 0} statements

+ +

Sources: ${sourcesTable(d.clients || [])}

+ +

Listening clients: ${handlersTable(d.sseHandlers || [])}

+
`; + } +}