@xh/hoist 73.0.0-SNAPSHOT.1746554302414 → 73.0.0-SNAPSHOT.1746559391577

package/admin/columns/Tracking.ts

@@ -139,6 +139,12 @@ export const deviceIcon: ColumnSpec = {
     }
 };
 
+export const elapsedRenderer = numberRenderer({
+    label: 'ms',
+    nullDisplay: '-',
+    formatConfig: {thousandSeparated: false, mantissa: 0}
+});
+
 export const elapsed: ColumnSpec = {
     field: {
         name: 'elapsed',
@@ -146,12 +152,17 @@ export const elapsed: ColumnSpec = {
         aggregator: 'AVG'
     },
     width: 130,
-    align: 'right',
-    renderer: numberRenderer({
-        label: 'ms',
-        nullDisplay: '-',
-        formatConfig: {thousandSeparated: false, mantissa: 0}
-    })
+    renderer: elapsedRenderer
+};
+
+export const elapsedMax: ColumnSpec = {
+    field: {
+        name: 'elapsedMax',
+        type: 'int',
+        aggregator: 'MAX'
+    },
+    width: 130,
+    renderer: elapsedRenderer
 };
 
 export const entryCount: ColumnSpec = {

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

@@ -6,6 +6,7 @@
  */
 import {exportFilename, getAppModel} from '@xh/hoist/admin/AdminUtils';
 import * as Col from '@xh/hoist/admin/columns';
+import {elapsedRenderer} from '@xh/hoist/admin/columns';
 import {
     ActivityTrackingDataFieldSpec,
     DataFieldsEditorModel
@@ -16,7 +17,7 @@ import {ColumnRenderer, ColumnSpec, GridModel, TreeStyle} from '@xh/hoist/cmp/gr
 import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
 import {HoistModel, LoadSpec, managed, PlainObject, XH} from '@xh/hoist/core';
 import {Cube, CubeFieldSpec, FieldSpec, StoreRecord} from '@xh/hoist/data';
-import {dateRenderer, dateTimeSecRenderer, fmtNumber, numberRenderer} from '@xh/hoist/format';
+import {dateRenderer, dateTimeSecRenderer, numberRenderer} from '@xh/hoist/format';
 import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {LocalDate} from '@xh/hoist/utils/datetime';
 import {compact, get, isEmpty, isEqual, round} from 'lodash';
@@ -329,6 +330,7 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
             Col.dayRange.field,
             Col.device.field,
             Col.elapsed.field,
+            Col.elapsedMax.field,
             Col.entryCount.field,
             Col.impersonating.field,
             Col.instance.field,
@@ -349,7 +351,11 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
     private createFilterChooserModel(): FilterChooserModel {
         // TODO - data fields?
         const ret = new FilterChooserModel({
-            persistWith: {...this.persistWith, persistFavorites: false},
+            persistWith: {
+                ...this.persistWith,
+                // Faves persisted to local storage (vs trapped within a single VM view)
+                persistFavorites: {localStorageKey: 'xhAdminActivityTabState'}
+            },
             fieldSpecs: [
                 {field: 'appEnvironment', displayName: 'Environment'},
                 {field: 'appVersion'},
@@ -358,16 +364,7 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
                 {field: 'correlationId'},
                 {field: 'data'},
                 {field: 'device'},
-                {
-                    field: 'elapsed',
-                    valueRenderer: v => {
-                        return fmtNumber(v, {
-                            label: 'ms',
-                            formatConfig: {thousandSeparated: false, mantissa: 0}
-                        });
-                    },
-                    fieldType: 'number'
-                },
+                {field: 'elapsed', fieldType: 'number', valueRenderer: elapsedRenderer},
                 {field: 'instance'},
                 {field: 'loadId'},
                 {field: 'msg', displayName: 'Message'},
@@ -403,7 +400,11 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
 
     private createGroupingChooserModel(): GroupingChooserModel {
         return new GroupingChooserModel({
-            persistWith: {...this.persistWith, persistFavorites: false},
+            persistWith: {
+                ...this.persistWith,
+                // Faves persisted to local storage (vs trapped within a single VM view)
+                persistFavorites: {localStorageKey: 'xhAdminActivityTabState'}
+            },
             dimensions: this.cube.dimensions,
             initialValue: ['username', 'category']
         });
@@ -440,7 +441,8 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
                 {...Col.browser, hidden},
                 {...Col.userAgent, hidden},
                 {...Col.impersonating, hidden},
-                {...Col.elapsed, headerName: 'Elapsed (avg)', hidden},
+                {...Col.elapsed, displayName: 'Elapsed (avg)', hidden},
+                {...Col.elapsedMax, displayName: 'Elapsed (max)', hidden},
                 {...Col.dayRange, hidden},
                 {...Col.entryCount},
                 {field: 'count', hidden},
@@ -464,6 +466,9 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
             raw.month = raw.day.format(this._monthFormat);
             raw.dayRange = {min: raw.day, max: raw.day};
 
+            // Workaround lack of support for multiple aggregations on the same field.
+            raw.elapsedMax = raw.elapsed;
+
             const data = JSON.parse(raw.data);
             if (isEmpty(data)) return;
 

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

@@ -26,6 +26,7 @@ import {activityDetailView} from './detail/ActivityDetailView';
 import './ActivityTracking.scss';
 
 export const activityTrackingPanel = hoistCmp.factory({
+    displayName: 'ActivityTrackingPanel',
     model: creates(ActivityTrackingModel),
 
     render({model}) {

package/admin/tabs/activity/tracking/chart/AggChartModel.ts

@@ -45,14 +45,9 @@ export class AggChartModel extends HoistModel {
         if (!activityTrackingModel) return [];
 
         const ret: SelectOption[] = [
-            {
-                label: 'Entries [count]',
-                value: 'entryCount'
-            },
-            {
-                label: 'Elapsed ms [avg]',
-                value: 'elapsed'
-            }
+            {label: 'Entries [count]', value: 'entryCount'},
+            {label: 'Elapsed [avg]', value: 'elapsed'},
+            {label: 'Elapsed [max]', value: 'elapsedMax'}
         ];
 
         if (secondaryDim) {
@@ -88,10 +83,16 @@ export class AggChartModel extends HoistModel {
         this.markPersist('metric', {...persistWith, path: 'chartMetric'});
         this.markPersist('incWeekends', {...persistWith, path: 'chartIncWeekends'});
 
-        this.addReaction({
-            track: () => [this.data, this.metric, this.incWeekends],
-            run: () => this.loadChart()
-        });
+        this.addReaction(
+            {
+                track: () => [this.data, this.metric, this.incWeekends],
+                run: () => this.loadChart()
+            },
+            {
+                track: () => this.selectableMetrics,
+                run: () => this.onSelectableMetricsChange()
+            }
+        );
     }
 
     //-----------------
@@ -215,4 +216,11 @@ export class AggChartModel extends HoistModel {
     private getDisplayName(fieldName: string) {
         return this.activityTrackingModel?.getDisplayName(fieldName) ?? fieldName;
     }
+
+    private onSelectableMetricsChange(): void {
+        const {metric} = this;
+        if (!this.selectableMetrics.some(it => it.value === metric)) {
+            this.metric = this.selectableMetrics[0]?.value;
+        }
+    }
 }

package/admin/tabs/activity/tracking/chart/AggChartPanel.ts

@@ -14,6 +14,7 @@ import {Icon} from '@xh/hoist/icon/Icon';
 import {AggChartModel} from './AggChartModel';
 
 export const aggChartPanel = hoistCmp.factory({
+    displayName: 'AggChartPanel',
     model: creates(AggChartModel),
 
     render({model, ...props}) {

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

@@ -12,6 +12,7 @@ import {popover} from '@xh/hoist/kit/blueprint';
 import {isEmpty} from 'lodash';
 
 export const dataFieldsEditor = hoistCmp.factory({
+    displayName: 'DataFieldsEditor',
     model: uses(DataFieldsEditorModel),
 
     render({model}) {

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

@@ -22,6 +22,7 @@ import {isNil} from 'lodash';
 import {ActivityDetailModel} from './ActivityDetailModel';
 
 export const activityDetailView = hoistCmp.factory({
+    displayName: 'ActivityDetailView',
     model: creates(ActivityDetailModel),
 
     render({model, ...props}) {

package/build/types/admin/columns/Tracking.d.ts

@@ -12,7 +12,9 @@ export declare const day: ColumnSpec;
 export declare const dayRange: ColumnSpec;
 export declare const device: ColumnSpec;
 export declare const deviceIcon: ColumnSpec;
+export declare const elapsedRenderer: (v: number) => import("react").ReactNode;
 export declare const elapsed: ColumnSpec;
+export declare const elapsedMax: ColumnSpec;
 export declare const entryCount: ColumnSpec;
 export declare const entryId: ColumnSpec;
 export declare const error: ColumnSpec;

package/build/types/admin/tabs/activity/tracking/chart/AggChartModel.d.ts

@@ -30,4 +30,5 @@ export declare class AggChartModel extends HoistModel {
     private loadChart;
     private getSeriesData;
     private getDisplayName;
+    private onSelectableMetricsChange;
 }

package/desktop/cmp/grouping/GroupingChooser.scss

@@ -137,6 +137,10 @@
       color: var(--xh-text-color);
     }
 
+    .xh-toolbar--compact & {
+      height: 15px;
+    }
+
     // Matched to FilterChooser equivalent.
     & > .svg-inline--fa {
       width: 12px;

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -47,8 +47,10 @@ export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel>
  * @see GroupingChooserModel
  */
 export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingChooserProps>({
+    displayName: 'GroupingChooser',
     model: uses(GroupingChooserModel),
     className: 'xh-grouping-chooser',
+
     render(
         {
             model,
@@ -103,15 +105,13 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
                 ),
                 content: favoritesIsOpen
                     ? favoritesMenu({testId: favoritesMenuTestId})
-                    : editorIsOpen
-                      ? editor({
-                            popoverWidth,
-                            popoverMinHeight,
-                            popoverTitle,
-                            emptyText,
-                            testId: editorTestId
-                        })
-                      : null,
+                    : editor({
+                          popoverWidth,
+                          popoverMinHeight,
+                          popoverTitle,
+                          emptyText,
+                          testId: editorTestId
+                      }),
                 onInteraction: (nextOpenState, e) => {
                     if (
                         isOpen &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "73.0.0-SNAPSHOT.1746554302414",
+  "version": "73.0.0-SNAPSHOT.1746559391577",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",