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

package/CHANGELOG.md

@@ -10,6 +10,8 @@ Requires `hoist-core >= 30.0` with new APIs to support the consolidated Admin Co
 
 * Added a new "Clients" Admin Console tab- a consolidated view of all websocket-connected clients
   across all instances in the cluster.
+* 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
 

package/admin/AdminUtils.ts

@@ -4,7 +4,6 @@
  *
  * 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';
 
@@ -22,7 +21,3 @@ 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,21 +7,21 @@
 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 {ViewManagerModel} from '@xh/hoist/cmp/viewmanager';
-import {HoistAppModel, XH} from '@xh/hoist/core';
+import {HoistAppModel, managed, 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 {
-    tabModel: TabContainerModel;
+    static instance: AppModel;
 
-    viewManagerModels: Record<string, ViewManagerModel> = {};
+    @managed
+    tabModel: TabContainerModel;
 
     static get readonly() {
         return !XH.getUser().isHoistAdmin;
@@ -40,11 +40,6 @@ export class AppModel extends HoistAppModel {
         GridModel.DEFAULT_AUTOSIZE_MODE = 'managed';
     }
 
-    override async initAsync() {
-        await this.initViewManagerModelsAsync();
-        await super.initAsync();
-    }
-
     override getRoutes(): Route[] {
         return [
             {
@@ -166,11 +161,4 @@ 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,24 +31,6 @@
       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,42 +4,30 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {exportFilename, getAppModel} from '@xh/hoist/admin/AdminUtils';
+import {exportFilename} 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 {ColumnRenderer, ColumnSpec, GridModel, TreeStyle} from '@xh/hoist/cmp/grid';
+import {GridModel, TreeStyle} from '@xh/hoist/cmp/grid';
 import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
-import {HoistModel, LoadSpec, managed, PlainObject, XH} from '@xh/hoist/core';
+import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
 import {Cube, CubeFieldSpec, FieldSpec} from '@xh/hoist/data';
-import {dateRenderer, dateTimeSecRenderer, fmtNumber, numberRenderer} from '@xh/hoist/format';
-import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
+import {fmtNumber} from '@xh/hoist/format';
+import {action, computed, makeObservable} from '@xh/hoist/mobx';
 import {LocalDate} from '@xh/hoist/utils/datetime';
-import {compact, get, isEmpty, isEqual, round} from 'lodash';
+import {compact, isEmpty, round} from 'lodash';
 import moment from 'moment';
 
-export class ActivityTrackingModel extends HoistModel {
-    /** FormModel for server-side querying controls. */
-    @managed formModel: FormModel;
+export const PERSIST_ACTIVITY = {localStorageKey: 'xhAdminActivityState'};
 
-    /** 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[] = [];
+export class ActivityTrackingModel extends HoistModel {
+    override persistWith = PERSIST_ACTIVITY;
 
-    @observable showFilterChooser: boolean = false;
+    @managed formModel: FormModel;
+    @managed groupingChooserModel: GroupingChooserModel;
+    @managed cube: Cube;
+    @managed filterChooserModel: FilterChooserModel;
+    @managed gridModel: GridModel;
 
     get enabled(): boolean {
         return XH.trackService.enabled;
@@ -49,13 +37,17 @@ export class ActivityTrackingModel extends HoistModel {
         return this.groupingChooserModel.value;
     }
 
-    get endDay(): LocalDate {
-        return this.formModel.values.endDay;
+    /**
+     * 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`;
     }
 
-    @computed
-    get hasFilter(): boolean {
-        return !!this.filterChooserModel.value;
+    get endDay(): LocalDate {
+        return this.formModel.values.endDay;
     }
 
     get maxRowOptions() {
@@ -77,31 +69,12 @@ 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},
@@ -110,40 +83,140 @@ export class ActivityTrackingModel extends HoistModel {
             ]
         });
 
-        this.dataFieldsEditorModel = new DataFieldsEditorModel(this);
-        this.markPersist('dataFields');
+        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.addReaction(
-            {
-                track: () => this.dataFields,
-                run: () => this.createAndSetCoreModels(),
-                fireImmediately: true
-            },
-            {
-                track: () => this.query,
-                run: () => this.loadAsync(),
-                debounce: 100
+        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
             },
-            {
-                track: () => [this.cube.records, this.dimensions],
-                run: () => this.loadGridAsync(),
-                debounce: 100
-            }
-        );
+            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
+        });
     }
 
     override async doLoadAsync(loadSpec: LoadSpec) {
-        const {enabled, cube, query} = this;
+        const {enabled, cube} = this;
         if (!enabled) return;
 
         try {
-            const data = await XH.postJson({
+            const data = await XH.fetchService.postJson({
                 url: 'trackLogAdmin',
-                body: query,
+                body: this.query,
                 loadSpec
             });
 
-            data.forEach(it => this.processRawTrackLog(it));
+            data.forEach(it => {
+                it.day = LocalDate.from(it.day);
+                it.month = it.day.format(this._monthFormat);
+                it.dayRange = {min: it.day, max: it.day};
+            });
 
             await cube.loadDataAsync(data);
         } catch (e) {
@@ -152,23 +225,47 @@ export class ActivityTrackingModel extends HoistModel {
         }
     }
 
-    @action
-    setDataFields(dataFields: ActivityTrackingDataFieldSpec[]) {
-        if (!isEqual(dataFields, this.dataFields)) {
-            this.dataFields = dataFields ?? [];
+    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
-    toggleFilterChooser() {
-        this.showFilterChooser = !this.showFilterChooser;
+    resetQuery() {
+        const {formModel, filterChooserModel, groupingChooserModel, _defaultDims} = this;
+        formModel.init();
+        filterChooserModel.setValue(null);
+        groupingChooserModel.setValue(_defaultDims);
     }
 
-    adjustDates(dir: 'add' | 'subtract') {
+    adjustDates(dir) {
         const {startDay, endDay} = this.formModel.fields,
             appDay = LocalDate.currentAppDay(),
-            start: LocalDate = startDay.value,
-            end: LocalDate = endDay.value,
+            start = startDay.value,
+            end = endDay.value,
             diff = end.diff(start),
             incr = diff + 1;
 
@@ -197,42 +294,7 @@ export class ActivityTrackingModel extends HoistModel {
         return startDay === endDay.subtract(value, unit).nextDay();
     }
 
-    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}) {
+    cubeLabelComparator(valA, valB, sortDir, abs, {recordA, recordB, defaultComparator}) {
         const rawA = recordA?.raw,
             rawB = recordB?.raw,
             sortValA = this.getComparableValForDim(rawA, rawA?.cubeDimension),
@@ -241,7 +303,7 @@ export class ActivityTrackingModel extends HoistModel {
         return defaultComparator(sortValA, sortValB);
     }
 
-    private getComparableValForDim(raw, dim) {
+    getComparableValForDim(raw, dim) {
         const rawVal = raw ? raw[dim] : null;
         if (rawVal == null) return null;
 
@@ -266,6 +328,24 @@ 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;
@@ -276,181 +356,4 @@ 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 ?? '-';
-        }
-    }
 }