This is an automated email from the ASF dual-hosted git repository.
zitadombi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ozone.git
The following commit(s) were added to refs/heads/master by this push:
new 4fe166d9dc HDDS-11957. Make breadcrumb scrollable for long path names
in DiskUsage page (#7590)
4fe166d9dc is described below
commit 4fe166d9dcde5f538f4549e1e6d4ed2ef7be9388
Author: Abhishek Pal <[email protected]>
AuthorDate: Thu Dec 19 15:14:28 2024 +0530
HDDS-11957. Make breadcrumb scrollable for long path names in DiskUsage
page (#7590)
---
.../components/duBreadcrumbNav/duBreadcrumbNav.tsx | 14 ++++++-----
.../src/v2/pages/diskUsage/diskUsage.less | 29 ++++++++++++++--------
2 files changed, 27 insertions(+), 16 deletions(-)
diff --git
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/duBreadcrumbNav/duBreadcrumbNav.tsx
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/duBreadcrumbNav/duBreadcrumbNav.tsx
index d28212cca2..ac09b6bb16 100644
---
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/duBreadcrumbNav/duBreadcrumbNav.tsx
+++
b/hadoop-ozone/recon/src/main/resources/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/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.less
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.less
index dca3861df1..ebeff236a1 100644
---
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.less
+++
b/hadoop-ozone/recon/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;
}
-}
+}
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
