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 632db8d9407..59e4d180f44 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/duBreadcrumbNav/duBreadcrumbNav.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/duBreadcrumbNav/duBreadcrumbNav.tsx index 4a1c88ba65e..d8b5b0652fe 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/navBar/navBar.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/navBar/navBar.tsx index badca682ef8..518afef0198 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/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 551e080753b..eeb7475e52a 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 60cfbb8f032..2272f2ca01d 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 94% 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 57fb1cce214..a49682aa3f0 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; + 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, @@ -48,10 +48,9 @@ const DUPieChart: React.FC = ({ sizeWithReplica, loading }) => { - 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); @@ -70,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[] = []; @@ -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)]; @@ -121,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)); } @@ -208,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 76% 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 7240cda1566..f7fa6c13bba 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 @@ -16,22 +16,22 @@ * 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 DUMetadata from '@/v2/components/duMetadata/duMetadata'; -import DUPieChart from '@/v2/components/plots/duPieChart'; -import SingleSelect, {Option} from '@/v2/components/select/singleSelect'; +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 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} 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 { 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