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

package/admin/tabs/activity/tracking/datafields/DataFieldsEditorModel.ts

@@ -0,0 +1,133 @@
+import {ActivityTrackingModel} from '@xh/hoist/admin/tabs/activity/tracking/ActivityTrackingModel';
+import {FormModel, SubformsFieldModel} from '@xh/hoist/cmp/form';
+import {HoistModel, managed} from '@xh/hoist/core';
+import {AggregatorToken, FieldType, genDisplayName, required} from '@xh/hoist/data';
+import {action, observable, makeObservable} from '@xh/hoist/mobx';
+import {computed} from '@xh/hoist/mobx';
+import {last, uniqBy} from 'lodash';
+
+/**
+ * Slimmed down {@link CubeFieldSpec} for persisted specs of fields to be extracted from the `data`
+ * block of loaded track statements and promoted to top-level columns in the grids. These are the
+ * entities (stored on parent `ActivityTrackingModel`) that are edited by the this component.
+ */
+export interface ActivityTrackingDataFieldSpec {
+    /**
+     * Path to field data within the `data` block of each track log entry. Can be dot-delimited for
+     * nested data (e.g. `timings.preAuth`). See {@link ActivityTrackingModel.processRawTrackLog}.
+     */
+    path: string;
+    /**
+     * Normalized name for the field for use in Cube/Grid - adds `df_` prefix to avoid conflicts
+     * and strips out dot-delimiters. See {@link ActivityTrackingModel.setDataFields}.
+     */
+    name: string;
+    displayName?: string;
+    type?: FieldType;
+    isDimension?: boolean;
+    aggregator?: AggregatorToken;
+}
+
+export class DataFieldsEditorModel extends HoistModel {
+    @observable showEditor = false;
+
+    @managed formModel: FormModel;
+    private parentModel: ActivityTrackingModel;
+
+    aggTokens: AggregatorToken[] = ['AVG', 'MAX', 'MIN', 'SINGLE', 'SUM', 'UNIQUE'];
+
+    get dataFields(): SubformsFieldModel {
+        return this.formModel.fields.dataFields as SubformsFieldModel;
+    }
+
+    @computed
+    get appliedDataFieldCount(): number {
+        return this.parentModel.dataFields.length;
+    }
+
+    get hasAppliedDataFields(): boolean {
+        return this.appliedDataFieldCount > 0;
+    }
+
+    constructor(parentModel: ActivityTrackingModel) {
+        super();
+        makeObservable(this);
+
+        this.parentModel = parentModel;
+
+        this.formModel = new FormModel({
+            fields: [
+                {
+                    name: 'dataFields',
+                    subforms: {
+                        fields: [
+                            {name: 'path', rules: [required]},
+                            {name: 'displayName'},
+                            {name: 'type', initialValue: 'auto'},
+                            {name: 'isDimension'},
+                            {name: 'aggregator'}
+                        ]
+                    }
+                }
+            ]
+        });
+
+        this.addReaction({
+            track: () => this.parentModel.dataFields,
+            run: () => this.syncFromParent(),
+            fireImmediately: true
+        });
+    }
+
+    @action
+    show() {
+        this.syncFromParent();
+        this.showEditor = true;
+    }
+
+    @action
+    applyAndClose() {
+        this.syncToParent();
+        this.showEditor = false;
+    }
+
+    @action
+    close() {
+        this.showEditor = false;
+    }
+
+    addField() {
+        this.dataFields.add();
+    }
+
+    cloneField(formModel: FormModel) {
+        const {dataFields} = this,
+            srcIdx = dataFields.value.indexOf(formModel);
+
+        dataFields.add({initialValues: formModel.getData(), index: srcIdx + 1});
+    }
+
+    private syncFromParent() {
+        this.formModel.init({
+            dataFields: this.parentModel.dataFields
+        });
+    }
+
+    /**
+     * Normalize field specs and set onto parent.
+     * Note, will de-dupe fields by name w/o any alert to user.
+     */
+    private syncToParent() {
+        const raw = this.formModel.getData().dataFields,
+            specs: ActivityTrackingDataFieldSpec[] = raw.map(it => {
+                const {displayName, path, aggregator: agg} = it;
+                return {
+                    ...it,
+                    name: 'df_' + path.replaceAll('.', '') + (agg ? `_${agg}` : ''),
+                    displayName: displayName || genDisplayName(last(path.split('.')))
+                };
+            });
+
+        this.parentModel.setDataFields(uniqBy(specs, 'name'));
+    }
+}

package/admin/tabs/activity/tracking/detail/ActivityDetailModel.ts

@@ -9,15 +9,32 @@ import * as Col from '@xh/hoist/admin/columns';
 import {FormModel} from '@xh/hoist/cmp/form';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, lookup, managed} from '@xh/hoist/core';
-import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
+import {StoreRecord} from '@xh/hoist/data';
+import {timestampReplacer} from '@xh/hoist/format';
+import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
+import {get} from 'lodash';
 import {ActivityTrackingModel} from '../ActivityTrackingModel';
-import {fmtJson, timestampReplacer} from '@xh/hoist/format';
 
 export class ActivityDetailModel extends HoistModel {
     @lookup(ActivityTrackingModel) activityTrackingModel: ActivityTrackingModel;
-    @managed gridModel: GridModel;
-    @managed formModel: FormModel;
-    @observable formattedData;
+
+    @managed @observable.ref gridModel: GridModel;
+    @managed @observable.ref formModel: FormModel;
+
+    /**
+     * Optional dot-delimited path(s) to filter the displayed `data` payload down to a particular
+     * node or nodes, for easier browsing of records with a large data payload. Multiple paths
+     * can be separated with `|`.
+     */
+    @bindable formattedDataFilterPath: string;
+
+    /** Stringified, pretty-printed, optionally path-filtered `data` payload. */
+    @observable formattedData: string;
+
+    @computed
+    get hasExtraTrackData(): boolean {
+        return this.gridModel.selectedRecord?.data.data != null;
+    }
 
     @computed
     get hasSelection() {
@@ -30,48 +47,14 @@ export class ActivityDetailModel extends HoistModel {
     }
 
     override onLinked() {
-        const hidden = true;
-
-        this.gridModel = new GridModel({
-            sortBy: 'dateCreated|desc',
-            colChooserModel: true,
-            enableExport: true,
-            filterModel: false,
-            exportOptions: {
-                columns: 'ALL',
-                filename: exportFilename('activity-detail')
-            },
-            emptyText: 'Select a group on the left to see detailed tracking logs.',
-            columns: [
-                {...Col.impersonatingFlag},
-                {...Col.entryId, hidden},
-                {...Col.username},
-                {...Col.impersonating, hidden},
-                {...Col.category},
-                {...Col.msg},
-                {...Col.browser},
-                {...Col.device},
-                {...Col.userAgent, hidden},
-                {...Col.appVersion},
-                {...Col.appEnvironment, hidden},
-                {...Col.data, hidden},
-                {...Col.url},
-                {...Col.correlationId},
-                {...Col.instance, hidden},
-                {...Col.severity, hidden},
-                {...Col.elapsed},
-                {...Col.dateCreatedWithSec, displayName: 'Timestamp'}
-            ]
-        });
-
-        this.formModel = new FormModel({
-            readonly: true,
-            fields: this.gridModel
-                .getLeafColumns()
-                .map(it => ({name: it.field, displayName: it.headerName as string}))
-        });
+        this.markPersist('formattedDataFilterPath', this.activityTrackingModel.persistWith);
 
         this.addReaction(
+            {
+                track: () => this.activityTrackingModel.dataFields,
+                run: () => this.createAndSetCoreModels(),
+                fireImmediately: true
+            },
             {
                 track: () => this.activityTrackingModel.gridModel.selectedRecord,
                 run: aggRec => this.showActivityEntriesAsync(aggRec)
@@ -79,11 +62,18 @@ export class ActivityDetailModel extends HoistModel {
             {
                 track: () => this.gridModel.selectedRecord,
                 run: detailRec => this.showEntryDetail(detailRec)
+            },
+            {
+                track: () => this.formattedDataFilterPath,
+                run: () => this.updateFormattedData()
             }
         );
     }
 
-    private async showActivityEntriesAsync(aggRec) {
+    //------------------
+    // Implementation
+    //------------------
+    private async showActivityEntriesAsync(aggRec: StoreRecord) {
         const {gridModel} = this,
             leaves = this.getAllLeafRows(aggRec);
 
@@ -92,7 +82,7 @@ export class ActivityDetailModel extends HoistModel {
     }
 
     // Extract all leaf, track-entry-level rows from an aggregate record (at any level).
-    private getAllLeafRows(aggRec, ret = []) {
+    private getAllLeafRows(aggRec: StoreRecord, ret = []) {
         if (!aggRec) return [];
 
         if (aggRec.children.length) {
@@ -106,22 +96,96 @@ export class ActivityDetailModel extends HoistModel {
         return ret;
     }
 
-    // Extract data from a (detail) grid record and flush it into our form for display.
-    // Also parse/format any additional data (as JSON) if provided.
+    /** Extract data from a (detail) grid record and flush it into our form for display. */
+    @action
+    private showEntryDetail(detailRec: StoreRecord) {
+        this.formModel.init(detailRec?.data ?? {});
+        this.updateFormattedData();
+    }
+
     @action
-    private showEntryDetail(detailRec) {
-        const recData = detailRec?.data ?? {},
-            trackData = recData.data;
+    private updateFormattedData() {
+        const {gridModel, formattedDataFilterPath} = this,
+            trackData = gridModel.selectedRecord?.data.data;
 
-        this.formModel.init(recData);
+        if (!trackData) {
+            this.formattedData = '';
+            return;
+        }
 
-        let formattedTrackData = trackData;
-        if (formattedTrackData) {
-            try {
-                formattedTrackData = fmtJson(trackData, {replacer: timestampReplacer()});
-            } catch (ignored) {}
+        let parsed = JSON.parse(trackData),
+            toFormat = parsed;
+
+        if (formattedDataFilterPath) {
+            const paths = formattedDataFilterPath.split('|');
+            if (paths.length > 1) {
+                toFormat = {};
+                paths.forEach(path => (toFormat[path.trim()] = get(parsed, path.trim())));
+            } else {
+                toFormat = get(parsed, formattedDataFilterPath.trim());
+            }
         }
 
-        this.formattedData = formattedTrackData;
+        this.formattedData = JSON.stringify(toFormat, timestampReplacer(), 2);
+    }
+
+    //------------------------
+    // Core data-handling models
+    //------------------------
+    @action
+    private createAndSetCoreModels() {
+        this.gridModel = this.createGridModel();
+        this.formModel = this.createSingleEntryFormModel();
+    }
+
+    private createGridModel(): GridModel {
+        const hidden = true,
+            pinned = true;
+
+        return new GridModel({
+            persistWith: {...this.activityTrackingModel.persistWith, path: 'detailGrid'},
+            sortBy: 'dateCreated|desc',
+            colChooserModel: true,
+            enableExport: true,
+            filterModel: false,
+            exportOptions: {
+                columns: 'ALL',
+                filename: exportFilename('activity-detail')
+            },
+            emptyText: 'Select a group on the left to see detailed tracking logs.',
+            columns: [
+                {...Col.entryId, hidden, pinned},
+                {...Col.severityIcon, pinned},
+                {...Col.impersonatingFlag, pinned},
+                {...Col.username, pinned},
+                {...Col.impersonating, hidden},
+                {...Col.category},
+                {...Col.msg},
+                {...Col.elapsed},
+                {...Col.deviceIcon},
+                {...Col.browser, hidden},
+                {...Col.userAgent, hidden},
+                {...Col.appVersion, hidden},
+                {...Col.loadId, hidden},
+                {...Col.tabId},
+                {...Col.correlationId, hidden},
+                {...Col.appEnvironment, hidden},
+                {...Col.instance, hidden},
+                {...Col.urlPathOnly},
+                {...Col.data, hidden},
+                {...Col.dateCreatedNoYear, displayName: 'Timestamp'},
+                ...this.activityTrackingModel.dataFieldCols
+            ]
+        });
+    }
+
+    // TODO - don't base on grid cols
+    private createSingleEntryFormModel(): FormModel {
+        return new FormModel({
+            readonly: true,
+            fields: this.gridModel
+                .getLeafColumns()
+                .map(it => ({name: it.field, displayName: it.headerName as string}))
+        });
     }
 }

package/admin/tabs/activity/tracking/detail/ActivityDetailView.ts

@@ -4,19 +4,21 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {correlationId, instance} from '@xh/hoist/admin/columns';
+import {badgeRenderer} from '@xh/hoist/admin/columns';
 import {form} from '@xh/hoist/cmp/form';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
-import {a, div, filler, h3, hframe, placeholder, span} from '@xh/hoist/cmp/layout';
-import {hoistCmp, creates} from '@xh/hoist/core';
+import {a, br, div, filler, h3, hframe, placeholder, span} from '@xh/hoist/cmp/layout';
+import {creates, hoistCmp} from '@xh/hoist/core';
 import {colChooserButton, exportButton} from '@xh/hoist/desktop/cmp/button';
 import {formField} from '@xh/hoist/desktop/cmp/form';
 import {gridFindField} from '@xh/hoist/desktop/cmp/grid';
-import {jsonInput} from '@xh/hoist/desktop/cmp/input';
+import {jsonInput, textInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {dateTimeSecRenderer, numberRenderer} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon/Icon';
+import {tooltip} from '@xh/hoist/kit/blueprint';
+import {isNil} from 'lodash';
 import {ActivityDetailModel} from './ActivityDetailModel';
 
 export const activityDetailView = hoistCmp.factory({
@@ -24,26 +26,26 @@ export const activityDetailView = hoistCmp.factory({
 
     render({model, ...props}) {
         return panel({
-            title: 'Track Log Entries',
-            icon: Icon.list(),
             className: 'xh-admin-activity-detail',
-            compactHeader: true,
-            items: [grid({flex: 1}), detailRecPanel()],
             tbar: tbar(),
+            items: [grid({flex: 1}), detailRecPanel()],
             ...props
         });
     }
 });
 
-const tbar = hoistCmp.factory(({model}) => {
-    return toolbar(
-        filler(),
-        gridCountLabel({unit: 'entry'}),
-        '-',
-        gridFindField(),
-        colChooserButton(),
-        exportButton()
-    );
+const tbar = hoistCmp.factory<ActivityDetailModel>(({model}) => {
+    const {gridModel} = model;
+    return toolbar({
+        items: [
+            filler(),
+            gridCountLabel({unit: 'entry'}),
+            '-',
+            gridFindField({gridModel, key: gridModel.xhId}),
+            colChooserButton({gridModel}),
+            exportButton()
+        ]
+    });
 });
 
 // Discrete outer panel to retain sizing across master/detail selection changes.
@@ -54,7 +56,11 @@ const detailRecPanel = hoistCmp.factory<ActivityDetailModel>(({model}) => {
         compactHeader: true,
         modelConfig: {
             side: 'bottom',
-            defaultSize: 400
+            defaultSize: 400,
+            persistWith: {
+                ...model.activityTrackingModel.persistWith,
+                path: 'singleActivityDetailPanel'
+            }
         },
         item: detailRecForm()
     });
@@ -71,6 +77,7 @@ const detailRecForm = hoistCmp.factory<ActivityDetailModel>(({model}) => {
                       style: {flex: 1},
                       items: [
                           h3(Icon.info(), 'Activity'),
+                          formField({field: 'severity', label: 'Severity'}),
                           formField({
                               field: 'username',
                               readonlyRenderer: username => {
@@ -88,60 +95,109 @@ const detailRecForm = hoistCmp.factory<ActivityDetailModel>(({model}) => {
                           formField({field: 'category'}),
                           formField({field: 'msg'}),
                           formField({
-                              field: 'appVersion',
-                              readonlyRenderer: appVersion => {
-                                  if (!appVersion) return naSpan();
-                                  const {appEnvironment} = formModel.values;
-                                  return `${appVersion} (${appEnvironment})`;
-                              }
+                              field: 'elapsed',
+                              readonlyRenderer: numberRenderer({
+                                  label: 'ms',
+                                  nullDisplay: '-',
+                                  formatConfig: {thousandSeparated: false, mantissa: 0}
+                              }),
+                              omit: isNil(formModel.values.elapsed)
                           }),
                           formField({
-                              field: 'url',
-                              readonlyRenderer: hyperlinkVal
+                              field: 'dateCreated',
+                              readonlyRenderer: dateTimeSecRenderer({})
                           }),
                           formField({
-                              field: 'instance',
-                              readonlyRenderer: v => instance.renderer(v, null)
+                              field: 'correlationId',
+                              readonlyRenderer: badgeRenderer,
+                              omit: !formModel.values.correlationId
                           }),
+                          h3(Icon.idBadge(), 'Session IDs'),
                           formField({
-                              field: 'correlationId',
-                              readonlyRenderer: v => correlationId.renderer(v, null)
+                              field: 'loadId',
+                              readonlyRenderer: badgeRenderer,
+                              omit: !formModel.values.loadId
                           }),
                           formField({
-                              field: 'elapsed',
-                              readonlyRenderer: numberRenderer({
-                                  label: 'ms',
-                                  nullDisplay: '-',
-                                  formatConfig: {thousandSeparated: false, mantissa: 0}
-                              })
+                              field: 'tabId',
+                              readonlyRenderer: badgeRenderer,
+                              omit: !formModel.values.tabId
                           }),
                           formField({
-                              field: 'dateCreated',
-                              readonlyRenderer: dateTimeSecRenderer({})
+                              field: 'instance',
+                              readonlyRenderer: badgeRenderer,
+                              omit: !formModel.values.instance
+                          }),
+
+                          h3(Icon.desktop(), 'Client App / Browser'),
+                          formField({
+                              field: 'appVersion',
+                              readonlyRenderer: appVersion => {
+                                  if (!appVersion) return naSpan();
+                                  const {appEnvironment} = formModel.values;
+                                  return `${appVersion} (${appEnvironment})`;
+                              }
                           }),
-                          h3(Icon.desktop(), 'Device / Browser'),
-                          formField({field: 'device'}),
+                          formField({field: 'device', label: 'Device'}),
                           formField({field: 'browser'}),
-                          formField({field: 'userAgent'})
+                          formField({field: 'userAgent'}),
+                          formField({
+                              field: 'url',
+                              readonlyRenderer: hyperlinkVal
+                          })
                       ]
                   }),
-                  panel({
-                      flex: 1,
-                      className: 'xh-border-left',
-                      items: [h3(Icon.json(), 'Additional Data'), additionalDataJsonInput()]
-                  })
+                  additionalDataPanel()
               )
           })
-        : placeholder('Select an activity tracking record to view details.');
+        : placeholder(Icon.detail(), 'Select an activity tracking record to view details.');
 });
 
-const additionalDataJsonInput = hoistCmp.factory<ActivityDetailModel>(({model}) => {
-    return jsonInput({
-        readonly: true,
-        width: '100%',
-        height: '100%',
-        showCopyButton: true,
-        value: model.formattedData
+const additionalDataPanel = hoistCmp.factory<ActivityDetailModel>(({model}) => {
+    const item = model.formattedData
+        ? jsonInput({
+              readonly: true,
+              width: '100%',
+              height: '100%',
+              showCopyButton: true,
+              value: model.formattedData
+          })
+        : placeholder({
+              items: [
+                  model.hasExtraTrackData ? Icon.filter() : null,
+                  model.hasExtraTrackData
+                      ? 'Additional data available, but hidden by path filter below.'
+                      : 'No additional data available.'
+              ]
+          });
+
+    return panel({
+        flex: 1,
+        className: 'xh-border-left',
+        items: [
+            h3(Icon.json(), 'Additional Data'),
+            item,
+            toolbar(
+                textInput({
+                    placeholder: 'Path filter(s)...',
+                    leftIcon: Icon.filter({
+                        intent: model.formattedDataFilterPath ? 'warning' : null
+                    }),
+                    commitOnChange: true,
+                    enableClear: true,
+                    flex: 1,
+                    bind: 'formattedDataFilterPath'
+                }),
+                tooltip({
+                    item: Icon.questionCircle({className: 'xh-margin-right'}),
+                    content: span(
+                        'Specify one or more dot-delimited paths to filter the JSON data displayed above.',
+                        br(),
+                        'Separate multiple paths that you wish to include with a | character.'
+                    )
+                })
+            )
+        ]
     });
 });
 

package/admin/tabs/client/ClientTab.ts

@@ -4,11 +4,10 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {clientErrorsPanel} from '@xh/hoist/admin/tabs/client/errors/ClientErrorsPanel';
 import {tabContainer} from '@xh/hoist/cmp/tab';
 import {hoistCmp} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
-import {clientErrorsPanel} from '@xh/hoist/admin/tabs/client/errors/ClientErrorsPanel';
-import {feedbackPanel} from './feedback/FeedbackPanel';
 import {clientsPanel} from './clients/ClientsPanel';
 
 export const clientTab = hoistCmp.factory(() =>
@@ -18,8 +17,7 @@ export const clientTab = hoistCmp.factory(() =>
             switcher: {orientation: 'left', testId: 'client-tab-switcher'},
             tabs: [
                 {id: 'connections', icon: Icon.diff(), content: clientsPanel},
-                {id: 'errors', icon: Icon.warning(), content: clientErrorsPanel},
-                {id: 'feedback', icon: Icon.comment(), content: feedbackPanel}
+                {id: 'errors', icon: Icon.warning(), content: clientErrorsPanel}
             ]
         }
     })

package/admin/tabs/client/clients/ClientsModel.ts

@@ -18,7 +18,6 @@ import {Timer} from '@xh/hoist/utils/async';
 import {SECONDS} from '@xh/hoist/utils/datetime';
 import {pluralize} from '@xh/hoist/utils/js';
 import {isEmpty} from 'lodash';
-import * as WSCol from './ClientsColumns';
 import {BaseAdminTabModel} from '@xh/hoist/admin/tabs/BaseAdminTabModel';
 
 export class ClientsModel extends BaseAdminTabModel {
@@ -177,32 +176,32 @@ export class ClientsModel extends BaseAdminTabModel {
             },
             sortBy: ['user'],
             columns: [
-                WSCol.isOpen,
+                Col.isOpen,
                 Col.user,
                 {
                     headerName: 'Session',
                     headerAlign: 'center',
                     children: [
-                        WSCol.createdTime,
-                        {...WSCol.key, hidden},
+                        Col.createdTime,
+                        {...Col.key, hidden},
                         Col.instance,
-                        WSCol.loadId,
-                        WSCol.tabId
+                        Col.loadId,
+                        Col.tabId
                     ]
                 },
                 {
                     headerName: 'Client App',
                     headerAlign: 'center',
-                    children: [WSCol.appVersion, WSCol.appBuild]
+                    children: [Col.appVersion, Col.appBuild]
                 },
                 {
                     headerName: 'Send/Receive',
                     headerAlign: 'center',
                     children: [
-                        WSCol.sentMessageCount,
-                        WSCol.lastSentTime,
-                        WSCol.receivedMessageCount,
-                        WSCol.lastReceivedTime
+                        Col.sentMessageCount,
+                        Col.lastSentTime,
+                        Col.receivedMessageCount,
+                        Col.lastReceivedTime
                     ]
                 }
             ]