Merge pull request #107 from cjkas/feat/webui-on-ops

feat: web UI on socket protocol 2 (step 2b)

data-src/index.html

@@ -179,10 +179,6 @@
                                 </select>
                                 <label for="fldPinEntry">Security Type</label>
                             </div>
-                            <div id="divPermissions" class="field-group" style="display:none;vertical-align:middle;float:right;width:auto;">
-                                <input id="cbSecureConfigOnly" data-bind="security.permissions.configOnly" type="checkbox" style="display:inline-block;" />
-                                <label for="cbSecureConfigOnly" style="display:inline-block;cursor:pointer;">Secure Config Only</label>
-                            </div>
                         </div>
                         <div id="divPinSecurity" style="display:none;">
                             <div class="field-group" style="text-align:center;">

data-src/js/client.js

@@ -68,7 +68,27 @@ class ProtoClient {
     // unless a listener calls close(), as the UI does once /loginContext says
     // a login is needed (docs/SECURITY_PLAN.md).
     on(name, cb) { (this.listeners[name] = this.listeners[name] || []).push(cb); }
-    emit(name, d) { for (const cb of this.listeners[name] || []) cb(d); }
+    off(name, cb) { this.listeners[name] = (this.listeners[name] || []).filter((x) => x !== cb); }
+    emit(name, d) { for (const cb of (this.listeners[name] || []).slice()) cb(d); }
+    // The next event of that name that match(d) accepts, or null after ms.
+    // An edit's events follow its reply, so this is how a caller gets the
+    // item the edit left: the model has it by then.
+    waitFor(name, match, ms) {
+        return new Promise((resolve) => {
+            let timer = null;
+            const cb = (d) => {
+                if (match && !match(d)) return;
+                this.off(name, cb);
+                this.clearTimeout(timer);
+                resolve(d);
+            };
+            this.on(name, cb);
+            timer = this.setTimeout(() => {
+                this.off(name, cb);
+                resolve(null);
+            }, ms);
+        });
+    }
 
     connect() {
         if (!this.stopped && (this.ws || this.reconnectTimer)) return;

data-src/js/views.js

@@ -0,0 +1,80 @@
+// What the web UI's panels bind, made from socket protocol 2's items, events
+// and settings (docs/PROTOCOL.md), and back.  The UI kept its names where they
+// differ from the protocol's: a frame's address and rcode, a scan's RSSI, the
+// network panel's wifi, ethernet and ip objects, the radio's type.  The minify
+// step joins this file into index.js; Node loads it on its own for the tests
+// (test/js).
+class ProtoViews {
+    // A settings section's reply with what the device left out at its default
+    // filled in, so a form shows what is saved rather than what it showed
+    // before.
+    static settings(schema, section, d) {
+        return schema.fill(Object.assign({}, d), ProtoViews.SETTINGS[section]);
+    }
+    // A group with its shades whole, where the device sends their ids.
+    static group(model, group) {
+        if (!group) return group;
+        const view = Object.assign({}, group);
+        view.linkedShades = group.linkedShades.map((id) => model.shades.get(id) || { shadeId: id, name: `Shade ${id}`, remoteAddress: 0 });
+        return view;
+    }
+    // A received frame as the frames list and remote linking read it.
+    static frame(schema, d) {
+        const f = schema.fill(Object.assign({}, d), ['encKey', 'remoteAddress', 'lastRollingCode', 'command', 'rawCmd', 'rssi', 'bits', 'proto',
+            'valid', 'pulses']);
+        return { encKey: f.encKey, address: f.remoteAddress, rcode: f.lastRollingCode, command: f.command, rawCmd: f.rawCmd, rssi: f.rssi,
+            bits: f.bits, proto: f.proto, valid: f.valid, stepSize: d.stepSize, pulses: f.pulses };
+    }
+    static scan(schema, d) {
+        const s = schema.fill(Object.assign({}, d), ['scanning', 'testFreq', 'testRssi', 'frequency', 'rssi']);
+        return { scanning: s.scanning, testFreq: s.testFreq, testRSSI: s.testRssi, frequency: s.frequency, RSSI: s.rssi };
+    }
+    // The network section as the panel binds it: WiFi, Ethernet and the
+    // address each in an object of their own, the connection as connType.
+    static network(schema, d) {
+        const n = ProtoViews.settings(schema, 'network', d);
+        const view = { connType: n.connMode, hasEthernet: n.hasEthernet, wifi: {}, ethernet: {}, ip: {} };
+        for (const name of ProtoViews.WIFI) view.wifi[name] = n[name];
+        for (const name of ProtoViews.ETHERNET) view.ethernet[name] = n[name];
+        for (const name of ProtoViews.IP) view.ip[name] = n[name];
+        return view;
+    }
+    // The radio section as the panel binds it, where the bit length is the
+    // radio's type.
+    static radio(schema, d) {
+        const config = ProtoViews.settings(schema, 'radio', d);
+        config.type = config.bitLength;
+        delete config.bitLength;
+        return config;
+    }
+    // A save of the radio panel's config: everything but what is only shown.
+    static radioSave(config) {
+        const fields = { section: 'radio', bitLength: config.type };
+        for (const name of ProtoViews.SETTINGS.radio) {
+            if (name !== 'bitLength' && name !== 'radioInit') fields[name] = config[name];
+        }
+        return fields;
+    }
+    // An op's refusal as the UI's error box shows it.  A shade whose settings
+    // don't add up carries the reason's number, which the errors table
+    // describes.
+    static opError(name, err) {
+        const e = { htmlError: err.code, service: name, desc: err.desc };
+        if (err.data && typeof err.data.validation === 'number' && err.data.validation !== 0) e.code = err.data.validation;
+        return e;
+    }
+}
+ProtoViews.WIFI = ['ssid', 'hasPassphrase', 'roaming', 'hidden'];
+ProtoViews.ETHERNET = ['boardType', 'phyType', 'CLKMode', 'phyAddress', 'PWRPin', 'MDCPin', 'MDIOPin'];
+ProtoViews.IP = ['dhcp', 'ip', 'gateway', 'subnet', 'dns1', 'dns2'];
+// The fields of each settings section, as getSettings sends them
+// (src/DeviceOps.cpp).
+ProtoViews.SETTINGS = {
+    general: ['hostname', 'ssdpBroadcast', 'ntpServer', 'posixZone'],
+    network: ['connMode', 'hasEthernet'].concat(ProtoViews.WIFI, ProtoViews.ETHERNET, ProtoViews.IP),
+    mqtt: ['enabled', 'pubDisco', 'protocol', 'hostname', 'port', 'username', 'hasPassword', 'rootTopic', 'discoTopic'],
+    security: ['securityType', 'username', 'hasPassword', 'hasPin'],
+    radio: ['bitLength', 'proto', 'enabled', 'TXPin', 'RXPin', 'SCKPin', 'MOSIPin', 'MISOPin', 'CSNPin', 'frequency', 'rxBandwidth',
+        'deviation', 'txPower', 'noiseDetection', 'radioInit']
+};
+if (typeof module !== 'undefined' && module.exports) module.exports = { ProtoViews };

data-src/login.html

@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="app.css?v=2.4.0" type="text/css" />
-    <link rel="icon" type="image/png" href="favicon.png" />
-    <script type="text/javascript" src="index.js?v=2.4.0"></script>
-</head>
-<body onload="general.loadLogin();">
-    <div id="divContainer" class="container" data-securitytype="0">
-        <h1 style="text-align: center;"><img src="icon.png" style="width:127px;margin-left:1px;margin-top:-10px;" /></h1>
-        <div id="divLoginPnl" class="login-content" style="position:relative;">
-            <div style="max-width:270px;margin:0px auto;">
-                <form id="frmLogin" action="/login" method="post" class="login-form" onsubmit="general.login(event); return false;">
-                    <input id="fldPin" type="hidden" name="pin">
-                    <div id="divPinSecurity" style="display:none;">
-                        <div class="field-group" style="text-align:center;">
-                            <div id="fldPinEntry" style="display:inline-block;" onkeydown="general.pinKeyPressed(event);">
-                                <input class="pin-digit" maxlength="1" data-bind="security.pin.d0" onfocus="general.pinDigitFocus(event);">
-                                <input class="pin-digit" maxlength="1" data-bind="security.pin.d1" onfocus="general.pinDigitFocus(event);">
-                                <input class="pin-digit" maxlength="1" data-bind="security.pin.d2" onfocus="general.pinDigitFocus(event);">
-                                <input class="pin-digit" maxlength="1" data-bind="security.pin.d3" onfocus="general.pinDigitFocus(event);">
-                            </div>
-                            <label for="fldPinEntry" style="margin-top:7px;">Enter Pin</label>
-                        </div>
-                    </div>
-                    <div id="divPasswordSecurity" style="display:none;">
-                        <div class="field-group">
-                            <input id="fldUsername" name="username" type="text" autocomplete="username" data-bind="security.username" length=32 placeholder="Username">
-                            <label for="fldUsername">Username</label>
-                        </div>
-                        <div class="field-group">
-                            <input id="fldPassword" name="password" type="password" autocomplete="current-password" data-bind="security.password" length=32 placeholder="Password">
-                            <label for="fldPassword">Password</label>
-                        </div>
-                    </div>
-                    <div style="text-align:center;"><span id="spanLoginMessage" style="color:red"></span></div>
-                    <div class="button-container">
-                        <button id="btnLogin" type="submit" value="Submit">
-                            Login
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-    <script type="text/javascript">
-    </script>
-</body>
-</html>

data-src/main.css

@@ -868,3 +868,14 @@ div.frame-pulses {
         padding-right:14px;
     }
 }
+/* Shown when the device speaks another protocol version than this page. */
+.version-banner {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    padding: 8px 12px;
+    background: orangered;
+    color: white;
+    font-size: 14px;
+    text-align: center;
+}

minify.py

@@ -58,7 +58,7 @@ PNG_EXTENSIONS = {".png"}
 # comes before index.js, which uses it.  A source listed here isn't copied on
 # its own.
 BUNDLES = {
-    "index.js": ["js/schema.js", "js/model.js", "js/client.js", "index.js"],
+    "index.js": ["js/schema.js", "js/model.js", "js/client.js", "js/views.js", "index.js"],
     "app.css": ["main.css", "widgets.css", "icons.css"],
 }
 

test/e2e/README.md

@@ -17,4 +17,6 @@ Runs against a real device on your network, by hand, never in CI. It checks sock
 
 A plain run sends nothing on air, changes no setting (it saves only values the device already has) and doesn't reboot the device. The command tests send ops that are refused before they reach the radio, and one `setPositions` that sets a shade to the position the sync gave: that drops the fraction of a percent the shade's believed position may have had. The edit tests send edits that are refused, and one shade sort order set to the order it has, which saves the shades again unchanged. The settings tests send saves that are refused, and one that saves the NTP server and time zone the device already has. The frequency scan test pauses the radio's sending for a second or two, as a scan does. It does fill every socket slot for a few seconds, and replays a page load.
 
+The web UI holds one of the device's 5 socket slots for each open tab. The tests that fill every slot skip while one is taken, so close the UI's tabs before a run.
+
 The tests run in whatever security mode the device is in; the suite never changes it. To test both modes, run the suite once in each.

test/e2e/test_survival.py

@@ -2,6 +2,7 @@
 (docs/adr/0005-one-websocket-protocol.md): every client reconnecting at once,
 and a browser loading the page."""
 import threading
+import time
 import urllib.request
 
 import pytest
@@ -29,7 +30,24 @@ def watch_heap(host):
     assert after["min"] >= HEAP_FLOOR, "the heap fell to %u bytes (floor %u)" % (after["min"], HEAP_FLOOR)
 
 
-def test_every_client_reconnecting_at_once(connect, schema, watch_heap):
+@pytest.fixture
+def all_slots_free(host, token):
+    """Skips unless every socket slot is free.  The web UI holds one per open
+    tab, which would leave these tests a client short."""
+    clients = [ProtoClient(host, params={"apikey": token} if token else None) for _ in range(MAX_CLIENTS)]
+    try:
+        time.sleep(1)
+        taken = sum(1 for c in clients if c.closed.is_set())
+    finally:
+        for c in clients:
+            c.close()
+    # The device frees a slot when it sees the disconnect.
+    time.sleep(0.5)
+    if taken:
+        pytest.skip("%u socket slot(s) in use, likely by the web UI: close its tabs" % taken)
+
+
+def test_every_client_reconnecting_at_once(connect, schema, watch_heap, all_slots_free):
     clients = [connect() for _ in range(MAX_CLIENTS)]
     errors = []
 
@@ -44,7 +62,7 @@ def test_every_client_reconnecting_at_once(connect, schema, watch_heap):
     assert not errors, errors
 
 
-def test_one_client_too_many_is_closed(connect, schema):
+def test_one_client_too_many_is_closed(connect, schema, all_slots_free):
     clients = [connect(schema=schema.hash) for _ in range(MAX_CLIENTS)]
     for c in clients:
         run_sync(c)

test/js/client.test.js

@@ -296,6 +296,40 @@ test('a new token connects again with it', () => {
     assert.match(FakeSocket.last.url, /apikey=new/);
 });
 
+test('waitFor resolves with the first event that matches, after the model has it', async () => {
+    const { c, ws } = connected();
+    const shadeId = recordedItems('S')[0].s;
+    const p = c.waitFor('shade', (d) => d.shadeId === shadeId, 3000);
+    ws.deliver({ v: 2, t: T.shade, d: { s: 250, n: 'Other' } });
+    ws.deliver({ v: 2, t: T.shade, d: { s: shadeId, n: 'Renamed' } });
+    const d = await p;
+    assert.equal(d.name, 'Renamed');
+    assert.equal(c.model.shades.get(shadeId).name, 'Renamed');
+});
+
+test('waitFor gives null when no event comes, and stops listening', async () => {
+    const { c } = connected();
+    const p = c.waitFor('room', null, 3000);
+    c.timers.runAll();
+    assert.equal(await p, null);
+    assert.equal((c.listeners.room || []).length, 0);
+});
+
+test('off stops a listener, and one that removes itself mid-event leaves the others called', () => {
+    const { c, ws } = connected();
+    const seen = [];
+    const once = (d) => { seen.push('once'); c.off('memory', once); };
+    const always = () => seen.push('always');
+    const dropped = () => seen.push('dropped');
+    c.on('memory', once);
+    c.on('memory', always);
+    c.on('memory', dropped);
+    c.off('memory', dropped);
+    ws.deliver({ v: 2, t: T.memory, d: { fr: 1 } });
+    ws.deliver({ v: 2, t: T.memory, d: { fr: 2 } });
+    assert.deepEqual(seen, ['once', 'always', 'always']);
+});
+
 test('subscribe sends the feed number', () => {
     const { c, ws } = connected();
     c.subscribe('frames');

test/js/views.test.js

@@ -0,0 +1,82 @@
+// What the web UI's panels bind (data-src/js/views.js), from protocol 2's
+// shapes.
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const { ProtoViews } = require('../../data-src/js/views.js');
+const { ProtoModel } = require('../../data-src/js/model.js');
+const { recordedSchema, deviceSections } = require('./helpers.js');
+
+const schema = recordedSchema();
+function synced() {
+    const model = new ProtoModel(schema);
+    model.beginSync();
+    for (const d of deviceSections(schema)) model.applySync(d);
+    model.endSync();
+    return model;
+}
+
+test('a settings section has every field, defaults where the device left them out', () => {
+    // ssdpBroadcast off and no NTP server are at their defaults, so not sent.
+    assert.deepEqual(ProtoViews.settings(schema, 'general', { hostname: 'Somfy' }),
+        { hostname: 'Somfy', ssdpBroadcast: false, ntpServer: '', posixZone: '' });
+    assert.deepEqual(ProtoViews.settings(schema, 'security', {}), { securityType: 0, username: '', hasPassword: false, hasPin: false });
+});
+
+test('the settings sections are what the device sends', () => {
+    for (const section of Object.keys(ProtoViews.SETTINGS))
+        for (const name of ProtoViews.SETTINGS[section]) assert.ok(schema.keys[name], `${section}.${name}`);
+});
+
+test('a group shows its shades whole', () => {
+    const m = synced();
+    const group = m.groupList()[0];
+    const view = ProtoViews.group(m, group);
+    assert.equal(view.linkedShades.length, group.linkedShades.length);
+    assert.equal(view.linkedShades[0].name, m.shades.get(group.linkedShades[0]).name);
+    // The model's item is left as it is.
+    assert.equal(typeof group.linkedShades[0], 'number');
+    // A shade the model hasn't got yet still shows.
+    assert.equal(ProtoViews.group(m, Object.assign({}, group, { linkedShades: [250] })).linkedShades[0].shadeId, 250);
+    assert.equal(ProtoViews.group(m, undefined), undefined);
+});
+
+test('a frame and a scan under the names the UI reads', () => {
+    const f = ProtoViews.frame(schema, { remoteAddress: 5, lastRollingCode: 9, command: 'Up', rssi: -60, valid: true, pulses: [1, 2] });
+    assert.equal(f.address, 5);
+    assert.equal(f.rcode, 9);
+    assert.equal(f.encKey, 0);
+    assert.deepEqual(f.pulses, [1, 2]);
+    assert.equal(f.stepSize, undefined);
+    const s = ProtoViews.scan(schema, { scanning: true, testFreq: 433.1, testRssi: -80 });
+    assert.deepEqual(s, { scanning: true, testFreq: 433.1, testRSSI: -80, frequency: 0, RSSI: 0 });
+});
+
+test('the network section as the panel binds it', () => {
+    const v = ProtoViews.network(schema, { connMode: 1, ssid: 'home', hasPassphrase: true, dhcp: true, PWRPin: -1 });
+    assert.equal(v.connType, 1);
+    assert.equal(v.hasEthernet, false);
+    assert.deepEqual(v.wifi, { ssid: 'home', hasPassphrase: true, roaming: false, hidden: false });
+    assert.equal(v.ethernet.PWRPin, -1);
+    assert.deepEqual(v.ip, { dhcp: true, ip: '', gateway: '', subnet: '', dns1: '', dns2: '' });
+});
+
+test('the radio section as the panel binds it, and back', () => {
+    const config = ProtoViews.radio(schema, { bitLength: 80, frequency: 433.42, enabled: true, radioInit: true });
+    assert.equal(config.type, 80);
+    assert.equal(config.bitLength, undefined);
+    assert.equal(config.TXPin, 0);
+    const save = ProtoViews.radioSave(config);
+    assert.equal(save.section, 'radio');
+    assert.equal(save.bitLength, 80);
+    assert.equal(save.frequency, 433.42);
+    // Only shown, never saved.
+    assert.equal('radioInit' in save, false);
+    assert.equal('type' in save, false);
+});
+
+test('an op refusal for the error box, with a shade validation code', () => {
+    assert.deepEqual(ProtoViews.opError('saveShade', { code: 'badRequest', desc: 'Pin in use', data: { validation: -10 } }),
+        { htmlError: 'badRequest', service: 'saveShade', desc: 'Pin in use', code: -10 });
+    assert.deepEqual(ProtoViews.opError('reboot', { code: 'closed', desc: 'The connection closed' }),
+        { htmlError: 'closed', service: 'reboot', desc: 'The connection closed' });
+});