refactor(jmx-plugin):Change the styling to be consistent with the cam…

…el plugin appearance
mmelko · Apr 24, 2024 · 7fe84d3 · 7fe84d3
1 parent 062c784
commit 7fe84d3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/packages/hawtio/src/plugins/jmx/JmxContent.tsx b/packages/hawtio/src/plugins/jmx/JmxContent.tsx
@@ -2,14 +2,14 @@ import { Chart, JmxContentMBeans, MBeanNode } from '@hawtiosrc/plugins/shared'
 import { AttributeTable, Attributes } from '@hawtiosrc/plugins/shared/attributes'
 import { Operations } from '@hawtiosrc/plugins/shared/operations'
 import {
+  Divider,
   EmptyState,
   EmptyStateIcon,
   EmptyStateVariant,
   Nav,
   NavItem,
   NavList,
   PageGroup,
-  PageNavigation,
   PageSection,
   PageSectionVariants,
   Text,
@@ -86,9 +86,17 @@ export const JmxContent: React.FunctionComponent = () => {
           <Title headingLevel='h1'>{selectedNode.name}</Title>
           <Text component='small'>{selectedNode.objectName}</Text>
         </PageSection>
-        <PageNavigation>{mbeanNav}</PageNavigation>
+        <Divider />
+        <PageSection type='tabs' variant={PageSectionVariants.light} hasShadowBottom>
+          {mbeanNav}
+        </PageSection>
+        <Divider />
       </PageGroup>
-      <PageSection id='jmx-content-main'>
+      <PageSection
+        id='jmx-content-main'
+        variant={pathname.includes('chart') ? PageSectionVariants.default : PageSectionVariants.light}
+        hasOverflowScroll
+      >
         <Routes>
           {mbeanRoutes}
           <Route key='root' path='/' element={<Navigate to={navItems[0]?.id ?? ''} />} />

diff --git a/packages/hawtio/src/plugins/shared/attributes/Attributes.tsx b/packages/hawtio/src/plugins/shared/attributes/Attributes.tsx
@@ -128,14 +128,12 @@ export const Attributes: React.FunctionComponent = () => {
     </div>
   )
   return (
-    <React.Fragment>
-      <Panel>
-        <Drawer isExpanded={isModalOpen} className={'pf-m-inline-on-2xl'}>
-          <DrawerContent panelContent={panelContent}>
-            <DrawerContentBody hasPadding> {attributesTable}</DrawerContentBody>
-          </DrawerContent>
-        </Drawer>
-      </Panel>
-    </React.Fragment>
+    <Panel>
+      <Drawer isExpanded={isModalOpen} className={'pf-m-inline-on-2xl'}>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody hasPadding> {attributesTable}</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </Panel>
   )
 }