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

Author: devabhishekpal

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/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/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<PieChartProps> = ({
   sizeWithReplica,
   loading
 }) => {
-
   const [subpathSize, setSubpathSize]  = React.useState<number>(0);
 
   function getSubpathSize(subpaths: DUSubpath[]): number {
@@ -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)];

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<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`,
@@ -66,13 +67,19 @@ 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);
         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
@@ -137,7 +144,7 @@ const DiskUsage: React.FC<{}> = () => {
             <DUPieChart
               loading={loading}
               limit={Number.parseInt(limit.value)}
-              path={duResponse.path}
+              path={duResponse.path ?? '/'}
               subPathCount={duResponse.subPathCount}
               subPaths={duResponse.subPaths}
               sizeWithReplica={duResponse.sizeWithReplica}

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

@@ -51,7 +51,7 @@ export const routesV2 = [
     component: Pipelines
   },
   {
-    path: '/DiskUsage',
+    path: '/NamespaceUsage',
     component: DiskUsage
   },
   {