@xh/hoist 73.0.0-SNAPSHOT.1744315927263 → 73.0.0-SNAPSHOT.1744386127895

package/CHANGELOG.md

@@ -6,6 +6,8 @@
 
 * Added option from the Admin Console > Websockets tab to request a client health report from any
   connected clients.
+* Enabled telemetry reporting from `WebSocketService`.
+* Updated `MenuItem.actionFn()` to receive the click event as an additional argument.
 
 ## v72.4.0 - 2025-04-09
 

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

@@ -5,17 +5,17 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {exportFilename} from '@xh/hoist/admin/AdminUtils';
-import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
+import * as Col from '@xh/hoist/admin/columns';
 import {FilterChooserModel} from '@xh/hoist/cmp/filter';
 import {FormModel} from '@xh/hoist/cmp/form';
 import {GridModel, TreeStyle} from '@xh/hoist/cmp/grid';
+import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
 import {Cube, CubeFieldSpec, FieldSpec} from '@xh/hoist/data';
 import {fmtNumber} from '@xh/hoist/format';
 import {action, computed, makeObservable} from '@xh/hoist/mobx';
 import {LocalDate} from '@xh/hoist/utils/datetime';
-import * as Col from '@xh/hoist/admin/columns';
-import {isEmpty, round} from 'lodash';
+import {compact, isEmpty, round} from 'lodash';
 import moment from 'moment';
 
 export const PERSIST_ACTIVITY = {localStorageKey: 'xhAdminActivityState'};
@@ -109,14 +109,13 @@ export class ActivityTrackingModel extends HoistModel {
             ] as CubeFieldSpec[]
         });
 
-        const enableValues = true;
         this.filterChooserModel = new FilterChooserModel({
             fieldSpecs: [
-                {field: 'category', enableValues},
+                {field: 'category'},
                 {field: 'correlationId'},
-                {field: 'username', displayName: 'User', enableValues},
-                {field: 'device', enableValues},
-                {field: 'browser', enableValues},
+                {field: 'username', displayName: 'User'},
+                {field: 'device'},
+                {field: 'browser'},
                 {
                     field: 'elapsed',
                     valueRenderer: v => {
@@ -330,12 +329,21 @@ export class ActivityTrackingModel extends HoistModel {
     }
 
     private async loadLookupsAsync() {
-        const lookups = await XH.fetchJson({url: 'trackLogAdmin/lookups'});
-
-        this.filterChooserModel.fieldSpecs.forEach(spec => {
-            const {field} = spec;
-            if (lookups[field]) spec.values = lookups[field];
-        });
+        try {
+            const lookups = await XH.fetchJson({url: 'trackLogAdmin/lookups'});
+            this.filterChooserModel.fieldSpecs.forEach(spec => {
+                const {field} = spec,
+                    lookup = lookups[field] ? compact(lookups[field]) : null;
+
+                if (!isEmpty(lookup)) {
+                    spec.values = lookup;
+                    spec.enableValues = true;
+                    spec.hasExplicitValues = true;
+                }
+            });
+        } catch (e) {
+            XH.handleException(e, {title: 'Error loading lookups for filtering'});
+        }
     }
 
     @computed

package/build/types/admin/tabs/activity/tracking/ActivityTrackingModel.d.ts

@@ -1,7 +1,7 @@
-import { GroupingChooserModel } from '@xh/hoist/cmp/grouping';
 import { FilterChooserModel } from '@xh/hoist/cmp/filter';
 import { FormModel } from '@xh/hoist/cmp/form';
 import { GridModel } from '@xh/hoist/cmp/grid';
+import { GroupingChooserModel } from '@xh/hoist/cmp/grouping';
 import { HoistModel, LoadSpec } from '@xh/hoist/core';
 import { Cube } from '@xh/hoist/data';
 import { LocalDate } from '@xh/hoist/utils/datetime';

package/build/types/core/types/Interfaces.d.ts

@@ -1,5 +1,5 @@
 import { RuleLike } from '@xh/hoist/data';
-import { ReactElement, ReactNode } from 'react';
+import { MouseEvent, ReactElement, ReactNode } from 'react';
 import { LoadSpec } from '../load';
 import { Intent, PlainObject, Thunkable } from './Types';
 /**
@@ -226,7 +226,7 @@ export interface MenuItem {
     /** Css class name to be added when rendering the menu item. */
     className?: string;
     /** Executed when the user clicks the menu item. */
-    actionFn?: () => void;
+    actionFn?: (e: MouseEvent | PointerEvent) => void;
     /** Executed before the item is shown.  Use to adjust properties dynamically. */
     prepareFn?: (me: MenuItem) => void;
     /** Child menu items. */

package/build/types/security/Types.d.ts

@@ -12,35 +12,3 @@ export interface AccessTokenSpec {
     scopes: string[];
 }
 export type TokenMap = Record<string, Token>;
-/** Aggregated telemetry results, produced by {@link MsalClient} when enabled via config. */
-export interface TelemetryResults {
-    /** Stats across all events */
-    summary: {
-        successCount: number;
-        failureCount: number;
-        maxDuration: number;
-        lastFailureTime: number;
-    };
-    /** Stats by event type */
-    events: Record<string, TelemetryEventResults>;
-}
-/** Aggregated telemetry results for a single type of event. */
-export interface TelemetryEventResults {
-    firstTime: number;
-    lastTime: number;
-    successCount: number;
-    failureCount: number;
-    /** Timing info (in ms) for event instances reported with duration. */
-    duration?: {
-        count: number;
-        total: number;
-        average: number;
-        max: number;
-    };
-    lastFailure?: {
-        time: number;
-        duration: number;
-        code: string;
-        name: string;
-    };
-}

package/build/types/security/msal/MsalClient.d.ts

@@ -3,7 +3,7 @@ import { LogLevel } from '@azure/msal-browser';
 import { PlainObject } from '@xh/hoist/core';
 import { Token } from '@xh/hoist/security/Token';
 import { BaseOAuthClient, BaseOAuthClientConfig } from '../BaseOAuthClient';
-import { AccessTokenSpec, TelemetryResults, TokenMap } from '../Types';
+import { AccessTokenSpec, TokenMap } from '../Types';
 export interface MsalClientConfig extends BaseOAuthClientConfig<MsalTokenSpec> {
     /**
      * Authority for your organization's tenant: `https://login.microsoftonline.com/[tenantId]`.
@@ -19,8 +19,7 @@ export interface MsalClientConfig extends BaseOAuthClientConfig<MsalTokenSpec> {
     domainHint?: string;
     /**
      * True to enable support for built-in telemetry provided by this class's internal MSAL client.
-     * Captured performance events will be summarized via {@link telemetryResults}.
-     * See https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/performance.md
+     * Captured performance events will be summarized as {@link MsalClientTelemetry}.
      */
     enableTelemetry?: boolean;
     /**
@@ -88,7 +87,7 @@ export declare class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTo
     private account;
     private initialTokenLoad;
     /** Enable telemetry via `enableTelemetry` ctor config, or via {@link enableTelemetry}. */
-    telemetryResults: TelemetryResults;
+    telemetry: MsalClientTelemetry;
     private _telemetryCbHandle;
     constructor(config: MsalClientConfig);
     protected doInitAsync(): Promise<TokenMap>;
@@ -108,3 +107,40 @@ export declare class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTo
     private get refreshOffsetArgs();
     private noteUserAuthenticated;
 }
+/**
+ * Telemetry produced by this client (if enabled) + included in {@link ClientHealthService}
+ * reporting. Leverages MSAL's opt-in support for emitting performance events.
+ * See https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/performance.md
+ */
+interface MsalClientTelemetry {
+    /** Stats across all events */
+    summary: {
+        successCount: number;
+        failureCount: number;
+        maxDuration: number;
+        lastFailureTime: number;
+    };
+    /** Stats by event type */
+    events: Record<string, MsalEventTelemetry>;
+}
+/** Aggregated telemetry results for a single type of event. */
+interface MsalEventTelemetry {
+    firstTime: number;
+    lastTime: number;
+    successCount: number;
+    failureCount: number;
+    /** Timing info (in ms) for event instances reported with duration. */
+    duration?: {
+        count: number;
+        total: number;
+        average: number;
+        max: number;
+    };
+    lastFailure?: {
+        time: number;
+        duration: number;
+        code: string;
+        name: string;
+    };
+}
+export {};

package/build/types/svc/ClientHealthService.d.ts

@@ -1,4 +1,5 @@
 import { HoistService, PageState, PlainObject } from '@xh/hoist/core';
+import { WebSocketTelemetry } from '@xh/hoist/svc/WebSocketService';
 /**
  * Service for gathering data about the current state and health of the client app, for submission
  * to the server or review on the console during interactive troubleshooting.
@@ -42,7 +43,6 @@ export interface GeneralData {
     durationMins: number;
     idleMins: number;
     pageState: PageState;
-    webSocket: string;
 }
 export interface ConnectionData {
     downlink: number;
@@ -60,4 +60,5 @@ export interface ClientHealthReport {
     general: GeneralData;
     connection: ConnectionData;
     memory: MemoryData;
+    webSockets: WebSocketTelemetry;
 }

package/build/types/svc/WebSocketService.d.ts

@@ -1,4 +1,4 @@
-import { HoistService } from '@xh/hoist/core';
+import { HoistService, PlainObject } from '@xh/hoist/core';
 /**
  * Establishes and maintains a websocket connection to the Hoist server, if enabled via `AppSpec`.
  *
@@ -28,6 +28,8 @@ export declare class WebSocketService extends HoistService {
     readonly REG_SUCCESS_TOPIC = "xhRegistrationSuccess";
     readonly FORCE_APP_SUSPEND_TOPIC = "xhForceAppSuspend";
     readonly REQ_CLIENT_HEALTH_RPT_TOPIC = "xhRequestClientHealthReport";
+    /** True if WebSockets generally enabled - set statically in code via {@link AppSpec}. */
+    enabled: boolean;
     /** Unique channel assigned by server upon successful connection. */
     channelKey: string;
     /** Last time a message was received, including heartbeat messages. */
@@ -36,10 +38,10 @@ export declare class WebSocketService extends HoistService {
     get connected(): boolean;
     /** Set to true to log all sent/received messages - very chatty. */
     logMessages: boolean;
+    telemetry: WebSocketTelemetry;
     private _timer;
     private _socket;
     private _subsByTopic;
-    enabled: boolean;
     constructor();
     initAsync(): Promise<void>;
     /**
@@ -62,23 +64,24 @@ export declare class WebSocketService extends HoistService {
      * Send a message back to the server via the connected websocket.
      */
     sendMessage(message: WebSocketMessage): void;
-    connect(): void;
-    disconnect(): void;
-    heartbeatOrReconnect(): void;
-    private onServerInstanceChange;
     shutdown(): void;
+    getFormattedTelemetry(): PlainObject;
+    private connect;
+    private disconnect;
+    private heartbeatOrReconnect;
+    private onServerInstanceChange;
     onOpen(ev: any): void;
     onClose(ev: any): void;
     onError(ev: any): void;
     onMessage(rawMsg: MessageEvent): void;
-    notifySubscribers(message: any): void;
-    getSubsForTopic(topic: any): WebSocketSubscription[];
-    updateConnectedStatus(): void;
-    installChannelKey(key: any): void;
-    updateLastMessageTime(): void;
-    buildWebSocketUrl(): string;
-    showTestMessageAlert(message: any): void;
-    maybeLogMessage(...args: any[]): void;
+    private notifySubscribers;
+    private getSubsForTopic;
+    private updateConnectedStatus;
+    private installChannelKey;
+    private updateLastMessageTime;
+    private buildWebSocketUrl;
+    private maybeLogMessage;
+    private noteTelemetryEvent;
 }
 /**
  * Wrapper class to encapsulate and manage a subscription to messages for a given topic + handler.
@@ -94,3 +97,21 @@ export interface WebSocketMessage {
     topic: string;
     data?: any;
 }
+/** Telemetry collected by this service + included in {@link ClientHealthService} reporting. */
+export interface WebSocketTelemetry {
+    channelKey: string;
+    subscriptionCount: number;
+    events: {
+        connOpened?: WebSocketEventTelemetry;
+        connClosed?: WebSocketEventTelemetry;
+        connError?: WebSocketEventTelemetry;
+        msgReceived?: WebSocketEventTelemetry;
+        msgSent?: WebSocketEventTelemetry;
+        heartbeatReconnectAttempt?: WebSocketEventTelemetry;
+        instanceChangeReconnectAttempt?: WebSocketEventTelemetry;
+    };
+}
+export interface WebSocketEventTelemetry {
+    count: number;
+    lastTime: number;
+}

package/core/types/Interfaces.ts

@@ -6,7 +6,7 @@
  */
 
 import {RuleLike} from '@xh/hoist/data';
-import {ReactElement, ReactNode} from 'react';
+import {MouseEvent, ReactElement, ReactNode} from 'react';
 import {LoadSpec} from '../load';
 import {Intent, PlainObject, Thunkable} from './Types';
 
@@ -284,7 +284,7 @@ export interface MenuItem {
     className?: string;
 
     /** Executed when the user clicks the menu item. */
-    actionFn?: () => void;
+    actionFn?: (e: MouseEvent | PointerEvent) => void;
 
     /** Executed before the item is shown.  Use to adjust properties dynamically. */
     prepareFn?: (me: MenuItem) => void;

package/data/filter/BaseFilterFieldSpec.ts

@@ -6,7 +6,7 @@
  */
 import {HoistBase} from '@xh/hoist/core';
 import {Field, Store, FieldFilter, FieldType, genDisplayName, View} from '@xh/hoist/data';
-import {isEmpty} from 'lodash';
+import {compact, isArray, isEmpty} from 'lodash';
 import {FieldFilterOperator} from './Types';
 
 export interface BaseFilterFieldSpecConfig {
@@ -72,7 +72,11 @@ export abstract class BaseFilterFieldSpec extends HoistBase {
         this.displayName = displayName ?? sourceField?.displayName ?? genDisplayName(field);
         this.ops = this.parseOperators(ops);
         this.forceSelection = forceSelection ?? false;
-        this.values = values ?? (this.isBoolFieldType ? [true, false] : null);
+        this.values = isArray(values)
+            ? compact(values)
+            : this.isBoolFieldType
+              ? [true, false]
+              : null;
         this.hasExplicitValues = !isEmpty(this.values);
         this.enableValues = this.hasExplicitValues || (enableValues ?? this.isEnumerableByDefault);
     }

package/desktop/cmp/button/AppMenuButton.ts

@@ -202,7 +202,7 @@ function parseMenuItems(items: MenuItemLike[]): ReactNode[] {
                 icon: item.icon,
                 intent: item.intent,
                 className: item.className,
-                onClick: actionFn ? () => wait().then(actionFn) : null, // do async to allow menu to close
+                onClick: actionFn ? e => wait().then(() => actionFn(e)) : null, // do async to allow menu to close
                 disabled: item.disabled
             };
 

package/desktop/cmp/contextmenu/ContextMenu.ts

@@ -70,7 +70,7 @@ function parseItems(items: MenuItemLike[]): ReactNode[] {
                 icon: item.icon,
                 intent: item.intent,
                 className: item.className,
-                onClick: item.actionFn ? () => wait().then(item.actionFn) : null, // do async to allow menu to close
+                onClick: item.actionFn ? e => wait().then(() => item.actionFn(e)) : null, // do async to allow menu to close
                 popoverProps: {usePortal: true},
                 disabled: item.disabled,
                 items

package/mobile/cmp/menu/impl/Menu.ts

@@ -98,9 +98,9 @@ class LocalMenuModel extends HoistModel {
                     omit: hidden,
                     onTouchStart: () => (this.pressedIdx = idx),
                     onTouchEnd: () => (this.pressedIdx = null),
-                    onClick: () => {
+                    onClick: e => {
                         this.pressedIdx = null;
-                        if (actionFn) actionFn();
+                        if (actionFn) actionFn(e);
                         onDismiss();
                     }
                 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "73.0.0-SNAPSHOT.1744315927263",
+  "version": "73.0.0-SNAPSHOT.1744386127895",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",

package/security/Types.ts

@@ -22,37 +22,3 @@ export interface AccessTokenSpec {
 }
 
 export type TokenMap = Record<string, Token>;
-
-/** Aggregated telemetry results, produced by {@link MsalClient} when enabled via config. */
-export interface TelemetryResults {
-    /** Stats across all events */
-    summary: {
-        successCount: number;
-        failureCount: number;
-        maxDuration: number;
-        lastFailureTime: number;
-    };
-    /** Stats by event type */
-    events: Record<string, TelemetryEventResults>;
-}
-
-/** Aggregated telemetry results for a single type of event. */
-export interface TelemetryEventResults {
-    firstTime: number;
-    lastTime: number;
-    successCount: number;
-    failureCount: number;
-    /** Timing info (in ms) for event instances reported with duration. */
-    duration?: {
-        count: number;
-        total: number;
-        average: number;
-        max: number;
-    };
-    lastFailure?: {
-        time: number;
-        duration: number;
-        code: string;
-        name: string;
-    };
-}

package/security/msal/MsalClient.ts

@@ -20,7 +20,7 @@ import {logDebug, logError, logInfo, logWarn, mergeDeep, throwIf} from '@xh/hois
 import {withFormattedTimestamps} from '@xh/hoist/format';
 import {flatMap, union, uniq} from 'lodash';
 import {BaseOAuthClient, BaseOAuthClientConfig} from '../BaseOAuthClient';
-import {AccessTokenSpec, TelemetryResults, TokenMap} from '../Types';
+import {AccessTokenSpec, TokenMap} from '../Types';
 
 export interface MsalClientConfig extends BaseOAuthClientConfig<MsalTokenSpec> {
     /**
@@ -39,8 +39,7 @@ export interface MsalClientConfig extends BaseOAuthClientConfig<MsalTokenSpec> {
 
     /**
      * True to enable support for built-in telemetry provided by this class's internal MSAL client.
-     * Captured performance events will be summarized via {@link telemetryResults}.
-     * See https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/performance.md
+     * Captured performance events will be summarized as {@link MsalClientTelemetry}.
      */
     enableTelemetry?: boolean;
 
@@ -115,7 +114,7 @@ export class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec>
     private initialTokenLoad: boolean;
 
     /** Enable telemetry via `enableTelemetry` ctor config, or via {@link enableTelemetry}. */
-    telemetryResults: TelemetryResults = null;
+    telemetry: MsalClientTelemetry = null;
     private _telemetryCbHandle: string = null;
 
     constructor(config: MsalClientConfig) {
@@ -268,7 +267,7 @@ export class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec>
     // Telemetry
     //------------------------
     getFormattedTelemetry(): PlainObject {
-        return withFormattedTimestamps(this.telemetryResults);
+        return withFormattedTimestamps(this.telemetry);
     }
 
     enableTelemetry(): void {
@@ -277,7 +276,7 @@ export class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec>
             return;
         }
 
-        this.telemetryResults = {
+        this.telemetry = {
             summary: {
                 successCount: 0,
                 failureCount: 0,
@@ -290,7 +289,7 @@ export class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec>
         this._telemetryCbHandle = this.client.addPerformanceCallback(events => {
             events.forEach(e => {
                 try {
-                    const {summary, events} = this.telemetryResults,
+                    const {summary, events} = this.telemetry,
                         {name, startTimeMs, durationMs, success, errorName, errorCode} = e,
                         eTime = startTimeMs ?? Date.now();
 
@@ -339,10 +338,10 @@ export class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec>
         // Wait for clientHealthService (this client likely initialized during earlier AUTHENTICATING.)
         this.addReaction({
             when: () => XH.appState === AppState.INITIALIZING_APP,
-            run: () => XH.clientHealthService.addSource('msalClient', () => this.telemetryResults)
+            run: () => XH.clientHealthService.addSource('msalClient', () => this.telemetry)
         });
 
-        this.logInfo('Telemetry enabled');
+        this.logDebug('Telemetry enabled');
     }
 
     disableTelemetry(): void {
@@ -449,3 +448,41 @@ export class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec>
         this.logDebug('User Authenticated', account.username);
     }
 }
+
+/**
+ * Telemetry produced by this client (if enabled) + included in {@link ClientHealthService}
+ * reporting. Leverages MSAL's opt-in support for emitting performance events.
+ * See https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/performance.md
+ */
+interface MsalClientTelemetry {
+    /** Stats across all events */
+    summary: {
+        successCount: number;
+        failureCount: number;
+        maxDuration: number;
+        lastFailureTime: number;
+    };
+    /** Stats by event type */
+    events: Record<string, MsalEventTelemetry>;
+}
+
+/** Aggregated telemetry results for a single type of event. */
+interface MsalEventTelemetry {
+    firstTime: number;
+    lastTime: number;
+    successCount: number;
+    failureCount: number;
+    /** Timing info (in ms) for event instances reported with duration. */
+    duration?: {
+        count: number;
+        total: number;
+        average: number;
+        max: number;
+    };
+    lastFailure?: {
+        time: number;
+        duration: number;
+        code: string;
+        name: string;
+    };
+}

package/svc/ClientHealthService.ts

@@ -5,6 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {HoistService, PageState, PlainObject, TrackOptions, XH} from '@xh/hoist/core';
+import {WebSocketTelemetry} from '@xh/hoist/svc/WebSocketService';
 import {Timer} from '@xh/hoist/utils/async';
 import {MINUTES} from '@xh/hoist/utils/datetime';
 import {withFormattedTimestamps} from '@xh/hoist/format';
@@ -42,6 +43,7 @@ export class ClientHealthService extends HoistService {
             general: this.getGeneral(),
             memory: this.getMemory(),
             connection: this.getConnection(),
+            webSockets: XH.webSocketService.telemetry,
             ...this.getCustom()
         };
     }
@@ -87,8 +89,7 @@ export class ClientHealthService extends HoistService {
             startTime,
             durationMins: elapsedMins(startTime),
             idleMins: elapsedMins(XH.lastActivityMs),
-            pageState: XH.pageState,
-            webSocket: XH.webSocketService.channelKey
+            pageState: XH.pageState
         };
     }
 
@@ -154,7 +155,6 @@ export interface GeneralData {
     durationMins: number;
     idleMins: number;
     pageState: PageState;
-    webSocket: string;
 }
 
 export interface ConnectionData {
@@ -175,4 +175,5 @@ export interface ClientHealthReport {
     general: GeneralData;
     connection: ConnectionData;
     memory: MemoryData;
+    webSockets: WebSocketTelemetry;
 }