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

package/CHANGELOG.md

@@ -11,11 +11,16 @@ and new properties on `TrackLog`.
 
 * 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.
-* Enhanced all activity tracking messages with new `tabId` and `loadId` properties, to disambiguate
-  tracking activity for users with multiple browser tabs and multiple full refreshes/restarts of a
-  client app within the same tab.
+
 
 ### 🐞 Bug Fixes
 

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/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/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

@@ -8,8 +8,10 @@ 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: {
@@ -109,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',
@@ -196,6 +224,34 @@ export const severity: ColumnSpec = {
     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',
@@ -214,6 +270,22 @@ export const url: ColumnSpec = {
     autosizeMaxWidth: 400
 };
 
+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 = {
     field: {
         name: 'userAgent',

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 {