Mercurial > code > home > repos > homeauto
changeset 715:fe9cfc088a49
consolidate debug page into ./index.html for now
Ignore-this: 56775a500165c5c707238d99fbdb6739
| author | drewp@bigasterisk.com |
|---|---|
| date | Tue, 04 Feb 2020 22:41:51 -0800 |
| parents | e4d31cfa37f0 |
| children | f102d1a40a9a |
| files | service/collector/Dockerfile service/collector/index.html service/collector/sse_collector.py service/collector/static/index.html service/collector/static/state.js |
| diffstat | 5 files changed, 159 insertions(+), 163 deletions(-) [+] |
line wrap: on
line diff
--- a/service/collector/Dockerfile Tue Feb 04 17:07:05 2020 -0800 +++ b/service/collector/Dockerfile Tue Feb 04 22:41:51 2020 -0800 @@ -10,8 +10,7 @@ RUN pip3 install --index-url https://projects.bigasterisk.com/ --extra-index-url https://pypi.org/simple -U 'https://github.com/drewp/cyclone/archive/python3.zip' COPY stubs ./stubs -COPY *.py req* *.ini ./ -COPY static ./static +COPY *.py *.html req* *.ini ./ EXPOSE 9072
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/service/collector/index.html Tue Feb 04 22:41:51 2020 -0800 @@ -0,0 +1,156 @@ +<!doctype html> +<html> + <head> + <title>collector</title> + <meta charset="utf-8"> + <script src="/lib/webcomponents/2.4.0/webcomponents-bundle.js"></script> + <script type="module"> + import { LitElement, TemplateResult, html, css } from '/lib/lit-element/2.2.0/lit-element-custom.js'; + + class CollectorState extends LitElement { + static get properties() { + return { + latestState: { type: Object } + }; + } + firstUpdated() { + this.latestState = {graphClients: {}}; + this.refresh(); + } + + delayedRefresh() { + setTimeout(() => { + requestAnimationFrame(() => { + this.refresh(); + }); + }, 5000); + } + + refresh() { + fetch('state') + .then((response) => { + return response.json(); + }) + .then((newState) => { + this.latestState = newState; + this.delayedRefresh(); + }); + } + + static get styles() { + return css` + :host { + display: inline-block; + border: 2px solid gray; + padding: 5px; + }`; + } + + render() { + const sourcesTable = (clients) => { + const clientRow = (client) => { + const d = client.reconnectedPatchSource; + const now = Date.now() / 1000; + const dispSec = (sec) => ( + Math.abs(sec) > now - 1 ? '--' : + Math.abs(sec) > 3600 ? + `${Math.round(sec/3600)} hr` : Math.abs(sec) > 60 ? + `${Math.round(sec/60)} min` : + `${Math.round(sec*10)/10} sec`); + return html` + <tr> + <td><a href="/rdf/browse/?graph=${d.url}">[browse]</a> <a href="${d.url}">${d.url}</a></td> + <td>${d.fullGraphReceived}</td> + <td>${d.patchesReceived}</td> + <td>${dispSec(d.time.open - now)}</td> + <td>${dispSec(d.time.fullGraph - d.time.open)}</td> + <td>${dispSec(d.time.latestPatch - now)}</td> + </tr> + `; + }; + + return html` + <table> + <thead> + <tr> + <th>patch source</th> + <th>full graph recv</th> + <th>patches recv</th> + <th>time open (rel)</th> + <th>time fullGraph (after open)</th> + <th>time latest patch (rel)</th> + </tr> + </thead> + <tbody> + ${clients.map(clientRow)} + </tbody> + </table> + `; + }; + + const handlersTable = (handlers) => { + const handlerRow = (d) => { + return html` + <tr> + <td>${d.created}</td> + <td>${d.ageHours}</td> + <td><a href="/rdf/browse/?graph=/sse_collector/graph/${d.streamId}">${d.streamId}</a></td> + <td>${d.foafAgent}</td> + <td>${d.userAgent}</td> + </tr> + `; + }; + + return html` + <table> + <thead> + <tr> + <th>created</th> + <th>age hours</th> + <th>stream</th> + <th>foaf agent</th> + <th>user agent</th> + </tr> + </thead> + <tbody> + ${handlers.map(handlerRow)} + </tbody> + </table> + `; + }; + + if (!this.latestState) { + return 'loading...'; + } + const d = this.latestState.graphClients; + return html` + <div> + <p> + Graph: ${d.statements ? d.statements.len : 0} statements + </p> + + <p> + Sources: + ${sourcesTable(d.clients || [])} + </p> + + <p> + Listening clients: + ${handlersTable(d.sseHandlers || [])} + </p> + </div>`; + } + } + customElements.define('collector-state', CollectorState); + + </script> + </head> + <body class="rdfBrowsePage"> + <h1>collector</h1> + + <p><a href="/rdf/browse/?graph=/sse_collector/graph/home">See output for graph/home</a></p> + + <collector-state></collector-state> + + </body> +</html>
--- a/service/collector/sse_collector.py Tue Feb 04 17:07:05 2020 -0800 +++ b/service/collector/sse_collector.py Tue Feb 04 22:41:51 2020 -0800 @@ -31,7 +31,7 @@ from patchablegraph.patchsource import ReconnectingPatchSource -from sse_collector_config import config +from collector_config import config #SourceUri = NewType('SourceUri', URIRef) # doesn't work class SourceUri(URIRef): pass @@ -450,8 +450,7 @@ cyclone.web.Application( handlers=[ (r"/()", cyclone.web.StaticFileHandler, { - "path": "static", "default_filename": "index.html"}), - (r'/static/(.*)',cyclone.web.StaticFileHandler, {"path": "static"}), + "path": ".", "default_filename": "index.html"}), (r'/state', State), (r'/graph/', GraphList), (r'/graph/(.+)', PatchSink),
--- a/service/collector/static/index.html Tue Feb 04 17:07:05 2020 -0800 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,21 +0,0 @@ -<!doctype html> -<html> - <head> - <title>collector</title> - <meta charset="utf-8"> - <script src="/lib/webcomponents/2.4.0/webcomponents-bundle.js"></script> - <script src="/lib/require/require-2.3.3.js"></script> - <script src="/rdf/common_paths_and_ns.js"></script> - - <script src="/rdf/streamed-graph.bundle.js"></script> - - <script type="module" src="static/state.js"></script> - </head> - <body class="rdfBrowsePage"> - <h1>collector</h1> - - <p><a href="/rdf/browse/?graph=/sse_collector/graph/home">See output for graph/home</a></p> - - <collector-state></collector-state> - </body> -</html>
--- a/service/collector/static/state.js Tue Feb 04 17:07:05 2020 -0800 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,137 +0,0 @@ -import { LitElement, TemplateResult, html, css } from '/lib/lit-element/2.2.0/lit-element-custom.js'; - -class CollectorState extends LitElement { - static get properties() { - return { - latestState: { type: Object } - }; - } - firstUpdated() { - this.latestState = {graphClients: {}}; - this.refreshLoop(); - } - - refreshLoop() { - setTimeout(() => { - requestAnimationFrame(() => { - this.refresh(); - }); - }, 5000); - } - - refresh() { - fetch('state') - .then((response) => { - return response.json(); - }) - .then((newState) => { - this.latestState = newState; - this.refreshLoop(); - }); - } - - static get styles() { - return css` - :host { - display: inline-block; - border: 2px solid gray; - padding: 5px; - }`; - } - - render() { - const sourcesTable = (clients) => { - const clientRow = (client) => { - const d = client.reconnectedPatchSource; - const now = Date.now() / 1000; - const dispSec = (sec) => ( - Math.abs(sec) > now - 1 ? '--' : - Math.abs(sec) > 3600 ? - `${Math.round(sec/3600)} hr` : Math.abs(sec) > 60 ? - `${Math.round(sec/60)} min` : - `${Math.round(sec*10)/10} sec`); - return html` - <tr> - <td><a href="/rdf/browse/?graph=${d.url}">[browse]</a> <a href="${d.url}">${d.url}</a></td> - <td>${d.fullGraphReceived}</td> - <td>${d.patchesReceived}</td> - <td>${dispSec(d.time.open - now)}</td> - <td>${dispSec(d.time.fullGraph - d.time.open)}</td> - <td>${dispSec(d.time.latestPatch - now)}</td> - </tr> - `; - }; - - return html` - <table> - <thead> - <tr> - <th>patch source</th> - <th>full graph recv</th> - <th>patches recv</th> - <th>time open (rel)</th> - <th>time fullGraph (after open)</th> - <th>time latest patch (rel)</th> - </tr> - </thead> - <tbody> - ${clients.map(clientRow)} - </tbody> - </table> - `; - }; - - const handlersTable = (handlers) => { - const handlerRow = (d) => { - return html` - <tr> - <td>${d.created}</td> - <td>${d.ageHours}</td> - <td><a href="/rdf/browse/?graph=/sse_collector/graph/${d.streamId}">${d.streamId}</a></td> - <td>${d.foafAgent}</td> - <td>${d.userAgent}</td> - </tr> - `; - }; - - return html` - <table> - <thead> - <tr> - <th>created</th> - <th>age hours</th> - <th>stream</th> - <th>foaf agent</th> - <th>user agent</th> - </tr> - </thead> - <tbody> - ${handlers.map(handlerRow)} - </tbody> - </table> - `; - }; - - if (!this.latestState) { - return 'loading...'; - } - const d = this.latestState.graphClients; - return html` - <div> - <p> - Graph: ${d.statements ? d.statements.len : 0} statements - </p> - - <p> - Sources: - ${sourcesTable(d.clients || [])} - </p> - - <p> - Listening clients: - ${handlersTable(d.sseHandlers || [])} - </p> - </div>`; - } -} -customElements.define('collector-state', CollectorState);