@xh/hoist 69.0.0-SNAPSHOT.1726689665759 → 69.0.0-SNAPSHOT.1727461290353

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## 69.0.0-SNAPSHOT - unreleased
 
+### 🎁 New Features
+
+* `Markdown` now supports a `reactMarkdownOptions` prop to allow passing React Markdown
+  props to the underlying `reactMarkdown` instance.
+
+### ⚙️ Technical
+* Misc. Improvements to Cluster Tab in Admin Panel.
+
 ## 68.0.0 - 2024-09-18
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟢 LOW - Hoist Core update only)

package/admin/tabs/cluster/hzobject/HzObjectModel.ts

@@ -11,12 +11,15 @@ import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/BaseInstanceModel'
 import {GridModel} from '@xh/hoist/cmp/grid';
 import * as Col from '@xh/hoist/cmp/grid/columns';
 import {br, fragment} from '@xh/hoist/cmp/layout';
-import {LoadSpec, managed, XH} from '@xh/hoist/core';
+import {LoadSpec, managed, PlainObject, XH} from '@xh/hoist/core';
 import {RecordActionSpec} from '@xh/hoist/data';
 import {Icon} from '@xh/hoist/icon';
-import {isEmpty} from 'lodash';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
+import {first, isEmpty, last} from 'lodash';
 
 export class HzObjectModel extends BaseInstanceModel {
+    @bindable groupBy: 'type' | 'owner' = 'owner';
+
     clearAction: RecordActionSpec = {
         text: 'Clear Objects',
         icon: Icon.reset(),
@@ -35,21 +38,25 @@ export class HzObjectModel extends BaseInstanceModel {
         selModel: 'multiple',
         enableExport: true,
         exportOptions: {filename: exportFilenameWithDate('distributed-objects'), columns: 'ALL'},
-        sortBy: 'name',
-        groupBy: 'type',
+        sortBy: 'displayName',
+        groupBy: this.groupBy,
         store: {
             fields: [
                 {name: 'name', type: 'string'},
+                {name: 'displayName', type: 'string'},
+                {name: 'owner', type: 'string'},
                 {name: 'type', type: 'string', displayName: 'Type'},
                 {name: 'size', type: 'int'},
                 {name: 'lastUpdateTime', type: 'date'},
                 {name: 'lastAccessTime', type: 'date'}
             ],
-            idSpec: 'name'
+            idSpec: 'name',
+            processRawData: o => this.processRawData(o)
         },
         columns: [
-            {field: 'type', hidden: true},
-            {field: 'name', flex: 1},
+            {field: 'displayName', flex: 1},
+            {field: 'owner'},
+            {field: 'type'},
             {field: 'size', displayName: 'Entry Count', ...Col.number, width: 130},
             {
                 ...timestampNoYear,
@@ -65,6 +72,15 @@ export class HzObjectModel extends BaseInstanceModel {
         contextMenu: [this.clearAction, '-', ...GridModel.defaultContextMenu]
     });
 
+    constructor() {
+        super();
+        makeObservable(this);
+        this.addReaction({
+            track: () => this.groupBy,
+            run: v => this.gridModel.setGroupBy(v)
+        });
+    }
+
     async clearAsync() {
         const {gridModel} = this;
         if (
@@ -151,4 +167,26 @@ export class HzObjectModel extends BaseInstanceModel {
             this.handleLoadException(e, loadSpec);
         }
     }
+
+    //----------------------
+    // Implementation
+    //----------------------
+    private processRawData(obj: PlainObject): PlainObject {
+        const tail: string = last(obj.name.split('.')),
+            className = first(tail.split('['));
+
+        const owner = className.endsWith('Service')
+            ? className
+            : className.startsWith('xh')
+              ? 'Hoist'
+              : obj.type == 'Cache'
+                ? 'Hibernate'
+                : 'Other';
+
+        return {
+            displayName: tail,
+            owner: owner,
+            ...obj
+        };
+    }
 }

package/admin/tabs/cluster/hzobject/HzObjectPanel.ts

@@ -9,8 +9,9 @@ import {filler, hframe, placeholder} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {creates, hoistCmp, uses} from '@xh/hoist/core';
 import {button, exportButton} from '@xh/hoist/desktop/cmp/button';
-import {jsonInput} from '@xh/hoist/desktop/cmp/input';
+import {jsonInput, select} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {recordActionBar} from '@xh/hoist/desktop/cmp/record';
 import {Icon} from '@xh/hoist/icon';
 import {HzObjectModel} from './HzObjectModel';
@@ -20,26 +21,13 @@ export const hzObjectPanel = hoistCmp.factory({
 
     render({model}) {
         return panel({
-            bbar: [
-                recordActionBar({
-                    selModel: model.gridModel.selModel,
-                    actions: [model.clearAction]
+            item: hframe(
+                panel({
+                    item: grid({agOptions: {groupDefaultExpanded: 0}}),
+                    bbar: bbar()
                 }),
-                '-',
-                button({
-                    text: 'Clear Hibernate Caches',
-                    icon: Icon.reset(),
-                    intent: 'warning',
-                    tooltip: 'Clear the Hibernate caches using the native Hibernate API',
-                    onClick: () => model.clearHibernateCachesAsync()
-                }),
-                filler(),
-                gridCountLabel({unit: 'objects'}),
-                '-',
-                storeFilterField({matchMode: 'any'}),
-                exportButton()
-            ],
-            item: hframe(grid(), detailsPanel()),
+                detailsPanel()
+            ),
             mask: 'onLoad',
             ref: model.viewRef
         });
@@ -49,16 +37,16 @@ export const hzObjectPanel = hoistCmp.factory({
 const detailsPanel = hoistCmp.factory({
     model: uses(HzObjectModel),
     render({model}) {
-        const data = model.gridModel.selectedRecord?.raw;
+        const record = model.gridModel.selectedRecord;
         return panel({
-            title: data ? `Stats: ${data.name}` : 'Stats',
+            title: record ? `Stats: ${record.data.displayName}` : 'Stats',
             icon: Icon.info(),
             compactHeader: true,
             modelConfig: {
                 side: 'right',
                 defaultSize: 450
             },
-            item: data
+            item: record
                 ? panel({
                       item: jsonInput({
                           readonly: true,
@@ -66,10 +54,45 @@ const detailsPanel = hoistCmp.factory({
                           height: '100%',
                           showFullscreenButton: false,
                           editorProps: {lineNumbers: false},
-                          value: model.fmtStats(data)
+                          value: model.fmtStats(record.raw)
                       })
                   })
                 : placeholder(Icon.grip(), 'Select an object')
         });
     }
 });
+
+const bbar = hoistCmp.factory({
+    model: uses(HzObjectModel),
+    render({model}) {
+        return toolbar(
+            recordActionBar({
+                selModel: model.gridModel.selModel,
+                actions: [model.clearAction]
+            }),
+            '-',
+            button({
+                text: 'Clear Hibernate Caches',
+                icon: Icon.reset(),
+                intent: 'warning',
+                tooltip: 'Clear the Hibernate caches using the native Hibernate API',
+                onClick: () => model.clearHibernateCachesAsync()
+            }),
+            filler(),
+            gridCountLabel({unit: 'objects'}),
+            '-',
+            select({
+                options: [
+                    {label: 'By Owner', value: 'owner'},
+                    {label: 'By Type', value: 'type'},
+                    {label: 'Ungrouped', value: null}
+                ],
+                width: 125,
+                bind: 'groupBy',
+                hideDropdownIndicator: true
+            }),
+            storeFilterField({matchMode: 'any'}),
+            exportButton()
+        );
+    }
+});

package/admin/tabs/cluster/services/ServiceModel.ts

@@ -11,12 +11,19 @@ import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/BaseInstanceModel'
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {br, fragment} from '@xh/hoist/cmp/layout';
 import {LoadSpec, managed, XH} from '@xh/hoist/core';
-import {RecordActionSpec} from '@xh/hoist/data';
+import {FilterLike, FilterTestFn, RecordActionSpec} from '@xh/hoist/data';
 import {Icon} from '@xh/hoist/icon';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
 import {pluralize} from '@xh/hoist/utils/js';
-import {isEmpty, lowerFirst} from 'lodash';
+import {capitalize, isEmpty, lowerFirst} from 'lodash';
 
 export class ServiceModel extends BaseInstanceModel {
+    @bindable
+    typeFilter: 'hoist' | 'app' | 'all' = 'all';
+
+    @bindable.ref
+    textFilter: FilterTestFn = null;
+
     clearCachesAction: RecordActionSpec = {
         text: 'Clear Caches',
         icon: Icon.reset(),
@@ -57,10 +64,9 @@ export class ServiceModel extends BaseInstanceModel {
             ]
         },
         sortBy: 'displayName',
-        groupBy: 'provider',
         columns: [
-            {field: 'provider', hidden: true},
             {field: 'displayName', flex: 1},
+            {field: 'provider'},
             {...timestampNoYear, field: 'lastCachesCleared'},
             {...timestampNoYear, field: 'initializedDate'}
         ],
@@ -72,6 +78,16 @@ export class ServiceModel extends BaseInstanceModel {
         ]
     });
 
+    constructor() {
+        super();
+        makeObservable(this);
+        this.addReaction({
+            track: () => [this.textFilter, this.typeFilter],
+            run: this.applyFilters,
+            fireImmediately: true
+        });
+    }
+
     async clearCachesAsync(entireCluster: boolean) {
         const {gridModel, instanceName, loadModel} = this,
             {selectedRecords} = gridModel;
@@ -132,4 +148,14 @@ export class ServiceModel extends BaseInstanceModel {
         const displayName = lowerFirst(r.name.replace('hoistCore', ''));
         return {provider, displayName, ...r};
     }
+
+    private applyFilters() {
+        const {typeFilter, textFilter} = this;
+        const filters: FilterLike[] = [textFilter];
+
+        if (typeFilter == 'hoist' || typeFilter == 'app') {
+            filters.push({field: 'provider', op: '=', value: capitalize(typeFilter)});
+        }
+        this.gridModel.store.setFilter(filters);
+    }
 }

package/admin/tabs/cluster/services/ServicePanel.ts

@@ -8,10 +8,12 @@ import {detailsPanel} from '@xh/hoist/admin/tabs/cluster/services/DetailsPanel';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {filler, hframe} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
-import {creates, hoistCmp} from '@xh/hoist/core';
+import {creates, hoistCmp, uses} from '@xh/hoist/core';
 import {exportButton} from '@xh/hoist/desktop/cmp/button';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {recordActionBar} from '@xh/hoist/desktop/cmp/record';
+import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
+import {select} from '@xh/hoist/desktop/cmp/input';
 import {ServiceModel} from './ServiceModel';
 
 export const servicePanel = hoistCmp.factory({
@@ -19,25 +21,17 @@ export const servicePanel = hoistCmp.factory({
 
     render({model}) {
         return panel({
-            bbar: [
-                recordActionBar({
-                    selModel: model.gridModel.selModel,
-                    actions: [model.clearCachesAction, model.clearClusterCachesAction]
-                }),
-                filler(),
-                gridCountLabel({unit: 'service'}),
-                '-',
-                storeFilterField({matchMode: 'any'}),
-                exportButton()
-            ],
             item: hframe(
-                grid({
-                    flex: 1,
-                    agOptions: {
-                        groupRowRendererParams: {
-                            innerRenderer: params => params.value + ' Services'
+                panel({
+                    item: grid({
+                        flex: 1,
+                        agOptions: {
+                            groupRowRendererParams: {
+                                innerRenderer: params => params.value + ' Services'
+                            }
                         }
-                    }
+                    }),
+                    bbar: bbar()
                 }),
                 detailsPanel()
             ),
@@ -46,3 +40,34 @@ export const servicePanel = hoistCmp.factory({
         });
     }
 });
+
+const bbar = hoistCmp.factory({
+    model: uses(ServiceModel),
+    render({model}) {
+        return toolbar(
+            recordActionBar({
+                selModel: model.gridModel.selModel,
+                actions: [model.clearCachesAction, model.clearClusterCachesAction]
+            }),
+            filler(),
+            gridCountLabel({unit: 'service'}),
+            '-',
+            select({
+                options: [
+                    {value: 'all', label: 'All'},
+                    {value: 'app', label: 'App Only'},
+                    {value: 'hoist', label: 'Hoist Only'}
+                ],
+                width: 125,
+                bind: 'typeFilter',
+                hideDropdownIndicator: true
+            }),
+            storeFilterField({
+                matchMode: 'any',
+                autoApply: false,
+                onFilterChange: f => (model.textFilter = f)
+            }),
+            exportButton()
+        );
+    }
+});

package/build/types/admin/tabs/cluster/hzobject/HzObjectModel.d.ts

@@ -3,9 +3,12 @@ import { GridModel } from '@xh/hoist/cmp/grid';
 import { LoadSpec } from '@xh/hoist/core';
 import { RecordActionSpec } from '@xh/hoist/data';
 export declare class HzObjectModel extends BaseInstanceModel {
+    groupBy: 'type' | 'owner';
     clearAction: RecordActionSpec;
     gridModel: GridModel;
+    constructor();
     clearAsync(): Promise<void>;
     clearHibernateCachesAsync(): Promise<void>;
     doLoadAsync(loadSpec: LoadSpec): Promise<void>;
+    private processRawData;
 }

package/build/types/admin/tabs/cluster/services/ServiceModel.d.ts

@@ -1,12 +1,16 @@
 import { BaseInstanceModel } from '@xh/hoist/admin/tabs/cluster/BaseInstanceModel';
 import { GridModel } from '@xh/hoist/cmp/grid';
 import { LoadSpec } from '@xh/hoist/core';
-import { RecordActionSpec } from '@xh/hoist/data';
+import { FilterTestFn, RecordActionSpec } from '@xh/hoist/data';
 export declare class ServiceModel extends BaseInstanceModel {
+    typeFilter: 'hoist' | 'app' | 'all';
+    textFilter: FilterTestFn;
     clearCachesAction: RecordActionSpec;
     clearClusterCachesAction: RecordActionSpec;
     gridModel: GridModel;
+    constructor();
     clearCachesAsync(entireCluster: boolean): Promise<void>;
     doLoadAsync(loadSpec: LoadSpec): Promise<void>;
     private processRawData;
+    private applyFilters;
 }

package/build/types/cmp/markdown/Markdown.d.ts

@@ -1,17 +1,13 @@
 /// <reference types="react" />
 import { HoistProps } from '@xh/hoist/core';
-import { Components } from 'react-markdown';
+import { Options } from 'react-markdown';
 interface MarkdownProps extends HoistProps {
     /** Markdown formatted string to render. */
     content: string;
-    /**
-     * Map of html tag to tag or functional component to control rendering of standard html
-     * elements. See https://www.npmjs.com/package/react-markdown/v/8.0.6#appendix-b-components
-     * for details.
-     */
-    components?: Components;
     /** True (default) to render new lines with <br/> tags. */
     lineBreaks?: boolean;
+    /** Escape hatch to provide additional options to the React Markdown implementation */
+    reactMarkdownOptions?: Partial<Options>;
 }
 /**
  * Render Markdown formatted strings as HTML (e.g. **foo** becomes <strong>foo</strong>).

package/cmp/markdown/Markdown.ts

@@ -6,7 +6,7 @@
  */
 import {hoistCmp, HoistProps} from '@xh/hoist/core';
 import {reactMarkdown} from '@xh/hoist/kit/react-markdown';
-import {Components} from 'react-markdown';
+import {Options} from 'react-markdown';
 import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import {PluggableList} from 'unified/lib';
@@ -15,15 +15,11 @@ interface MarkdownProps extends HoistProps {
     /** Markdown formatted string to render. */
     content: string;
 
-    /**
-     * Map of html tag to tag or functional component to control rendering of standard html
-     * elements. See https://www.npmjs.com/package/react-markdown/v/8.0.6#appendix-b-components
-     * for details.
-     */
-    components?: Components;
-
     /** True (default) to render new lines with <br/> tags. */
     lineBreaks?: boolean;
+
+    /** Escape hatch to provide additional options to the React Markdown implementation */
+    reactMarkdownOptions?: Partial<Options>;
 }
 
 /**
@@ -34,13 +30,18 @@ interface MarkdownProps extends HoistProps {
  */
 export const [Markdown, markdown] = hoistCmp.withFactory<MarkdownProps>({
     displayName: 'Markdown',
-    render({content, lineBreaks = true, components = {}}) {
-        const remarkPlugins: PluggableList = [remarkGfm];
+    render({content, lineBreaks = true, reactMarkdownOptions = {}}) {
+        // add default remark plugins, ensure app provided takes precedence
+        const remarkPlugins: PluggableList = [],
+            appRemarkPlugins = reactMarkdownOptions.remarkPlugins;
+        if (appRemarkPlugins) remarkPlugins.push(...appRemarkPlugins);
         if (lineBreaks) remarkPlugins.push(remarkBreaks);
+        remarkPlugins.push(remarkGfm);
+
         return reactMarkdown({
             item: content,
-            remarkPlugins,
-            components
+            ...reactMarkdownOptions,
+            remarkPlugins
         });
     }
 });

package/package.json

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