@flowfuse/node-red-dashboard 1.31.1-e3609ab-202609141637.0 → 1.32.1-034c8a5-202610061312.0

package/README.md

@@ -86,6 +86,56 @@ The original [Node-RED Dashboard](https://github.com/node-red/node-red-dashboard
 
 FlowFuse Dashboard was re-built from the ground up, learning from the popular features and feedback of Node-RED Dashboard. It will carry the legacy forward, adapting to future needs while keeping the essence of open-source and community-driven development intact. The project will is licensed under Apache 2.0.
 
+## Release process
+
+In this project, the [Release Please](https://github.com/googleapis/release-please) is used to automatically determine the next release version based on the commit messages in the codebase.
+
+By using the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/), the project adheres to a standardized format for commit messages, which `Release Please` uses to determine whether the next release should be a major, minor, or patch release.
+
+### Components
+
+1. The `Prepare release` GitHub Action workflow:
+
+    * A Release Please action that analyzes commit messages to determine the type of release required (major, minor, patch) based on the Conventional Commits specification
+    * Creates a pre-release pull request with the proposed version bump and changelog
+    * Once merged, automatically updates the version number in `package.json` and creates a new release on GitHub with the appropriate changelog
+
+2. The `Lint Pull Request Title` GitHub Action workflow:
+
+    * A workflow that runs on pull request creation and uses the `amannn/action-semantic-pull-request` action to validate that pull request titles follow the Conventional Commits format
+    * Together with adjusted default merge commit message, this ensures that all commits merged into the main branch adhere to the expected format, allowing Release Please to function correctly
+
+3. The `Publish Release` GitHub Action workflow:
+
+    * A workflow that runs when a new git tag in `v*.*.*` format is pushed, runs the tests, builds the package and publishes the new version to the public npm registry using the `JS-DevTools/npm-publish` action
+    * Once package is published, the workflow updates the package version in the Node-RED Flow Library catalogue
+
+### Pull Request Title Format
+
+The Conventional Commits preset expects pull request titles to be in the following format:
+
+```
+<type>(<scope>): <subject>
+```
+
+* Type: Describes the category of the commit. Examples include:
+    * `feat`: A new feature (triggers a minor version bump).
+    * `fix`: A bug fix (triggers a patch version bump).
+    * `perf`: A code change that improves performance (triggers a patch version bump).
+    * `refactor`: A code change that neither fixes a bug nor adds a feature (does not trigger a release unless it's accompanied by a BREAKING CHANGE).
+    * `docs`: Documentation-only changes (does not trigger a release).
+    * `chore`: Changes to the build process or auxiliary tools and libraries (does not trigger a release).
+* Scope: An optional part that provides additional context about what was changed (e.g., module, component).
+* Subject: A brief description of the changes.
+
+### Handling Breaking Changes
+
+To indicate a breaking change, the exclamation mark `!` should be used immediately after the type/scope:
+
+* `feat!:`
+* `fix!:`
+* `refactor!:`
+
 ## License
 
 Apache License 2.0

package/nodes/config/ui_base.js

@@ -4,9 +4,10 @@ const path = require('path')
 const axios = require('axios')
 
 const v = require('../../package.json').version
+const { createClientStore } = require('../store/clients.js')
 const datastore = require('../store/data.js')
 const statestore = require('../store/state.js')
-const { appendTopic, addConnectionCredentials, getThirdPartyWidgets } = require('../utils/index.js')
+const { appendTopic, addConnectionCredentials, matchesClient, normalizeClientId, getThirdPartyWidgets } = require('../utils/index.js')
 
 // from: https://stackoverflow.com/a/28592528/3016654
 function join (...paths) {
@@ -59,6 +60,7 @@ module.exports = function (RED) {
         ioServer: null,
         /** @type {Object.<string, Socket>} */
         connections: {},
+        clientStore: createClientStore(),
         settings: {},
         contribs: {}
     }
@@ -223,7 +225,6 @@ module.exports = function (RED) {
                     lang: 'en',
                     scope: './',
                     description: config.name,
-                    theme_color: '#ffffff',
                     icons: [
                         { src: hasAppIcon ? config.appIcon : 'pwa-64x64.png', sizes: '64x64', type: 'image/png' },
                         { src: hasAppIcon ? config.appIcon : 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
@@ -413,6 +414,7 @@ module.exports = function (RED) {
                 socket.on('widget-action', onAction.bind(null, socket))
                 socket.on('widget-change', onChange.bind(null, socket))
                 socket.on('widget-load', onLoad.bind(null, socket))
+                socket.on('disconnect', () => uiShared.clientStore.disconnect(socket._clientId, socket.id))
             }
         }
         /** @type {NodeJS.Timeout} */
@@ -467,11 +469,7 @@ module.exports = function (RED) {
                 }
             }
             // conduct the core check too
-            if (msg._client?.socketId) {
-                // if a particular socketid has been defined,
-                // we only send comms on the connection that matches that id
-                checks.push(msg._client?.socketId === conn.id)
-            }
+            checks.push(matchesClient(conn, msg))
             // ensure all checks validate sending this
             return !checks.length || !checks.includes(false)
         }
@@ -591,6 +589,7 @@ module.exports = function (RED) {
             socket.on('disconnect', reason => {
                 cleanupEventHandlers(socket)
                 delete uiShared.connections[socket.id]
+                uiShared.clientStore.disconnect(socket._clientId, socket.id)
                 node.log(`Disconnected ${socket.id} due to ${reason}`)
             })
         }
@@ -606,6 +605,9 @@ module.exports = function (RED) {
             // node.connections[socket.id] = socket // store the connection for later use
             uiShared.connections[socket.id] = socket // store the connection for later use
 
+            socket._clientId = normalizeClientId(socket.handshake?.query?.clientId)
+            uiShared.clientStore.connect(socket._clientId, socket.id)
+
             emitConfig(socket)
 
             // clean up then re-register listeners
@@ -846,6 +848,9 @@ module.exports = function (RED) {
         node.on('close', (removed, done) => {
             uiShared.ioServer?.off('connection', onConnection)
             for (const conn of Object.values(uiShared.connections)) {
+                if (removed && conn._baseId === node.id) {
+                    uiShared.clientStore.dropSocket(conn._clientId, conn.id)
+                }
                 cleanupEventHandlers(conn)
             }
             close(node, function (err) {

package/nodes/store/clients.js

@@ -0,0 +1,71 @@
+const { EventEmitter } = require('events')
+
+const DEFAULT_GRACE_MS = 20000
+
+/**
+ * Tracks client presence across reconnects (socket.id churns every reconnect; clientId is stable).
+ * A client may hold several live sockets (one per tab); events fire on its socket count crossing
+ * zero, not per socket. Emits { event, clientId, socketId? }:
+ *   connected:   count 0 -> 1, no grace pending (new client)
+ *   reconnected: count 0 -> 1 during the grace window (returned before being declared gone)
+ *   gone:        count -> 0 and the grace window elapses
+ * Extra tabs (1 -> 2, 2 -> 1) emit nothing; the client is still present.
+ */
+function createClientStore ({ graceMs = DEFAULT_GRACE_MS, setTimeoutFn = setTimeout, clearTimeoutFn = clearTimeout } = {}) {
+    const clients = {} // clientId -> { sockets: Set<socketId>, graceTO }
+    const events = new EventEmitter()
+    events.setMaxListeners(0)
+
+    function connect (clientId, socketId) {
+        if (!clientId) { return }
+        let entry = clients[clientId]
+        const returning = !!(entry && entry.graceTO)
+        if (!entry) {
+            entry = clients[clientId] = { sockets: new Set(), graceTO: null }
+        }
+        if (entry.graceTO) {
+            clearTimeoutFn(entry.graceTO)
+            entry.graceTO = null
+        }
+        const wasEmpty = entry.sockets.size === 0
+        entry.sockets.add(socketId)
+        if (wasEmpty) {
+            events.emit('client', { event: returning ? 'reconnected' : 'connected', clientId, socketId })
+        }
+    }
+
+    function disconnect (clientId, socketId) {
+        if (!clientId) { return }
+        const entry = clients[clientId]
+        if (!entry) { return }
+        entry.sockets.delete(socketId)
+        if (entry.sockets.size === 0 && !entry.graceTO) {
+            entry.graceTO = setTimeoutFn(() => {
+                delete clients[clientId]
+                events.emit('client', { event: 'gone', clientId })
+            }, graceMs)
+            if (typeof entry.graceTO?.unref === 'function') { entry.graceTO.unref() }
+        }
+    }
+
+    function dropSocket (clientId, socketId) {
+        if (!clientId) { return }
+        const entry = clients[clientId]
+        if (!entry) { return }
+        entry.sockets.delete(socketId)
+        if (entry.sockets.size === 0) {
+            if (entry.graceTO) { clearTimeoutFn(entry.graceTO) }
+            delete clients[clientId]
+        }
+    }
+
+    function list () {
+        return Object.entries(clients)
+            .filter(([, entry]) => entry.sockets.size > 0)
+            .map(([clientId, entry]) => ({ clientId, socketId: entry.sockets.values().next().value }))
+    }
+
+    return { connect, disconnect, dropSocket, list, events }
+}
+
+module.exports = { createClientStore }

package/nodes/store/data.js

@@ -1,3 +1,5 @@
+const { isClientScoped } = require('../utils/index.js')
+
 const data = {}
 
 const config = {
@@ -19,7 +21,7 @@ function canSaveInStore (base, node, msg) {
 
     if (constrained.includes(node.type)) {
         // core check
-        if (msg._client?.socketId) {
+        if (isClientScoped(msg)) {
             // we are in a node type that allows for definition of specific clients,
             // and a client has been defined
             checks.push(false)
@@ -55,6 +57,9 @@ const getters = {
     // given a widget id, return the latest msg received
     msg (id) {
         return config.RED.util.cloneMessage(data[id])
+    },
+    has (id) {
+        return !!data[id]
     }
 }
 
@@ -118,15 +123,38 @@ const setters = {
                 data[node.id] = filteredMessages
             }
         }
+    },
+    keepLatestPerTopic (base, node, maxPoints) {
+        const currentData = data[node.id]
+        if (!Array.isArray(currentData)) {
+            return
+        }
+        const counts = {}
+        const keep = []
+        let trimmed = false
+        for (let i = currentData.length - 1; i >= 0; i--) {
+            const topic = currentData[i].topic
+            counts[topic] = (counts[topic] || 0) + 1
+            if (counts[topic] <= maxPoints) {
+                keep[i] = true
+            } else {
+                trimmed = true
+            }
+        }
+        if (trimmed) {
+            setters.filter(base, node, (m, i) => keep[i])
+        }
     }
 }
 
 module.exports = {
     get: getters.msg,
+    has: getters.has,
     RED: getters.RED,
     setConfig: setters.setConfig,
     save: setters.save,
     append: setters.append,
     filter: setters.filter,
+    keepLatestPerTopic: setters.keepLatestPerTopic,
     clear: setters.clear
 }

package/nodes/store/state.js

@@ -1,5 +1,7 @@
 // Store to manage any dynamic properties set
 
+const { isClientScoped } = require('../utils/index.js')
+
 const state = {}
 const config = {
     RED: null
@@ -18,7 +20,7 @@ function canSaveInStore (base, node, msg) {
         // core check
         if (base.acceptsClientConfig.includes(node.type)) {
             // we are in a node type that allows for definition of specific clients,
-            if (msg._client?.socketId) {
+            if (isClientScoped(msg)) {
                 // and a client has been defined
                 checks.push(false)
             } else {

package/nodes/utils/index.js

@@ -40,6 +40,30 @@ async function getTopic (RED, config, wNode, msg) {
     return topic
 }
 
+function normalizeClientId (raw) {
+    if (Array.isArray(raw)) { raw = raw[0] }
+    return (raw === undefined || raw === null || raw === '') ? undefined : String(raw)
+}
+
+const CLIENT_TARGETS = {
+    socketId: (conn) => conn.id,
+    clientId: (conn) => conn._clientId
+}
+
+function clientTargets (msg) {
+    return Object.entries(CLIENT_TARGETS)
+        .map(([field, connValue]) => ({ value: normalizeClientId(msg?._client?.[field]), connValue }))
+        .filter((target) => target.value !== undefined)
+}
+
+function isClientScoped (msg) {
+    return clientTargets(msg).length > 0
+}
+
+function matchesClient (conn, msg) {
+    return clientTargets(msg).every((target) => target.value === target.connValue(conn))
+}
+
 /**
  * Adds socket/client data to a msg payload, if enabled
  *
@@ -60,7 +84,8 @@ function addConnectionCredentials (RED, msg, conn, config) {
                 ...item._client,
                 ...{
                     socketId: conn.id,
-                    socketIp: conn.handshake?.address
+                    socketIp: conn.handshake?.address,
+                    clientId: normalizeClientId(conn.handshake?.query?.clientId)
                 }
             }
             return item
@@ -127,5 +152,8 @@ module.exports = {
     appendTopic,
     getTopic,
     addConnectionCredentials,
+    normalizeClientId,
+    isClientScoped,
+    matchesClient,
     getThirdPartyWidgets
 }

package/nodes/widgets/locales/en-US/ui_control.json

@@ -7,7 +7,8 @@
         "events": {
             "all": "All Events",
             "change": "Page/Tab Change Events Only",
-            "connect": "Connection Events Only"
+            "connect": "Connection Events Only",
+            "clients": "Client Presence Events Only"
         }
     }
   }

package/nodes/widgets/ui_chart.js

@@ -230,7 +230,7 @@ module.exports = function (RED) {
             },
             onInput: function (msg, send, done) {
                 // use our own custom onInput in order to store history of msg payloads
-                if (!datastore.get(node.id)) {
+                if (!datastore.has(node.id)) {
                     datastore.save(base, node, [])
                 }
                 // To prevent ui_update messages from deleting old data, skip this section if no msg.payload present
@@ -268,33 +268,7 @@ module.exports = function (RED) {
                         const maxPoints = parseInt(config.removeOlderPoints)
 
                         if (maxPoints && config.removeOlderPoints) {
-                            // account for multiple lines?
-                            // client-side does this for _each_ line
-                            // remove older points using datastore.filter instead of saving the whole array
-                            const lineCounts = {}
-                            const _msg = datastore.get(node.id) || []
-
-                            // determine which message objects to keep (latest maxPoints per label)
-                            const keepIndexes = []
-                            let doFiltering = false
-                            for (let i = _msg.length - 1; i >= 0; i--) {
-                                const m = _msg[i]
-                                const label = m.topic
-                                lineCounts[label] = lineCounts[label] || 0
-                                if (lineCounts[label] < maxPoints) {
-                                    keepIndexes[i] = true
-                                    lineCounts[label]++
-                                } else {
-                                    doFiltering = true
-                                }
-                            }
-
-                            // filter the datastore to only keep the selected messages
-                            if (doFiltering) {
-                                datastore.filter(base, node, (m, i) => {
-                                    return keepIndexes[i]
-                                })
-                            }
+                            datastore.keepLatestPerTopic(base, node, maxPoints)
                         }
 
                         if (config.xAxisType === 'time' && config.removeOlder && config.removeOlderUnit) {

package/nodes/widgets/ui_control.html

@@ -24,7 +24,7 @@
             oneditprepare: function () {
                 const node = this
                 const sel = $('#node-input-events')
-                for (const name of ['all', 'change', 'connect']) {
+                for (const name of ['all', 'change', 'connect', 'clients']) {
                     const text = c_('events.' + name)
                     $('<option/>').val(name).text(text).appendTo(sel)
                 }

package/nodes/widgets/ui_control.js

@@ -411,7 +411,35 @@ module.exports = function (RED) {
             node.error('No UI configured')
         }
 
+        let onClientEvent = null
+        let clientEventStore = null
+        if (ui && (config.events === 'all' || config.events === 'clients')) {
+            clientEventStore = ui.uiShared?.clientStore
+            if (clientEventStore) {
+                onClientEvent = (e) => {
+                    const wNode = RED.nodes.getNode(node.id)
+                    if (wNode && typeof wNode.send === 'function') {
+                        const client = { clientId: e.clientId }
+                        if (e.socketId) { client.socketId = e.socketId }
+                        let msg = { payload: 'client-' + e.event, _client: client }
+                        const conn = e.socketId ? ui.uiShared?.connections?.[e.socketId] : null
+                        if (conn) { msg = addConnectionCredentials(RED, msg, conn, ui) }
+                        wNode.send(msg)
+                    }
+                }
+                clientEventStore.events.on('client', onClientEvent)
+                setImmediate(() => {
+                    for (const c of clientEventStore.list()) {
+                        onClientEvent({ event: 'connected', clientId: c.clientId, socketId: c.socketId })
+                    }
+                })
+            }
+        }
+
         node.on('close', function (removed, done) {
+            if (onClientEvent && clientEventStore) {
+                clientEventStore.events.off('client', onClientEvent)
+            }
             if (removed) {
                 // handle node being removed
                 ui?.deregister(null, null, node)

package/nodes/widgets/ui_gauge.js

@@ -10,6 +10,7 @@ module.exports = function (RED) {
         const group = RED.nodes.getNode(config.group)
 
         const evts = {
+            onAction: true,
             beforeSend: async function (msg) {
                 const updates = msg.ui_update
                 if (updates) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flowfuse/node-red-dashboard",
-    "version": "1.31.1-e3609ab-202609141637.0",
+    "version": "1.32.1-034c8a5-202610061312.0",
     "description": "FlowFuse Dashboard - A collection of Node-RED nodes that provide functionality to build your own UI applications (inc. forms, buttons, charts).",
     "keywords": [
         "node-red"
@@ -98,7 +98,7 @@
         "marked-highlight": "^2.2.3",
         "medium-zoom": "^1.1.0",
         "mermaid": "^11.12.2",
-        "mocha": "^11.7.5",
+        "mocha": "^12.0.1",
         "node-red": "^4.1.8",
         "node-red-node-test-helper": "^0.3.5",
         "npm-run-all": "^4.1.5",