feat: use device description as name on Dashboard for authenticated WS devices, if available

packages/server-admin-ui/src/views/Dashboard/Dashboard.js

@@ -17,13 +17,15 @@ const Dashboard = (props) => {
     numberOfAvailablePaths,
     wsClients,
     providerStatistics,
-    uptime
+    uptime,
+    devices
   } = props.serverStatistics || {
     deltaRate: 0,
     numberOfAvailablePaths: 0,
     wsClients: 0,
     providerStatistics: {},
-    uptime: ''
+    uptime: '',
+    devices: []
   }
   const providerStatus = props.providerStatus || []
   const errorCount = providerStatus.filter((s) => s.type === 'error').length
@@ -66,6 +68,11 @@ const Dashboard = (props) => {
   }
 
   const renderActivity = (providerId, providerStats, linkType) => {
+    let device = providerId
+    if (providerId.startsWith('ws.')) {
+      const found = devices.find((d) => d.clientId === providerId.slice(3))
+      device = found && found.description ? found.description : providerId
+    }
     return (
       <li key={providerId} onClick={() => props.history.push(`/dashboard`)}>
         <i
@@ -84,7 +91,7 @@ const Dashboard = (props) => {
         <span className="title">
           {linkType === 'plugin'
             ? pluginNameLink(providerId)
-            : providerIdLink(providerId)}
+            : providerIdLink(providerId, device)}
         </span>
         {providerStats.writeRate > 0 && (
           <span className="value">
@@ -285,11 +292,11 @@ function pluginNameLink(id) {
   return <a href={'#/serverConfiguration/plugins/' + id}>{id}</a>
 }
 
-function providerIdLink(id) {
+function providerIdLink(id, name) {
   if (id === 'defaults') {
     return <a href={'#/serverConfiguration/settings'}>{id}</a>
   } else if (id.startsWith('ws.')) {
-    return <a href={'#/security/devices'}>{id}</a>
+    return <a href={'#/security/devices'}>{name}</a>
   } else {
     return <a href={'#/serverConfiguration/connections/' + id}>{id}</a>
   }

src/deltastats.ts

@@ -17,7 +17,7 @@
 
 import { isUndefined, values } from 'lodash'
 import { EventEmitter } from 'node:events'
-
+import { getSecurityConfig } from './security'
 const STATS_UPDATE_INTERVAL_SECONDS = 5
 export const CONNECTION_WRITE_EVENT_NAME = 'connectionwrite'
 
@@ -73,6 +73,15 @@ export function startDeltaStatistics(
   return setInterval(() => {
     updateProviderPeriodStats(app)
     const anyApp = app as any
+    const config = getSecurityConfig(anyApp)
+    let devices = []
+    if (
+      anyApp &&
+      anyApp.securityStrategy &&
+      typeof anyApp.securityStrategy.getDevices === 'function'
+    ) {
+      devices = anyApp.securityStrategy.getDevices(config)
+    }
     app.emit('serverevent', {
       type: 'SERVERSTATISTICS',
       from: 'signalk-server',
@@ -83,7 +92,8 @@ export function startDeltaStatistics(
         numberOfAvailablePaths: anyApp.streambundle.getAvailablePaths().length,
         wsClients: anyApp.interfaces.ws ? anyApp.interfaces.ws.numClients() : 0,
         providerStatistics: app.providerStatistics,
-        uptime: process.uptime()
+        uptime: process.uptime(),
+        devices: devices
       }
     })
     app.lastIntervalDeltaCount = app.deltaCount