light9 Changeset - 5acdf209394d

Changeset - 5acdf209394d

Parent rev.

Child rev.

[Not reviewed]

default

0 3 2

Drew Perttula - 6 years ago 2019-06-02 11:38:31
drewp@bigasterisk.com

start live stats displayer on home page
Ignore-this: e28bc66c441cb72c41aff1bd8d0bf55e

5 files changed with 200 insertions and 10 deletions:

light9/web/index.html

light9/web/stats-line.js

151

light9/web/stats_test.html

makefile

package.json

0 comments (0 inline, 0 general)

light9/web/index.html

➞

Show inline comments

@@ @@ -5,15 +5,20 @@ @@
     <meta charset="utf-8" />
     <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
     <link rel="stylesheet" href="/style.css">
     <link rel="import" href="/lib/polymer/polymer.html">
   </head>
   <body>
       <script type="module"  src="stats-line.js"></script>
     <dom-module id="service-button-row">
       <template>
         <style>
          :host { padding-bottom: 10px;  }
          a {
              color: #7d7dec;
+         }
          div {
              display: flex;
              justify-content: space-between;
@@ @@ -26,40 +31,54 @@ @@
              display: inline-block;
              margin-right: 3px;
              flex-grow: 1;
+         }
          .window {
+         }
          .serviceGrid > td {
              border: 5px solid red;
              display: inline-block;
+         }
          :host > div { display: inline-block; vertical-align: top; }
          :host > div:nth-child(2) { width: 9em; }
          :host > div:nth-child(3) { width: 5em; }
          :host > div:nth-child(4) { width: 3em; }
          :host > div:nth-child(5) { width: 50px; }
         </style>
         <div>
           <span class="left"><a class="big" href="{{name}}/">{{name}}</a></span>
           <span class="window"><button on-click="click">window</button></span>
           <span><a href="{{name}}/stats/">stats</a></span>
           <span id="stats"></span>
         </div>
           <div class="left"><a class="big" href="{{name}}/">{{name}}</a></div>
           <div class="window"><button on-click="click">window</button></div>
           <div><a href="{{name}}/stats/">stats</a></div>
           <div id="stats"><stats-line name="{{name}}"></div>
       </template>
       <script>
        HTMLImports.whenReady(function () {
            Polymer({
                is: "service-button-row",
                properties: {
                    name: String,
                },
              ready: function() {
              },
                click: function() {
                    window.open(this.name + '/', '_blank',
                                'scrollbars=1,resizable=1,titlebar=0,location=0');
+               }
                },
            });
        });
       </script>
     </dom-module>
     <h1>light9 home page</h1>
     <div style="float: left">
       <service-button-row name="."></service-button-row>
     <div style="display: grid">
       <service-button-row name="rdfdb"></service-button-row>
       <hr>
       <service-button-row name="ascoltami"></service-button-row>
       <hr>
       <service-button-row name="picamserve"></service-button-row>
       <service-button-row name="vidref"></service-button-row>

light9/web/stats-line.js

➞

Show inline comments

@@ new file 100644 @@
 import { LitElement, TemplateResult, html, css } from '/node_modules/lit-element/lit-element.js';
 import { rounding }  from '/node_modules/significant-rounding/index.js';
 class StatsLine extends LitElement {
     static get properties() {
         return {
             name: {
                 type: String,
                 reflect: true,
             },
             stats: Object // to be refreshed with ws
         };
+    }
     updated(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
             if (propName == 'name') {
                 const reload = () => {
                     fetch(this.name + '/stats/?format=json').then((resp) => {
                         if (resp.ok) {
                     resp.json().then((msg) => {
                         this.stats = msg;
                     setTimeout(reload, 1000);
                     });
+                        }
                 });
+                }
                 reload();
+            }
         });
+    }
     static get styles() {
         return css`
         :host {
             border: 2px solid #46a79f;
+        }
         table {
             border-collapse: collapse;
             background: #000;
             color: #ccc;
             font-family: sans-serif;
+        }
         th, td {
             outline: 1px solid #000;
+        }
         th {
             padding: 2px 4px;
             background: #2f2f2f;
+        }
         td {
             padding: 0;
             vertical-align: top;
             text-align: center;
+        }
         td.val {
             padding: 2px 4px;
             background: #3b5651;
+        }
         .recents {
             display: flex;
             align-items: flex-end;
             height: 30px;
+        }
         .recents > div {
             width: 3px;
             background: red;
             border-right: 1px solid black;
+        }
         .bigInt {
             min-width: 6em;
+        }
         `;
+    }
     render() {
         const table = (d, path) => {
             const cols = Object.keys(d);
             cols.sort();
             const th = (col) =>  {
                 return html`<th>${col}</th>`;
             };
             const td = (col)  => {
                 const cell = d[col];
                 return html`${drawLevel(cell, path.concat(col))}`;
             };
             return html`
              <table>
                <tr>
                  ${cols.map(th)}
                </tr>
                  <tr>
                    ${cols.map(td)}
                  </tr>
              </table>`;
         };
         const tdWrap = (content) => {
             return html`<td>${content}</td>`;
+        }
         const recents = (d, path) => {
             const hi = Math.max.apply(null, d.recents);
             const scl = 30 / hi;
             const bar = (y) => {
                 let color;
                 if (y < hi * .85) {
                     color="#6a6aff";
                 } else {
                     color="#d09e4c";
+                }
                 return html`<div class="bar" style="height: ${y * scl}px; background: ${color};"></div>`;
             };
             return tdWrap(table({
                 average: rounding(d.average, 3),
                 recents: html`<div class="recents">${d.recents.map(bar)}</div>`
             }, path));
         };
         const pmf = (d, path) => {
             return tdWrap(table({
                 count: d.count,
                 'values [ms]': html`
                    <div>mean=${rounding(d.mean*1000, 3)}</div>
                    <div>sd=${rounding(d.stddev*1000, 3)}</div>
                    <div>99=${rounding(d['99percentile']*1000, 3)}</div>
+                 `
             }, path));
         };
         const drawLevel = (d, path) => {
             if (typeof d === 'object') {
                 if (d instanceof TemplateResult) {
                     return html`<td class="val">${d}</td>`;
                 } else if (d.count !== undefined && d.min !== undefined) {
                     return pmf(d, path);
                 } else if (d.average !== undefined && d.recents !== undefined) {
                     return recents(d, path);
                 } else {
                     return tdWrap(table(d, path));
+                }
             } else {
                 return html`<td class="val bigInt">${d}</td>`;
+            }
         };
         return table(this.stats || {}, []);
+    }
+}
 customElements.define('stats-line', StatsLine);

light9/web/stats_test.html

➞

Show inline comments

@@ new file 100644 @@
 <!doctype html>
 <html>
   <head>
     <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
   </head>
   <body>
     <script type="module"  src="stats-line.js"></script>
     <h1>stats_test page</h1>
     <stats-line name="collector"></stats-line>
   </body>
 </html>

makefile

➞

Show inline comments

@@ @@ -31,12 +31,14 @@ bower: node_modules/bower/bin/bower bin/ @@
 	cd light9/web/lib; nodejs ../../../node_modules/bower/bin/bower install
 npm:
 	npm install
 	(cd node_modules/n3; nodejs ../browserify/bin/cmd.js --standalone N3 --require n3 -o n3-browser.js)
 	node_modules/browserify/bin/cmd.js light9/web/lib/debug/src/browser.js -o light9/web/lib/debug/debug-build.js --standalone debug
 	perl -pi -e "s,'lit-html,'/node_modules/lit-html,; s,lit-html',lit-html/lit-html.js'," node_modules/lit-element/lit-element.js
 	perl -pi -e 's/module.exports = rounding/export { rounding }/' node_modules/significant-rounding/index.js
 bin/ascoltami2: gst_packages link_to_sys_packages
 effect_node_setup: create_virtualenv packages binexec install_python_deps
 tkdnd_build:

package.json

➞

Show inline comments

@@ @@ -6,23 +6,27 @@ @@
   "description": "Mini instructions:",
   "main": "index.js",
   "directories": {
     "test": "test"
   },
   "dependencies": {
-    "@webcomponents/shadycss": "^1.1.3",
+    "@webcomponents/shadycss": "^1.3.1",
     "@webcomponents/webcomponentsjs": "^1.2.0",
     "bower": "^1.8.4",
     "browserify": "^16.2.3",
     "chai": "^3.5.0",
     "coffeelint": "^2.1.0",
     "coffeescript": "^2.3.0",
     "d3": "^5.1.0",
     "esmify": "^2.1.1",
     "lit-element": "^2.1.0",
     "lit-html": "^1.1.0",
     "mocha": "^2.5.3",
     "n3": "^1.0.0-alpha",
     "pixi.js": "^4.7.3",
     "significant-rounding": "^2.0.0",
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {
     "mocha": "^2.5.3"
   },
   "scripts": {

0 comments (0 inline, 0 general)