HDDS-11957. Make breadcrumb scrollable for long path names in DiskUsa…

…ge page (apache#7590)
aswinshakil · Dec 19, 2024 · 4fe166d · 4fe166d
1 parent a523e17
commit 4fe166d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/...urces/webapps/recon/ozone-recon-web/src/v2/components/duBreadcrumbNav/duBreadcrumbNav.tsx b/...urces/webapps/recon/ozone-recon-web/src/v2/components/duBreadcrumbNav/duBreadcrumbNav.tsx
@@ -21,7 +21,7 @@ import React, { useState } from 'react';
 import { DUSubpath } from '@/v2/types/diskUsage.types';
 import { Breadcrumb, Menu, Input } from 'antd';
 import { MenuProps } from 'antd/es/menu';
-import { CaretDownOutlined, CaretRightOutlined, HomeFilled } from '@ant-design/icons';
+import { CaretDownOutlined, HomeFilled } from '@ant-design/icons';
 
 
 type File = {
@@ -106,15 +106,15 @@ const DUBreadcrumbNav: React.FC<File> = ({
     //Push a new input to allow passing a path
     menuItems.push(
       <Menu.Item
-        key={`${lastPath}-search`}>
+        key={`${lastPath}-search`}
+        style={{ width: '100%'}}>
         <Input.Search
           placeholder='Enter Path'
           onSearch={handleSearch}
           onClick={(e) => {
             //Prevent menu close on click
             e.stopPropagation();
-          }}
-          style={{ width: 160}}/>
+          }} />
       </Menu.Item>
     )
     return (
@@ -162,11 +162,13 @@ const DUBreadcrumbNav: React.FC<File> = ({
   }
 
   return (
-    <Breadcrumb
-      separator={<CaretRightOutlined style={{ fontSize: '12px'}}/>}
+    <div id='breadcrumb-container'>
+      <Breadcrumb
+      separator={'/'}
       className='breadcrumb-nav'>
       {generateBreadCrumbs()}
     </Breadcrumb>
+    </div>
   )
 }
 

diff --git a/...on/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.less b/...on/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.less
@@ -28,15 +28,24 @@
 .content-div {
   min-height: unset;
 
-  .breadcrumb-nav {
-    font-size: 0.9vw;
-    margin: 0px 0px 8px 8px;
-    .breadcrumb-nav-item {
-      background: transparent;
-      border: none !important;
-      cursor: pointer;
-      color: @primary-color;
-
+  #breadcrumb-container {
+    overflow-y: hidden;
+    overflow-x: auto;
+    padding: 0px 8px 16px 8px;
+    margin-bottom: 10px;
+    width: 83vw;
+    height: 20%;
+
+    .breadcrumb-nav {
+      font-size: 0.9vw;
+      width: max-content;
+      .breadcrumb-nav-item {
+        background: transparent;
+        border: none !important;
+        cursor: pointer;
+        color: @primary-color;
+
+      }
     }
   }
 
@@ -56,4 +65,4 @@
     column-gap: 8px;
     padding: 0px 8px 16px 8px;
   }
-}
+}