refactor(camel-plugin) Refactor CamelContent to use PageSection tabs …

…type stretch height of the main content and use overflow
mmelko · Apr 23, 2024 · 278b284 · 278b284
1 parent 950f9a2
commit 278b284
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/packages/hawtio/src/plugins/camel/CamelContent.css b/packages/hawtio/src/plugins/camel/CamelContent.css
@@ -5,7 +5,9 @@
 #camel-content-main .pf-c-page__main {
   overflow-x: auto;
 }
-
+#camel-content {
+  height: 100%;
+}
 #camel-content-header > #camel-contexts-toolbar {
   float: right;
   padding-top: 0;

diff --git a/packages/hawtio/src/plugins/camel/CamelContent.tsx b/packages/hawtio/src/plugins/camel/CamelContent.tsx
@@ -1,14 +1,14 @@
 import { eventService } from '@hawtiosrc/core'
 import { AttributeValues, Attributes, Chart, JmxContentMBeans, MBeanNode, Operations } from '@hawtiosrc/plugins/shared'
 import {
+  Divider,
   EmptyState,
   EmptyStateIcon,
   EmptyStateVariant,
   Nav,
   NavItem,
   NavList,
   PageGroup,
-  PageNavigation,
   PageSection,
   PageSectionVariants,
   Text,
@@ -159,17 +159,28 @@ export const CamelContent: React.FunctionComponent = () => {
   const camelNavRoutes = navItems.map(nav => <Route key={nav.id} path={nav.id} element={nav.component} />)
 
   return (
-    <React.Fragment>
-      <PageGroup>
-        <PageSection id='camel-content-header' variant={PageSectionVariants.light}>
-          {camelService.isContext(selectedNode) && <CamelContentContextToolbar />}
-          <Title headingLevel='h1'>{selectedNode.name}</Title>
-          {selectedNode.objectName && <Text component='small'>{selectedNode.objectName}</Text>}
+    <PageGroup id='camel-content'>
+      <PageSection id='camel-content-header' variant={PageSectionVariants.light}>
+        {camelService.isContext(selectedNode) && <CamelContentContextToolbar />}
+        <Title headingLevel='h1'>{selectedNode.name}</Title>
+        {selectedNode.objectName && <Text component='small'>{selectedNode.objectName}</Text>}
+      </PageSection>
+      <Divider />
+      {navItems.length > 1 && (
+        <PageSection type={'tabs'} variant={PageSectionVariants.light} hasShadowBottom>
+          {camelNav}
         </PageSection>
-        {navItems.length > 1 && <PageNavigation>{camelNav}</PageNavigation>}
-      </PageGroup>
-
-      <PageSection id='camel-content-main'>
+      )}
+      <Divider />
+      <PageSection
+        id='camel-content-main'
+        variant={
+          pathname.includes('chart') || pathname.includes('properties')
+            ? PageSectionVariants.default
+            : PageSectionVariants.light
+        }
+        hasOverflowScroll
+      >
         {navItems.length > 0 && (
           <Routes>
             {camelNavRoutes}
@@ -178,7 +189,7 @@ export const CamelContent: React.FunctionComponent = () => {
         )}
         {navItems.length === 0 && !selectedNode.objectName && <JmxContentMBeans />}
       </PageSection>
-    </React.Fragment>
+    </PageGroup>
   )
 }