From be4910ce5a20900e125ad86c9918dfd83c8ccde3 Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Tue, 28 Jan 2025 21:24:09 +0530
Subject: [PATCH 1/3] HDDS-12085. Add manual refresh button for DU page

---
 .../duBreadcrumbNav/duBreadcrumbNav.tsx       |  8 +++----
 .../src/v2/pages/diskUsage/diskUsage.less     |  1 +
 .../src/v2/pages/diskUsage/diskUsage.tsx      | 21 +++++++++++++------
 3 files changed, 20 insertions(+), 10 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 ac09b6bb1614..4a1c88ba65e3 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
@@ -164,10 +164,10 @@ const DUBreadcrumbNav: React.FC<File> = ({
   return (
     <div id='breadcrumb-container'>
       <Breadcrumb
-      separator={'/'}
-      className='breadcrumb-nav'>
-      {generateBreadCrumbs()}
-    </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 ebeff236a1f2..97d2a8a843b3 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
@@ -35,6 +35,7 @@
     margin-bottom: 10px;
     width: 83vw;
     height: 20%;
+    flex: 0.98;
 
     .breadcrumb-nav {
       font-size: 0.9vw;
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx
index 57d7a612c344..7a121fae54a9 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx
@@ -19,10 +19,10 @@
 import React, { useRef, useState } from 'react';
 import { AxiosError } from 'axios';
 import {
-  Alert
+  Alert, Button
 } from 'antd';
 import {
-  InfoCircleFilled
+  InfoCircleFilled, ReloadOutlined,
 } from '@ant-design/icons';
 import { ValueType } from 'react-select';
 
@@ -113,10 +113,19 @@ const DiskUsage: React.FC<{}> = () => {
           showIcon={true}
           closable={false} />
         <div className='content-div'>
-          <DUBreadcrumbNav
-            path={duResponse.path}
-            subPaths={duResponse.subPaths}
-            updateHandler={loadData} />
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+            }}>
+            <DUBreadcrumbNav
+              path={duResponse.path}
+              subPaths={duResponse.subPaths}
+              updateHandler={loadData} />
+            <Button
+              icon={<ReloadOutlined />}
+              onClick={() => loadData(duResponse.path)} />
+          </div>
           <div className='du-table-header-section'>
             <SingleSelect
               options={LIMIT_OPTIONS}

From 0590e429faef4794c8c5e47c5433e1c5943fea08 Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Wed, 29 Jan 2025 16:27:49 +0530
Subject: [PATCH 2/3] Fix layout for large names

---
 .../ozone-recon-web/src/v2/components/plots/duPieChart.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
index 2601905a142e..57fb1cce2144 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
@@ -203,7 +203,7 @@ const DUPieChart: React.FC<PieChartProps> = ({
     <EChart
       loading={loading}
       option={eChartsOptions}
-      style={{ flex: '0 1 90%', height: '50vh' }}
+      style={{ flex: '1 3 80%', height: '50vh' }}
       eventHandler={{name: 'legendselectchanged', handler: handleLegendChange}}/>
   );
 }

From b429cc58777baaad2fcf479e9d577474ed349993 Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Thu, 30 Jan 2025 15:28:51 +0530
Subject: [PATCH 3/3] Add tooltip to reload button for more info

---
 .../src/v2/pages/diskUsage/diskUsage.tsx             | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx
index 7a121fae54a9..ee6f8c6c6c50 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx
@@ -19,7 +19,7 @@
 import React, { useRef, useState } from 'react';
 import { AxiosError } from 'axios';
 import {
-  Alert, Button
+  Alert, Button, Tooltip
 } from 'antd';
 import {
   InfoCircleFilled, ReloadOutlined,
@@ -122,9 +122,13 @@ const DiskUsage: React.FC<{}> = () => {
               path={duResponse.path}
               subPaths={duResponse.subPaths}
               updateHandler={loadData} />
-            <Button
-              icon={<ReloadOutlined />}
-              onClick={() => loadData(duResponse.path)} />
+            <Tooltip
+              title="Click to reload Disk Usage data">
+              <Button
+                type='primary'
+                icon={<ReloadOutlined />}
+                onClick={() => loadData(duResponse.path)} />
+            </Tooltip>
           </div>
           <div className='du-table-header-section'>
             <SingleSelect