@xh/hoist 69.0.0-SNAPSHOT.1728943041558 → 69.0.0-SNAPSHOT.1728960616985

package/CHANGELOG.md

@@ -4,9 +4,11 @@
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟢 LOW - Hoist core update)
 
-* Requires `hoist-core >= 24` to support batch upload of activity tracking logs to server.
+* Requires `hoist-core >= 24` to support batch upload of activity tracking logs to server and
+  new memory monitoring persistence.
 * Replaced `AppState.INITIALIZING` with finer-grained states (not expected to impact most apps).
 
+
 ### 🎁 New Features
 
 * Optimized activity tracking to batch its calls to the server, reducing network overhead.
@@ -16,6 +18,7 @@
 * Updated the nested search input within Grid column filters to match candidate values on `any` vs
   `startsWith`. (Note that this does not change how grid filters are applied, only how users can
   search for values to select/deselect.)
+* Support for persisting of memory monitoring results
 
 ### ⚙️ Typescript API Adjustments
 

package/admin/tabs/cluster/memory/MemoryMonitorModel.ts

@@ -13,12 +13,22 @@ import {LoadSpec, managed, XH} from '@xh/hoist/core';
 import {lengthIs, required} from '@xh/hoist/data';
 import {fmtTime, numberRenderer} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
-import {forOwn, sortBy} from 'lodash';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
+import {forOwn, orderBy, sortBy} from 'lodash';
+import {observable, runInAction} from 'mobx';
+
+export interface PastInstance {
+    name: string;
+    lastUpdated: number;
+}
 
 export class MemoryMonitorModel extends BaseInstanceModel {
     @managed gridModel: GridModel;
     @managed chartModel: ChartModel;
 
+    @bindable.ref pastInstance: PastInstance = null;
+    @observable.ref pastInstances: PastInstance[] = [];
+
     get enabled(): boolean {
         return this.conf.enabled;
     }
@@ -29,8 +39,82 @@ export class MemoryMonitorModel extends BaseInstanceModel {
 
     constructor() {
         super();
+        makeObservable(this);
+        this.gridModel = this.createGridModel();
+        this.chartModel = this.createChartModel();
+        this.addReaction({
+            track: () => this.pastInstance,
+            run: () => this.loadAsync()
+        });
+    }
+
+    override async doLoadAsync(loadSpec: LoadSpec) {
+        try {
+            await this.loadDataAsync(loadSpec);
+            await this.loadPastInstancesAsync(loadSpec);
+        } catch (e) {
+            this.handleLoadException(e, loadSpec);
+        }
+    }
+
+    async takeSnapshotAsync() {
+        try {
+            await XH.fetchJson({
+                url: 'memoryMonitorAdmin/takeSnapshot',
+                params: {instance: this.instanceName}
+            }).linkTo(this.loadModel);
+            await this.loadAsync();
+            XH.successToast('Updated snapshot loaded');
+        } catch (e) {
+            XH.handleException(e);
+        }
+    }
+
+    async requestGcAsync() {
+        try {
+            await XH.fetchJson({
+                url: 'memoryMonitorAdmin/requestGc',
+                params: {instance: this.instanceName}
+            }).linkTo(this.loadModel);
+            await this.loadAsync();
+            XH.successToast('GC run complete');
+        } catch (e) {
+            XH.handleException(e);
+        }
+    }
+
+    async dumpHeapAsync() {
+        try {
+            const appEnv = XH.getEnv('appEnvironment').toLowerCase(),
+                filename = await XH.prompt<string>({
+                    title: 'Dump Heap',
+                    icon: Icon.fileArchive(),
+                    message: `Specify a filename for the heap dump (to be saved in ${this.heapDumpDir})`,
+                    input: {
+                        rules: [required, lengthIs({min: 3, max: 250})],
+                        initialValue: `${XH.appCode}_${appEnv}_${Date.now()}.hprof`
+                    }
+                });
+            if (!filename) return;
+            await XH.fetchJson({
+                url: 'memoryMonitorAdmin/dumpHeap',
+                params: {
+                    instance: this.instanceName,
+                    filename
+                }
+            }).linkTo(this.loadModel);
+            await this.loadAsync();
+            XH.successToast('Heap dumped successfully to ' + filename);
+        } catch (e) {
+            XH.handleException(e);
+        }
+    }
 
-        this.gridModel = new GridModel({
+    //-------------------
+    // Implementation
+    //-------------------
+    private createGridModel(): GridModel {
+        return new GridModel({
             enableExport: true,
             exportOptions: {filename: exportFilenameWithDate('memory-monitor')},
             filterModel: true,
@@ -52,8 +136,10 @@ export class MemoryMonitorModel extends BaseInstanceModel {
                 }
             ]
         });
+    }
 
-        this.chartModel = new ChartModel({
+    private createChartModel(): ChartModel {
+        return new ChartModel({
             highchartsConfig: {
                 chart: {
                     zoomType: 'x',
@@ -93,125 +179,80 @@ export class MemoryMonitorModel extends BaseInstanceModel {
         });
     }
 
-    override async doLoadAsync(loadSpec: LoadSpec) {
-        const {gridModel, chartModel} = this;
-
-        try {
-            const snapsByTimestamp = await XH.fetchJson({
-                url: 'memoryMonitorAdmin/snapshots',
-                params: {instance: this.instanceName},
-                loadSpec
-            });
+    private async loadDataAsync(loadSpec: LoadSpec) {
+        const {gridModel, chartModel, pastInstance} = this;
 
-            // Server returns map by timestamp - flatted to array and load into grid records.
-            let snaps = [];
-            forOwn(snapsByTimestamp, (snap, ts) => {
-                snaps.push({timestamp: parseInt(ts), ...snap});
-            });
-            snaps = sortBy(snaps, 'timestamp');
-            gridModel.loadData(snaps);
+        const action = pastInstance ? `snapshotsForPastInstance` : 'snapshots',
+            instance = pastInstance ? pastInstance.name : this.instanceName;
+        const snapsByTimestamp = await XH.fetchJson({
+            url: 'memoryMonitorAdmin/' + action,
+            params: {instance},
+            loadSpec
+        });
 
-            // Process further for chart series.
-            const maxSeries = [],
-                totalSeries = [],
-                usedSeries = [],
-                avgGCSeries = [];
+        // Server returns map by timestamp - flatted to array and load into grid records.
+        let snaps = [];
+        forOwn(snapsByTimestamp, (snap, ts) => {
+            snaps.push({timestamp: parseInt(ts), ...snap});
+        });
+        snaps = sortBy(snaps, 'timestamp');
+        gridModel.loadData(snaps);
 
-            snaps.forEach(snap => {
-                maxSeries.push([snap.timestamp, snap.maxHeapMb]);
-                totalSeries.push([snap.timestamp, snap.totalHeapMb]);
-                usedSeries.push([snap.timestamp, snap.usedHeapMb]);
+        // Process further for chart series.
+        const maxSeries = [],
+            totalSeries = [],
+            usedSeries = [],
+            avgGCSeries = [];
 
-                avgGCSeries.push([snap.timestamp, snap.avgCollectionTime]);
-            });
+        snaps.forEach(snap => {
+            maxSeries.push([snap.timestamp, snap.maxHeapMb]);
+            totalSeries.push([snap.timestamp, snap.totalHeapMb]);
+            usedSeries.push([snap.timestamp, snap.usedHeapMb]);
 
-            chartModel.setSeries([
-                {
-                    name: 'GC Avg',
-                    data: avgGCSeries,
-                    step: true,
-                    yAxis: 0
-                },
-                {
-                    name: 'Heap Max',
-                    data: maxSeries,
-                    color: '#ef6c00',
-                    step: true,
-                    yAxis: 1
-                },
-                {
-                    name: 'Heap Total',
-                    data: totalSeries,
-                    color: '#1976d2',
-                    step: true,
-                    yAxis: 1
-                },
-                {
-                    name: 'Heap Used',
-                    type: 'area',
-                    data: usedSeries,
-                    color: '#bd7c7c',
-                    fillOpacity: 0.3,
-                    lineWidth: 1,
-                    yAxis: 1
-                }
-            ]);
-        } catch (e) {
-            this.handleLoadException(e, loadSpec);
-        }
-    }
-
-    async takeSnapshotAsync() {
-        try {
-            await XH.fetchJson({
-                url: 'memoryMonitorAdmin/takeSnapshot',
-                params: {instance: this.instanceName}
-            }).linkTo(this.loadModel);
-            await this.loadAsync();
-            XH.successToast('Updated snapshot loaded');
-        } catch (e) {
-            XH.handleException(e);
-        }
-    }
+            avgGCSeries.push([snap.timestamp, snap.avgCollectionTime]);
+        });
 
-    async requestGcAsync() {
-        try {
-            await XH.fetchJson({
-                url: 'memoryMonitorAdmin/requestGc',
-                params: {instance: this.instanceName}
-            }).linkTo(this.loadModel);
-            await this.loadAsync();
-            XH.successToast('GC run complete');
-        } catch (e) {
-            XH.handleException(e);
-        }
+        chartModel.setSeries([
+            {
+                name: 'GC Avg',
+                data: avgGCSeries,
+                step: true,
+                yAxis: 0
+            },
+            {
+                name: 'Heap Max',
+                data: maxSeries,
+                color: '#ef6c00',
+                step: true,
+                yAxis: 1
+            },
+            {
+                name: 'Heap Total',
+                data: totalSeries,
+                color: '#1976d2',
+                step: true,
+                yAxis: 1
+            },
+            {
+                name: 'Heap Used',
+                type: 'area',
+                data: usedSeries,
+                color: '#bd7c7c',
+                fillOpacity: 0.3,
+                lineWidth: 1,
+                yAxis: 1
+            }
+        ]);
     }
 
-    async dumpHeapAsync() {
-        try {
-            const appEnv = XH.getEnv('appEnvironment').toLowerCase(),
-                filename = await XH.prompt<string>({
-                    title: 'Dump Heap',
-                    icon: Icon.fileArchive(),
-                    message: `Specify a filename for the heap dump (to be saved in ${this.heapDumpDir})`,
-                    input: {
-                        rules: [required, lengthIs({min: 3, max: 250})],
-                        initialValue: `${XH.appCode}_${appEnv}_${Date.now()}.hprof`
-                    }
-                });
-            if (!filename) return;
-            await XH.fetchJson({
-                url: 'memoryMonitorAdmin/dumpHeap',
-                params: {
-                    instance: this.instanceName,
-                    filename
-                }
-            }).linkTo(this.loadModel);
-            await this.loadAsync();
-            XH.successToast('Heap dumped successfully to ' + filename);
-        } catch (e) {
-            XH.handleException(e);
-        }
+    private async loadPastInstancesAsync(loadSpec: LoadSpec) {
+        const instances = await XH.fetchJson({
+            url: 'memoryMonitorAdmin/availablePastInstances',
+            loadSpec
+        });
+        runInAction(() => {
+            this.pastInstances = orderBy(instances, ['lastUpdated'], ['desc']);
+        });
     }
 
     private get conf() {

package/admin/tabs/cluster/memory/MemoryMonitorPanel.ts

@@ -8,14 +8,16 @@ import {AppModel} from '@xh/hoist/admin/AppModel';
 import {MemoryMonitorModel} from '@xh/hoist/admin/tabs/cluster/memory/MemoryMonitorModel';
 import {chart} from '@xh/hoist/cmp/chart';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
-import {filler, vframe} from '@xh/hoist/cmp/layout';
+import {code, filler, fragment, hbox, hspacer, span, vframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, exportButton} from '@xh/hoist/desktop/cmp/button';
 import {errorMessage} from '@xh/hoist/desktop/cmp/error';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
-import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
+import {toolbar, toolbarSeparator} from '@xh/hoist/desktop/cmp/toolbar';
+import {fmtDate} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
-import {isNil} from 'lodash';
+import {isEmpty, isNil} from 'lodash';
+import {menu, menuItem, popover} from '@xh/hoist/kit/blueprint';
 
 export const memoryMonitorPanel = hoistCmp.factory({
     model: creates(MemoryMonitorModel),
@@ -47,34 +49,42 @@ export const memoryMonitorPanel = hoistCmp.factory({
 
 const bbar = hoistCmp.factory<MemoryMonitorModel>({
     render({model}) {
-        const {readonly} = AppModel,
+        const isPastInstance = !!model.pastInstance,
+            {readonly} = AppModel,
             dumpDisabled = isNil(model.heapDumpDir);
 
         return toolbar(
-            button({
-                text: 'Take Snapshot',
-                icon: Icon.camera(),
+            fragment({
                 omit: readonly,
-                onClick: () => model.takeSnapshotAsync()
+                items: [
+                    button({
+                        text: 'Take Snapshot',
+                        icon: Icon.camera(),
+                        disabled: isPastInstance,
+                        onClick: () => model.takeSnapshotAsync()
+                    }),
+                    toolbarSeparator(),
+                    button({
+                        text: 'Request GC',
+                        icon: Icon.trash(),
+                        disabled: isPastInstance,
+                        onClick: () => model.requestGcAsync()
+                    }),
+                    toolbarSeparator(),
+                    button({
+                        text: 'Dump Heap',
+                        icon: Icon.fileArchive(),
+                        disabled: dumpDisabled || isPastInstance,
+                        tooltip: dumpDisabled
+                            ? 'Missing required config xhMemoryMonitoringConfig.heapDumpDir'
+                            : null,
+                        onClick: () => model.dumpHeapAsync()
+                    })
+                ]
             }),
             '-',
-            button({
-                text: 'Request GC',
-                icon: Icon.trash(),
-                omit: readonly,
-                onClick: () => model.requestGcAsync()
-            }),
-            '-',
-            button({
-                text: 'Dump Heap',
-                icon: Icon.fileArchive(),
-                omit: readonly,
-                disabled: dumpDisabled,
-                tooltip: dumpDisabled
-                    ? 'Missing required config xhMemoryMonitoringConfig.heapDumpDir'
-                    : null,
-                onClick: () => model.dumpHeapAsync()
-            }),
+            instanceSelect(),
+            instanceClear(),
             filler(),
             gridCountLabel({unit: 'snapshot'}),
             '-',
@@ -82,3 +92,60 @@ const bbar = hoistCmp.factory<MemoryMonitorModel>({
         );
     }
 });
+
+const instanceSelect = hoistCmp.factory<MemoryMonitorModel>({
+    render({model}) {
+        const {pastInstance, pastInstances} = model;
+        return popover({
+            position: 'top-left',
+            minimal: true,
+            item: fragment(
+                button({
+                    icon: Icon.history(),
+                    minimal: true,
+                    text: instanceDisplay({instance: pastInstance}),
+                    disabled: isEmpty(pastInstances),
+                    tooltip: 'View past instances'
+                })
+            ),
+            content: panel({
+                icon: Icon.history(),
+                title: 'Past Instances',
+                compactHeader: true,
+                item: menu({
+                    items: pastInstances.map(it =>
+                        menuItem({
+                            text: instanceDisplay({instance: it}),
+                            onClick: () => (model.pastInstance = it)
+                        })
+                    )
+                })
+            })
+        });
+    }
+});
+
+const instanceDisplay = hoistCmp.factory<MemoryMonitorModel>({
+    render({instance}) {
+        if (!instance) return null;
+        return hbox(
+            code(instance.name),
+            hspacer(10),
+            span({
+                className: 'xh-text-color-muted xh-font-size-small',
+                item: fmtDate(instance.lastUpdated, 'MMM D h:mma')
+            })
+        );
+    }
+});
+
+const instanceClear = hoistCmp.factory<MemoryMonitorModel>({
+    render({model}) {
+        return button({
+            omit: !model.pastInstance,
+            icon: Icon.x(),
+            minimal: true,
+            onClick: () => (model.pastInstance = null)
+        });
+    }
+});

package/build/types/admin/tabs/cluster/memory/MemoryMonitorModel.d.ts

@@ -2,9 +2,15 @@ import { BaseInstanceModel } from '@xh/hoist/admin/tabs/cluster/BaseInstanceMode
 import { ChartModel } from '@xh/hoist/cmp/chart';
 import { ColumnSpec, GridModel } from '@xh/hoist/cmp/grid';
 import { LoadSpec } from '@xh/hoist/core';
+export interface PastInstance {
+    name: string;
+    lastUpdated: number;
+}
 export declare class MemoryMonitorModel extends BaseInstanceModel {
     gridModel: GridModel;
     chartModel: ChartModel;
+    pastInstance: PastInstance;
+    pastInstances: PastInstance[];
     get enabled(): boolean;
     get heapDumpDir(): string;
     constructor();
@@ -12,6 +18,10 @@ export declare class MemoryMonitorModel extends BaseInstanceModel {
     takeSnapshotAsync(): Promise<void>;
     requestGcAsync(): Promise<void>;
     dumpHeapAsync(): Promise<void>;
+    private createGridModel;
+    private createChartModel;
+    private loadDataAsync;
+    private loadPastInstancesAsync;
     private get conf();
 }
 export declare const totalHeapMb: ColumnSpec;

package/package.json

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