HDDS-13542. Separate out the API calls for Overview page

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.less

@@ -169,4 +169,10 @@ body {
 .data-container {
   padding: 24px;
   height: 80vh;
+}
+
+#error-icon {
+  font-size: 24px;
+  width: 100%;
+  color: #5A656D;
 }

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorCard.tsx

@@ -0,0 +1,52 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+import React from 'react';
+import { DisconnectOutlined } from "@ant-design/icons"
+import { Card } from 'antd';
+
+type ErrorCardProps = {
+  title: string;
+  compact?: boolean;
+};
+
+// ------------- Styles -------------- //
+const cardHeadStyle: React.CSSProperties = { fontSize: '14px' };
+const compactCardBodyStyle: React.CSSProperties = {
+  padding: '24px',
+  justifyContent: 'space-between'
+}
+const cardBodyStyle: React.CSSProperties = {
+  padding: '80px'
+}
+
+const ErrorCard: React.FC<ErrorCardProps> = ({ title, compact }) => {
+  return (
+    <Card
+      size='small'
+      title={title}
+      headStyle={cardHeadStyle}
+      bodyStyle={(compact) ? compactCardBodyStyle : cardBodyStyle}
+      data-testid={`error-${title}`}>
+      <DisconnectOutlined id="error-icon" />
+    </Card>
+  )
+};
+
+export default ErrorCard;

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSimpleCard.tsx

@@ -31,6 +31,7 @@ import {
   QuestionCircleOutlined
 } from '@ant-design/icons';
 import { numberWithCommas } from '@/utils/common';
+import ErrorCard from '@/v2/components/errors/errorCard';
 
 
 // ------------- Types -------------- //
@@ -40,11 +41,12 @@ type IconOptions = {
 
 type OverviewCardProps = {
   icon: string;
-  data: number | React.ReactElement;
+  data: number;
   title: string;
   hoverable?: boolean;
   loading?: boolean;
   linkToUrl?: string;
+  error?: string | null;
 }
 
 // ------------- Styles -------------- //
@@ -109,9 +111,14 @@ const OverviewSimpleCard: React.FC<OverviewCardProps> = ({
   title = '',
   hoverable = false,
   loading = false,
-  linkToUrl = ''
+  linkToUrl = '',
+  error
 }) => {
 
+  if (error) {
+    return <ErrorCard title={title} compact={true}/>
+  }
+
   const titleElement = (linkToUrl)
     ? (
       <div className='card-title-div'>
@@ -122,7 +129,7 @@ const OverviewSimpleCard: React.FC<OverviewCardProps> = ({
           View More
         </Link>
       </div>)
-    : title
+    : title;
 
   return (
     <Card
@@ -144,6 +151,6 @@ const OverviewSimpleCard: React.FC<OverviewCardProps> = ({
       </Row>
     </Card>
   );
-}
+};
 
-export default OverviewSimpleCard;
+export default OverviewSimpleCard;

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewStorageCard.tsx

@@ -24,11 +24,14 @@ import EChart from '@/v2/components/eChart/eChart';
 import OverviewCardWrapper from '@/v2/components/overviewCard/overviewCardWrapper';
 
 import { StorageReport } from '@/v2/types/overview.types';
+import ErrorMessage from '@/v2/components/errors/errorCard';
+import ErrorCard from '@/v2/components/errors/errorCard';
 
 // ------------- Types -------------- //
 type OverviewStorageCardProps = {
   loading?: boolean;
   storageReport: StorageReport;
+  error?: string | null;
 }
 
 const size = filesize.partial({ round: 1 });
@@ -73,9 +76,14 @@ const OverviewStorageCard: React.FC<OverviewStorageCardProps> = ({
     used: 0,
     remaining: 0,
     committed: 0
-  }
+  },
+  error
 }) => {
 
+  if (error) {
+    return <ErrorCard title='Cluster Capacity' />
+  }
+
   const {
     ozoneUsedPercentage,
     nonOzoneUsedPercentage,

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSummaryCard.tsx

@@ -21,6 +21,8 @@ import { Card, Row, Table } from 'antd';
 
 import { ColumnType } from 'antd/es/table';
 import { Link } from 'react-router-dom';
+import ErrorMessage from '@/v2/components/errors/errorCard';
+import ErrorCard from '@/v2/components/errors/errorCard';
 
 // ------------- Types -------------- //
 type TableData = {
@@ -40,6 +42,7 @@ type OverviewTableCardProps = {
   linkToUrl?: string;
   showHeader?: boolean;
   state?: Record<string, any>;
+  error?: string | null;
 }
 
 // ------------- Styles -------------- //
@@ -65,8 +68,14 @@ const OverviewSummaryCard: React.FC<OverviewTableCardProps> = ({
   tableData = [],
   linkToUrl = '',
   showHeader = false,
-  state
+  state,
+  error
 }) => {
+
+  if (error) {
+    return <ErrorCard title={title} />;
+  }
+
   const titleElement = (linkToUrl)
     ? (
       <div className='card-title-div'>

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/containerMismatchTable.tsx

@@ -39,7 +39,7 @@ import Search from '@/v2/components/search/search';
 import SingleSelect, { Option } from '@/v2/components/select/singleSelect';
 import { showDataFetchError } from '@/utils/common';
 import { AxiosGetHelper } from '@/utils/axiosRequestHelper';
-import { useDebounce } from '@/v2/hooks/debounce.hook';
+import { useDebounce } from '@/v2/hooks/useDebounce';
 import { LIMIT_OPTIONS } from '@/v2/constants/limit.constants';
 
 import {

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/deletePendingDirsTable.tsx

@@ -29,7 +29,7 @@ import SingleSelect, { Option } from '@/v2/components/select/singleSelect';
 import { AxiosGetHelper } from '@/utils/axiosRequestHelper';
 import { byteToSize, showDataFetchError } from '@/utils/common';
 import { getFormattedTime } from '@/v2/utils/momentUtils';
-import { useDebounce } from '@/v2/hooks/debounce.hook';
+import { useDebounce } from '@/v2/hooks/useDebounce';
 import { LIMIT_OPTIONS } from '@/v2/constants/limit.constants';
 
 import { DeletedDirInfo } from '@/v2/types/insights.types';

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/deletePendingKeysTable.tsx

@@ -29,7 +29,7 @@ import SingleSelect, { Option } from '@/v2/components/select/singleSelect';
 import ExpandedPendingKeysTable from '@/v2/components/tables/insights/expandedPendingKeysTable';
 import { AxiosGetHelper } from '@/utils/axiosRequestHelper';
 import { byteToSize, showDataFetchError } from '@/utils/common';
-import { useDebounce } from '@/v2/hooks/debounce.hook';
+import { useDebounce } from '@/v2/hooks/useDebounce';
 import { LIMIT_OPTIONS } from '@/v2/constants/limit.constants';
 
 import {

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/deletedContainerKeysTable.tsx

@@ -28,7 +28,7 @@ import Search from '@/v2/components/search/search';
 import SingleSelect, { Option } from '@/v2/components/select/singleSelect';
 import { AxiosGetHelper } from '@/utils/axiosRequestHelper';
 import { showDataFetchError } from '@/utils/common';
-import { useDebounce } from '@/v2/hooks/debounce.hook';
+import { useDebounce } from '@/v2/hooks/useDebounce';
 import { LIMIT_OPTIONS } from '@/v2/constants/limit.constants';
 
 import {

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/openKeysTable.tsx

@@ -36,7 +36,7 @@ import SingleSelect, { Option } from '@/v2/components/select/singleSelect';
 import { AxiosGetHelper } from '@/utils/axiosRequestHelper';
 import { byteToSize, showDataFetchError } from '@/utils/common';
 import { getFormattedTime } from '@/v2/utils/momentUtils';
-import { useDebounce } from '@/v2/hooks/debounce.hook';
+import { useDebounce } from '@/v2/hooks/useDebounce';
 import { LIMIT_OPTIONS } from '@/v2/constants/limit.constants';
 
 import { OpenKeys, OpenKeysResponse } from '@/v2/types/insights.types';

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

@@ -0,0 +1,50 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+import { ClusterStateResponse, KeysSummary, TaskStatus } from "@/v2/types/overview.types";
+
+export const DEFAULT_CLUSTER_STATE: ClusterStateResponse = {
+  missingContainers: 0,
+  totalDatanodes: 0,
+  healthyDatanodes: 0,
+  pipelines: 0,
+  storageReport: { capacity: 0, used: 0, remaining: 0, committed: 0 },
+  containers: 0,
+  volumes: 0,
+  buckets: 0,
+  keys: 0,
+  openContainers: 0,
+  deletedContainers: 0,
+  keysPendingDeletion: 0,
+  scmServiceId: 'N/A',
+  omServiceId: 'N/A'
+};
+
+export const DEFAULT_TASK_STATUS: TaskStatus[] = [];
+
+export const DEFAULT_OPEN_KEYS_SUMMARY: KeysSummary & {totalOpenKeys: number} = {
+  totalUnreplicatedDataSize: 0,
+  totalReplicatedDataSize: 0,
+  totalOpenKeys: 0
+};
+
+export const DEFAULT_DELETE_PENDING_KEYS_SUMMARY: KeysSummary & {totalDeletedKeys: number} = {
+  totalUnreplicatedDataSize: 0,
+  totalReplicatedDataSize: 0,
+  totalDeletedKeys: 0
+};