@xh/hoist 73.0.0-SNAPSHOT.1745690606180 → 73.0.0-SNAPSHOT.1745973083869

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 [
             {
@@ -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/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 {

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

@@ -4,30 +4,42 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {exportFilename} from '@xh/hoist/admin/AdminUtils';
+import {exportFilename, getAppModel} from '@xh/hoist/admin/AdminUtils';
 import * as Col from '@xh/hoist/admin/columns';
+import {
+    ActivityTrackingDataFieldSpec,
+    DataFieldsEditorModel
+} from '@xh/hoist/admin/tabs/activity/tracking/datafields/DataFieldsEditorModel';
 import {FilterChooserModel} from '@xh/hoist/cmp/filter';
 import {FormModel} from '@xh/hoist/cmp/form';
-import {GridModel, TreeStyle} from '@xh/hoist/cmp/grid';
+import {ColumnRenderer, ColumnSpec, GridModel, TreeStyle} from '@xh/hoist/cmp/grid';
 import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
-import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
+import {HoistModel, LoadSpec, managed, PlainObject, 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 {dateRenderer, dateTimeSecRenderer, fmtNumber, numberRenderer} from '@xh/hoist/format';
+import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {LocalDate} from '@xh/hoist/utils/datetime';
-import {compact, isEmpty, round} from 'lodash';
+import {compact, get, isEmpty, isEqual, round} from 'lodash';
 import moment from 'moment';
 
-export const PERSIST_ACTIVITY = {localStorageKey: 'xhAdminActivityState'};
-
 export class ActivityTrackingModel extends HoistModel {
-    override persistWith = PERSIST_ACTIVITY;
-
+    /** FormModel for server-side querying controls. */
     @managed formModel: FormModel;
-    @managed groupingChooserModel: GroupingChooserModel;
-    @managed cube: Cube;
-    @managed filterChooserModel: FilterChooserModel;
-    @managed gridModel: GridModel;
+
+    /** Models for data-handling components - can be rebuilt due to change in dataFields. */
+    @managed @observable.ref groupingChooserModel: GroupingChooserModel;
+    @managed @observable.ref cube: Cube;
+    @managed @observable.ref filterChooserModel: FilterChooserModel;
+    @managed @observable.ref gridModel: GridModel;
+    @managed dataFieldsEditorModel: DataFieldsEditorModel;
+
+    /**
+     * Optional spec for fields to be extracted from additional `data` returned by track entries
+     * and promoted to top-level columns in the grids. Supports dot-delimited paths as names.
+     */
+    @observable.ref dataFields: ActivityTrackingDataFieldSpec[] = [];
+
+    @observable showFilterChooser: boolean = false;
 
     get enabled(): boolean {
         return XH.trackService.enabled;
@@ -37,19 +49,15 @@ export class ActivityTrackingModel extends HoistModel {
         return this.groupingChooserModel.value;
     }
 
-    /**
-     * Summary of currently active query / filters.
-     * TODO - include new local filters if feasible, or drop this altogether.
-     * Formerly summarized server-side filters, but was misleading w/new filtering.
-     */
-    get queryDisplayString(): string {
-        return `${XH.appName} Activity`;
-    }
-
     get endDay(): LocalDate {
         return this.formModel.values.endDay;
     }
 
+    @computed
+    get hasFilter(): boolean {
+        return !!this.filterChooserModel.value;
+    }
+
     get maxRowOptions() {
         return (
             XH.trackService.conf.maxRows?.options?.map(rowCount => ({
@@ -69,12 +77,31 @@ export class ActivityTrackingModel extends HoistModel {
         return this.maxRows === this.cube.store.allCount;
     }
 
+    // TODO - process two collections - one for agg grid with _agg fields left as-is, another for
+    //        detail grid and filter that replaces (potentially multiple) agg fields with a single
+    //        underlying field.
+    get dataFieldCols(): ColumnSpec[] {
+        return this.dataFields.map(df => ({
+            field: df,
+            renderer: this.getDfRenderer(df),
+            appData: {showInAggGrid: !!df.aggregator}
+        }));
+    }
+
+    get viewManagerModel() {
+        return getAppModel().viewManagerModels.activityTracking;
+    }
+
     private _monthFormat = 'MMM YYYY';
-    private _defaultDims = ['username'];
 
     constructor() {
         super();
         makeObservable(this);
+
+        this.persistWith = {viewManagerModel: this.viewManagerModel};
+        this.markPersist('showFilterChooser');
+
+        // TODO - persist maxRows via FM persistence (to be merged shortly)
         this.formModel = new FormModel({
             fields: [
                 {name: 'startDay', initialValue: () => this.defaultStartDay},
@@ -83,140 +110,40 @@ export class ActivityTrackingModel extends HoistModel {
             ]
         });
 
-        this.cube = new Cube({
-            fields: [
-                Col.browser.field,
-                Col.category.field,
-                Col.severity.field,
-                Col.correlationId.field,
-                Col.data.field,
-                {...(Col.dateCreated.field as FieldSpec), displayName: 'Timestamp'},
-                Col.day.field,
-                Col.dayRange.field,
-                Col.device.field,
-                Col.elapsed.field,
-                Col.entryCount.field,
-                Col.impersonating.field,
-                Col.msg.field,
-                Col.userAgent.field,
-                Col.username.field,
-                {name: 'count', type: 'int', aggregator: 'CHILD_COUNT'},
-                {name: 'month', type: 'string', isDimension: true, aggregator: 'UNIQUE'},
-                Col.url.field,
-                Col.instance.field,
-                Col.appVersion.field,
-                Col.appEnvironment.field
-            ] as CubeFieldSpec[]
-        });
+        this.dataFieldsEditorModel = new DataFieldsEditorModel(this);
+        this.markPersist('dataFields');
 
-        this.filterChooserModel = new FilterChooserModel({
-            fieldSpecs: [
-                {field: 'category'},
-                {field: 'correlationId'},
-                {field: 'username', displayName: 'User'},
-                {field: 'device'},
-                {field: 'browser'},
-                {
-                    field: 'elapsed',
-                    valueRenderer: v => {
-                        return fmtNumber(v, {
-                            label: 'ms',
-                            formatConfig: {thousandSeparated: false, mantissa: 0}
-                        });
-                    },
-                    fieldType: 'number'
-                },
-                {field: 'msg', displayName: 'Message'},
-                {field: 'data'},
-                {field: 'userAgent'},
-                {field: 'url', displayName: 'URL'},
-                {field: 'instance'},
-                {field: 'severity'},
-                {field: 'appVersion'},
-                {field: 'appEnvironment', displayName: 'Environment'}
-            ]
-        });
-
-        this.loadLookupsAsync();
-
-        this.groupingChooserModel = new GroupingChooserModel({
-            dimensions: this.cube.dimensions,
-            persistWith: this.persistWith,
-            initialValue: this._defaultDims
-        });
-
-        const hidden = true;
-        this.gridModel = new GridModel({
-            treeMode: true,
-            treeStyle: TreeStyle.HIGHLIGHTS_AND_BORDERS,
-            persistWith: {
-                ...this.persistWith,
-                path: 'aggGridModel',
-                persistSort: false
+        this.addReaction(
+            {
+                track: () => this.dataFields,
+                run: () => this.createAndSetCoreModels(),
+                fireImmediately: true
             },
-            colChooserModel: true,
-            enableExport: true,
-            exportOptions: {filename: exportFilename('activity-summary')},
-            emptyText: 'No activity reported...',
-            sortBy: ['cubeLabel'],
-            columns: [
-                {
-                    field: {
-                        name: 'cubeLabel',
-                        type: 'string',
-                        displayName: 'Tracked Activity'
-                    },
-                    flex: 1,
-                    minWidth: 100,
-                    isTreeColumn: true,
-                    comparator: this.cubeLabelComparator.bind(this)
-                },
-                {...Col.username, hidden},
-                {...Col.category, hidden},
-                {...Col.device, hidden},
-                {...Col.browser, hidden},
-                {...Col.userAgent, hidden},
-                {...Col.impersonating, hidden},
-                {...Col.elapsed, headerName: 'Elapsed (avg)', hidden},
-                {...Col.dayRange, hidden},
-                {...Col.entryCount},
-                {field: 'count', hidden},
-                {...Col.appEnvironment, hidden},
-                {...Col.appVersion, hidden},
-                {...Col.url, hidden},
-                {...Col.instance, hidden}
-            ]
-        });
-
-        this.addReaction({
-            track: () => this.query,
-            run: () => this.loadAsync(),
-            debounce: 100
-        });
-
-        this.addReaction({
-            track: () => [this.cube.records, this.dimensions],
-            run: () => this.loadGridAsync(),
-            debounce: 100
-        });
+            {
+                track: () => this.query,
+                run: () => this.loadAsync(),
+                debounce: 100
+            },
+            {
+                track: () => [this.cube.records, this.dimensions],
+                run: () => this.loadGridAsync(),
+                debounce: 100
+            }
+        );
     }
 
     override async doLoadAsync(loadSpec: LoadSpec) {
-        const {enabled, cube} = this;
+        const {enabled, cube, query} = this;
         if (!enabled) return;
 
         try {
-            const data = await XH.fetchService.postJson({
+            const data = await XH.postJson({
                 url: 'trackLogAdmin',
-                body: this.query,
+                body: query,
                 loadSpec
             });
 
-            data.forEach(it => {
-                it.day = LocalDate.from(it.day);
-                it.month = it.day.format(this._monthFormat);
-                it.dayRange = {min: it.day, max: it.day};
-            });
+            data.forEach(it => this.processRawTrackLog(it));
 
             await cube.loadDataAsync(data);
         } catch (e) {
@@ -225,47 +152,23 @@ export class ActivityTrackingModel extends HoistModel {
         }
     }
 
-    async loadGridAsync() {
-        const {cube, gridModel, dimensions} = this,
-            data = cube.executeQuery({
-                dimensions,
-                includeRoot: true,
-                includeLeaves: true
-            });
-
-        data.forEach(node => this.separateLeafRows(node));
-        gridModel.loadData(data);
-        await gridModel.preSelectFirstAsync();
-    }
-
-    // Cube emits leaves in "children" collection - rename that collection to "leafRows" so we can
-    // carry the leaves with the record, but deliberately not show them in the tree grid. We only
-    // want the tree grid to show aggregate records.
-    separateLeafRows(node) {
-        if (isEmpty(node.children)) return;
-
-        const childrenAreLeaves = !node.children[0].children;
-        if (childrenAreLeaves) {
-            node.leafRows = node.children;
-            delete node.children;
-        } else {
-            node.children.forEach(child => this.separateLeafRows(child));
+    @action
+    setDataFields(dataFields: ActivityTrackingDataFieldSpec[]) {
+        if (!isEqual(dataFields, this.dataFields)) {
+            this.dataFields = dataFields ?? [];
         }
     }
 
     @action
-    resetQuery() {
-        const {formModel, filterChooserModel, groupingChooserModel, _defaultDims} = this;
-        formModel.init();
-        filterChooserModel.setValue(null);
-        groupingChooserModel.setValue(_defaultDims);
+    toggleFilterChooser() {
+        this.showFilterChooser = !this.showFilterChooser;
     }
 
-    adjustDates(dir) {
+    adjustDates(dir: 'add' | 'subtract') {
         const {startDay, endDay} = this.formModel.fields,
             appDay = LocalDate.currentAppDay(),
-            start = startDay.value,
-            end = endDay.value,
+            start: LocalDate = startDay.value,
+            end: LocalDate = endDay.value,
             diff = end.diff(start),
             incr = diff + 1;
 
@@ -294,7 +197,42 @@ export class ActivityTrackingModel extends HoistModel {
         return startDay === endDay.subtract(value, unit).nextDay();
     }
 
-    cubeLabelComparator(valA, valB, sortDir, abs, {recordA, recordB, defaultComparator}) {
+    getDisplayName(fieldName: string) {
+        return fieldName ? (this.cube.store.getField(fieldName)?.displayName ?? fieldName) : null;
+    }
+
+    //------------------
+    // Implementation
+    //------------------
+    private async loadGridAsync() {
+        const {cube, gridModel, dimensions} = this,
+            data = cube.executeQuery({
+                dimensions,
+                includeRoot: true,
+                includeLeaves: true
+            });
+
+        data.forEach(node => this.separateLeafRows(node));
+        gridModel.loadData(data);
+        await gridModel.preSelectFirstAsync();
+    }
+
+    // Cube emits leaves in "children" collection - rename that collection to "leafRows" so we can
+    // carry the leaves with the record, but deliberately not show them in the tree grid. We only
+    // want the tree grid to show aggregate records.
+    private separateLeafRows(node) {
+        if (isEmpty(node.children)) return;
+
+        const childrenAreLeaves = !node.children[0].children;
+        if (childrenAreLeaves) {
+            node.leafRows = node.children;
+            delete node.children;
+        } else {
+            node.children.forEach(child => this.separateLeafRows(child));
+        }
+    }
+
+    private cubeLabelComparator(valA, valB, sortDir, abs, {recordA, recordB, defaultComparator}) {
         const rawA = recordA?.raw,
             rawB = recordB?.raw,
             sortValA = this.getComparableValForDim(rawA, rawA?.cubeDimension),
@@ -303,7 +241,7 @@ export class ActivityTrackingModel extends HoistModel {
         return defaultComparator(sortValA, sortValB);
     }
 
-    getComparableValForDim(raw, dim) {
+    private getComparableValForDim(raw, dim) {
         const rawVal = raw ? raw[dim] : null;
         if (rawVal == null) return null;
 
@@ -328,24 +266,6 @@ export class ActivityTrackingModel extends HoistModel {
         return LocalDate.currentAppDay();
     }
 
-    private async loadLookupsAsync() {
-        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
     private get query() {
         const {values} = this.formModel;
@@ -356,4 +276,181 @@ export class ActivityTrackingModel extends HoistModel {
             filters: this.filterChooserModel.value
         };
     }
+
+    //------------------------
+    // Impl - core data models
+    //------------------------
+    @action
+    private createAndSetCoreModels() {
+        this.cube = this.createCube();
+        this.filterChooserModel = this.createFilterChooserModel();
+        this.groupingChooserModel = this.createGroupingChooserModel();
+        this.gridModel = this.createGridModel();
+    }
+
+    private createCube(): Cube {
+        const fields = [
+            Col.browser.field,
+            Col.category.field,
+            Col.severity.field,
+            Col.correlationId.field,
+            Col.data.field,
+            {...(Col.dateCreated.field as FieldSpec), displayName: 'Timestamp'},
+            Col.day.field,
+            Col.dayRange.field,
+            Col.device.field,
+            Col.elapsed.field,
+            Col.entryCount.field,
+            Col.impersonating.field,
+            Col.msg.field,
+            Col.userAgent.field,
+            Col.username.field,
+            {name: 'count', type: 'int', aggregator: 'CHILD_COUNT'},
+            {name: 'month', type: 'string', isDimension: true, aggregator: 'UNIQUE'},
+            Col.url.field,
+            Col.instance.field,
+            Col.appVersion.field,
+            Col.appEnvironment.field,
+            ...this.dataFields
+        ] as CubeFieldSpec[];
+
+        return new Cube({fields});
+    }
+
+    private createFilterChooserModel(): FilterChooserModel {
+        // TODO - data fields?
+        const ret = new FilterChooserModel({
+            persistWith: {...this.persistWith, persistFavorites: false},
+            fieldSpecs: [
+                {field: 'category'},
+                {field: 'correlationId'},
+                {field: 'username', displayName: 'User'},
+                {field: 'device'},
+                {field: 'browser'},
+                {
+                    field: 'elapsed',
+                    valueRenderer: v => {
+                        return fmtNumber(v, {
+                            label: 'ms',
+                            formatConfig: {thousandSeparated: false, mantissa: 0}
+                        });
+                    },
+                    fieldType: 'number'
+                },
+                {field: 'msg', displayName: 'Message'},
+                {field: 'data'},
+                {field: 'userAgent'},
+                {field: 'url', displayName: 'URL'},
+                {field: 'instance'},
+                {field: 'severity'},
+                {field: 'appVersion'},
+                {field: 'appEnvironment', displayName: 'Environment'}
+            ]
+        });
+
+        // Load lookups - not awaited
+        try {
+            XH.fetchJson({url: 'trackLogAdmin/lookups'}).then(lookups => {
+                if (ret !== this.filterChooserModel) return;
+                ret.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'});
+        }
+
+        return ret;
+    }
+
+    private createGroupingChooserModel(): GroupingChooserModel {
+        return new GroupingChooserModel({
+            persistWith: {...this.persistWith, persistFavorites: false},
+            dimensions: this.cube.dimensions,
+            initialValue: ['username', 'category']
+        });
+    }
+
+    private createGridModel(): GridModel {
+        const hidden = true;
+        return new GridModel({
+            persistWith: {...this.persistWith, path: 'aggGrid'},
+            enableExport: true,
+            colChooserModel: true,
+            treeMode: true,
+            treeStyle: TreeStyle.HIGHLIGHTS_AND_BORDERS,
+            autosizeOptions: {mode: 'managed'},
+            exportOptions: {filename: exportFilename('activity-summary')},
+            emptyText: 'No activity reported...',
+            sortBy: ['cubeLabel'],
+            columns: [
+                {
+                    field: {
+                        name: 'cubeLabel',
+                        type: 'string',
+                        displayName: 'Group'
+                    },
+                    minWidth: 100,
+                    isTreeColumn: true,
+                    comparator: this.cubeLabelComparator.bind(this)
+                },
+                {...Col.username, hidden},
+                {...Col.category, hidden},
+                {...Col.device, hidden},
+                {...Col.browser, hidden},
+                {...Col.userAgent, hidden},
+                {...Col.impersonating, hidden},
+                {...Col.elapsed, headerName: 'Elapsed (avg)', hidden},
+                {...Col.dayRange, hidden},
+                {...Col.entryCount},
+                {field: 'count', hidden},
+                {...Col.appEnvironment, hidden},
+                {...Col.appVersion, hidden},
+                {...Col.url, hidden},
+                {...Col.instance, hidden},
+                ...this.dataFieldCols.map(it => ({...it, hidden: !it.appData.showInAggGrid}))
+            ]
+        });
+    }
+
+    //------------------------------
+    // Impl - data fields processing
+    //------------------------------
+    private processRawTrackLog(raw: PlainObject) {
+        try {
+            raw.day = LocalDate.from(raw.day);
+            raw.month = raw.day.format(this._monthFormat);
+            raw.dayRange = {min: raw.day, max: raw.day};
+
+            const data = JSON.parse(raw.data);
+            if (isEmpty(data)) return;
+
+            this.dataFields.forEach(df => {
+                const path = df.path;
+                raw[df.name] = get(data, path);
+            });
+        } catch (e) {
+            this.logError(`Error processing raw track log`, e);
+        }
+    }
+
+    private getDfRenderer(df: ActivityTrackingDataFieldSpec): ColumnRenderer {
+        switch (df.type) {
+            case 'number':
+                return numberRenderer();
+            case 'date':
+                return dateTimeSecRenderer();
+            case 'localDate':
+                return dateRenderer();
+            default:
+                return v => v ?? '-';
+        }
+    }
 }