Mercurial > code > home > repos > homeauto

<!DOCTYPE html>
<html>
  <head>
    <title>collector</title>
    <meta charset="utf-8" />
  </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>
    <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>
author	drewp@bigasterisk.com
date	Thu, 26 Aug 2021 18:03:30 -0700
parents	6d84cd3eb277
children