From 35377955eaf0ef7bb5e93a28c4a587c3826f577d Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Tue, 5 Aug 2025 15:18:08 +0530 Subject: [PATCH 1/2] HDDS-13528. Handle null paths when the NSSummary is initializing --- .../ozone-recon-web/src/utils/common.tsx | 2 +- .../src/v2/components/navBar/navBar.tsx | 4 +-- .../src/v2/components/plots/duPieChart.tsx | 5 ++-- .../src/v2/pages/diskUsage/diskUsage.tsx | 29 ++++++++++++------- .../ozone-recon-web/src/v2/routes-v2.tsx | 2 +- 5 files changed, 24 insertions(+), 18 deletions(-) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx index 632db8d94073..59e4d180f44f 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx @@ -34,7 +34,7 @@ const showErrorNotification = (title: string, description: string) => { notification.error(args); }; -const showInfoNotification = (title: string, description: string) => { +export const showInfoNotification = (title: string, description: string) => { const args = { message: title, description, diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/navBar/navBar.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/navBar/navBar.tsx index badca682ef8c..518afef01980 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/navBar/navBar.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/navBar/navBar.tsx @@ -132,10 +132,10 @@ const NavBar: React.FC = ({ ), ( - }> Namespace Usage - + ), ( isHeatmapEnabled && 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 57fb1cce2144..5802237f1a1c 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 @@ -24,7 +24,7 @@ import { DUSubpath } from '@/v2/types/diskUsage.types'; //-------Types--------// type PieChartProps = { - path: string; + path: string | null; limit: number; size: number; subPaths: DUSubpath[]; @@ -48,7 +48,6 @@ const DUPieChart: React.FC = ({ sizeWithReplica, loading }) => { - const [subpathSize, setSubpathSize] = React.useState(0); function getSubpathSize(subpaths: DUSubpath[]): number { @@ -96,7 +95,7 @@ const DUPieChart: React.FC = ({ if (subPathCount === 0 || subpaths.length === 0) { // No more subpaths available - pathLabels = [path.split('/').pop() ?? '']; + pathLabels = [(path ?? '/').split('/').pop() ?? '']; valuesWithMinBlockSize = [0.1]; percentage = ['100.00']; sizeStr = [byteToSize(size, 1)]; 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 7240cda15663..10f599ad27cf 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 @@ -16,20 +16,20 @@ * limitations under the License. */ -import React, {useRef, useState} from 'react'; -import {AxiosError} from 'axios'; -import {Alert, Button, Tooltip} from 'antd'; -import {InfoCircleFilled, ReloadOutlined,} from '@ant-design/icons'; -import {ValueType} from 'react-select'; +import React, { useRef, useState } from 'react'; +import { AxiosError } from 'axios'; +import { Alert, Button, Tooltip } from 'antd'; +import { InfoCircleFilled, ReloadOutlined, } from '@ant-design/icons'; +import { ValueType } from 'react-select'; import DUMetadata from '@/v2/components/duMetadata/duMetadata'; import DUPieChart from '@/v2/components/plots/duPieChart'; -import SingleSelect, {Option} from '@/v2/components/select/singleSelect'; +import SingleSelect, { Option } from '@/v2/components/select/singleSelect'; import DUBreadcrumbNav from '@/v2/components/duBreadcrumbNav/duBreadcrumbNav'; -import {showDataFetchError} from '@/utils/common'; -import {AxiosGetHelper, cancelRequests} from '@/utils/axiosRequestHelper'; +import { showDataFetchError, showInfoNotification } from '@/utils/common'; +import { AxiosGetHelper, cancelRequests } from '@/utils/axiosRequestHelper'; -import {DUResponse} from '@/v2/types/diskUsage.types'; +import { DUResponse } from '@/v2/types/diskUsage.types'; import './diskUsage.less'; @@ -57,6 +57,7 @@ const DiskUsage: React.FC<{}> = () => { const cancelPieSignal = useRef(); function loadData(path: string) { + console.log("Loading data at: ", path); setLoading(true); const { request, controller } = AxiosGetHelper( `/api/v1/namespace/usage?path=${path}&files=true&sortSubPaths=true`, @@ -66,6 +67,7 @@ const DiskUsage: React.FC<{}> = () => { request.then(response => { const duResponse: DUResponse = response.data; + console.log(duResponse); const status = duResponse.status; if (status === 'PATH_NOT_FOUND') { setLoading(false); @@ -73,6 +75,11 @@ const DiskUsage: React.FC<{}> = () => { return; } + if (status === 'INITIALIZING') { + showInfoNotification("Information being initialized", "Namespace Summary is being initialized, please wait.") + return; + } + setDUResponse(duResponse); setLoading(false); }).catch(error => { @@ -115,7 +122,7 @@ const DiskUsage: React.FC<{}> = () => { justifyContent: 'space-between', }}> = () => { Date: Thu, 7 Aug 2025 11:55:29 +0530 Subject: [PATCH 2/2] Address review comments --- .../duBreadcrumbNav/duBreadcrumbNav.tsx | 2 +- .../nuMetadata.tsx} | 4 ++-- .../overviewCard/overviewStorageCard.tsx | 2 +- .../plots/{duPieChart.tsx => nuPieChart.tsx} | 15 ++++++------- .../namespaceUsage.less} | 0 .../namespaceUsage.tsx} | 22 +++++++++---------- .../ozone-recon-web/src/v2/routes-v2.tsx | 4 ++-- ...Usage.types.ts => namespaceUsage.types.ts} | 6 ++--- 8 files changed, 27 insertions(+), 28 deletions(-) rename hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/{duMetadata/duMetadata.tsx => nuMetadata/nuMetadata.tsx} (99%) rename hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/{duPieChart.tsx => nuPieChart.tsx} (95%) rename hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/{diskUsage/diskUsage.less => namespaceUsage/namespaceUsage.less} (100%) rename hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/{diskUsage/diskUsage.tsx => namespaceUsage/namespaceUsage.tsx} (90%) rename hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/{diskUsage.types.ts => namespaceUsage.types.ts} (93%) 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 4a1c88ba65e3..d8b5b0652fe2 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 @@ -18,7 +18,7 @@ import React, { useState } from 'react'; -import { DUSubpath } from '@/v2/types/diskUsage.types'; +import { DUSubpath } from '@/v2/types/namespaceUsage.types'; import { Breadcrumb, Menu, Input } from 'antd'; import { MenuProps } from 'antd/es/menu'; import { CaretDownOutlined, HomeFilled } from '@ant-design/icons'; diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/duMetadata/duMetadata.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/nuMetadata/nuMetadata.tsx similarity index 99% rename from hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/duMetadata/duMetadata.tsx rename to hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/nuMetadata/nuMetadata.tsx index 551e080753bd..eeb7475e52a2 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/duMetadata/duMetadata.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/nuMetadata/nuMetadata.tsx @@ -121,7 +121,7 @@ type MetadataState = { // ------------- Component -------------- // -const DUMetadata: React.FC = ({ +const NUMetadata: React.FC = ({ path = '/' }) => { const [loading, setLoading] = useState(false); @@ -380,4 +380,4 @@ const DUMetadata: React.FC = ({ ); } -export default DUMetadata; +export default NUMetadata; diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewStorageCard.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewStorageCard.tsx index 60cfbb8f0325..2272f2ca01d9 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewStorageCard.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewStorageCard.tsx @@ -239,7 +239,7 @@ const OverviewStorageCard: React.FC = ({ return ( ) 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/nuPieChart.tsx similarity index 95% rename from hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx rename to hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/nuPieChart.tsx index 5802237f1a1c..a49682aa3f00 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/nuPieChart.tsx @@ -20,14 +20,14 @@ import React from 'react'; import EChart from '@/v2/components/eChart/eChart'; import { byteToSize } from '@/utils/common'; -import { DUSubpath } from '@/v2/types/diskUsage.types'; +import { NUSubpath } from '@/v2/types/namespaceUsage.types'; //-------Types--------// type PieChartProps = { - path: string | null; + path?: string | null; limit: number; size: number; - subPaths: DUSubpath[]; + subPaths: NUSubpath[]; subPathCount: number; sizeWithReplica: number; loading: boolean; @@ -39,7 +39,7 @@ const MIN_BLOCK_SIZE = 0.05; //----------Component---------// -const DUPieChart: React.FC = ({ +const NUPieChart: React.FC = ({ path, limit, size, @@ -50,7 +50,7 @@ const DUPieChart: React.FC = ({ }) => { const [subpathSize, setSubpathSize] = React.useState(0); - function getSubpathSize(subpaths: DUSubpath[]): number { + function getSubpathSize(subpaths: NUSubpath[]): number { const subpathSize = subpaths .map((subpath) => subpath.size) .reduce((acc, curr) => acc + curr, 0); @@ -69,7 +69,7 @@ const DUPieChart: React.FC = ({ * but we can't check on that, as the response will always have * 30 subpaths, but from the total size and the subpaths size we can calculate it). */ - let subpaths: DUSubpath[] = subPaths; + let subpaths: NUSubpath[] = subPaths; let pathLabels: string[] = []; let percentage: string[] = []; @@ -120,7 +120,6 @@ const DUPieChart: React.FC = ({ ? val + MIN_BLOCK_SIZE : val ); - percentage = values.map(value => (value * 100).toFixed(2)); sizeStr = subpaths.map((subpath) => byteToSize(subpath.size, 1)); } @@ -207,4 +206,4 @@ const DUPieChart: React.FC = ({ ); } -export default DUPieChart; \ No newline at end of file +export default NUPieChart; \ No newline at end of file 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/namespaceUsage/namespaceUsage.less similarity index 100% rename from hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.less rename to hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/namespaceUsage/namespaceUsage.less 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/namespaceUsage/namespaceUsage.tsx similarity index 90% rename from hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx rename to hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/namespaceUsage/namespaceUsage.tsx index 10f599ad27cf..f7fa6c13bbad 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/namespaceUsage/namespaceUsage.tsx @@ -22,16 +22,16 @@ import { Alert, Button, Tooltip } from 'antd'; import { InfoCircleFilled, ReloadOutlined, } from '@ant-design/icons'; import { ValueType } from 'react-select'; -import DUMetadata from '@/v2/components/duMetadata/duMetadata'; -import DUPieChart from '@/v2/components/plots/duPieChart'; +import NUMetadata from '@/v2/components/nuMetadata/nuMetadata'; +import NUPieChart from '@/v2/components/plots/nuPieChart'; import SingleSelect, { Option } from '@/v2/components/select/singleSelect'; import DUBreadcrumbNav from '@/v2/components/duBreadcrumbNav/duBreadcrumbNav'; import { showDataFetchError, showInfoNotification } from '@/utils/common'; import { AxiosGetHelper, cancelRequests } from '@/utils/axiosRequestHelper'; -import { DUResponse } from '@/v2/types/diskUsage.types'; +import { NUResponse } from '@/v2/types/namespaceUsage.types'; -import './diskUsage.less'; +import './namespaceUsage.less'; const LIMIT_OPTIONS: Option[] = [ { label: '5', value: '5' }, @@ -41,10 +41,10 @@ const LIMIT_OPTIONS: Option[] = [ { label: '30', value: '30' } ] -const DiskUsage: React.FC<{}> = () => { +const NamespaceUsage: React.FC<{}> = () => { const [loading, setLoading] = useState(false); const [limit, setLimit] = useState