@yarkivaev/scada 2.3.65 → 2.3.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yarkivaev/scada",
-  "version": "2.3.65",
+  "version": "2.3.67",
   "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/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/app.css

@@ -94,6 +94,7 @@ body {
     fill: none;
     stroke: #3a5166;
     stroke-width: 1.4;
+    pointer-events: none;
 }
 
 .link--feeds {

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

@@ -26,18 +26,21 @@ function machines(nodes, area, x, base, placed) {
 
 function extras(nodes, area, x, placed) {
     const items = children(nodes, area.id, 'collector');
+    if (items.length === 0) {
+        return 150;
+    }
+    const pitch = 64;
+    const head = 124;
     items.forEach((col, k) => {
-        placed[col.id] = { x, y: 108 + k * 28 };
+        placed[col.id] = { x, y: head + k * pitch };
     });
-    return items.length;
+    return head + items.length * pitch + 48;
 }
 
 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);
+    machines(nodes, area, x, extras(nodes, area, x, placed), placed);
 }
 
 function leftovers(nodes, placed) {