@xh/hoist 71.0.0-SNAPSHOT.1731971865033 → 71.0.0-SNAPSHOT.1732733427409

package/admin/tabs/cluster/ClusterTabModel.ts

@@ -32,6 +32,10 @@ export class ClusterTabModel extends HoistModel {
 
     @lookup(TabModel) private tabModel: TabModel;
 
+    @managed readonly gridModel: GridModel = this.createGridModel();
+    @managed readonly tabContainerModel: TabContainerModel = this.createTabContainerModel();
+    @managed readonly timer: Timer;
+
     shutdownAction: RecordActionSpec = {
         icon: Icon.skull(),
         text: 'Shutdown Instance',
@@ -41,10 +45,6 @@ export class ClusterTabModel extends HoistModel {
         recordsRequired: 1
     };
 
-    @managed readonly gridModel: GridModel = this.createGridModel();
-    @managed readonly tabContainerModel: TabContainerModel = this.createTabContainerModel();
-    @managed readonly timer: Timer;
-
     get instance(): PlainObject {
         return this.gridModel.selectedRecord?.data;
     }
@@ -59,7 +59,16 @@ export class ClusterTabModel extends HoistModel {
 
     override async doLoadAsync(loadSpec: LoadSpec) {
         const {gridModel} = this;
-        let data = await XH.fetchJson({url: 'clusterAdmin/allInstances', loadSpec});
+
+        let data = await XH.fetchJson({
+            url: 'clusterAdmin/allInstances',
+            // Tighter default timeout for background auto-refresh, to ensure we report connectivity
+            // issues promptly. This call should be quick, but still allow full default timeout for
+            // a manual refresh.
+            timeout: loadSpec.isAutoRefresh ? this.autoRefreshTimeout : undefined,
+            loadSpec
+        });
+
         data = data.map(row => ({
             ...row,
             isLocal: row.name == XH.environmentService.serverInstance,
@@ -78,7 +87,7 @@ export class ClusterTabModel extends HoistModel {
             runFn: () => {
                 if (this.tabModel?.isActive) this.autoRefreshAsync();
             },
-            interval: 5 * SECONDS,
+            interval: this.autoRefreshInterval,
             delay: true
         });
 
@@ -96,6 +105,16 @@ export class ClusterTabModel extends HoistModel {
         );
     }
 
+    formatInstance(instance: PlainObject): ReactNode {
+        const content = [instance.name];
+        if (instance.isPrimary) content.push(badge({item: 'primary', intent: 'primary'}));
+        if (instance.isLocal) content.push(badge('local'));
+        return hbox(content);
+    }
+
+    //------------------
+    // Implementation
+    //------------------
     private createGridModel() {
         return new GridModel({
             store: {
@@ -161,7 +180,7 @@ export class ClusterTabModel extends HoistModel {
         });
     }
 
-    createTabContainerModel() {
+    private createTabContainerModel() {
         return new TabContainerModel({
             route: 'default.cluster',
             switcher: false,
@@ -187,14 +206,7 @@ export class ClusterTabModel extends HoistModel {
         });
     }
 
-    formatInstance(instance: PlainObject): ReactNode {
-        const content = [instance.name];
-        if (instance.isPrimary) content.push(badge({item: 'primary', intent: 'primary'}));
-        if (instance.isLocal) content.push(badge('local'));
-        return hbox(content);
-    }
-
-    async shutdownInstanceAsync(instance: PlainObject) {
+    private async shutdownInstanceAsync(instance: PlainObject) {
         if (
             !(await XH.confirm({
                 message: `Are you SURE you want to shutdown instance ${instance.name}?`,
@@ -216,4 +228,12 @@ export class ClusterTabModel extends HoistModel {
             .linkTo({observer: this.loadModel, message: 'Attempting instance shutdown'})
             .catchDefault();
     }
+
+    private get autoRefreshInterval(): number {
+        return XH.getConf('xhAdminAppConfig', {}).clusterTabAutoRefreshInterval ?? 4 * SECONDS;
+    }
+
+    private get autoRefreshTimeout(): number {
+        return XH.getConf('xhAdminAppConfig', {}).clusterTabAutoRefreshTimeout ?? 2 * SECONDS;
+    }
 }

package/admin/tabs/cluster/distobjects/DistributedObjectsModel.ts

@@ -186,7 +186,7 @@ export class DistributedObjectsModel extends BaseInstanceModel {
             ? className
             : className.startsWith('xh')
               ? 'Hoist'
-              : obj.type == 'Cache'
+              : obj.type == 'Hibernate Cache'
                 ? 'Hibernate'
                 : 'Other';
 

package/build/types/admin/tabs/cluster/ClusterTabModel.d.ts

@@ -9,17 +9,19 @@ export declare class ClusterTabModel extends HoistModel {
         localStorageKey: string;
     };
     private tabModel;
-    shutdownAction: RecordActionSpec;
     readonly gridModel: GridModel;
     readonly tabContainerModel: TabContainerModel;
     readonly timer: Timer;
+    shutdownAction: RecordActionSpec;
     get instance(): PlainObject;
     get instanceName(): string;
     get isMultiInstance(): boolean;
     doLoadAsync(loadSpec: LoadSpec): Promise<void>;
     constructor();
-    private createGridModel;
-    createTabContainerModel(): TabContainerModel;
     formatInstance(instance: PlainObject): ReactNode;
-    shutdownInstanceAsync(instance: PlainObject): Promise<void>;
+    private createGridModel;
+    private createTabContainerModel;
+    private shutdownInstanceAsync;
+    private get autoRefreshInterval();
+    private get autoRefreshTimeout();
 }

package/build/types/desktop/cmp/dash/container/DashContainerModel.d.ts

@@ -104,10 +104,7 @@ export declare class DashContainerModel extends DashModel<DashContainerViewSpec,
      * This method will clear the persistent state saved for this component, if any.
      */
     restoreDefaultsAsync(): Promise<void>;
-    /**
-     * Load state into the DashContainer, recreating its layout and contents
-     * @param state - State to load
-     */
+    /** Load state into the DashContainer, recreating its layout and contents */
     loadStateAsync(state: DashViewState[]): Promise<void>;
     /**
      * Add a view to the container.

package/desktop/cmp/dash/container/DashContainerModel.ts

@@ -214,8 +214,12 @@ export class DashContainerModel
         // Initialize GoldenLayout with initial state once ref is ready
         this.addReaction(
             {
-                track: () => [this.containerRef.current, this.layoutLocked],
-                run: () => this.loadStateAsync(this.state)
+                track: () => [this.containerRef.current, this.layoutLocked] as const,
+                run: ([ref, locked]) => {
+                    // This reaction is intended to run when ref becomes available.
+                    // It's a no-op if ref *removed* due to component re-render.
+                    if (ref) this.loadStateAsync(this.state);
+                }
             },
             {
                 track: () => this.viewState,
@@ -239,32 +243,36 @@ export class DashContainerModel
         await this.loadStateAsync(restoreState.initialState);
     }
 
-    /**
-     * Load state into the DashContainer, recreating its layout and contents
-     * @param state - State to load
-     */
+    /** Load state into the DashContainer, recreating its layout and contents */
     async loadStateAsync(state: DashViewState[]) {
-        const containerEl = this.containerRef.current;
-        if (!containerEl) {
-            this.logWarn(
-                'DashboardContainer not yet rendered - cannot update state - change will be discarded!'
-            );
-            return;
-        }
+        // Always save a reference to the state, even if the container is not yet rendered.
+        // Allows ref reaction on this class to loop back and apply it once GL is ready.
+        runInAction(() => (this.state = state));
 
-        // Show mask to provide user feedback
-        return wait()
-            .thenAction(() => {
-                this.destroyGoldenLayout();
-                this.goldenLayout = this.createGoldenLayout(containerEl, state);
-            })
-            .wait(500)
-            .then(() => {
+        // DOM required from this point on to recreate GL with new state.
+        const containerEl = this.containerRef.current;
+        if (!containerEl) return;
+
+        // Use of async below requires we check after each wait to ensure we haven't re-rendered
+        // again with a new ref. Bail out if so - ref reaction will re-enter and complete the job.
+        const refIsStale = () => this.containerRef.current !== containerEl;
+
+        return (
+            wait()
+                .thenAction(() => {
+                    if (refIsStale()) return;
+                    this.destroyGoldenLayout();
+                    this.goldenLayout = this.createGoldenLayout(containerEl, state);
+                })
                 // Since React v18, it's necessary to wait a short while for ViewModels to be available.
-                this.refreshActiveViews();
-                this.updateTabHeaders();
-            })
-            .linkTo(this.loadingStateTask);
+                .wait(500)
+                .then(() => {
+                    if (refIsStale()) return;
+                    this.refreshActiveViews();
+                    this.updateTabHeaders();
+                })
+                .linkTo(this.loadingStateTask)
+        );
     }
 
     /**
@@ -343,13 +351,7 @@ export class DashContainerModel
 
     setPersistableState(persistableState: PersistableState<{state: DashViewState[]}>) {
         const {state} = persistableState.value;
-        if (!state) return;
-        if (this.containerRef.current) {
-            this.loadStateAsync(state);
-        } else {
-            // If the container is not yet rendered, store the state directly
-            this.state = state;
-        }
+        if (state) this.loadStateAsync(state);
     }
 
     //------------------------

package/package.json

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