Mercurial > code > home > repos > homeauto
annotate 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 |
| rev | line source |
|---|---|
| 650 | 1 import { LitElement, TemplateResult, html, css } from '/lib/lit-element/2.2.0/lit-element-custom.js'; |
| 2 | |
| 3 class CollectorState extends LitElement { | |
| 4 static get properties() { | |
| 5 return { | |
| 6 latestState: { type: Object } | |
| 7 }; | |
| 8 } | |
| 9 firstUpdated() { | |
| 10 this.latestState = {graphClients: {}}; | |
| 11 this.refreshLoop(); | |
| 12 } | |
| 13 | |
| 14 refreshLoop() { | |
| 15 setTimeout(() => { | |
| 16 requestAnimationFrame(() => { | |
| 17 this.refresh(); | |
| 18 }); | |
| 19 }, 5000); | |
| 20 } | |
| 21 | |
| 22 refresh() { | |
| 23 fetch('state') | |
| 24 .then((response) => { | |
| 25 return response.json(); | |
| 26 }) | |
| 27 .then((newState) => { | |
| 28 this.latestState = newState; | |
| 29 this.refreshLoop(); | |
| 30 }); | |
| 31 } | |
| 32 | |
| 33 static get styles() { | |
| 34 return css` | |
| 35 :host { | |
| 36 display: inline-block; | |
| 37 border: 2px solid gray; | |
| 38 padding: 5px; | |
| 39 }`; | |
| 40 } | |
| 41 | |
| 42 render() { | |
| 43 const sourcesTable = (clients) => { | |
| 44 const clientRow = (client) => { | |
| 45 const d = client.reconnectedPatchSource; | |
|
663
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
46 const now = Date.now() / 1000; |
|
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
47 const dispSec = (sec) => ( |
|
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
48 Math.abs(sec) > now - 1 ? '--' : |
|
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
49 Math.abs(sec) > 3600 ? |
|
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
50 `${Math.round(sec/3600)} hr` : Math.abs(sec) > 60 ? |
|
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
51 `${Math.round(sec/60)} min` : |
|
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
52 `${Math.round(sec*10)/10} sec`); |
| 650 | 53 return html` |
| 54 <tr> | |
| 55 <td><a href="/rdf/browse/?graph=${d.url}">[browse]</a> <a href="${d.url}">${d.url}</a></td> | |
| 56 <td>${d.fullGraphReceived}</td> | |
| 57 <td>${d.patchesReceived}</td> | |
|
663
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
58 <td>${dispSec(d.time.open - now)}</td> |
|
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
59 <td>${dispSec(d.time.fullGraph - d.time.open)}</td> |
|
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
60 <td>${dispSec(d.time.latestPatch - now)}</td> |
| 650 | 61 </tr> |
| 62 `; | |
| 63 }; | |
| 64 | |
| 65 return html` | |
| 66 <table> | |
| 67 <thead> | |
| 68 <tr> | |
| 69 <th>patch source</th> | |
| 70 <th>full graph recv</th> | |
| 71 <th>patches recv</th> | |
|
663
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
72 <th>time open (rel)</th> |
|
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
73 <th>time fullGraph (after open)</th> |
|
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
74 <th>time latest patch (rel)</th> |
| 650 | 75 </tr> |
| 76 </thead> | |
| 77 <tbody> | |
| 78 ${clients.map(clientRow)} | |
| 79 </tbody> | |
| 80 </table> | |
| 81 `; | |
| 82 }; | |
| 83 | |
| 84 const handlersTable = (handlers) => { | |
| 85 const handlerRow = (d) => { | |
| 86 return html` | |
| 87 <tr> | |
| 88 <td>${d.created}</td> | |
| 89 <td>${d.ageHours}</td> | |
| 90 <td><a href="/rdf/browse/?graph=/sse_collector/graph/${d.streamId}">${d.streamId}</a></td> | |
| 91 <td>${d.foafAgent}</td> | |
| 92 <td>${d.userAgent}</td> | |
| 93 </tr> | |
| 94 `; | |
| 95 }; | |
| 96 | |
| 97 return html` | |
| 98 <table> | |
| 99 <thead> | |
| 100 <tr> | |
| 101 <th>created</th> | |
| 102 <th>age hours</th> | |
| 103 <th>stream</th> | |
| 104 <th>foaf agent</th> | |
| 105 <th>user agent</th> | |
| 106 </tr> | |
| 107 </thead> | |
| 108 <tbody> | |
| 109 ${handlers.map(handlerRow)} | |
| 110 </tbody> | |
| 111 </table> | |
| 112 `; | |
| 113 }; | |
| 114 | |
| 115 if (!this.latestState) { | |
| 116 return 'loading...'; | |
| 117 } | |
| 118 const d = this.latestState.graphClients; | |
| 119 return html` | |
| 120 <div> | |
| 121 <p> | |
|
663
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
122 Graph: ${d.statements ? d.statements.len : 0} statements |
| 650 | 123 </p> |
| 124 | |
| 125 <p> | |
| 126 Sources: | |
|
663
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
127 ${sourcesTable(d.clients || [])} |
| 650 | 128 </p> |
| 129 | |
| 130 <p> | |
| 131 Listening clients: | |
|
663
25b418e2659e
prettier times. new streamed-graph browse link
drewp@bigasterisk.com
parents:
650
diff
changeset
|
132 ${handlersTable(d.sseHandlers || [])} |
| 650 | 133 </p> |
| 134 </div>`; | |
| 135 } | |
| 136 } | |
| 137 customElements.define('collector-state', CollectorState); |