@xh/hoist 73.0.0-SNAPSHOT.1745976013413 → 73.0.0-SNAPSHOT.1746050068813

package/CHANGELOG.md

@@ -4,15 +4,24 @@
 
 ### 💥 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.
+Requires `hoist-core >= 30.0` with new APIs to support the consolidated Admin Console "Clients" tab
+and new properties on `TrackLog`.
 
 ### 🎁 New Features
 
 * Added a new "Clients" Admin Console tab- a consolidated view of all websocket-connected clients
   across all instances in the cluster.
+* Major Enhancements to Admin 'User Activity' tab:
+  * Provide user customizable persisted views via ViewManager.
+  * Provide the ability to promote data in `data` block to grids for aggregation, reporting and charting.
+  * Improved charting.
+  * Enhanced all messages with new `tabId` and `loadId` properties, to disambiguate activity for
+    users with multiple browser tabs and multiple full refreshes/restarts of a client app within
+    the same tab.
 * Updated `FormModel` to support `persistWith` for storing and recalling its values, including
   developer options to persist all or a provided subset of fields.
 
+
 ### 🐞 Bug Fixes
 
 * Fixed drag-and-drop usability issues with the mobile `ColChooser`.

package/admin/AdminUtils.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {AppModel} from '@xh/hoist/admin/AppModel';
 import {XH} from '@xh/hoist/core';
 import {LocalDate} from '@xh/hoist/utils/datetime';
 
@@ -21,3 +22,7 @@ export function exportFilename(moduleName: string): string {
 export function exportFilenameWithDate(moduleName: string): () => string {
     return () => `${XH.appCode}-${moduleName}-${LocalDate.today()}`;
 }
+
+export function getAppModel<T extends AppModel>() {
+    return XH.appModel as T;
+}

package/admin/App.scss

@@ -25,6 +25,12 @@
     height: 80vh;
     width: 80vw;
   }
+
+  .xh-badge-col {
+    --xh-badge-font-size: 0.9em;
+    background-color: var(--xh-intent-primary-darker);
+    font-family: var(--xh-font-family-mono);
+  }
 }
 
 .xh-units-label {

package/admin/AppModel.ts

@@ -7,22 +7,22 @@
 import {clusterTab} from '@xh/hoist/admin/tabs/cluster/ClusterTab';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {TabConfig, TabContainerModel} from '@xh/hoist/cmp/tab';
-import {HoistAppModel, managed, XH} from '@xh/hoist/core';
+import {ViewManagerModel} from '@xh/hoist/cmp/viewmanager';
+import {HoistAppModel, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {without} from 'lodash';
 import {Route} from 'router5';
 import {activityTrackingPanel} from './tabs/activity/tracking/ActivityTrackingPanel';
+import {clientTab} from './tabs/client/ClientTab';
 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;
-
-    @managed
     tabModel: TabContainerModel;
 
+    viewManagerModels: Record<string, ViewManagerModel> = {};
+
     static get readonly() {
         return !XH.getUser().isHoistAdmin;
     }
@@ -40,6 +40,11 @@ export class AppModel extends HoistAppModel {
         GridModel.DEFAULT_AUTOSIZE_MODE = 'managed';
     }
 
+    override async initAsync() {
+        await this.initViewManagerModelsAsync();
+        await super.initAsync();
+    }
+
     override getRoutes(): Route[] {
         return [
             {
@@ -65,6 +70,7 @@ export class AppModel extends HoistAppModel {
                 children: [
                     {name: 'about', path: '/about'},
                     {name: 'config', path: '/config'},
+                    {name: 'feedback', path: '/feedback'},
                     {name: 'alertBanner', path: '/alertBanner'}
                 ]
             },
@@ -91,8 +97,7 @@ export class AppModel extends HoistAppModel {
                 path: '/clients',
                 children: [
                     {name: 'connections', path: '/connections'},
-                    {name: 'errors', path: '/errors'},
-                    {name: 'feedback', path: '/feedback'}
+                    {name: 'errors', path: '/errors'}
                 ]
             },
             {
@@ -161,4 +166,11 @@ export class AppModel extends HoistAppModel {
         const appCodes = without(XH.clientApps, XH.clientAppCode, 'mobile');
         return appCodes.find(it => it === 'app') ?? appCodes[0];
     }
+
+    async initViewManagerModelsAsync() {
+        this.viewManagerModels.activityTracking = await ViewManagerModel.createAsync({
+            type: 'xhAdminActivityTrackingView',
+            typeDisplayName: 'View'
+        });
+    }
 }

package/admin/{tabs/client/clients/ClientsColumns.ts → columns/Clients.ts}

@@ -4,11 +4,19 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-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 createdTime: ColumnSpec = {
+    field: {
+        name: 'createdTime',
+        type: 'date',
+        displayName: 'Created'
+    },
+    ...Col.compactDate
+};
+
 export const isOpen: ColumnSpec = {
     field: {name: 'isOpen', type: 'bool'},
     headerName: '',
@@ -29,23 +37,14 @@ export const key: ColumnSpec = {
     width: 160
 };
 
-export const createdTime: ColumnSpec = {
+export const lastReceivedTime: ColumnSpec = {
     field: {
-        name: 'createdTime',
+        name: 'lastReceivedTime',
         type: 'date',
-        displayName: 'Created'
-    },
-    ...Col.compactDate
-};
-
-export const sentMessageCount: ColumnSpec = {
-    field: {
-        name: 'sentMessageCount',
-        type: 'int',
-        displayName: 'Sent'
+        displayName: 'Last Received'
     },
-    ...Col.number,
-    width: 90
+    ...Col.compactDate,
+    width: 140
 };
 
 export const lastSentTime: ColumnSpec = {
@@ -68,44 +67,12 @@ export const receivedMessageCount: ColumnSpec = {
     width: 90
 };
 
-export const lastReceivedTime: ColumnSpec = {
-    field: {
-        name: 'lastReceivedTime',
-        type: 'date',
-        displayName: 'Last Received'
-    },
-    ...Col.compactDate,
-    width: 140
-};
-
-export const appVersion: ColumnSpec = {
-    field: {
-        name: 'appVersion',
-        displayName: 'Version',
-        type: 'string'
-    },
-    width: 120
-};
-
-export const appBuild: ColumnSpec = {
-    field: {
-        name: 'appBuild',
-        displayName: 'Build',
-        type: 'string'
-    },
-    width: 120
-};
-export const loadId: ColumnSpec = {
-    field: {
-        name: 'loadId',
-        type: 'string'
-    },
-    ...badgeCol
-};
-export const tabId: ColumnSpec = {
+export const sentMessageCount: ColumnSpec = {
     field: {
-        name: 'tabId',
-        type: 'string'
+        name: 'sentMessageCount',
+        type: 'int',
+        displayName: 'Sent'
     },
-    ...badgeCol
+    ...Col.number,
+    width: 90
 };

package/admin/columns/Core.ts

@@ -11,15 +11,29 @@ 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'},
-    width: 200
+export const badgeCol: ColumnSpec = {
+    autosizable: false,
+    width: 100,
+    renderer: badgeRenderer
 };
 
-export const type: ColumnSpec = {
-    field: {name: 'type', type: 'string'},
-    width: 100
-};
+export function badgeRenderer(v) {
+    return v
+        ? badge({
+              item: v,
+              className: 'xh-badge-col',
+              style: {cursor: 'copy'},
+              title: 'Double-click to copy',
+              onDoubleClick: () => {
+                  copy(v);
+                  XH.toast({
+                      icon: Icon.copy(),
+                      message: `Copied ${v}`
+                  });
+              }
+          })
+        : '-';
+}
 
 export const description: ColumnSpec = {
     field: {name: 'description', type: 'string'},
@@ -27,11 +41,9 @@ export const description: ColumnSpec = {
     minWidth: 200
 };
 
-export const notes: ColumnSpec = {
-    field: {name: 'notes', type: 'string'},
-    minWidth: 60,
-    flex: true,
-    tooltip: true
+export const name: ColumnSpec = {
+    field: {name: 'name', type: 'string'},
+    width: 200
 };
 
 export const note: ColumnSpec = {
@@ -45,33 +57,20 @@ export const note: ColumnSpec = {
     tooltip: true
 };
 
+export const notes: ColumnSpec = {
+    field: {name: 'notes', type: 'string'},
+    minWidth: 60,
+    flex: true,
+    tooltip: true
+};
+
 export const timestampNoYear: ColumnSpec = {
     field: {name: 'timestamp', type: 'date'},
     ...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
+export const type: ColumnSpec = {
+    field: {name: 'type', type: 'string'},
+    width: 100
 };

package/admin/columns/Rest.ts

@@ -6,12 +6,20 @@
  */
 import {ColumnSpec} from '@xh/hoist/cmp/grid/columns';
 import * as Col from '@xh/hoist/cmp/grid/columns';
+import {dateTimeRenderer} from '@xh/hoist/format';
 
 export const dateCreated: ColumnSpec = {
     field: {name: 'dateCreated', type: 'date'},
     ...Col.dateTime
 };
 
+export const dateCreatedNoYear: ColumnSpec = {
+    ...Col.dateTimeSec,
+    field: {name: 'dateCreated', type: 'date'},
+    tooltip: true,
+    renderer: dateTimeRenderer({fmt: 'MMM DD HH:mm:ss'})
+};
+
 export const dateCreatedWithSec: ColumnSpec = {
     field: {name: 'dateCreated', type: 'date'},
     ...Col.dateTimeSec

package/admin/columns/Tracking.ts

@@ -4,12 +4,23 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {badgeRenderer} from '@xh/hoist/admin/columns';
+import {badgeCol, badgeRenderer} from '@xh/hoist/admin/columns';
 import {RangeAggregator} from '@xh/hoist/admin/tabs/activity/aggregators/RangeAggregator';
 import * as Col from '@xh/hoist/cmp/grid/columns';
 import {ColumnSpec} from '@xh/hoist/cmp/grid/columns';
+import {TrackSeverity} from '@xh/hoist/core';
 import {fmtDate, fmtSpan, numberRenderer} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
+import {ReactElement} from 'react';
+
+export const appBuild: ColumnSpec = {
+    field: {
+        name: 'appBuild',
+        displayName: 'Build',
+        type: 'string'
+    },
+    width: 120
+};
 
 export const appEnvironment: ColumnSpec = {
     field: {
@@ -21,8 +32,12 @@ export const appEnvironment: ColumnSpec = {
 };
 
 export const appVersion: ColumnSpec = {
-    field: {name: 'appVersion', type: 'string'},
-    width: 130
+    field: {
+        name: 'appVersion',
+        displayName: 'Version',
+        type: 'string'
+    },
+    width: 120
 };
 
 export const browser: ColumnSpec = {
@@ -35,24 +50,25 @@ export const browser: ColumnSpec = {
     width: 100
 };
 
-export const severity: ColumnSpec = {
+export const category: ColumnSpec = {
     field: {
-        name: 'severity',
+        name: 'category',
         type: 'string',
         isDimension: true,
         aggregator: 'UNIQUE'
     },
-    width: 80
+    width: 100
 };
 
-export const category: ColumnSpec = {
+export const correlationId: ColumnSpec = {
     field: {
-        name: 'category',
+        name: 'correlationId',
         type: 'string',
-        isDimension: true,
-        aggregator: 'UNIQUE'
+        displayName: 'Correlation ID'
     },
-    width: 100
+    renderer: badgeRenderer,
+    width: 180,
+    autosizeBufferPx: 20
 };
 
 export const data: ColumnSpec = {
@@ -71,6 +87,20 @@ export const day: ColumnSpec = {
     displayName: 'App Day'
 };
 
+export const dayRange: ColumnSpec = {
+    field: {
+        name: 'dayRange',
+        type: 'json',
+        aggregator: new RangeAggregator(),
+        displayName: 'App Day Range'
+    },
+    align: 'right',
+    width: 200,
+    renderer: dayRangeRenderer,
+    exportValue: dayRangeRenderer,
+    comparator: dayRangeComparator
+};
+
 export const device: ColumnSpec = {
     field: {
         name: 'device',
@@ -81,6 +111,32 @@ export const device: ColumnSpec = {
     width: 100
 };
 
+export const deviceIcon: ColumnSpec = {
+    field: device.field,
+    headerName: Icon.desktop(),
+    headerTooltip: 'Device',
+    tooltip: true,
+    resizable: false,
+    align: 'center',
+    width: 50,
+    renderer: v => {
+        // See Hoist Core `Device.groovy` for enumeration
+        switch (v) {
+            case 'ANDROID':
+            case 'IPAD':
+            case 'IPHONE':
+            case 'IPOD':
+                return Icon.phone();
+            case 'LINUX':
+            case 'MAC':
+            case 'WINDOWS':
+                return Icon.desktop();
+            default:
+                return Icon.questionCircle();
+        }
+    }
+};
+
 export const elapsed: ColumnSpec = {
     field: {
         name: 'elapsed',
@@ -117,24 +173,33 @@ export const entryId: ColumnSpec = {
     align: 'right'
 };
 
-export const correlationId: ColumnSpec = {
+export const error: ColumnSpec = {
     field: {
-        name: 'correlationId',
+        name: 'error',
+        type: 'string'
+    },
+    width: 250,
+    autosizeMaxWidth: 400,
+    renderer: e => fmtSpan(e, {className: 'xh-font-family-mono xh-font-size-small'})
+};
+
+export const instance: ColumnSpec = {
+    field: {
+        name: 'instance',
         type: 'string',
-        displayName: 'Correlation ID'
+        isDimension: true,
+        aggregator: 'UNIQUE'
     },
     renderer: badgeRenderer,
     width: 100
 };
 
-export const error: ColumnSpec = {
+export const loadId: ColumnSpec = {
     field: {
-        name: 'error',
+        name: 'loadId',
         type: 'string'
     },
-    width: 250,
-    autosizeMaxWidth: 400,
-    renderer: e => fmtSpan(e, {className: 'xh-font-family-mono xh-font-size-small'})
+    ...badgeCol
 };
 
 export const msg: ColumnSpec = {
@@ -149,6 +214,52 @@ export const msg: ColumnSpec = {
     autosizeMaxWidth: 400
 };
 
+export const severity: ColumnSpec = {
+    field: {
+        name: 'severity',
+        type: 'string',
+        isDimension: true,
+        aggregator: 'UNIQUE'
+    },
+    width: 80
+};
+
+export const severityIcon: ColumnSpec = {
+    field: severity.field,
+    headerName: Icon.info(),
+    headerTooltip: 'Severity',
+    tooltip: true,
+    resizable: false,
+    align: 'center',
+    width: 50,
+    renderer: v => getSeverityIcon(v)
+};
+
+export function getSeverityIcon(severity: TrackSeverity): ReactElement {
+    if (!severity) return null;
+
+    switch (severity) {
+        case 'DEBUG':
+            return Icon.code();
+        case 'INFO':
+            return Icon.infoCircle({className: 'xh-text-color-muted'});
+        case 'WARN':
+            return Icon.warning({intent: 'warning'});
+        case 'ERROR':
+            return Icon.error({intent: 'danger'});
+        default:
+            return Icon.questionCircle();
+    }
+}
+
+export const tabId: ColumnSpec = {
+    field: {
+        name: 'tabId',
+        type: 'string'
+    },
+    ...badgeCol
+};
+
 export const url: ColumnSpec = {
     field: {
         name: 'url',
@@ -159,15 +270,20 @@ export const url: ColumnSpec = {
     autosizeMaxWidth: 400
 };
 
-export const instance: ColumnSpec = {
-    field: {
-        name: 'instance',
-        type: 'string',
-        isDimension: true,
-        aggregator: 'UNIQUE'
-    },
-    renderer: badgeRenderer,
-    width: 100
+export const urlPathOnly: ColumnSpec = {
+    field: url.field,
+    width: 250,
+    autosizeMaxWidth: 400,
+    tooltip: true,
+    renderer: v => {
+        if (!v) return null;
+        try {
+            const urlObj = new URL(v);
+            return urlObj.pathname;
+        } catch (ignored) {
+            return v;
+        }
+    }
 };
 
 export const userAgent: ColumnSpec = {
@@ -207,20 +323,6 @@ export const userMessageFlag: ColumnSpec = {
     }
 };
 
-export const dayRange: ColumnSpec = {
-    field: {
-        name: 'dayRange',
-        type: 'json',
-        aggregator: new RangeAggregator(),
-        displayName: 'App Day Range'
-    },
-    align: 'right',
-    width: 200,
-    renderer: dayRangeRenderer,
-    exportValue: dayRangeRenderer,
-    comparator: dayRangeComparator
-};
-
 //-----------------------
 // Implementation
 //-----------------------

package/admin/columns/index.ts

@@ -1,3 +1,4 @@
+export * from './Clients';
 export * from './Core';
 export * from './Rest';
 export * from './Tracking';

package/admin/tabs/activity/tracking/ActivityTracking.scss

@@ -31,6 +31,24 @@
       margin-right: var(--xh-pad-half-px);
     }
   }
+
+  &__data-fields-editor {
+    width: 50vw;
+    min-width: 700px;
+    max-width: 1000px;
+    min-height: 200px;
+
+    &__row {
+      align-items: flex-start;
+      flex: none;
+      margin-left: 5px;
+      margin-right: 5px;
+
+      &:first-child {
+        margin-top: 5px;
+      }
+    }
+  }
 }
 
 .xh-admin-activity-detail {