Mercurial > code > home > repos > collector

comparison src/CollectorState.ts @ 8:c48b7bbc3a64

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refactor
author drewp@bigasterisk.com
date Fri, 25 Nov 2022 20:32:05 -0800
parents
children bfd95926be6e
comparison
equal deleted inserted replaced
7:fd73907cef40 8:c48b7bbc3a64
1 import { LitElement, html, css } from "lit";
2 import { customElement, property } from "lit/decorators.js";
3 export { StreamedGraph } from "@bigasterisk/streamed-graph";
4
5 @customElement("collector-state")
6 export class CollectorState extends LitElement {
7 @property() latestState: { graphClients: any } ;
8
9 constructor() {
10 super();
11 this.latestState = { graphClients: {} };
12 this.refresh();
13 }
14
15 delayedRefresh() {
16 setTimeout(() => {
17 requestAnimationFrame(() => {
18 this.refresh();
19 });
20 }, 5000);
21 }
22
23 refresh() {
24 fetch("state")
25 .then((response) => {
26 return response.json();
27 })
28 .then((newState) => {
29 this.latestState = newState;
30 this.delayedRefresh();
31 });
32 }
33
34 static get styles() {
35 return css`
36 :host {
37 display: inline-block;
38 border: 2px solid gray;
39 padding: 5px;
40 }
41 `;
42 }
43
44 render() {
45 const sourcesTable = (clients: Array<any>) => {
46 const clientRow = (client: any) => {
47 const d = client.reconnectedPatchSource;
48 const now = Date.now() / 1000;
49 const dispSec = (sec: number) =>
50 Math.abs(sec) > now - 1
51 ? "--"
52 : Math.abs(sec) > 3600
53 ? `${Math.round(sec / 3600)} hr`
54 : Math.abs(sec) > 60
55 ? `${Math.round(sec / 60)} min`
56 : `${Math.round(sec * 10) / 10} sec`;
57 return html`
58 <tr>
59 <td><a href="${d.url.replace("/events", "")}">[browse]</a> <a href="${d.url}">${d.url}</a></td>
60 <td>${d.fullGraphReceived}</td>
61 <td>${d.patchesReceived}</td>
62 <td>${dispSec(d.time.open - now)}</td>
63 <td>${dispSec(d.time.fullGraph - d.time.open)}</td>
64 <td>${dispSec(d.time.latestPatch - now)}</td>
65 </tr>
66 `;
67 };
68
69 return html`
70 rendered!
71 <table>
72 <thead>
73 <tr>
74 <th>patch source</th>
75 <th>full graph recv</th>
76 <th>patches recv</th>
77 <th>time open (rel)</th>
78 <th>time fullGraph (after open)</th>
79 <th>time latest patch (rel)</th>
80 </tr>
81 </thead>
82 <tbody>
83 ${clients.map(clientRow)}
84 </tbody>
85 </table>
86 `;
87 };
88
89 const handlersTable = (handlers: Array<any>) => {
90 const handlerRow = (d: any) => {
91 return html`
92 <tr>
93 <td>${d.created}</td>
94 <td>${d.ageHours}</td>
95 <td><a href="graph/${d.streamId}">${d.streamId}</a></td>
96 <td>${d.foafAgent}</td>
97 <td>${d.userAgent}</td>
98 </tr>
99 `;
100 };
101
102 return html`
103 <table>
104 <thead>
105 <tr>
106 <th>created</th>
107 <th>age hours</th>
108 <th>stream</th>
109 <th>foaf agent</th>
110 <th>user agent</th>
111 </tr>
112 </thead>
113 <tbody>
114 ${handlers.map(handlerRow)}
115 </tbody>
116 </table>
117 `;
118 };
119
120 if (!this.latestState) {
121 return "loading...";
122 }
123 const d = this.latestState.graphClients;
124 return html` <div>
125 <p>Graph: ${d.statements ? d.statements.len : 0} statements</p>
126
127 <p>Sources: ${sourcesTable(d.clients || [])}</p>
128
129 <p>Listening clients: ${handlersTable(d.sseHandlers || [])}</p>
130 </div>`;
131 }
132 }