comparison service/collector/static/state.js @ 663:25b418e2659e

prettier times. new streamed-graph browse link Ignore-this: beb72354711b5b68777f622c28fea740
author drewp@bigasterisk.com
date Wed, 18 Dec 2019 17:23:34 -0800
parents 22751570eda1
children
comparison
equal deleted inserted replaced
662:540dd68af9f2 663:25b418e2659e
41 41
42 render() { 42 render() {
43 const sourcesTable = (clients) => { 43 const sourcesTable = (clients) => {
44 const clientRow = (client) => { 44 const clientRow = (client) => {
45 const d = client.reconnectedPatchSource; 45 const d = client.reconnectedPatchSource;
46 const now = Date.now() / 1000;
47 const dispSec = (sec) => (
48 Math.abs(sec) > now - 1 ? '--' :
49 Math.abs(sec) > 3600 ?
50 `${Math.round(sec/3600)} hr` : Math.abs(sec) > 60 ?
51 `${Math.round(sec/60)} min` :
52 `${Math.round(sec*10)/10} sec`);
46 return html` 53 return html`
47 <tr> 54 <tr>
48 <td><a href="/rdf/browse/?graph=${d.url}">[browse]</a> <a href="${d.url}">${d.url}</a></td> 55 <td><a href="/rdf/browse/?graph=${d.url}">[browse]</a> <a href="${d.url}">${d.url}</a></td>
49 <td>${d.fullGraphReceived}</td> 56 <td>${d.fullGraphReceived}</td>
50 <td>${d.patchesReceived}</td> 57 <td>${d.patchesReceived}</td>
51 <td>${d.time.open}</td> 58 <td>${dispSec(d.time.open - now)}</td>
52 <td>${d.time.fullGraph}</td> 59 <td>${dispSec(d.time.fullGraph - d.time.open)}</td>
53 <td>${d.time.latestPatch}</td> 60 <td>${dispSec(d.time.latestPatch - now)}</td>
54 </tr> 61 </tr>
55 `; 62 `;
56 }; 63 };
57 64
58 return html` 65 return html`
60 <thead> 67 <thead>
61 <tr> 68 <tr>
62 <th>patch source</th> 69 <th>patch source</th>
63 <th>full graph recv</th> 70 <th>full graph recv</th>
64 <th>patches recv</th> 71 <th>patches recv</th>
65 <th>time open</th> 72 <th>time open (rel)</th>
66 <th>time fullGraph</th> 73 <th>time fullGraph (after open)</th>
67 <th>time latest patch</th> 74 <th>time latest patch (rel)</th>
68 </tr> 75 </tr>
69 </thead> 76 </thead>
70 <tbody> 77 <tbody>
71 ${clients.map(clientRow)} 78 ${clients.map(clientRow)}
72 </tbody> 79 </tbody>
110 } 117 }
111 const d = this.latestState.graphClients; 118 const d = this.latestState.graphClients;
112 return html` 119 return html`
113 <div> 120 <div>
114 <p> 121 <p>
115 Graph: ${d.statements.len} statements 122 Graph: ${d.statements ? d.statements.len : 0} statements
116 </p> 123 </p>
117 124
118 <p> 125 <p>
119 Sources: 126 Sources:
120 ${sourcesTable(d.clients)} 127 ${sourcesTable(d.clients || [])}
121 </p> 128 </p>
122 129
123 <p> 130 <p>
124 Listening clients: 131 Listening clients:
125 ${handlersTable(d.sseHandlers)} 132 ${handlersTable(d.sseHandlers || [])}
126 </p> 133 </p>
127 </div>`; 134 </div>`;
128 } 135 }
129 } 136 }
130 customElements.define('collector-state', CollectorState); 137 customElements.define('collector-state', CollectorState);