|
8
|
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 }
|
