Mercurial > code > home > repos > homeauto

comparison service/collector/index.html @ 1578:807282fb3136

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix deploy; redo stats display page
author drewp@bigasterisk.com
date Thu, 26 Aug 2021 18:03:30 -0700
parents 6d84cd3eb277
children
comparison
equal deleted inserted replaced
1577:6ddc5e037f15 1578:807282fb3136
1 <!doctype html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <title>collector</title> 4 <title>collector</title>
5 <meta charset="utf-8"> 5 <meta charset="utf-8" />
6 <script src="/lib/webcomponents/2.4.0/webcomponents-bundle.js"></script>
7 <script type="module">
8 import { LitElement, TemplateResult, html, css } from '/lib/lit-element/2.2.0/lit-element-custom.js';
9
10 class CollectorState extends LitElement {
11 static get properties() {
12 return {
13 latestState: { type: Object }
14 };
15 }
16 firstUpdated() {
17 this.latestState = {graphClients: {}};
18 this.refresh();
19 }
20
21 delayedRefresh() {
22 setTimeout(() => {
23 requestAnimationFrame(() => {
24 this.refresh();
25 });
26 }, 5000);
27 }
28
29 refresh() {
30 fetch('state')
31 .then((response) => {
32 return response.json();
33 })
34 .then((newState) => {
35 this.latestState = newState;
36 this.delayedRefresh();
37 });
38 }
39
40 static get styles() {
41 return css`
42 :host {
43 display: inline-block;
44 border: 2px solid gray;
45 padding: 5px;
46 }`;
47 }
48
49 render() {
50 const sourcesTable = (clients) => {
51 const clientRow = (client) => {
52 const d = client.reconnectedPatchSource;
53 const now = Date.now() / 1000;
54 const dispSec = (sec) => (
55 Math.abs(sec) > now - 1 ? '--' :
56 Math.abs(sec) > 3600 ?
57 `${Math.round(sec/3600)} hr` : Math.abs(sec) > 60 ?
58 `${Math.round(sec/60)} min` :
59 `${Math.round(sec*10)/10} sec`);
60 return html`
61 <tr>
62 <td><a href="${d.url.replace('/events', '')}">[browse]</a> <a href="${d.url}">${d.url}</a></td>
63 <td>${d.fullGraphReceived}</td>
64 <td>${d.patchesReceived}</td>
65 <td>${dispSec(d.time.open - now)}</td>
66 <td>${dispSec(d.time.fullGraph - d.time.open)}</td>
67 <td>${dispSec(d.time.latestPatch - now)}</td>
68 </tr>
69 `;
70 };
71
72 return html`
73 <table>
74 <thead>
75 <tr>
76 <th>patch source</th>
77 <th>full graph recv</th>
78 <th>patches recv</th>
79 <th>time open (rel)</th>
80 <th>time fullGraph (after open)</th>
81 <th>time latest patch (rel)</th>
82 </tr>
83 </thead>
84 <tbody>
85 ${clients.map(clientRow)}
86 </tbody>
87 </table>
88 `;
89 };
90
91 const handlersTable = (handlers) => {
92 const handlerRow = (d) => {
93 return html`
94 <tr>
95 <td>${d.created}</td>
96 <td>${d.ageHours}</td>
97 <td><a href="/rdf/browse/?graph=/sse_collector/graph/${d.streamId}">${d.streamId}</a></td>
98 <td>${d.foafAgent}</td>
99 <td>${d.userAgent}</td>
100 </tr>
101 `;
102 };
103
104 return html`
105 <table>
106 <thead>
107 <tr>
108 <th>created</th>
109 <th>age hours</th>
110 <th>stream</th>
111 <th>foaf agent</th>
112 <th>user agent</th>
113 </tr>
114 </thead>
115 <tbody>
116 ${handlers.map(handlerRow)}
117 </tbody>
118 </table>
119 `;
120 };
121
122 if (!this.latestState) {
123 return 'loading...';
124 }
125 const d = this.latestState.graphClients;
126 return html`
127 <div>
128 <p>
129 Graph: ${d.statements ? d.statements.len : 0} statements
130 </p>
131
132 <p>
133 Sources:
134 ${sourcesTable(d.clients || [])}
135 </p>
136
137 <p>
138 Listening clients:
139 ${handlersTable(d.sseHandlers || [])}
140 </p>
141 </div>`;
142 }
143 }
144 customElements.define('collector-state', CollectorState);
145
146 </script>
147 </head> 6 </head>
148 <body class="rdfBrowsePage"> 7 <body class="rdfBrowsePage">
149 <h1>collector</h1> 8 <h1>collector</h1>
150 9
151 <p><a href="/rdf/browse/?graph=/sse_collector/graph/home">See output for graph/home</a></p> 10 <p><a href="/rdf/browse/?graph=/sse_collector/graph/home">See output for graph/home</a></p>
152 11
153 <collector-state></collector-state> 12 <collector-state></collector-state>
13 <script type="module">
14 import { LitElement, html, css, customElement } from "https://cdn.skypack.dev/lit-element";
15 export class CollectorState extends LitElement {
16 static get properties() {
17 return {
18 latestState: { type: Object },
19 };
20 }
154 21
22 constructor() {
23 super();
24 }
25
26 firstUpdated() {
27 this.latestState = { graphClients: {} };
28 this.refresh();
29 }
30
31 delayedRefresh() {
32 setTimeout(() => {
33 requestAnimationFrame(() => {
34 this.refresh();
35 });
36 }, 5000);
37 }
38
39 refresh() {
40 fetch("state")
41 .then((response) => {
42 return response.json();
43 })
44 .then((newState) => {
45 this.latestState = newState;
46 this.delayedRefresh();
47 });
48 }
49
50 static get styles() {
51 return css`
52 :host {
53 display: inline-block;
54 border: 2px solid gray;
55 padding: 5px;
56 }
57 `;
58 }
59
60 render() {
61 const sourcesTable = (clients) => {
62 const clientRow = (client) => {
63 const d = client.reconnectedPatchSource;
64 const now = Date.now() / 1000;
65 const dispSec = (sec) =>
66 Math.abs(sec) > now - 1
67 ? "--"
68 : Math.abs(sec) > 3600
69 ? `${Math.round(sec / 3600)} hr`
70 : Math.abs(sec) > 60
71 ? `${Math.round(sec / 60)} min`
72 : `${Math.round(sec * 10) / 10} sec`;
73 return html`
74 <tr>
75 <td><a href="${d.url.replace("/events", "")}">[browse]</a> <a href="${d.url}">${d.url}</a></td>
76 <td>${d.fullGraphReceived}</td>
77 <td>${d.patchesReceived}</td>
78 <td>${dispSec(d.time.open - now)}</td>
79 <td>${dispSec(d.time.fullGraph - d.time.open)}</td>
80 <td>${dispSec(d.time.latestPatch - now)}</td>
81 </tr>
82 `;
83 };
84
85 return html`
86 <table>
87 <thead>
88 <tr>
89 <th>patch source</th>
90 <th>full graph recv</th>
91 <th>patches recv</th>
92 <th>time open (rel)</th>
93 <th>time fullGraph (after open)</th>
94 <th>time latest patch (rel)</th>
95 </tr>
96 </thead>
97 <tbody>
98 ${clients.map(clientRow)}
99 </tbody>
100 </table>
101 `;
102 };
103
104 const handlersTable = (handlers) => {
105 const handlerRow = (d) => {
106 return html`
107 <tr>
108 <td>${d.created}</td>
109 <td>${d.ageHours}</td>
110 <td><a href="/rdf/browse/?graph=/sse_collector/graph/${d.streamId}">${d.streamId}</a></td>
111 <td>${d.foafAgent}</td>
112 <td>${d.userAgent}</td>
113 </tr>
114 `;
115 };
116
117 return html`
118 <table>
119 <thead>
120 <tr>
121 <th>created</th>
122 <th>age hours</th>
123 <th>stream</th>
124 <th>foaf agent</th>
125 <th>user agent</th>
126 </tr>
127 </thead>
128 <tbody>
129 ${handlers.map(handlerRow)}
130 </tbody>
131 </table>
132 `;
133 };
134
135 if (!this.latestState) {
136 return "loading...";
137 }
138 const d = this.latestState.graphClients;
139 return html` <div>
140 <p>Graph: ${d.statements ? d.statements.len : 0} statements</p>
141
142 <p>Sources: ${sourcesTable(d.clients || [])}</p>
143
144 <p>Listening clients: ${handlersTable(d.sseHandlers || [])}</p>
145 </div>`;
146 }
147 }
148 customElements.define("collector-state", CollectorState);
149 </script>
155 </body> 150 </body>
156 </html> 151 </html>