Mercurial > code > home > repos > homeauto

<!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>
author	drewp <drewp@bigasterisk.com>
date	Thu, 13 Feb 2020 10:17:36 -0800
parents	4322e8b1481f
children	44be3cd4cf67