@xh/hoist 72.2.0 → 72.4.0

package/CHANGELOG.md

@@ -1,8 +1,46 @@
 # Changelog
 
+## v72.4.0 - 2025-04-09
+
+### 🎁 New Features
+* New methods for formatting timestamps within nested JSON objects.  See `withFormattedTimestamps`
+  and `timestampReplacer` in the `@xh/hoist/format` package.
+* `ViewManagerConfig` takes new optional key `viewMenuItemFn` to allow ViewManager implementations
+  to customize the menu items for views in the view manager menu.
+
+### ⚙️ Technical
+* Added dedicated `ClientHealthService` for managing client health report. Additional enhancements
+  to health report to include information about web sockets, idle time, and page state.
+
+## v72.3.0 - 2025-04-08
+
+### 🎁 New Features
+
+* Added support for posting a "Client Health Report" track message on a configurable interval. This
+  message will include basic client information, and can be extended to include any other desired
+  data via `XH.clientHealthService.addSource()`. Enable by updating your app's
+  `xhActivityTrackingConfig` to include `clientHealthReport: {intervalMins: XXXX}`.
+* Enabled opt-in support for telemetry in `MsalClient`, leveraging hooks built-in to MSAL to collect
+  timing and success/failure count for all events emitted by the library.
+* Added the reported client app version as a column in the Admin Console WebSockets tab.
+
+### 🐞 Bug Fixes
+
+* Improved fetch request tracking to include time spent loading headers as specified by application.
+
+### ⚙️ Technical
+
+* Update shape of returned `BrowserUtils.getClientDeviceInfo()` to nest several properties under new
+  top-level `window` key and report JS heap size / usage values under the `memory` block in MB.
+
+### 📚 Libraries
+
+* @azure/msal-browser `3.28 → 4.8.0`
+
 ## v72.2.0 - 2025-03-13
 
 ### 🎁 New Features
+
 * Modified `TabContainerModel` to make more methods `protected`, improving extensibility for
   advanced use-cases.
 * Enhanced `XH.reloadApp` with new argument to clear query parameters before loading.
@@ -15,8 +53,8 @@
 
 ### 🐞 Bug Fixes
 
-* Prevent native browser context menu on Dash Canvas surfaces. It can hide the Dash Canvas custom
-  context menu when an app's `showBrowserContextMenu` flag is `true`.
+* Prevented native browser context menu from showing on `DashCanvas` surfaces and obscuring the
+  `DashCanvas` custom context menu.
 
 ## v72.1.0 - 2025-02-13
 

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

@@ -9,9 +9,9 @@ import * as Col from '@xh/hoist/admin/columns';
 import {FormModel} from '@xh/hoist/cmp/form';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, lookup, managed} from '@xh/hoist/core';
-import {fmtJson} from '@xh/hoist/format';
 import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {ActivityTrackingModel} from '../ActivityTrackingModel';
+import {fmtJson, timestampReplacer} from '@xh/hoist/format';
 
 export class ActivityDetailModel extends HoistModel {
     @lookup(ActivityTrackingModel) activityTrackingModel: ActivityTrackingModel;
@@ -118,7 +118,7 @@ export class ActivityDetailModel extends HoistModel {
         let formattedTrackData = trackData;
         if (formattedTrackData) {
             try {
-                formattedTrackData = fmtJson(trackData);
+                formattedTrackData = fmtJson(trackData, {replacer: timestampReplacer()});
             } catch (ignored) {}
         }
 

package/admin/tabs/cluster/instances/BaseInstanceModel.ts

@@ -5,10 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {InstancesTabModel} from '@xh/hoist/admin/tabs/cluster/instances/InstancesTabModel';
-import {HoistModel, LoadSpec, lookup, PlainObject, XH} from '@xh/hoist/core';
-import {fmtDateTimeSec, fmtJson} from '@xh/hoist/format';
-import {DAYS} from '@xh/hoist/utils/datetime';
-import {cloneDeep, forOwn, isArray, isNumber, isPlainObject} from 'lodash';
+import {HoistModel, LoadSpec, lookup, XH} from '@xh/hoist/core';
 import {createRef} from 'react';
 import {isDisplayed} from '@xh/hoist/utils/js';
 
@@ -21,12 +18,6 @@ export class BaseInstanceModel extends HoistModel {
         return this.parent.instanceName;
     }
 
-    fmtStats(stats: PlainObject): string {
-        stats = cloneDeep(stats);
-        this.processTimestamps(stats);
-        return fmtJson(JSON.stringify(stats));
-    }
-
     handleLoadException(e: unknown, loadSpec: LoadSpec) {
         const instanceNotFound = this.isInstanceNotFound(e),
             connDown = this.parent.lastLoadException,
@@ -49,23 +40,4 @@ export class BaseInstanceModel extends HoistModel {
     private isInstanceNotFound(e: unknown): boolean {
         return e['name'] == 'InstanceNotFoundException';
     }
-
-    private processTimestamps(stats: PlainObject) {
-        forOwn(stats, (v, k) => {
-            // Convert numbers that look like recent timestamps to date values.
-            if (
-                (k.endsWith('Time') ||
-                    k.endsWith('Date') ||
-                    k.endsWith('Timestamp') ||
-                    k == 'timestamp') &&
-                isNumber(v) &&
-                v > Date.now() - 365 * DAYS
-            ) {
-                stats[k] = v ? fmtDateTimeSec(v, {fmt: 'MMM DD HH:mm:ss.SSS'}) : null;
-            }
-            if (isPlainObject(v) || isArray(v)) {
-                this.processTimestamps(v);
-            }
-        });
-    }
 }

package/admin/tabs/cluster/instances/InstancesTabModel.ts

@@ -149,7 +149,7 @@ export class InstancesTabModel extends HoistModel {
                 },
                 {
                     ...usedHeapMb,
-                    headerName: 'Heap (MB)'
+                    headerName: 'Heap (mb)'
                 },
                 {
                     ...usedPctMax,
@@ -214,11 +214,12 @@ export class InstancesTabModel extends HoistModel {
     private async shutdownInstanceAsync(instance: PlainObject) {
         if (
             !(await XH.confirm({
-                message: `Are you SURE you want to shutdown instance ${instance.name}?`,
+                message: `Are you sure you wish to immediately terminate instance ${instance.name}?`,
                 confirmProps: {
                     icon: Icon.skull(),
-                    text: 'Shutdown Now',
+                    text: 'Yes, kill the instance',
                     intent: 'danger',
+                    outlined: true,
                     autoFocus: false
                 }
             }))

package/admin/tabs/cluster/instances/logs/LogDisplay.ts

@@ -6,12 +6,12 @@
  */
 import {clock} from '@xh/hoist/cmp/clock';
 import {grid} from '@xh/hoist/cmp/grid';
-import {code, filler, fragment, hspacer, label, placeholder} from '@xh/hoist/cmp/layout';
+import {filler, fragment, hspacer, label, placeholder} from '@xh/hoist/cmp/layout';
+import {loadingIndicator} from '@xh/hoist/cmp/loadingindicator';
 import {hoistCmp, uses, XH} from '@xh/hoist/core';
 import {button, modalToggleButton} from '@xh/hoist/desktop/cmp/button';
 import {gridFindField} from '@xh/hoist/desktop/cmp/grid';
 import {numberInput, switchInput, textInput} from '@xh/hoist/desktop/cmp/input';
-import {loadingIndicator} from '@xh/hoist/cmp/loadingindicator';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
@@ -48,7 +48,7 @@ const tbar = hoistCmp.factory<LogDisplayModel>(({model}) => {
         numberInput({
             bind: 'startLine',
             min: 1,
-            width: 80,
+            width: 70,
             disabled: model.tail,
             displayWithCommas: true
         }),
@@ -57,13 +57,13 @@ const tbar = hoistCmp.factory<LogDisplayModel>(({model}) => {
         numberInput({
             bind: 'maxLines',
             min: 1,
-            width: 80,
+            width: 70,
             displayWithCommas: true
         }),
         '-',
         textInput({
             bind: 'pattern',
-            placeholder: 'Filter',
+            placeholder: 'Filter lines...',
             leftIcon: Icon.filter(),
             flex: 1,
             rightElement: fragment(
@@ -85,7 +85,7 @@ const tbar = hoistCmp.factory<LogDisplayModel>(({model}) => {
                 })
             )
         }),
-        gridFindField({flex: 1}),
+        gridFindField({flex: 1, placeholder: 'Find lines...'}),
         '-',
         switchInput({
             bind: 'tail',
@@ -123,16 +123,14 @@ const bbar = hoistCmp.factory<LogDisplayModel>({
             }),
             filler(),
             Icon.clock(),
-            code(
-                clock({
-                    timezone: zone,
-                    format: 'HH:mm',
-                    suffix: fmtTimeZone(zone, offset)
-                })
-            ),
+            clock({
+                timezone: zone,
+                format: 'HH:mm',
+                suffix: fmtTimeZone(zone, offset)
+            }),
             fragment({
                 omit: !logRootPath,
-                items: [toolbarSep(), Icon.folder(), code(logRootPath)]
+                items: [toolbarSep(), Icon.folder({className: 'xh-margin-right'}), logRootPath]
             })
         );
     }

package/admin/tabs/cluster/instances/logs/LogDisplayModel.ts

@@ -117,8 +117,6 @@ export class LogDisplayModel extends HoistModel {
             },
             loadSpec
         });
-        // Backward compatibility for Hoist Core < v22, which returned exception in-band
-        if (!response.success) throw XH.exception(response.exception);
         this.updateGridData(response.content);
     }
 

package/admin/tabs/cluster/instances/logs/LogViewer.ts

@@ -5,8 +5,8 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {logLevelDialog} from '@xh/hoist/admin/tabs/cluster/instances/logs/levels/LogLevelDialog';
-import {grid} from '@xh/hoist/cmp/grid';
-import {hframe} from '@xh/hoist/cmp/layout';
+import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
+import {filler, hframe} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {errorMessage} from '@xh/hoist/cmp/error';
@@ -37,9 +37,8 @@ export const logViewer = hoistCmp.factory({
                         side: 'left',
                         defaultSize: 380
                     },
-                    item: grid(),
-                    bbar: [
-                        storeFilterField({flex: 1}),
+                    tbar: [
+                        storeFilterField({flex: 1, placeholder: 'Filter files...'}),
                         select({
                             leftIcon: Icon.server(),
                             bind: 'instanceOnly',
@@ -53,6 +52,8 @@ export const logViewer = hoistCmp.factory({
                             ]
                         })
                     ],
+                    item: grid(),
+                    bbar: [filler(), gridCountLabel({unit: 'log file'})],
                     mask: 'onLoad'
                 }),
                 logDisplay(),

package/admin/tabs/cluster/instances/logs/LogViewerModel.ts

@@ -13,6 +13,7 @@ import {RecordActionSpec} from '@xh/hoist/data';
 import {compactDateRenderer, fmtNumber} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 import {bindable, makeObservable, observable} from '@xh/hoist/mobx';
+import {pluralize} from '@xh/hoist/utils/js';
 import download from 'downloadjs';
 import {LogDisplayModel} from './LogDisplayModel';
 
@@ -119,7 +120,13 @@ export class LogViewerModel extends BaseInstanceModel {
             if (!count) return;
 
             const confirmed = await XH.confirm({
-                message: `Delete ${count} log files on the server? This cannot be undone.`
+                message: `Are you sure you want to delete ${pluralize('log file', count, true)}? This cannot be undone.`,
+                confirmProps: {
+                    text: `Yes, delete the ${pluralize('file', count)}`,
+                    intent: 'danger',
+                    outlined: true,
+                    autoFocus: false
+                }
             });
             if (!confirmed) return;
 

package/admin/tabs/cluster/instances/memory/MemoryMonitorModel.ts

@@ -131,6 +131,7 @@ export class MemoryMonitorModel extends BaseInstanceModel {
                 },
                 {
                     groupId: 'GC',
+                    headerName: 'Garbage Collection',
                     headerAlign: 'center',
                     children: [collectionCount, avgCollectionTime, pctCollectionTime]
                 }

package/admin/tabs/cluster/instances/services/DetailsModel.ts

@@ -5,7 +5,6 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {HoistModel, LoadSpec, lookup, PlainObject, XH} from '@xh/hoist/core';
-import {StoreRecord} from '@xh/hoist/data';
 import {bindable} from '@xh/hoist/mobx';
 import {ServiceModel} from './ServiceModel';
 
@@ -14,7 +13,7 @@ export class DetailsModel extends HoistModel {
     parent: ServiceModel;
 
     @bindable.ref
-    svcName: StoreRecord;
+    svcName: String;
 
     @bindable.ref
     stats: PlainObject;

package/admin/tabs/cluster/instances/services/DetailsPanel.ts

@@ -11,6 +11,8 @@ import {errorMessage} from '@xh/hoist/cmp/error';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {jsonInput} from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';
+import {isEmpty} from 'lodash';
+import {fmtJson, timestampReplacer} from '@xh/hoist/format';
 
 export const detailsPanel = hoistCmp.factory({
     model: creates(DetailsModel),
@@ -18,7 +20,7 @@ export const detailsPanel = hoistCmp.factory({
     render({model}) {
         const {svcName} = model;
         return panel({
-            title: svcName ? `Stats: ${svcName}` : 'Stats',
+            title: svcName ?? 'Stats',
             mask: 'onLoad',
             icon: Icon.info(),
             compactHeader: true,
@@ -42,18 +44,22 @@ const stats = hoistCmp.factory<DetailsModel>({
             });
         }
 
-        if (stats == null) return null;
-
-        return panel(
-            jsonInput({
-                readonly: true,
-                width: '100%',
-                height: '100%',
-                enableSearch: true,
-                showFullscreenButton: false,
-                editorProps: {lineNumbers: false},
-                value: model.parent.fmtStats(stats)
-            })
-        );
+        return isEmpty(stats)
+            ? placeholder(
+                  ...(loadModel.isPending
+                      ? []
+                      : [Icon.questionCircle(), 'This service does not report any admin stats.'])
+              )
+            : panel(
+                  jsonInput({
+                      readonly: true,
+                      width: '100%',
+                      height: '100%',
+                      enableSearch: true,
+                      showFullscreenButton: false,
+                      editorProps: {lineNumbers: false},
+                      value: fmtJson(stats, {replacer: timestampReplacer()})
+                  })
+              );
     }
 });

package/admin/tabs/cluster/instances/services/ServiceModel.ts

@@ -10,7 +10,7 @@ import {timestampNoYear} from '@xh/hoist/admin/columns';
 import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/instances/BaseInstanceModel';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {br, fragment} from '@xh/hoist/cmp/layout';
-import {LoadSpec, managed, XH} from '@xh/hoist/core';
+import {LoadSpec, managed, PlainObject, XH} from '@xh/hoist/core';
 import {FilterLike, FilterTestFn, RecordActionSpec} from '@xh/hoist/data';
 import {Icon} from '@xh/hoist/icon';
 import {bindable, makeObservable} from '@xh/hoist/mobx';
@@ -52,15 +52,16 @@ export class ServiceModel extends BaseInstanceModel {
         selModel: 'multiple',
         enableExport: true,
         exportOptions: {filename: exportFilenameWithDate('services')},
+        groupBy: 'provider',
         store: {
             idSpec: 'name',
             processRawData: this.processRawData,
             fields: [
                 {name: 'provider', type: 'string'},
                 {name: 'name', type: 'string'},
-                {name: 'displayName', type: 'string'},
+                {name: 'displayName', type: 'string', displayName: 'Service'},
                 {name: 'initializedDate', type: 'date', displayName: 'Initialized'},
-                {name: 'lastCachesCleared', type: 'date', displayName: 'Last Cleared'}
+                {name: 'lastCachesCleared', type: 'date', displayName: 'Caches Last Cleared'}
             ]
         },
         sortBy: ['provider', 'displayName'],
@@ -81,6 +82,7 @@ export class ServiceModel extends BaseInstanceModel {
     constructor() {
         super();
         makeObservable(this);
+
         this.addReaction({
             track: () => [this.textFilter, this.typeFilter],
             run: this.applyFilters,
@@ -91,6 +93,7 @@ export class ServiceModel extends BaseInstanceModel {
     async clearCachesAsync(entireCluster: boolean) {
         const {gridModel, instanceName, loadModel} = this,
             {selectedRecords} = gridModel;
+
         if (isEmpty(selectedRecords)) return;
 
         const cacheStr =
@@ -131,19 +134,24 @@ export class ServiceModel extends BaseInstanceModel {
     }
 
     override async doLoadAsync(loadSpec: LoadSpec) {
+        const {gridModel, instanceName: instance} = this;
         try {
             const data = await XH.fetchJson({
                 url: 'serviceManagerAdmin/listServices',
-                params: {instance: this.instanceName},
+                params: {instance},
                 loadSpec
             });
-            return this.gridModel.loadData(data);
+
+            if (!loadSpec.isStale) {
+                gridModel.loadData(data);
+                gridModel.preSelectFirstAsync();
+            }
         } catch (e) {
             this.handleLoadException(e, loadSpec);
         }
     }
 
-    private processRawData(r) {
+    private processRawData(r: PlainObject) {
         const provider = r.name && r.name.startsWith('hoistCore') ? 'Hoist' : 'App';
         const displayName = lowerFirst(r.name.replace('hoistCore', ''));
         return {provider, displayName, ...r};

package/admin/tabs/cluster/instances/services/ServicePanel.ts

@@ -9,11 +9,11 @@ import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {filler, hframe} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {creates, hoistCmp, uses} from '@xh/hoist/core';
-import {exportButton} from '@xh/hoist/desktop/cmp/button';
+import {button, exportButton} from '@xh/hoist/desktop/cmp/button';
+import {buttonGroupInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {recordActionBar} from '@xh/hoist/desktop/cmp/record';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
-import {select} from '@xh/hoist/desktop/cmp/input';
 import {ServiceModel} from './ServiceModel';
 
 export const servicePanel = hoistCmp.factory({
@@ -52,15 +52,14 @@ const bbar = hoistCmp.factory({
             filler(),
             gridCountLabel({unit: 'service'}),
             '-',
-            select({
-                options: [
-                    {value: 'all', label: 'All'},
-                    {value: 'app', label: 'App Only'},
-                    {value: 'hoist', label: 'Hoist Only'}
-                ],
-                width: 125,
+            buttonGroupInput({
                 bind: 'typeFilter',
-                hideDropdownIndicator: true
+                outlined: true,
+                items: [
+                    button({value: 'all', text: 'All'}),
+                    button({value: 'app', text: 'App'}),
+                    button({value: 'hoist', text: 'Hoist'})
+                ]
             }),
             storeFilterField({
                 matchMode: 'any',

package/admin/tabs/cluster/instances/websocket/WebSocketColumns.ts

@@ -72,3 +72,12 @@ export const lastReceivedTime: ColumnSpec = {
     ...Col.compactDate,
     width: 140
 };
+
+export const clientAppVersion: ColumnSpec = {
+    field: {
+        name: 'clientAppVersion',
+        type: 'string',
+        displayName: 'Client Version'
+    },
+    width: 120
+};

package/admin/tabs/cluster/instances/websocket/WebSocketModel.ts

@@ -77,7 +77,8 @@ export class WebSocketModel extends BaseInstanceModel {
                 WSCol.sentMessageCount,
                 WSCol.lastSentTime,
                 WSCol.receivedMessageCount,
-                WSCol.lastReceivedTime
+                WSCol.lastReceivedTime,
+                WSCol.clientAppVersion
             ]
         });
 

package/admin/tabs/cluster/objects/DetailModel.ts

@@ -6,21 +6,11 @@
  */
 import {ClusterObjectsModel} from '@xh/hoist/admin/tabs/cluster/objects/ClusterObjectsModel';
 import {ColumnSpec, GridModel} from '@xh/hoist/cmp/grid';
-import {HoistModel, lookup, managed, PlainObject, XH} from '@xh/hoist/core';
+import {HoistModel, lookup, managed, XH} from '@xh/hoist/core';
 import {StoreRecord} from '@xh/hoist/data';
-import {fmtDateTimeSec, fmtJson} from '@xh/hoist/format';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
-import {DAYS} from '@xh/hoist/utils/datetime';
-import {
-    cloneDeep,
-    forOwn,
-    isArray,
-    isEmpty,
-    isEqual,
-    isNumber,
-    isPlainObject,
-    without
-} from 'lodash';
+import {isEmpty, isEqual, without} from 'lodash';
+import {withFormattedTimestamps} from '@xh/hoist/format';
 
 export class DetailModel extends HoistModel {
     @lookup(ClusterObjectsModel)
@@ -66,12 +56,6 @@ export class DetailModel extends HoistModel {
         });
     }
 
-    fmtStats(stats: PlainObject): string {
-        stats = cloneDeep(stats);
-        this.processTimestamps(stats);
-        return fmtJson(JSON.stringify(stats));
-    }
-
     //----------------------
     // Implementation
     //----------------------
@@ -95,8 +79,7 @@ export class DetailModel extends HoistModel {
         const gridModel = this.createGridModel(diffFields, otherFields);
         gridModel.loadData(
             instanceNames.map(instanceName => {
-                const data = cloneDeep(adminStatsByInstance[instanceName] ?? {});
-                this.processTimestamps(data);
+                const data = withFormattedTimestamps(adminStatsByInstance[instanceName] ?? {});
                 return {instanceName, ...data};
             })
         );
@@ -136,23 +119,4 @@ export class DetailModel extends HoistModel {
         }
         return ret;
     }
-
-    private processTimestamps(stats: PlainObject) {
-        forOwn(stats, (v, k) => {
-            // Convert numbers that look like recent timestamps to date values.
-            if (
-                (k.endsWith('Time') ||
-                    k.endsWith('Date') ||
-                    k.endsWith('Timestamp') ||
-                    k == 'timestamp') &&
-                isNumber(v) &&
-                v > Date.now() - 365 * DAYS
-            ) {
-                stats[k] = v ? fmtDateTimeSec(v, {fmt: 'MMM DD HH:mm:ss.SSS'}) : null;
-            }
-            if (isPlainObject(v) || isArray(v)) {
-                this.processTimestamps(v);
-            }
-        });
-    }
 }

package/admin/tabs/cluster/objects/DetailPanel.ts

@@ -12,6 +12,7 @@ import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {Icon} from '@xh/hoist/icon';
 import {DetailModel} from './DetailModel';
 import './ClusterObjects.scss';
+import {fmtJson, timestampReplacer} from '@xh/hoist/format';
 
 export const detailPanel = hoistCmp.factory({
     model: creates(DetailModel),
@@ -42,7 +43,7 @@ export const detailPanel = hoistCmp.factory({
                         height: '100%',
                         showFullscreenButton: false,
                         editorProps: {lineNumbers: false},
-                        value: model.fmtStats(selectedAdminStats)
+                        value: fmtJson(selectedAdminStats, {replacer: timestampReplacer()})
                     })
                 })
             ]

package/admin/tabs/userData/roles/RoleModel.ts

@@ -275,7 +275,7 @@ export class RoleModel extends HoistModel {
         return new GridModel({
             treeMode: true,
             treeStyle: TreeStyle.HIGHLIGHTS_AND_BORDERS,
-            autosizeOptions: {mode: 'managed'},
+            autosizeOptions: {mode: 'managed', includeCollapsedChildren: true},
             selModel: 'multiple',
             emptyText: 'No roles found.',
             colChooserModel: true,

package/appcontainer/AppContainerModel.ts

@@ -25,6 +25,7 @@ import {
     AlertBannerService,
     AutoRefreshService,
     ChangelogService,
+    ClientHealthService,
     ConfigService,
     EnvironmentService,
     FetchService,
@@ -237,6 +238,7 @@ export class AppContainerModel extends HoistModel {
                 AlertBannerService,
                 AutoRefreshService,
                 ChangelogService,
+                ClientHealthService,
                 IdleService,
                 InspectorService,
                 GridAutosizeService,