@xh/hoist 73.0.0-SNAPSHOT.1745446674015 → 73.0.0-SNAPSHOT.1745457790188

package/CHANGELOG.md

@@ -2,7 +2,17 @@
 
 ## v73.0.0-SNAPSHOT - unreleased
 
+### 💥 Breaking Changes (upgrade difficulty: 🟢 TRIVIAL - minor upgrade to Hoist Core)
+
+Requires `hoist-core >= 30.0` with new APIs to support the consolidated Admin Console "Clients" tab.
+
+### 🎁 New Features
+
+* Added a new "Clients" Admin Console tab- a consolidated view of all websocket-connected clients
+  across all instances in the cluster.
+
 ### 🐞 Bug Fixes
+
 * Fixed drag-and-drop usability issues with the mobile `ColChooser`.
 * Made `GridModel.defaultGroupSortFn` null-safe and improved type signature.
 
@@ -16,11 +26,11 @@
 * Updated the background version checking performed by `EnvironmentService` to use the app version
   and build information baked into the client build when comparing against the latest values from
   the server. Previously the versions loaded from the server on init were used as the baseline.
-  * The two versions *should* be the same, but in cases where a browser "restores" a tab and
-    re-inits an app without reloading the code itself, the upgrade check would miss the fact that
-    the client remained on an older version.
-  * Note that a misconfigured build - where the client build version is not set to the same value as
-    the server - would result in a false positive for an upgrade. The two should always match.
+    * The two versions *should* be the same, but in cases where a browser "restores" a tab and
+      re-inits an app without reloading the code itself, the upgrade check would miss the fact that
+      the client remained on an older version.
+    * Note that a misconfigured build - where the client build version is not set to the same value
+      as the server - would result in a false positive for an upgrade. The two should always match.
 
 ## v72.5.1 - 2025-04-15
 

package/admin/AppModel.ts

@@ -11,10 +11,11 @@ import {HoistAppModel, managed, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {without} from 'lodash';
 import {Route} from 'router5';
-import {activityTab} from './tabs/activity/ActivityTab';
+import {activityTrackingPanel} from './tabs/activity/tracking/ActivityTrackingPanel';
 import {generalTab} from './tabs/general/GeneralTab';
 import {monitorTab} from './tabs/monitor/MonitorTab';
 import {userDataTab} from './tabs/userData/UserDataTab';
+import {clientTab} from './tabs/client/ClientTab';
 
 export class AppModel extends HoistAppModel {
     static instance: AppModel;
@@ -79,27 +80,28 @@ export class AppModel extends HoistAppModel {
                             {name: 'memory', path: '/memory'},
                             {name: 'jdbcPool', path: '/jdbcPool'},
                             {name: 'environment', path: '/environment'},
-                            {name: 'services', path: '/services'},
-                            {name: 'hibernate', path: '/hibernate'},
-                            {name: 'consistency', path: '/consistency'},
-                            {name: 'webSockets', path: '/webSockets'}
+                            {name: 'services', path: '/services'}
                         ]
                     },
                     {name: 'objects', path: '/objects'}
                 ]
             },
+            {
+                name: 'clients',
+                path: '/clients',
+                children: [
+                    {name: 'connections', path: '/connections'},
+                    {name: 'errors', path: '/errors'},
+                    {name: 'feedback', path: '/feedback'}
+                ]
+            },
             {
                 name: 'monitors',
                 path: '/monitors'
             },
             {
                 name: 'activity',
-                path: '/activity',
-                children: [
-                    {name: 'tracking', path: '/tracking'},
-                    {name: 'clientErrors', path: '/clientErrors'},
-                    {name: 'feedback', path: '/feedback'}
-                ]
+                path: '/activity'
             },
             {
                 name: 'userData',
@@ -126,6 +128,11 @@ export class AppModel extends HoistAppModel {
                 icon: Icon.server(),
                 content: clusterTab
             },
+            {
+                id: 'clients',
+                icon: Icon.desktop(),
+                content: clientTab
+            },
             {
                 id: 'monitors',
                 icon: Icon.shieldCheck(),
@@ -140,7 +147,7 @@ export class AppModel extends HoistAppModel {
                 id: 'activity',
                 title: 'User Activity',
                 icon: Icon.analytics(),
-                content: activityTab
+                content: activityTrackingPanel
             }
         ];
     }

package/admin/columns/Core.ts

@@ -4,8 +4,12 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {badge} from '@xh/hoist/cmp/badge';
 import {ColumnSpec, dateTimeSec} from '@xh/hoist/cmp/grid';
+import {XH} from '@xh/hoist/core';
 import {dateTimeRenderer} from '@xh/hoist/format';
+import {Icon} from '@xh/hoist/icon';
+import copy from 'clipboard-copy';
 
 export const name: ColumnSpec = {
     field: {name: 'name', type: 'string'},
@@ -46,3 +50,28 @@ export const timestampNoYear: ColumnSpec = {
     ...dateTimeSec,
     renderer: dateTimeRenderer({fmt: 'MMM DD HH:mm:ss.SSS'})
 };
+
+export function badgeRenderer(v) {
+    return v
+        ? badge({
+              item: v,
+              className: 'xh-font-family-mono',
+              style: {cursor: 'copy'},
+              intent: 'primary',
+              title: 'Double-click to copy',
+              onDoubleClick: () => {
+                  copy(v);
+                  XH.toast({
+                      icon: Icon.copy(),
+                      message: `Copied ${v}`
+                  });
+              }
+          })
+        : '-';
+}
+
+export const badgeCol: ColumnSpec = {
+    autosizable: false,
+    width: 90,
+    renderer: badgeRenderer
+};

package/admin/columns/Tracking.ts

@@ -4,14 +4,12 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {badgeRenderer} from '@xh/hoist/admin/columns';
 import {RangeAggregator} from '@xh/hoist/admin/tabs/activity/aggregators/RangeAggregator';
-import {badge} from '@xh/hoist/cmp/badge';
-import {XH} from '@xh/hoist/core';
-import {Icon} from '@xh/hoist/icon';
-import {fmtDate, fmtSpan, numberRenderer} from '@xh/hoist/format';
 import * as Col from '@xh/hoist/cmp/grid/columns';
 import {ColumnSpec} from '@xh/hoist/cmp/grid/columns';
-import copy from 'clipboard-copy';
+import {fmtDate, fmtSpan, numberRenderer} from '@xh/hoist/format';
+import {Icon} from '@xh/hoist/icon';
 
 export const appEnvironment: ColumnSpec = {
     field: {
@@ -243,21 +241,3 @@ function dayRangeComparator(rangeA, rangeB, sortDir, abs, {defaultComparator}) {
 
     return defaultComparator(maxA, maxB);
 }
-
-function badgeRenderer(v) {
-    return v
-        ? badge({
-              item: v,
-              className: 'xh-font-family-mono',
-              style: {cursor: 'copy'},
-              title: 'Double-click to copy',
-              onDoubleClick: () => {
-                  copy(v);
-                  XH.toast({
-                      icon: Icon.copy(),
-                      message: `Copied ${v}`
-                  });
-              }
-          })
-        : '-';
-}

package/admin/tabs/BaseAdminTabModel.ts

@@ -0,0 +1,17 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+import {HoistModel, XH} from '@xh/hoist/core';
+import {createRef} from 'react';
+import {isDisplayed} from '@xh/hoist/utils/js';
+
+export class BaseAdminTabModel extends HoistModel {
+    viewRef = createRef<HTMLElement>();
+
+    get isVisible() {
+        return XH.pageIsVisible && isDisplayed(this.viewRef.current);
+    }
+}

package/admin/tabs/activity/{ActivityTab.scss → tracking/ActivityTracking.scss}

@@ -56,14 +56,6 @@
     }
   }
 
-  &__message {
-    background-color: var(--xh-grid-bg-odd);
-    padding: var(--xh-pad-px);
-    overflow: auto;
-    width: 100%;
-    height: 100%;
-  }
-
   h3 {
     color: var(--xh-text-color-headings);
     background-color: var(--xh-blue-gray-light);

package/admin/tabs/activity/tracking/ActivityTrackingPanel.ts

@@ -21,6 +21,7 @@ import {LocalDate} from '@xh/hoist/utils/datetime';
 import {ActivityTrackingModel} from './ActivityTrackingModel';
 import {chartsPanel} from './charts/ChartsPanel';
 import {activityDetailView} from './detail/ActivityDetailView';
+import './ActivityTracking.scss';
 
 export const activityTrackingPanel = hoistCmp.factory({
     model: creates(ActivityTrackingModel),

package/admin/tabs/activity/tracking/detail/ActivityDetailView.ts

@@ -39,6 +39,7 @@ const tbar = hoistCmp.factory(({model}) => {
     return toolbar(
         filler(),
         gridCountLabel({unit: 'entry'}),
+        '-',
         gridFindField(),
         colChooserButton(),
         exportButton()
@@ -48,9 +49,12 @@ const tbar = hoistCmp.factory(({model}) => {
 // Discrete outer panel to retain sizing across master/detail selection changes.
 const detailRecPanel = hoistCmp.factory<ActivityDetailModel>(({model}) => {
     return panel({
+        collapsedTitle: 'Activity Details',
+        collapsedIcon: Icon.info(),
+        compactHeader: true,
         modelConfig: {
             side: 'bottom',
-            defaultSize: 370
+            defaultSize: 400
         },
         item: detailRecForm()
     });

package/admin/tabs/{activity/ActivityTab.ts → client/ClientTab.ts}

@@ -7,19 +7,18 @@
 import {tabContainer} from '@xh/hoist/cmp/tab';
 import {hoistCmp} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
-import './ActivityTab.scss';
-import {clientErrorsPanel} from './clienterrors/ClientErrorsPanel';
+import {clientErrorsPanel} from '@xh/hoist/admin/tabs/client/errors/ClientErrorsPanel';
 import {feedbackPanel} from './feedback/FeedbackPanel';
-import {activityTrackingPanel} from './tracking/ActivityTrackingPanel';
+import {clientsPanel} from './clients/ClientsPanel';
 
-export const activityTab = hoistCmp.factory(() =>
+export const clientTab = hoistCmp.factory(() =>
     tabContainer({
         modelConfig: {
-            route: 'default.activity',
-            switcher: {orientation: 'left', testId: 'activity-tab-switcher'},
+            route: 'default.clients',
+            switcher: {orientation: 'left', testId: 'client-tab-switcher'},
             tabs: [
-                {id: 'tracking', icon: Icon.analytics(), content: activityTrackingPanel},
-                {id: 'clientErrors', icon: Icon.warning(), content: clientErrorsPanel},
+                {id: 'connections', icon: Icon.diff(), content: clientsPanel},
+                {id: 'errors', icon: Icon.warning(), content: clientErrorsPanel},
                 {id: 'feedback', icon: Icon.comment(), content: feedbackPanel}
             ]
         }

package/admin/tabs/{cluster/instances/websocket/WebSocketColumns.ts → client/clients/ClientsColumns.ts}

@@ -4,9 +4,10 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {Icon} from '@xh/hoist/icon';
+import {badgeCol} from '@xh/hoist/admin/columns';
 import * as Col from '@xh/hoist/cmp/grid/columns';
 import {ColumnSpec} from '@xh/hoist/cmp/grid/columns';
+import {Icon} from '@xh/hoist/icon';
 
 export const isOpen: ColumnSpec = {
     field: {name: 'isOpen', type: 'bool'},
@@ -20,7 +21,11 @@ export const isOpen: ColumnSpec = {
 };
 
 export const key: ColumnSpec = {
-    field: {name: 'key', type: 'string'},
+    field: {
+        name: 'key',
+        type: 'string',
+        displayName: 'Channel Key'
+    },
     width: 160
 };
 
@@ -76,8 +81,8 @@ export const lastReceivedTime: ColumnSpec = {
 export const appVersion: ColumnSpec = {
     field: {
         name: 'appVersion',
-        type: 'string',
-        displayName: 'Client Version'
+        displayName: 'Version',
+        type: 'string'
     },
     width: 120
 };
@@ -85,6 +90,7 @@ export const appVersion: ColumnSpec = {
 export const appBuild: ColumnSpec = {
     field: {
         name: 'appBuild',
+        displayName: 'Build',
         type: 'string'
     },
     width: 120
@@ -94,12 +100,12 @@ export const loadId: ColumnSpec = {
         name: 'loadId',
         type: 'string'
     },
-    width: 120
+    ...badgeCol
 };
 export const tabId: ColumnSpec = {
     field: {
         name: 'tabId',
         type: 'string'
     },
-    width: 120
+    ...badgeCol
 };

package/admin/tabs/{cluster/instances/websocket/WebSocketModel.ts → client/clients/ClientsModel.ts}

@@ -7,27 +7,30 @@
 import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {AppModel} from '@xh/hoist/admin/AppModel';
 import * as Col from '@xh/hoist/admin/columns';
-import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/instances/BaseInstanceModel';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {div, p} from '@xh/hoist/cmp/layout';
 import {LoadSpec, managed, XH} from '@xh/hoist/core';
 import {RecordActionSpec, StoreRecord} from '@xh/hoist/data';
 import {textInput} from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';
-import {makeObservable, observable, runInAction} from '@xh/hoist/mobx';
+import {bindable, makeObservable, observable, runInAction} from '@xh/hoist/mobx';
 import {Timer} from '@xh/hoist/utils/async';
 import {SECONDS} from '@xh/hoist/utils/datetime';
 import {pluralize} from '@xh/hoist/utils/js';
 import {isEmpty} from 'lodash';
-import * as WSCol from './WebSocketColumns';
+import * as WSCol from './ClientsColumns';
+import {BaseAdminTabModel} from '@xh/hoist/admin/tabs/BaseAdminTabModel';
 
-export class WebSocketModel extends BaseInstanceModel {
+export class ClientsModel extends BaseAdminTabModel {
     @observable
     lastRefresh: number;
 
     @managed
     gridModel: GridModel;
 
+    @bindable
+    groupBy: 'user' | 'instance' = null;
+
     @managed
     private _timer: Timer;
 
@@ -52,75 +55,39 @@ export class WebSocketModel extends BaseInstanceModel {
         super();
         makeObservable(this);
 
-        this.gridModel = new GridModel({
-            emptyText: 'No clients connected.',
-            enableExport: true,
-            exportOptions: {filename: exportFilenameWithDate('ws-connections')},
-            selModel: 'multiple',
-            contextMenu: [
-                this.forceSuspendAction,
-                this.reqHealthReportAction,
-                '-',
-                ...GridModel.defaultContextMenu
-            ],
-            store: {
-                idSpec: 'key',
-                processRawData: row => {
-                    const authUser = row.authUser.username,
-                        apparentUser = row.apparentUser.username,
-                        impersonating = authUser !== apparentUser;
-
-                    return {
-                        ...row,
-                        authUser,
-                        apparentUser,
-                        user: impersonating ? `${authUser} (as ${apparentUser})` : authUser
-                    };
-                },
-                fields: [
-                    {name: 'authUser', type: 'string'},
-                    {name: 'apparentUser', type: 'string'}
-                ]
-            },
-            sortBy: ['key'],
-            columns: [
-                WSCol.isOpen,
-                WSCol.key,
-                Col.user,
-                WSCol.createdTime,
-                WSCol.sentMessageCount,
-                WSCol.lastSentTime,
-                WSCol.receivedMessageCount,
-                WSCol.lastReceivedTime,
-                WSCol.appVersion,
-                WSCol.appBuild,
-                WSCol.loadId,
-                WSCol.tabId
-            ]
-        });
+        this.gridModel = this.createGridModel();
 
         this._timer = Timer.create({
-            runFn: () => {
-                if (this.isVisible) this.autoRefreshAsync();
+            runFn: async () => {
+                if (this.isVisible) {
+                    await this.autoRefreshAsync();
+                }
             },
             interval: 5 * SECONDS,
             delay: true
         });
+
+        this.addReaction({
+            track: () => this.groupBy,
+            run: () => this.applyGroupBy()
+        });
     }
 
     override async doLoadAsync(loadSpec: LoadSpec) {
         try {
             const data = await XH.fetchJson({
-                url: 'webSocketAdmin/allChannels',
-                params: {instance: this.instanceName},
+                url: 'clientAdmin/allClients',
                 loadSpec
             });
+            if (loadSpec.isStale) return;
+
             this.gridModel.loadData(data);
             runInAction(() => {
                 this.lastRefresh = Date.now();
             });
         } catch (e) {
-            this.handleLoadException(e, loadSpec);
+            if (loadSpec.isStale) return;
+            XH.handleException(e, {alertType: 'toast'});
         }
     }
 
@@ -172,6 +139,76 @@ export class WebSocketModel extends BaseInstanceModel {
     //------------------
     // Implementation
     //------------------
+    private createGridModel(): GridModel {
+        const hidden = true;
+
+        return new GridModel({
+            emptyText: 'No clients connected.',
+            groupBy: this.groupBy,
+            colChooserModel: true,
+            enableExport: true,
+            selModel: 'multiple',
+            exportOptions: {filename: exportFilenameWithDate('clients')},
+            restoreDefaultsFn: async () => this.applyGroupBy(),
+            contextMenu: [
+                this.forceSuspendAction,
+                this.reqHealthReportAction,
+                '-',
+                ...GridModel.defaultContextMenu
+            ],
+            store: {
+                idSpec: 'key',
+                processRawData: row => {
+                    const authUser = row.authUser.username,
+                        apparentUser = row.apparentUser.username,
+                        impersonating = authUser !== apparentUser;
+
+                    return {
+                        ...row,
+                        authUser,
+                        apparentUser,
+                        user: impersonating ? `${authUser} (as ${apparentUser})` : authUser
+                    };
+                },
+                fields: [
+                    {name: 'authUser', type: 'string'},
+                    {name: 'apparentUser', type: 'string'}
+                ]
+            },
+            sortBy: ['user'],
+            columns: [
+                WSCol.isOpen,
+                Col.user,
+                {
+                    headerName: 'Session',
+                    headerAlign: 'center',
+                    children: [
+                        WSCol.createdTime,
+                        {...WSCol.key, hidden},
+                        Col.instance,
+                        WSCol.loadId,
+                        WSCol.tabId
+                    ]
+                },
+                {
+                    headerName: 'Client App',
+                    headerAlign: 'center',
+                    children: [WSCol.appVersion, WSCol.appBuild]
+                },
+                {
+                    headerName: 'Send/Receive',
+                    headerAlign: 'center',
+                    children: [
+                        WSCol.sentMessageCount,
+                        WSCol.lastSentTime,
+                        WSCol.receivedMessageCount,
+                        WSCol.lastReceivedTime
+                    ]
+                }
+            ]
+        });
+    }
+
     private async bulkPush({
         toRecs,
         topic,
@@ -187,10 +224,10 @@ export class WebSocketModel extends BaseInstanceModel {
 
         const tasks = toRecs.map(rec =>
             XH.fetchJson({
-                url: 'webSocketAdmin/pushToChannel',
+                url: 'clientAdmin/pushToClient',
                 params: {
                     channelKey: rec.data.key,
-                    instance: this.instanceName,
+                    instance: rec.data.instance,
                     topic,
                     message
                 }
@@ -204,4 +241,9 @@ export class WebSocketModel extends BaseInstanceModel {
             omit: !trackMessage
         });
     }
+
+    private applyGroupBy() {
+        const {groupBy, gridModel} = this;
+        gridModel.setGroupBy(groupBy);
+    }
 }

package/admin/tabs/{cluster/instances/websocket/WebSocketPanel.ts → client/clients/ClientsPanel.ts}

@@ -4,36 +4,48 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {WebSocketModel} from '@xh/hoist/admin/tabs/cluster/instances/websocket/WebSocketModel';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
-import {box, filler, fragment, p} from '@xh/hoist/cmp/layout';
+import {filler, fragment, p} from '@xh/hoist/cmp/layout';
 import {relativeTimestamp} from '@xh/hoist/cmp/relativetimestamp';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
-import {exportButton} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/cmp/error';
+import {colChooserButton, exportButton} from '@xh/hoist/desktop/cmp/button';
+import {select} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {recordActionBar} from '@xh/hoist/desktop/cmp/record';
-import {toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
+import {ClientsModel} from './ClientsModel';
 
-export const webSocketPanel = hoistCmp.factory<WebSocketModel>({
-    model: creates(WebSocketModel),
+export const clientsPanel = hoistCmp.factory<ClientsModel>({
+    model: creates(ClientsModel),
 
     render({model}) {
         if (!XH.webSocketService.enabled) return notPresentMessage();
 
         return panel({
-            bbar: [
+            tbar: [
+                select({
+                    bind: 'groupBy',
+                    placeholder: 'Ungrouped',
+                    options: [
+                        {value: 'user', label: 'By User'},
+                        {value: 'instance', label: 'By Instance'}
+                    ],
+                    enableClear: true,
+                    enableFilter: false
+                }),
+                '-',
                 recordActionBar({
                     selModel: model.gridModel.selModel,
                     actions: [model.forceSuspendAction, model.reqHealthReportAction]
                 }),
                 filler(),
-                relativeTimestamp({bind: 'lastRefresh', options: {prefix: 'Refreshed'}}),
-                toolbarSep(),
+                relativeTimestamp({bind: 'lastRefresh'}),
+                '-',
                 gridCountLabel({unit: 'client'}),
-                toolbarSep(),
+                '-',
                 storeFilterField(),
+                colChooserButton(),
                 exportButton()
             ],
             item: grid(),
@@ -44,20 +56,14 @@ export const webSocketPanel = hoistCmp.factory<WebSocketModel>({
 });
 
 const notPresentMessage = hoistCmp.factory(() =>
-    box({
-        height: 200,
-        width: 1000,
-        items: [
-            errorMessage({
-                error: {
-                    message: fragment(
-                        p('WebSockets are not enabled in this application.'),
-                        p(
-                            'Please ensure that you have enabled web sockets in your server and client application configuration.'
-                        )
-                    )
-                }
-            })
-        ]
+    errorMessage({
+        error: {
+            message: fragment(
+                p('WebSockets are not enabled in this application.'),
+                p(
+                    'Please ensure that you have enabled WebSockets in your server and client application configuration.'
+                )
+            )
+        }
     })
 );