@xh/hoist 56.0.0 → 56.1.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 56.1.0 - 2023-04-14
+* Add support for new memory management diagnostics provided by hoist-core
+ (requires hoist-core 16.1.0 for full operation).
+
+### 🐞 Bug Fixes
+* Fixes bug with display/reporting of exceptions during app initialization sequence.
+
+
 ## v56.0.0 - 2023-03-29
 
 ### 🎁 New Features
@@ -10,8 +18,6 @@
 * New `FetchService.abort()` API allows manually aborting a pending fetch request.
 * Hoist exceptions have been enhanced and standardized, including new TypeScript types. The
   `Error.cause` property is now populated for wrapping exceptions.
-* `PanelModel` now supports a `defaultSize` property specified in percentage as well as pixels
-  (e.g. `defaultSize: '20%'` as well as `defaultSize: 200`).
 * New `GridModel.headerMenuDisplay` config for limiting column header menu visibility to on hover.
 
 ### 💥 Breaking Changes
@@ -20,10 +26,11 @@
 * Requires AG Grid v29.0.0 or higher - update your AG Grid dependency in your app's `package.json`
   file. See the [AG Grid Changelog](https://www.ag-grid.com/changelog) for details.
     * Add a dependency on `@ag-grid-community/styles` to import new dedicated styles package.
-    * Imports of AG Grid CSS files within your app's `Bootstrap.ts` file will also need to be updated to import styles from their new location. The recommended imports are now:
+    * Imports of AG Grid CSS files within your app's `Bootstrap.ts` file will also need to be
+      updated to import styles from their new location. The recommended imports are now:
 ```typescript
 import '@ag-grid-community/styles/ag-grid.css';
-import '@ag-grid-community/styles/ag-theme-balham-no-font.css';
+import '@ag-grid-community/styles/ag-theme-balham.css';
 ```
 * New `xhActivityTrackingConfig` soft-configuration entry places new limits on the size of
   any `data` objects passed to `XH.track()` calls.

package/admin/tabs/general/about/AboutPanel.ts

@@ -91,13 +91,14 @@ function renderBlurb() {
             xhLogo(),
             div(
                 p(
-                    'Built with Hoist: a plugin for rich web-application development provided by ',
+                    'Built with Hoist, a toolkit for rapid application development from ',
                     a({
-                        href: 'http://xh.io',
+                        href: 'https://xh.io',
                         target: '_blank',
                         rel: 'noopener noreferrer',
                         item: 'Extremely Heavy'
-                    })
+                    }),
+                    '.'
                 ),
                 p(
                     'Please contact ',

package/admin/tabs/monitor/MonitorColumns.ts

@@ -9,7 +9,8 @@ import * as Col from '@xh/hoist/cmp/grid/columns';
 import {ColumnSpec} from '@xh/hoist/cmp/grid/columns';
 
 const mbCol = {width: 150, renderer: numberRenderer({precision: 2, withCommas: true})},
-    pctCol = {width: 150, renderer: numberRenderer({precision: 2, withCommas: true, label: '%'})};
+    pctCol = {width: 150, renderer: numberRenderer({precision: 2, withCommas: true, label: '%'})},
+    msCol = {width: 150, renderer: numberRenderer({precision: 0, withCommas: false})};
 
 export const metricUnit: ColumnSpec = {
     field: {name: 'metricUnit', type: 'string'},
@@ -84,11 +85,38 @@ export const usedHeapMb: ColumnSpec = {
     ...mbCol
 };
 
-export const usedPctTotal: ColumnSpec = {
+export const usedPctMax: ColumnSpec = {
     field: {
-        name: 'usedPctTotal',
+        name: 'usedPctMax',
         type: 'number',
-        displayName: 'Used (pct Total)'
+        displayName: 'Used (pct Max)'
+    },
+    ...pctCol
+};
+
+export const avgCollectionTime: ColumnSpec = {
+    field: {
+        name: 'avgCollectionTime',
+        type: 'number',
+        displayName: 'Avg (ms)'
+    },
+    ...msCol
+};
+
+export const collectionCount: ColumnSpec = {
+    field: {
+        name: 'collectionCount',
+        type: 'number',
+        displayName: '# GCs'
+    },
+    ...msCol
+};
+
+export const pctCollectionTime: ColumnSpec = {
+    field: {
+        name: 'pctCollectionTime',
+        type: 'number',
+        displayName: '% Time in GC'
     },
     ...pctCol
 };

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

@@ -7,7 +7,9 @@
 import {ChartModel} from '@xh/hoist/cmp/chart';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
+import {lengthIs, required} from '@xh/hoist/data';
 import {fmtTime} from '@xh/hoist/format';
+import {Icon} from '@xh/hoist/icon';
 import {forOwn, sortBy} from 'lodash';
 import * as MCol from '../../monitor/MonitorColumns';
 
@@ -15,6 +17,14 @@ export class MemoryMonitorModel extends HoistModel {
     @managed gridModel: GridModel;
     @managed chartModel: ChartModel;
 
+    get enabled(): boolean {
+        return this.conf.enabled;
+    }
+
+    get heapDumpDir(): string {
+        return this.conf.heapDumpDir;
+    }
+
     constructor() {
         super();
 
@@ -24,13 +34,25 @@ export class MemoryMonitorModel extends HoistModel {
             filterModel: true,
             store: {idSpec: 'timestamp'},
             colDefaults: {filterable: true},
+            headerMenuDisplay: 'hover',
             columns: [
                 MCol.timestamp,
-                MCol.totalHeapMb,
-                MCol.maxHeapMb,
-                MCol.freeHeapMb,
-                MCol.usedHeapMb,
-                MCol.usedPctTotal
+                {
+                    groupId: 'heap',
+                    headerAlign: 'center',
+                    children: [
+                        MCol.totalHeapMb,
+                        MCol.maxHeapMb,
+                        MCol.freeHeapMb,
+                        MCol.usedHeapMb,
+                        MCol.usedPctMax
+                    ]
+                },
+                {
+                    groupId: 'GC',
+                    headerAlign: 'center',
+                    children: [MCol.collectionCount, MCol.avgCollectionTime, MCol.pctCollectionTime]
+                }
             ]
         });
 
@@ -58,12 +80,14 @@ export class MemoryMonitorModel extends HoistModel {
                 yAxis: [
                     {
                         floor: 0,
-                        title: {text: 'JVM Heap (mb)'}
+                        height: '20%',
+                        title: {text: 'GC Avg (ms)'}
                     },
                     {
-                        opposite: true,
-                        linkedTo: 0,
-                        title: {text: undefined}
+                        floor: 0,
+                        top: '30%',
+                        height: '70%',
+                        title: {text: 'Heap (mb)'}
                     }
                 ],
                 tooltip: {outside: true, shared: true}
@@ -91,34 +115,46 @@ export class MemoryMonitorModel extends HoistModel {
             // Process further for chart series.
             const maxSeries = [],
                 totalSeries = [],
-                usedSeries = [];
+                usedSeries = [],
+                avgGCSeries = [];
 
             snaps.forEach(snap => {
                 maxSeries.push([snap.timestamp, snap.maxHeapMb]);
                 totalSeries.push([snap.timestamp, snap.totalHeapMb]);
                 usedSeries.push([snap.timestamp, snap.usedHeapMb]);
+
+                avgGCSeries.push([snap.timestamp, snap.avgCollectionTime]);
             });
 
             chartModel.setSeries([
                 {
-                    name: 'Max',
+                    name: 'GC Avg',
+                    data: avgGCSeries,
+                    step: true,
+                    yAxis: 0
+                },
+                {
+                    name: 'Heap Max',
                     data: maxSeries,
                     color: '#ef6c00',
-                    step: true
+                    step: true,
+                    yAxis: 1
                 },
                 {
-                    name: 'Total',
+                    name: 'Heap Total',
                     data: totalSeries,
                     color: '#1976d2',
-                    step: true
+                    step: true,
+                    yAxis: 1
                 },
                 {
-                    name: 'Used',
+                    name: 'Heap Used',
                     type: 'area',
                     data: usedSeries,
                     color: '#bd7c7c',
                     fillOpacity: 0.3,
-                    lineWidth: 1
+                    lineWidth: 1,
+                    yAxis: 1
                 }
             ]);
         } catch (e) {
@@ -145,4 +181,32 @@ export class MemoryMonitorModel extends HoistModel {
             XH.handleException(e);
         }
     }
+
+    async dumpHeapAsync() {
+        try {
+            const appEnv = XH.getEnv('appEnvironment').toLowerCase(),
+                filename = await XH.prompt({
+                    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: {filename}
+            }).linkTo(this.loadModel);
+            await this.loadAsync();
+            XH.successToast('Heap dumped successfully to ' + filename);
+        } catch (e) {
+            XH.handleException(e);
+        }
+    }
+
+    private get conf() {
+        return XH.getConf('xhMemoryMonitoringConfig', {heapDumpDir: null, enabled: true});
+    }
 }

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

@@ -10,15 +10,24 @@ import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {filler} 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 {Icon} from '@xh/hoist/icon';
 import {AppModel} from '@xh/hoist/admin/AppModel';
+import {isNil} from 'lodash';
 
 export const memoryMonitorPanel = hoistCmp.factory({
     model: creates(MemoryMonitorModel),
 
     render({model}) {
-        const {readonly} = AppModel;
+        if (!model.enabled) {
+            return errorMessage({
+                error: 'Memory Monitoring disabled via xhMemoryMonitoringConfig.'
+            });
+        }
+
+        const {readonly} = AppModel,
+            dumpDisabled = isNil(model.heapDumpDir);
         return panel({
             tbar: [
                 button({
@@ -27,6 +36,7 @@ export const memoryMonitorPanel = hoistCmp.factory({
                     omit: readonly,
                     onClick: () => model.takeSnapshotAsync()
                 }),
+                '-',
                 button({
                     text: 'Request GC',
                     icon: Icon.trash(),
@@ -34,6 +44,17 @@ export const memoryMonitorPanel = hoistCmp.factory({
                     omit: readonly,
                     onClick: () => model.requestGcAsync()
                 }),
+                button({
+                    text: 'Dump Heap',
+                    icon: Icon.fileArchive(),
+                    intent: 'danger',
+                    omit: readonly,
+                    disabled: dumpDisabled,
+                    tooltip: dumpDisabled
+                        ? 'Missing required config xhMemoryMonitoringConfig.heapDumpDir'
+                        : null,
+                    onClick: () => model.dumpHeapAsync()
+                }),
                 filler(),
                 gridCountLabel({unit: 'snapshot'}),
                 '-',

package/cmp/form/Form.ts

@@ -4,14 +4,7 @@
  *
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
-import {
-    BoxProps,
-    DefaultHoistProps,
-    elementFactory,
-    hoistCmp,
-    HoistProps,
-    uses
-} from '@xh/hoist/core';
+import {DefaultHoistProps, elementFactory, hoistCmp, HoistProps, uses} from '@xh/hoist/core';
 import equal from 'fast-deep-equal';
 import {createContext, useContext} from 'react';
 import {useCached} from '@xh/hoist/utils/react';
@@ -31,7 +24,7 @@ export interface FormContextType {
 export const FormContext = createContext<FormContextType>({});
 const formContextProvider = elementFactory(FormContext.Provider);
 
-export interface FormProps extends HoistProps<FormModel>, BoxProps {
+export interface FormProps extends HoistProps<FormModel> {
     /**
      * Defaults for certain props on child/nested FormFields.
      * @see FormField (note there are both desktop and mobile implementations).

package/core/impl/InstallServices.ts

@@ -69,7 +69,7 @@ async function initServicesInternalAsync(svcs: HoistService[]) {
             it.name = svcs[idx].constructor.name;
         });
 
-        throw this.exception({
+        throw XH.exception({
             message: [
                 'Failed to initialize services: ',
                 ...errs.map(it => it.reason.message + ' (' + it.name + ')')

package/package.json

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

package/utils/js/LangUtils.ts

@@ -236,7 +236,7 @@ export function pluralize(s: string, count?: number, includeCount?: boolean): st
 }
 
 /**
- * Returns the number with an ordinal suffix (ie. 1 => '1st', 11 => '11th').
+ * Returns the number with an ordinal suffix (i.e. 1 becomes '1st', 11 becomes '11th').
  *
  * @param n - the number to ordinalize
  */