Mercurial > code > home > repos > homeauto

changeset 1465:9d22aa924e8a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
prettier times. new streamed-graph browse link Ignore-this: beb72354711b5b68777f622c28fea740 darcs-hash:f86e69afb36753d1afc51f92b5c75ba80b5055d6
author drewp <drewp@bigasterisk.com>
date Wed, 18 Dec 2019 17:23:34 -0800
parents 32d134dbfb1e
children bf05f33c3b3a
files service/collector/static/index.html service/collector/static/state.js
diffstat 2 files changed, 21 insertions(+), 14 deletions(-) [+]
line wrap: on
line diff
--- a/service/collector/static/index.html	Tue Dec 17 23:16:53 2019 -0800
+++ b/service/collector/static/index.html	Wed Dec 18 17:23:34 2019 -0800
@@ -3,19 +3,19 @@
   <head>
     <title>collector</title>
     <meta charset="utf-8">
-    <script src="/lib/polymer/1.0.9/webcomponentsjs/webcomponents.min.js"></script>
+    <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>
 
-    <link rel="stylesheet" href="/rdf/browse/style.css">
+    <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">output for graph/home</a></p>
-
-   <collector-state></collector-state>
+    <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 Dec 17 23:16:53 2019 -0800
+++ b/service/collector/static/state.js	Wed Dec 18 17:23:34 2019 -0800
@@ -43,14 +43,21 @@
         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>${d.time.open}</td>
-                    <td>${d.time.fullGraph}</td>
-                    <td>${d.time.latestPatch}</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>
                 `;
             };
@@ -62,9 +69,9 @@
                     <th>patch source</th>
                     <th>full graph recv</th>
                     <th>patches recv</th>
-                    <th>time open</th>
-                    <th>time fullGraph</th>
-                    <th>time latest patch</th>
+                    <th>time open (rel)</th>
+                    <th>time fullGraph (after open)</th>
+                    <th>time latest patch (rel)</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -112,17 +119,17 @@
         return html`
           <div>
             <p>
-              Graph: ${d.statements.len} statements
+              Graph: ${d.statements ? d.statements.len : 0} statements
             </p>
 
             <p>
               Sources:
-              ${sourcesTable(d.clients)}
+              ${sourcesTable(d.clients || [])}
             </p>
 
             <p>
               Listening clients:
-              ${handlersTable(d.sseHandlers)}
+              ${handlersTable(d.sseHandlers || [])}
             </p>
           </div>`;
     }