Mercurial > code > home > repos > collector

changeset 8:c48b7bbc3a64

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refactor
author drewp@bigasterisk.com
date Fri, 25 Nov 2022 20:32:05 -0800
parents fd73907cef40
children 36471461685f
files index.html src/CollectorState.ts
diffstat 2 files changed, 136 insertions(+), 139 deletions(-) [+]
line wrap: on
line diff
--- a/index.html	Fri Nov 25 20:31:00 2022 -0800
+++ b/index.html	Fri Nov 25 20:32:05 2022 -0800
@@ -3,149 +3,14 @@
   <head>
     <title>collector</title>
     <meta charset="utf-8" />
+    <script type="module" src="https://bigasterisk.com/lib/bigast/v1/loginBar.js"></script>
+    <script type="module" src="src/CollectorState.ts"></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>
-    <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>
+    <hr>
+    <bigast-loginbar></bigast-loginbar>
   </body>
 </html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/CollectorState.ts	Fri Nov 25 20:32:05 2022 -0800
@@ -0,0 +1,132 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+export { StreamedGraph } from "@bigasterisk/streamed-graph";
+
+@customElement("collector-state")
+export class CollectorState extends LitElement {
+  @property() latestState: { graphClients: any } ;
+
+  constructor() {
+    super();
+    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: Array<any>) => {
+      const clientRow = (client: any) => {
+        const d = client.reconnectedPatchSource;
+        const now = Date.now() / 1000;
+        const dispSec = (sec: number) =>
+          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`
+      rendered!
+        <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: Array<any>) => {
+      const handlerRow = (d: any) => {
+        return html`
+          <tr>
+            <td>${d.created}</td>
+            <td>${d.ageHours}</td>
+            <td><a href="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>`;
+  }
+}