HDDS-13528. Handle null paths when the NSSummary is initializing

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,

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';

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<NavBarProps> = ({
       </Menu.Item>
     </Menu.SubMenu>
   ), (
-    <Menu.Item key='/DiskUsage'
+    <Menu.Item key='/NamespaceUsage'
       icon={<PieChartOutlined />}>
       <span>Namespace Usage</span>
-      <Link to='/DiskUsage' />
+      <Link to='/NamespaceUsage' />
     </Menu.Item>
   ), (
     isHeatmapEnabled &&

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/duMetadata/duMetadata.tsx → 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<MetadataProps> = ({
+const NUMetadata: React.FC<MetadataProps> = ({
   path = '/'
 }) => {
   const [loading, setLoading] = useState<boolean>(false);
@@ -380,4 +380,4 @@ const DUMetadata: React.FC<MetadataProps> = ({
   );
 }
 
-export default DUMetadata;
+export default NUMetadata;

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<OverviewStorageCardProps> = ({
 
   return (
     <OverviewCardWrapper
-      linkToUrl={'/DiskUsage'}
+      linkToUrl={'/NamespaceUsage'}
       title='Report'
       children={cardChildren} />
   )

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx → 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<PieChartProps> = ({
+const NUPieChart: React.FC<PieChartProps> = ({
   path,
   limit,
   size,
@@ -48,10 +48,9 @@ const DUPieChart: React.FC<PieChartProps> = ({
   sizeWithReplica,
   loading
 }) => {
-
   const [subpathSize, setSubpathSize]  = React.useState<number>(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<PieChartProps> = ({
      *     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<PieChartProps> = ({
 
     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<PieChartProps> = ({
           ? 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<PieChartProps> = ({
   );
 }
 
-export default DUPieChart;
+export default NUPieChart;

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx → 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<boolean>(false);
   const [limit, setLimit] = useState<Option>(LIMIT_OPTIONS[1]);
-  const [duResponse, setDUResponse] = useState<DUResponse>({
+  const [duResponse, setDUResponse] = useState<NUResponse>({
     status: '',
     path: '/',
     subPathCount: 0,
@@ -57,6 +57,7 @@ const DiskUsage: React.FC<{}> = () => {
   const cancelPieSignal = useRef<AbortController>();
 
   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`,
@@ -65,14 +66,20 @@ const DiskUsage: React.FC<{}> = () => {
     cancelPieSignal.current = controller;
 
     request.then(response => {
-      const duResponse: DUResponse = response.data;
+      const duResponse: NUResponse = response.data;
+      console.log(duResponse);
       const status = duResponse.status;
       if (status === 'PATH_NOT_FOUND') {
         setLoading(false);
         showDataFetchError(`Invalid Path: ${path}`);
         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',
             }}>
             <DUBreadcrumbNav
-              path={duResponse.path}
+              path={duResponse.path ?? '/'}
               subPaths={duResponse.subPaths}
               updateHandler={loadData} />
             <Tooltip
@@ -134,20 +141,20 @@ const DiskUsage: React.FC<{}> = () => {
               onChange={handleLimitChange} />
           </div>
           <div className='du-content'>
-            <DUPieChart
+            <NUPieChart
               loading={loading}
               limit={Number.parseInt(limit.value)}
               path={duResponse.path}
               subPathCount={duResponse.subPathCount}
               subPaths={duResponse.subPaths}
               sizeWithReplica={duResponse.sizeWithReplica}
               size={duResponse.size} />
-            <DUMetadata path={duResponse.path} />
+            <NUMetadata path={duResponse.path} />
           </div>
         </div>
       </div>
     </>
   );
 }
 
-export default DiskUsage;
+export default NamespaceUsage;

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx

@@ -22,7 +22,7 @@ const Volumes = lazy(() => import('@/v2/pages/volumes/volumes'))
 const Buckets = lazy(() => import('@/v2/pages/buckets/buckets'));
 const Datanodes = lazy(() => import('@/v2/pages/datanodes/datanodes'));
 const Pipelines = lazy(() => import('@/v2/pages/pipelines/pipelines'));
-const DiskUsage = lazy(() => import('@/v2/pages/diskUsage/diskUsage'));
+const NamespaceUsage = lazy(() => import('@/v2/pages/namespaceUsage/namespaceUsage'));
 const Containers = lazy(() => import('@/v2/pages/containers/containers'));
 const Insights = lazy(() => import('@/v2/pages/insights/insights'));
 const OMDBInsights = lazy(() => import('@/v2/pages/insights/omInsights'));
@@ -51,8 +51,8 @@ export const routesV2 = [
     component: Pipelines
   },
   {
-    path: '/DiskUsage',
-    component: DiskUsage
+    path: '/NamespaceUsage',
+    component: NamespaceUsage
   },
   {
     path: '/Containers',

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/diskUsage.types.ts → hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/namespaceUsage.types.ts

@@ -16,20 +16,20 @@
  * limitations under the License.
  */
 
-export type DUSubpath = {
+export type NUSubpath = {
   path: string;
   size: number;
   sizeWithReplica: number;
   isKey: boolean;
 }
 
-export type DUResponse = {
+export type NUResponse = {
   status: string;
   path: string;
   subPathCount: number;
   size: number;
   sizeWithReplica: number;
-  subPaths: DUSubpath[];
+  subPaths: NUSubpath[];
   sizeDirectKey: number;
 }