Mercurial > code > home > repos > homeauto
changeset 1578:807282fb3136
fix deploy; redo stats display page
| author | drewp@bigasterisk.com |
|---|---|
| date | Thu, 26 Aug 2021 18:03:30 -0700 |
| parents | 6ddc5e037f15 |
| children | f71c9ceb948e |
| files | service/collector/Dockerfile service/collector/index.html |
| diffstat | 2 files changed, 142 insertions(+), 146 deletions(-) [+] |
line wrap: on
line diff
--- a/service/collector/Dockerfile Thu Aug 26 16:33:05 2021 -0700 +++ b/service/collector/Dockerfile Thu Aug 26 18:03:30 2021 -0700 @@ -1,13 +1,14 @@ -FROM bang5:5000/base_x86 +FROM bang5:5000/base_basic WORKDIR /opt -RUN apt-get install -y vim net-tools iputils-ping +RUN echo 2021-08-26 && apt-get update +RUN apt-get install -y vim net-tools iputils-ping git COPY requirements.txt ./ RUN pip3 install --index-url https://projects.bigasterisk.com/ --extra-index-url https://pypi.org/simple -Ur requirements.txt # not sure why this doesn't work from inside requirements.txt -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' +RUN pip3 install -U 'https://github.com/drewp/cyclone/archive/python3.zip' COPY *.py *.html req* *.ini ./
--- a/service/collector/index.html Thu Aug 26 16:33:05 2021 -0700 +++ b/service/collector/index.html Thu Aug 26 18:03:30 2021 -0700 @@ -1,149 +1,8 @@ -<!doctype html> +<!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="${d.url.replace('/events', '')}">[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> + <meta charset="utf-8" /> </head> <body class="rdfBrowsePage"> <h1>collector</h1> @@ -151,6 +10,142 @@ <p><a href="/rdf/browse/?graph=/sse_collector/graph/home">See output for graph/home</a></p> <collector-state></collector-state> + <script type="module"> + import { LitElement, html, css, customElement } from "https://cdn.skypack.dev/lit-element"; + export class CollectorState extends LitElement { + static get properties() { + return { + latestState: { type: Object }, + }; + } + constructor() { + super(); + } + + 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="${d.url.replace("/events", "")}">[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> </body> </html>