@yarkivaev/scada 2.3.64 → 2.3.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yarkivaev/scada",
-  "version": "2.3.64",
+  "version": "2.3.66",
   "description": "SCADA domain objects, state persistence, and plant monitoring",
   "repository": {
     "type": "git",

package/src/infrastructure/http/plant/inspect/cdpGateway.js

@@ -1,4 +1,5 @@
 import http from 'node:http';
+import capturePng from './cdpShot.js';
 
 /**
  * Loopback Host Chromium accepts for HTTP CDP.
@@ -19,28 +20,54 @@ export function cdpRequest(target, path) {
     };
 }
 
+/**
+ * Chooses ws or wss from Host and X-Forwarded-Proto.
+ *
+ * @param {string} hostHeader - incoming Host
+ * @param {string} [proto] - forwarded proto
+ * @returns {string} ws or wss
+ *
+ * @example
+ *   schemeOf('scada.example');
+ */
+export function schemeOf(hostHeader, proto) {
+    if (proto === 'https') {
+        return 'wss';
+    }
+    if (proto === 'http') {
+        return 'ws';
+    }
+    if (hostHeader.endsWith(':443')) {
+        return 'wss';
+    }
+    return hostHeader.includes(':') ? 'ws' : 'wss';
+}
+
 /**
  * Rewrites CDP debugger URLs onto the same-origin inspect prefix.
  *
  * @param {string} text - upstream JSON or HTML
  * @param {string} hostHeader - incoming Host
  * @param {string} nodeId - topology node id
+ * @param {string} [proto] - forwarded proto
  * @returns {string} rewritten body
  *
  * @example
  *   rewriteDebugger(body, 'example.test:443', 'm1');
  */
-export function rewriteDebugger(text, hostHeader, nodeId) {
-    const secure = hostHeader.endsWith(':443');
-    const scheme = secure ? 'wss' : 'ws';
+export function rewriteDebugger(text, hostHeader, nodeId, proto) {
+    const scheme = schemeOf(hostHeader, proto);
+    const httpScheme = scheme === 'wss' ? 'https' : 'http';
     const host = hostHeader.replace(/:443$/u, '').replace(/:80$/u, '');
     const prefix = `/infra/inspect/${nodeId}`;
     const origin = `${scheme}://${host}${prefix}`;
-    const query = `$<scheme>=${host}${prefix}`;
+    const query = `${scheme}=${host}${prefix}`;
+    const frontend = `${httpScheme}://${host}${prefix}/devtools/inspector.html`;
     return text
+        .replace(/https:\/\/chrome-devtools-frontend\.appspot\.com\/serve_rev\/@[^"'?\s]+\/inspector\.html/gu, frontend)
         .replace(/"\/devtools\//gu, `"${prefix}/devtools/`)
         .replace(/wss?:\/\/127\.0\.0\.1:\d+/gu, origin)
-        .replace(/(?<scheme>wss?)=127\.0\.0\.1:\d+/gu, query);
+        .replace(/(?:wss?)=127\.0\.0\.1:\d+/gu, query);
 }
 
 function readBody(res) {
@@ -68,43 +95,6 @@ function requestCdp(target, path) {
     });
 }
 
-function capturePng(wsUrl) {
-    return new Promise((resolve, reject) => {
-        const socket = new globalThis.WebSocket(wsUrl);
-        const timer = setTimeout(() => {
-            socket.close();
-            reject(new Error(`cdp screenshot timed out for ${wsUrl}`));
-        }, 10000);
-        socket.addEventListener('error', (err) => {
-            clearTimeout(timer);
-            reject(err);
-        });
-        socket.addEventListener('open', () => {
-            socket.send(JSON.stringify({ id: 1, method: 'Page.captureScreenshot', params: { format: 'png' } }));
-        });
-        socket.addEventListener('message', (event) => {
-            const message = JSON.parse(String(event.data));
-            if (message.id !== 1) {
-                return;
-            }
-            clearTimeout(timer);
-            socket.close();
-            resolve(Buffer.from(message.result.data, 'base64'));
-        });
-    });
-}
-
-async function defaultShot(target, requestImpl) {
-    const listed = await requestImpl(target, '/json/list');
-    const pages = JSON.parse(listed.body.toString('utf8'));
-    const page = Array.isArray(pages) ? pages[0] : pages;
-    if (!page || !page.webSocketDebuggerUrl) {
-        throw new Error(`cdp page websocket is missing on ${target.host}:${target.port}`);
-    }
-    const wsUrl = page.webSocketDebuggerUrl.replace(/wss?:\/\/127\.0\.0\.1:\d+/u, `ws://${target.host}:${target.port}`);
-    return capturePng(wsUrl);
-}
-
 /**
  * HTTP CDP client that forces a loopback Host and rewrites debugger URLs.
  *
@@ -118,12 +108,12 @@ async function defaultShot(target, requestImpl) {
 export default function cdpGateway(requestImpl, shotImpl) {
     const request = requestImpl || requestCdp;
     const shot = shotImpl || ((target) => {
-        return defaultShot(target, request);
+        return capturePng(target, request);
     });
     return {
-        async json(target, path, hostHeader, nodeId) {
+        async json(target, path, hostHeader, nodeId, proto) {
             const result = await request(target, path);
-            return rewriteDebugger(result.body.toString('utf8'), hostHeader, nodeId);
+            return rewriteDebugger(result.body.toString('utf8'), hostHeader, nodeId, proto);
         },
         shot(target) {
             return shot(target);

package/src/infrastructure/http/plant/inspect/cdpShot.js

@@ -0,0 +1,122 @@
+import http from 'node:http';
+import crypto from 'node:crypto';
+
+function encode(text) {
+    const payload = Buffer.from(text, 'utf8');
+    const mask = crypto.randomBytes(4);
+    const size = payload.length < 126 ? payload.length : 126;
+    const head = payload.length < 126
+        ? Buffer.from([0x81, 0x80 | size])
+        : Buffer.concat([Buffer.from([0x81, 0x80 | 126]), Buffer.from([payload.length >> 8, payload.length & 255])]);
+    const masked = Buffer.from(payload);
+    for (let i = 0; i < payload.length; i += 1) {
+        masked[i] ^= mask[i % 4];
+    }
+    return Buffer.concat([head, mask, masked]);
+}
+
+function header(buf) {
+    if (buf.length < 2) {
+        return undefined;
+    }
+    const code = buf[1] & 127;
+    if (code < 126) {
+        return { len: code, offset: 2 };
+    }
+    if (code === 126 && buf.length >= 4) {
+        return { len: buf.readUInt16BE(2), offset: 4 };
+    }
+    if (code === 127 && buf.length >= 10) {
+        return { len: Number(buf.readBigUInt64BE(2)), offset: 10 };
+    }
+    return undefined;
+}
+
+function decode(buf) {
+    const meta = header(buf);
+    if (!meta || buf.length < meta.offset + meta.len) {
+        return undefined;
+    }
+    const opcode = buf[0] & 15;
+    if (opcode !== 1 && opcode !== 2) {
+        return undefined;
+    }
+    return buf.subarray(meta.offset, meta.offset + meta.len);
+}
+
+function openSocket(target, path) {
+    return new Promise((resolve, reject) => {
+        const req = http.request({
+            hostname: target.host,
+            port: target.port,
+            path,
+            method: 'GET',
+            headers: {
+                Host: `127.0.0.1:${target.port}`,
+                Connection: 'Upgrade',
+                Upgrade: 'websocket',
+                'Sec-WebSocket-Key': crypto.randomBytes(16).toString('base64'),
+                'Sec-WebSocket-Version': '13'
+            }
+        });
+        req.on('upgrade', (res, socket) => {
+            resolve(socket);
+        });
+        req.on('error', reject);
+        req.end();
+    });
+}
+
+function pathOf(wsUrl) {
+    return new URL(wsUrl.replace(/^wss:/u, 'http:').replace(/^ws:/u, 'http:')).pathname;
+}
+
+/**
+ * Captures a PNG screenshot over CDP without a global WebSocket constructor.
+ *
+ * @param {object} target - inspect { host, port }
+ * @param {function} requestImpl - (target, path) => { body }
+ * @returns {Promise<Buffer>} png bytes
+ *
+ * @example
+ *   await capturePng({ host: '127.0.0.1', port: 9222 }, requestCdp);
+ */
+export default async function capturePng(target, requestImpl) {
+    const listed = await requestImpl(target, '/json/list');
+    const pages = JSON.parse(listed.body.toString('utf8'));
+    const page = Array.isArray(pages) ? pages[0] : pages;
+    if (!page || !page.webSocketDebuggerUrl) {
+        throw new Error(`cdp page websocket is missing on ${target.host}:${target.port}`);
+    }
+    const socket = await openSocket(target, pathOf(page.webSocketDebuggerUrl));
+    return new Promise((resolve, reject) => {
+        const timer = setTimeout(() => {
+            socket.destroy();
+            reject(new Error(`cdp screenshot timed out for ${target.host}:${target.port}`));
+        }, 10000);
+        const chunks = [];
+        socket.on('data', (chunk) => {
+            chunks.push(chunk);
+            const payload = decode(Buffer.concat(chunks));
+            if (!payload) {
+                return;
+            }
+            const message = JSON.parse(payload.toString('utf8'));
+            if (message.id !== 1) {
+                return;
+            }
+            clearTimeout(timer);
+            socket.destroy();
+            resolve(Buffer.from(message.result.data, 'base64'));
+        });
+        socket.on('error', (err) => {
+            clearTimeout(timer);
+            reject(err);
+        });
+        socket.write(encode(JSON.stringify({
+            id: 1,
+            method: 'Page.captureScreenshot',
+            params: { format: 'png' }
+        })));
+    });
+}

package/src/infrastructure/http/plant/routes/infraRoute.js

@@ -43,6 +43,9 @@ export default function infraRoute() {
         route('GET', '/infra/graph.js', (req, res) => {
             sendFile(res, 'infra/graph.js', 'text/javascript; charset=utf-8');
         }),
+        route('GET', '/infra/graphLayout.js', (req, res) => {
+            sendFile(res, 'infra/graphLayout.js', 'text/javascript; charset=utf-8');
+        }),
         route('GET', '/infra/panel.js', (req, res) => {
             sendFile(res, 'infra/panel.js', 'text/javascript; charset=utf-8');
         })

package/src/infrastructure/http/plant/routes/inspectRoute.js

@@ -16,6 +16,10 @@ function hostOf(req) {
     return req.headers.host || req.headers.Host || 'localhost';
 }
 
+function protoOf(req) {
+    return req.headers['x-forwarded-proto'] || req.headers['X-Forwarded-Proto'];
+}
+
 function cdpPath(rest) {
     if (rest === '/json' || rest === '/json/list') {
         return '/json/list';
@@ -39,7 +43,7 @@ function queryOf(url) {
 
 async function sendJson(cdp, target, req, res, nodeId) {
     const path = cdpPath(inspectUrl(req.url).path);
-    const body = await cdp.json(target, path, hostOf(req), nodeId);
+    const body = await cdp.json(target, path, hostOf(req), nodeId, protoOf(req));
     res.writeHead(200, { 'Content-Type': 'application/json' });
     res.end(body);
 }

package/src/infrastructure/http/plant/ui/infra/graph.js

@@ -1,3 +1,5 @@
+import positions from './graphLayout.js';
+
 const SVG = 'http://www.w3.org/2000/svg';
 
 function shops(nodes) {
@@ -6,31 +8,11 @@ function shops(nodes) {
     });
 }
 
-function children(nodes, parentId, kind) {
-    return nodes.filter((node) => {
-        return node.parent === parentId && node.kind === kind;
-    });
-}
-
-function placed(graph) {
-    const positions = {};
-    shops(graph.nodes).forEach((area, i) => {
-        const x = 170 + i * 280;
-        positions[area.id] = { x, y: 56 };
-        children(graph.nodes, area.id, 'machine').forEach((item, j) => {
-            const y = 150 + j * 96;
-            positions[item.id] = { x, y };
-            children(graph.nodes, item.id, 'collector').forEach((col, k) => {
-                positions[col.id] = { x: x + 96, y: y + k * 26 };
-            });
-        });
-    });
-    graph.nodes.filter((node) => {
-        return node.kind === 'collector' && !positions[node.id];
-    }).forEach((node, i) => {
-        positions[node.id] = { x: 72, y: 88 + i * 54 };
+function floor(placed) {
+    const ys = Object.values(placed).map((item) => {
+        return item.y + 80;
     });
-    return positions;
+    return Math.max(520, ...ys);
 }
 
 function el(name, attrs) {
@@ -41,10 +23,10 @@ function el(name, attrs) {
     return node;
 }
 
-function paintLink(svg, graph, positions) {
+function paintLink(svg, graph, laid) {
     graph.links.forEach((link) => {
-        const from = positions[link.from];
-        const to = positions[link.to];
+        const from = laid[link.from];
+        const to = laid[link.to];
         if (!from || !to) {
             return;
         }
@@ -95,12 +77,12 @@ export default function draw(svg, graph, onClick) {
         svg.removeChild(svg.firstChild);
     }
     const columns = Math.max(shops(graph.nodes).length, 1);
-    svg.setAttribute('viewBox', `0 0 ${Math.max(960, columns * 280 + 120)} 520`);
-    const positions = placed(graph);
-    paintLink(svg, graph, positions);
+    const laid = positions(graph);
+    svg.setAttribute('viewBox', `0 0 ${Math.max(960, columns * 280 + 120)} ${floor(laid)}`);
+    paintLink(svg, graph, laid);
     graph.nodes.forEach((node) => {
-        if (positions[node.id]) {
-            paintNode(svg, node, positions[node.id], onClick);
+        if (laid[node.id]) {
+            paintNode(svg, node, laid[node.id], onClick);
         }
     });
 }

package/src/infrastructure/http/plant/ui/infra/graphLayout.js

@@ -0,0 +1,68 @@
+function shops(nodes) {
+    return nodes.filter((node) => {
+        return node.kind === 'shop';
+    });
+}
+
+function children(nodes, parentId, kind) {
+    return nodes.filter((node) => {
+        return node.parent === parentId && node.kind === kind;
+    });
+}
+
+function nest(nodes, item, x, y, placed) {
+    children(nodes, item.id, 'collector').forEach((col, k) => {
+        placed[col.id] = { x: x + 96, y: y + k * 26 };
+    });
+}
+
+function machines(nodes, area, x, base, placed) {
+    children(nodes, area.id, 'machine').forEach((item, j) => {
+        const y = base + j * 96;
+        placed[item.id] = { x, y };
+        nest(nodes, item, x, y, placed);
+    });
+}
+
+function extras(nodes, area, x, placed) {
+    const items = children(nodes, area.id, 'collector');
+    items.forEach((col, k) => {
+        placed[col.id] = { x, y: 108 + k * 28 };
+    });
+    return items.length;
+}
+
+function column(area, index, nodes, placed) {
+    const x = 170 + index * 280;
+    placed[area.id] = { x, y: 56 };
+    const count = extras(nodes, area, x, placed);
+    const base = count === 0 ? 150 : 108 + count * 28 + 50;
+    machines(nodes, area, x, base, placed);
+}
+
+function leftovers(nodes, placed) {
+    nodes.filter((node) => {
+        return node.kind === 'collector' && !placed[node.id];
+    }).forEach((node, i) => {
+        placed[node.id] = { x: 72, y: 88 + i * 54 };
+    });
+}
+
+/**
+ * Column positions for topology nodes by parent and kind.
+ *
+ * @param {object} graph - topology contract { nodes }
+ * @returns {object} id -> { x, y }
+ *
+ * @example
+ *   positions({ nodes: [{ id: 'area-1', kind: 'shop' }] })['area-1'].x === 170;
+ */
+export default function positions(graph) {
+    const nodes = graph.nodes || [];
+    const placed = {};
+    shops(nodes).forEach((area, i) => {
+        column(area, i, nodes, placed);
+    });
+    leftovers(nodes, placed);
+    return placed;
+}