@xh/hoist 71.0.0-SNAPSHOT.1736281104503 → 71.0.0-SNAPSHOT.1736297061304

package/admin/tabs/cluster/ClusterTab.ts

@@ -16,8 +16,8 @@ export const clusterTab = hoistCmp.factory(() =>
             route: 'default.cluster',
             switcher: {orientation: 'left', testId: 'cluster-tab-switcher'},
             tabs: [
-                {id: 'instances', icon: Icon.info(), content: instancesTab},
-                {id: 'objects', icon: Icon.diff(), content: clusterObjectsPanel}
+                {id: 'instances', icon: Icon.server(), content: instancesTab},
+                {id: 'objects', icon: Icon.boxFull(), content: clusterObjectsPanel}
             ]
         }
     })

package/admin/tabs/cluster/objects/ClusterObjects.scss

@@ -16,10 +16,3 @@
 .xh-cluster-objects-cell-success {
   background-color: var(--xh-intent-success-trans1) !important;
 }
-
-.xh-cluster-objects-result-count {
-  align-items: center;
-  .xh-icon {
-    margin-right: 0.5em;
-  }
-}

package/admin/tabs/cluster/objects/ClusterObjectsPanel.ts

@@ -5,7 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {grid} from '@xh/hoist/cmp/grid';
-import {div, filler, hframe, label} from '@xh/hoist/cmp/layout';
+import {filler, fragment, hframe, label} from '@xh/hoist/cmp/layout';
 import {relativeTimestamp} from '@xh/hoist/cmp/relativetimestamp';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {creates, hoistCmp} from '@xh/hoist/core';
@@ -49,49 +49,56 @@ const tbar = hoistCmp.factory<ClusterObjectsModel>(({model}) => {
     return toolbar(
         diffBar({omit: isSingleInstance}),
         filler(),
-        'As of',
+        label('As of'),
         relativeTimestamp({bind: 'startTimestamp'}),
-        toolbarSep(),
-        'Took ',
-        fmtNumber(model.runDurationMs, {label: 'ms'})
+        '-',
+        label('Took '),
+        fmtNumber(model.runDurationMs, {label: 'ms'}),
+        '-',
+        storeFilterField({
+            matchMode: 'any',
+            autoApply: false,
+            onFilterChange: f => (model.textFilter = f)
+        }),
+        exportButton()
     );
 });
 
 const diffBar = hoistCmp.factory<ClusterObjectsModel>(({model}) => {
     const {counts} = model;
-    return [
-        switchInput({
-            label: 'Hide unchecked',
-            bind: 'hideUnchecked'
-        }),
-        div({
-            className: 'xh-cluster-objects-result-count',
+    return fragment(
+        Icon.diff(),
+        label('Cross-instance comparisons'),
+        fragment({
             omit: !counts.failed,
             items: [
                 toolbarSep(),
-                Icon.error({prefix: 'fas', className: 'xh-red'}),
-                label(`${counts.failed} Failed`)
+                Icon.diff({prefix: 'fas', intent: 'danger'}),
+                label(`${counts.failed} diffs`)
             ]
         }),
-        div({
-            className: 'xh-cluster-objects-result-count',
+        fragment({
             omit: !counts.passed,
             items: [
                 toolbarSep(),
-                Icon.checkCircle({prefix: 'fas', className: 'xh-green'}),
-                label(`${counts.passed} OK`)
+                Icon.checkCircle({prefix: 'fas', intent: 'success'}),
+                label(`${counts.passed} in-sync`)
             ]
         }),
-        div({
-            className: 'xh-cluster-objects-result-count',
-            omit: !counts.unchecked || model.hideUnchecked,
+        fragment({
+            omit: !counts.unchecked,
             items: [
                 toolbarSep(),
-                Icon.disabled({prefix: 'fas', className: 'xh-gray'}),
-                label(`${counts.unchecked} Unchecked`)
+                Icon.disabled({prefix: 'fas', className: 'xh-text-color-muted'}),
+                label(`${counts.unchecked} unchecked`)
             ]
+        }),
+        toolbarSep(),
+        switchInput({
+            label: 'w/Comparisons only',
+            bind: 'hideUnchecked'
         })
-    ];
+    );
 });
 
 const bbar = hoistCmp.factory<ClusterObjectsModel>(({model}) => {
@@ -102,13 +109,6 @@ const bbar = hoistCmp.factory<ClusterObjectsModel>(({model}) => {
             intent: 'warning',
             tooltip: 'Clear the Hibernate caches using the native Hibernate API',
             onClick: () => model.clearAllHibernateCachesAsync()
-        }),
-        filler(),
-        storeFilterField({
-            matchMode: 'any',
-            autoApply: false,
-            onFilterChange: f => (model.textFilter = f)
-        }),
-        exportButton()
+        })
     );
 });

package/admin/tabs/cluster/objects/DetailModel.ts

@@ -9,7 +9,7 @@ import {ColumnSpec, GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, lookup, managed, PlainObject, XH} from '@xh/hoist/core';
 import {StoreRecord} from '@xh/hoist/data';
 import {fmtDateTimeSec, fmtJson} from '@xh/hoist/format';
-import {makeObservable, action, observable} from '@xh/hoist/mobx';
+import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {DAYS} from '@xh/hoist/utils/datetime';
 import {
     cloneDeep,

package/admin/tabs/cluster/objects/DetailPanel.ts

@@ -18,11 +18,11 @@ export const detailPanel = hoistCmp.factory({
 
     render({model}) {
         const {instanceName, selectedAdminStats, objectName, objectType} = model;
-        if (!objectName) return placeholder(Icon.grip(), 'Select an object');
+        if (!objectName) return placeholder(Icon.grip(), 'Select an object to view details...');
 
         return panel({
             title: `${objectType} - ${objectName}`,
-            icon: Icon.diff(),
+            icon: getIcon(objectType),
             compactHeader: true,
             items: [
                 grid({flex: 1}),
@@ -49,3 +49,14 @@ export const detailPanel = hoistCmp.factory({
         });
     }
 });
+
+const getIcon = (objType: string) => {
+    switch (objType) {
+        case 'Service':
+            return Icon.gears();
+        case 'Topic':
+            return Icon.mail();
+    }
+
+    return Icon.database();
+};

package/admin/tabs/monitor/MonitorTab.ts

@@ -85,7 +85,7 @@ const tbar = hoistCmp.factory<MonitorTabModel>(({model}) => {
             className: getClassName(!failed),
             items: [
                 toolbarSep(),
-                Icon.error({prefix: 'fas', className: 'xh-red'}),
+                Icon.error({prefix: 'fas', intent: 'danger'}),
                 label(`${failed} failed`)
             ]
         }),
@@ -93,7 +93,7 @@ const tbar = hoistCmp.factory<MonitorTabModel>(({model}) => {
             className: getClassName(!warned),
             items: [
                 toolbarSep(),
-                Icon.warning({prefix: 'fas', className: 'xh-orange'}),
+                Icon.warning({prefix: 'fas', intent: 'warning'}),
                 label(`${warned} warned`)
             ]
         }),
@@ -101,7 +101,7 @@ const tbar = hoistCmp.factory<MonitorTabModel>(({model}) => {
             className: getClassName(!passed),
             items: [
                 toolbarSep(),
-                Icon.checkCircle({prefix: 'fas', className: 'xh-green'}),
+                Icon.checkCircle({prefix: 'fas', intent: 'success'}),
                 label(`${passed} passed`)
             ]
         }),
@@ -109,7 +109,7 @@ const tbar = hoistCmp.factory<MonitorTabModel>(({model}) => {
             className: getClassName(!inactive),
             items: [
                 toolbarSep(),
-                Icon.disabled({prefix: 'fas', className: 'xh-gray'}),
+                Icon.disabled({prefix: 'fas', className: 'xh-text-color-muted'}),
                 label(`${inactive} inactive`)
             ]
         }),

package/package.json

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