From 2095cc4dec96a66a50821d56444eeb77717b1972 Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Tue, 26 Aug 2025 16:02:34 +0530
Subject: [PATCH 1/7] HDDS-13542. Add individual API calls for cards

---
 .../recon/ozone-recon-web/src/app.less        |  17 +
 .../autoReloadPanel/autoReloadPanelHooks.tsx  | 120 ++++++
 .../src/utils/autoReloadHelper.tsx            |   4 +
 .../errorBoundary.tsx                         |   0
 .../src/v2/components/errors/errorMessage.tsx |  32 ++
 .../overviewCard/overviewSimpleCard.tsx       |   9 +-
 .../overviewCard/overviewStorageCard.tsx      |  20 +-
 .../overviewCard/overviewSummaryCard.tsx      |  21 +-
 .../insights/containerMismatchTable.tsx       |   2 +-
 .../insights/deletePendingDirsTable.tsx       |   2 +-
 .../insights/deletePendingKeysTable.tsx       |   2 +-
 .../insights/deletedContainerKeysTable.tsx    |   2 +-
 .../tables/insights/openKeysTable.tsx         |   2 +-
 .../src/v2/hooks/useAPIData.hook.ts           | 156 ++++++++
 .../src/v2/hooks/useAutoReload.hook.tsx       |  78 ++++
 .../src/v2/hooks/useAutoReloadPanel.hook.tsx  |  55 +++
 .../src/v2/hooks/useAutoReloadState.hook.tsx  |  42 ++
 .../{debounce.hook.tsx => useDebounce.tsx}    |   0
 .../src/v2/pages/buckets/buckets.tsx          |   2 +-
 .../src/v2/pages/containers/containers.tsx    |   2 +-
 .../src/v2/pages/datanodes/datanodes.tsx      |   2 +-
 .../pages/overview/components/SummaryCard.tsx |  78 ++++
 .../src/v2/pages/overview/overview.tsx        | 369 ++++++------------
 .../src/v2/pages/pipelines/pipelines.tsx      |   2 +-
 .../src/v2/pages/volumes/volumes.tsx          |   2 +-
 .../src/v2/types/overview.types.ts            |  37 +-
 26 files changed, 777 insertions(+), 281 deletions(-)
 create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/autoReloadPanel/autoReloadPanelHooks.tsx
 rename hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/{errorBoundary => errors}/errorBoundary.tsx (100%)
 create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorMessage.tsx
 create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts
 create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReload.hook.tsx
 create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadPanel.hook.tsx
 create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadState.hook.tsx
 rename hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/{debounce.hook.tsx => useDebounce.tsx} (100%)
 create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/components/SummaryCard.tsx

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.less b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.less
index 44f53fa9d47d..073949e476a4 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.less
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.less
@@ -169,4 +169,21 @@ body {
 .data-container {
   padding: 24px;
   height: 80vh;
+}
+
+.error-msg {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  color: #6d6d6d;
+  margin: 40px auto;
+
+  #error-icon {
+    font-size: 42px;
+    padding-bottom: 12px;
+  }
+
+  #error-txt {
+    font-size: 18px;
+  }
 }
\ No newline at end of file
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/autoReloadPanel/autoReloadPanelHooks.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/autoReloadPanel/autoReloadPanelHooks.tsx
new file mode 100644
index 000000000000..86b9121799f1
--- /dev/null
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/autoReloadPanel/autoReloadPanelHooks.tsx
@@ -0,0 +1,120 @@
+/*
+ * 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 moment from 'moment';
+import { Tooltip, Button, Switch } from 'antd';
+import { PlayCircleOutlined, ReloadOutlined } from '@ant-design/icons';
+import { useLocation } from 'react-router-dom';
+
+import { useAutoReloadState } from '@/v2/hooks/useAutoReloadState.hook';
+import './autoReloadPanel.less';
+
+interface IAutoReloadPanelProps {
+  onReload: () => void;
+  lastRefreshed: number;
+  lastUpdatedOMDBDelta: number;
+  lastUpdatedOMDBFull: number;
+  isLoading: boolean;
+  omStatus: string;
+  togglePolling: (isEnabled: boolean) => void;
+  omSyncLoad: () => void;
+}
+
+const AutoReloadPanel: React.FC<IAutoReloadPanelProps> = ({
+  onReload,
+  lastRefreshed,
+  lastUpdatedOMDBDelta,
+  lastUpdatedOMDBFull,
+  isLoading,
+  omSyncLoad,
+  omStatus,
+  togglePolling
+}) => {
+  const { autoReloadEnabled, updateAutoReloadState } = useAutoReloadState();
+  const location = useLocation();
+
+  const autoReloadToggleHandler = (checked: boolean) => {
+    updateAutoReloadState(checked);
+    togglePolling(checked);
+  };
+
+  const lastRefreshedText = lastRefreshed === 0 || lastRefreshed === undefined ? 'NA' :
+    (
+      <Tooltip
+        placement='bottom' title={moment(lastRefreshed).format('ll LTS')}
+      >
+        {moment(lastRefreshed).format('LT')}
+      </Tooltip>
+    );
+
+  const omSyncStatusDisplay = omStatus === '' ? '' : omStatus ? <div>OM DB update is successfully triggered.</div> : <div>OM DB update is already running.</div>;
+
+  const omDBDeltaFullToolTip = <span>
+    {omSyncStatusDisplay}
+    {'Delta Update'}: {moment(lastUpdatedOMDBDelta).fromNow()}, {moment(lastUpdatedOMDBDelta).format('LT')}
+    <br />
+    {'Full Update'}: {moment(lastUpdatedOMDBFull).fromNow()}, {moment(lastUpdatedOMDBFull).format('LT')}
+  </span>
+
+  const lastUpdatedOMLatest = lastUpdatedOMDBDelta > lastUpdatedOMDBFull ? lastUpdatedOMDBDelta : lastUpdatedOMDBFull;
+
+  const lastUpdatedDeltaFullToolTip = lastUpdatedOMDBDelta === 0 || lastUpdatedOMDBDelta === undefined || lastUpdatedOMDBFull === 0 || lastUpdatedOMDBFull === undefined ? 'NA' :
+    (
+      <Tooltip
+        placement='bottom' title={omDBDeltaFullToolTip}
+      >
+        {moment(lastUpdatedOMLatest).format('LT')}
+      </Tooltip>
+    );
+
+  const lastUpdatedDeltaFullText = lastUpdatedOMDBDelta === 0 || lastUpdatedOMDBDelta === undefined || lastUpdatedOMDBFull === 0 || lastUpdatedOMDBFull === undefined ? '' :
+    //omSyncLoad should be clickable at all times. If the response from the dbsync is false it will show DB update is already running else show triggered sync
+    (
+      <>
+        &nbsp; | DB Synced at {lastUpdatedDeltaFullToolTip}
+        &nbsp;<Button shape='circle' icon={<PlayCircleOutlined />} size='small' loading={isLoading} onClick={omSyncLoad} />
+      </>
+    );
+
+  return (
+    <div className='auto-reload-panel' data-testid='autoreload-panel'>
+      Auto Refresh
+      &nbsp;
+      <Switch
+        checked={autoReloadEnabled}
+        size='small'
+        className='toggle-switch'
+        onChange={autoReloadToggleHandler}
+        data-testid='autoreload-panel-switch' />
+      &nbsp; | Refreshed at {lastRefreshedText}
+      &nbsp;
+      <Button
+        shape='circle'
+        icon={<ReloadOutlined />}
+        size='small'
+        loading={isLoading}
+        onClick={onReload}
+        data-testid='autoreload-panel-refresh' />
+      {lastUpdatedDeltaFullText}
+    </div>
+  );
+};
+
+export default AutoReloadPanel;
+
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/autoReloadHelper.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/autoReloadHelper.tsx
index 5a81efde37b6..d212e4ac8742 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/autoReloadHelper.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/autoReloadHelper.tsx
@@ -42,6 +42,10 @@ class AutoReloadHelper {
     }
   };
 
+  isPolling = () => {
+    return this.interval > 0;
+  }
+
   handleAutoReloadToggle = (checked: boolean) => {
     sessionStorage.setItem('autoReloadEnabled', JSON.stringify(checked));
     if (checked) {
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errorBoundary/errorBoundary.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorBoundary.tsx
similarity index 100%
rename from hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errorBoundary/errorBoundary.tsx
rename to hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorBoundary.tsx
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorMessage.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorMessage.tsx
new file mode 100644
index 000000000000..17514794b16f
--- /dev/null
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorMessage.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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 { CloudServerOutlined } from "@ant-design/icons"
+
+const ErrorMessage: React.FC<object> = () => {
+  return (
+    <div className="error-msg">
+      <CloudServerOutlined id="error-icon" />
+      <span id="error-txt">Something went wrong, please refer to the logs for more details</span>    
+    </div>
+  )
+};
+
+export default ErrorMessage;
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSimpleCard.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSimpleCard.tsx
index 2269ad9663a4..bba33eb8e7f9 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSimpleCard.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSimpleCard.tsx
@@ -20,6 +20,7 @@ import React from 'react';
 import { Card, Col, Row } from 'antd';
 import { Link } from 'react-router-dom';
 import {
+  CloseCircleOutlined,
   ClusterOutlined,
   ContainerOutlined,
   DatabaseOutlined,
@@ -40,7 +41,7 @@ type IconOptions = {
 
 type OverviewCardProps = {
   icon: string;
-  data: number | React.ReactElement;
+  data: number;
   title: string;
   hoverable?: boolean;
   loading?: boolean;
@@ -122,7 +123,7 @@ const OverviewSimpleCard: React.FC<OverviewCardProps> = ({
           View More
         </Link>
       </div>)
-    : title
+    : title;
 
   return (
     <Card
@@ -144,6 +145,6 @@ const OverviewSimpleCard: React.FC<OverviewCardProps> = ({
       </Row>
     </Card>
   );
-}
+};
 
-export default OverviewSimpleCard;
\ No newline at end of file
+export default OverviewSimpleCard;
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 2272f2ca01d9..81c0e0bfa71f 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
@@ -24,11 +24,13 @@ 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/errorMessage';
 
 // ------------- Types -------------- //
 type OverviewStorageCardProps = {
   loading?: boolean;
   storageReport: StorageReport;
+  error?: string | null;
 }
 
 const size = filesize.partial({ round: 1 });
@@ -73,9 +75,25 @@ const OverviewStorageCard: React.FC<OverviewStorageCardProps> = ({
     used: 0,
     remaining: 0,
     committed: 0
-  }
+  },
+  error
 }) => {
 
+  if (error) {
+    return (
+      <Card
+        size='small'
+        className={'overview-card'}
+        loading={loading}
+        hoverable={false}
+        title='Cluster Capacity'
+        headStyle={cardHeadStyle}
+        bodyStyle={cardBodyStyle}>
+          <ErrorMessage />
+      </Card>
+    )
+  }
+
   const {
     ozoneUsedPercentage,
     nonOzoneUsedPercentage,
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSummaryCard.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSummaryCard.tsx
index 8736b3e0d290..76962ce9d21b 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSummaryCard.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSummaryCard.tsx
@@ -21,6 +21,7 @@ import { Card, Row, Table } from 'antd';
 
 import { ColumnType } from 'antd/es/table';
 import { Link } from 'react-router-dom';
+import ErrorMessage from '@/v2/components/errors/errorMessage';
 
 // ------------- Types -------------- //
 type TableData = {
@@ -40,6 +41,7 @@ type OverviewTableCardProps = {
   linkToUrl?: string;
   showHeader?: boolean;
   state?: Record<string, any>;
+  error?: string | null;
 }
 
 // ------------- Styles -------------- //
@@ -65,8 +67,25 @@ const OverviewSummaryCard: React.FC<OverviewTableCardProps> = ({
   tableData = [],
   linkToUrl = '',
   showHeader = false,
-  state
+  state,
+  error
 }) => {
+
+  if (error) {
+    return (
+      <Card 
+        size='small'
+        className={'overview-card'}
+        hoverable={hoverable}
+        title={title}
+        headStyle={cardHeadStyle}
+        bodyStyle={cardBodyStyle}
+        style={cardStyle}>
+          <ErrorMessage />
+      </Card>
+    );
+  }
+
   const titleElement = (linkToUrl)
     ? (
       <div className='card-title-div'>
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/containerMismatchTable.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/containerMismatchTable.tsx
index 818eca37f8ef..565acde6db70 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/containerMismatchTable.tsx
+++ b/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 {
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/deletePendingDirsTable.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/deletePendingDirsTable.tsx
index f0c6fc8161e4..190754b93886 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/deletePendingDirsTable.tsx
+++ b/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';
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/deletePendingKeysTable.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/deletePendingKeysTable.tsx
index 65ada4956411..81ed9020c2be 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/deletePendingKeysTable.tsx
+++ b/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 {
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/deletedContainerKeysTable.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/deletedContainerKeysTable.tsx
index 9aaf62a63d6f..9f665857b886 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/deletedContainerKeysTable.tsx
+++ b/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 {
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/openKeysTable.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/openKeysTable.tsx
index 02c73c77528d..38c57f4cef23 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/insights/openKeysTable.tsx
+++ b/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';
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts
new file mode 100644
index 000000000000..d4a3dd5ef321
--- /dev/null
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts
@@ -0,0 +1,156 @@
+import { useState, useEffect, useRef } from 'react';
+import { AxiosGetHelper } from '@/utils/axiosRequestHelper';
+
+export interface ApiState<T> {
+  data: T;
+  loading: boolean;
+  error: string | null;
+  lastUpdated: number | null;
+}
+
+export interface UseApiDataOptions {
+  retryAttempts?: number;
+  retryDelay?: number;
+  initialFetch?: boolean;
+}
+
+export function useApiData<T>(
+  url: string,
+  defaultValue: T,
+  options: UseApiDataOptions = {}
+): ApiState<T> & {
+  refetch: () => void;
+  clearError: () => void;
+} {
+  const {
+    retryAttempts = 3,
+    retryDelay = 1000,
+    initialFetch = true
+  } = options;
+
+  const [state, setState] = useState<ApiState<T>>({
+    data: defaultValue,
+    loading: initialFetch,
+    error: null,
+    lastUpdated: null
+  });
+
+  const controllerRef = useRef<AbortController>();
+  const retryCountRef = useRef(0);
+  const retryTimeoutRef = useRef<NodeJS.Timeout>();
+  
+  // Store stable references
+  const urlRef = useRef(url);
+  const retryAttemptsRef = useRef(retryAttempts);
+  const retryDelayRef = useRef(retryDelay);
+
+  // Update refs when props change
+  useEffect(() => {
+    urlRef.current = url;
+  }, [url]);
+
+  useEffect(() => {
+    retryAttemptsRef.current = retryAttempts;
+  }, [retryAttempts]);
+
+  useEffect(() => {
+    retryDelayRef.current = retryDelay;
+  }, [retryDelay]);
+
+  const fetchData = async (isRetry = false) => {
+    if (!isRetry) {
+      setState(prev => ({ ...prev, loading: true, error: null }));
+      retryCountRef.current = 0;
+    }
+
+    try {
+      const { request, controller } = AxiosGetHelper(
+        urlRef.current,
+        controllerRef.current,
+        'Request cancelled due to component unmount or new request'
+      );
+      controllerRef.current = controller;
+
+      const response = await request;
+      
+      setState({
+        data: response.data,
+        loading: false,
+        error: null,
+        lastUpdated: Date.now()
+      });
+
+      retryCountRef.current = 0;
+    } catch (error: any) {
+      if (error.name === 'CanceledError') {
+        return;
+      }
+
+      const errorMessage = error.response?.data?.message || 
+                          error.message || 
+                          'An unexpected error occurred';
+
+      // Clear any existing retry timeout
+      if (retryTimeoutRef.current) {
+        clearTimeout(retryTimeoutRef.current);
+      }
+
+      // Retry logic for network errors and 5xx errors
+      if (retryCountRef.current < retryAttemptsRef.current && 
+          (!error.response?.status || error.response?.status >= 500)) {
+        retryCountRef.current++;
+        retryTimeoutRef.current = setTimeout(() => {
+          fetchData(true);
+        }, retryDelayRef.current * retryCountRef.current);
+        return;
+      }
+
+      setState({
+        data: defaultValue,
+        loading: false,
+        error: errorMessage,
+        lastUpdated: Date.now()
+      });
+    }
+  };
+
+  const refetch = () => {
+    fetchData();
+  };
+
+  const clearError = () => {
+    setState(prev => ({ ...prev, error: null }));
+  };
+
+  // Initial fetch only
+  useEffect(() => {
+    if (initialFetch) {
+      fetchData();
+    }
+
+    // Cleanup retry timeout on unmount
+    return () => {
+      if (retryTimeoutRef.current) {
+        clearTimeout(retryTimeoutRef.current);
+      }
+    };
+  }, []); // Empty dependency array
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (controllerRef.current) {
+        controllerRef.current.abort('Component unmounted');
+      }
+      if (retryTimeoutRef.current) {
+        clearTimeout(retryTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    ...state,
+    refetch,
+    clearError
+  };
+}
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReload.hook.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReload.hook.tsx
new file mode 100644
index 000000000000..a84d6c68bb1f
--- /dev/null
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReload.hook.tsx
@@ -0,0 +1,78 @@
+/*
+ * 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 { useEffect, useRef, useState } from 'react';
+import { AUTO_RELOAD_INTERVAL_DEFAULT } from '@/constants/autoReload.constants';
+
+export function useAutoReload(
+  refreshFunction: () => void,
+  interval: number = AUTO_RELOAD_INTERVAL_DEFAULT
+) {
+  const intervalRef = useRef<number>(0);
+  const [isPolling, setIsPolling] = useState<boolean>(false);
+  const refreshFunctionRef = useRef(refreshFunction);
+
+  // Update the ref when the function changes
+  refreshFunctionRef.current = refreshFunction;
+
+  const stopPolling = () => {
+    if (intervalRef.current > 0) {
+      clearTimeout(intervalRef.current);
+      intervalRef.current = 0;
+      setIsPolling(false);
+    }
+  };
+
+  const startPolling = () => {
+    stopPolling();
+    const poll = () => {
+      refreshFunctionRef.current();
+      intervalRef.current = window.setTimeout(poll, interval);
+    };
+    poll();
+    setIsPolling(true);
+  };
+
+  const handleAutoReloadToggle = (checked: boolean) => {
+    sessionStorage.setItem('autoReloadEnabled', JSON.stringify(checked));
+    if (checked) {
+      startPolling();
+    } else {
+      stopPolling();
+    }
+  };
+
+  // Initialize polling on mount if auto-reload is enabled
+  useEffect(() => {
+    const autoReloadEnabled = sessionStorage.getItem('autoReloadEnabled') !== 'false';
+    if (autoReloadEnabled) {
+      startPolling();
+    }
+
+    return () => {
+      stopPolling();
+    };
+  }, []); // Empty dependency array
+
+  return {
+    startPolling,
+    stopPolling,
+    isPolling,
+    handleAutoReloadToggle
+  };
+}
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadPanel.hook.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadPanel.hook.tsx
new file mode 100644
index 000000000000..3c07d5f2555c
--- /dev/null
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadPanel.hook.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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 { useCallback } from 'react';
+import { useAutoReload } from './useAutoReload.hook';
+import { useAutoReloadState } from './useAutoReloadState.hook';
+
+export function useAutoReloadPanel(refreshFunction: () => void, interval?: number) {
+  const { startPolling, stopPolling, isPolling, handleAutoReloadToggle } = useAutoReload(refreshFunction, interval);
+  const { autoReloadEnabled, updateAutoReloadState } = useAutoReloadState();
+
+  const togglePolling = useCallback((isEnabled: boolean) => {
+    updateAutoReloadState(isEnabled);
+    if (isEnabled) {
+      startPolling();
+    } else {
+      stopPolling();
+    }
+  }, [startPolling, stopPolling, updateAutoReloadState]);
+
+  const manualRefresh = useCallback(() => {
+    refreshFunction();
+  }, [refreshFunction]);
+
+  return {
+    // Auto-reload state
+    autoReloadEnabled,
+    isPolling,
+    
+    // Control functions
+    togglePolling,
+    manualRefresh,
+    startPolling,
+    stopPolling,
+    
+    // For backward compatibility
+    handleAutoReloadToggle
+  };
+}
+
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadState.hook.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadState.hook.tsx
new file mode 100644
index 000000000000..0e4e705d87b2
--- /dev/null
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadState.hook.tsx
@@ -0,0 +1,42 @@
+/*
+ * 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 { useState, useEffect } from 'react';
+
+export function useAutoReloadState() {
+  const [autoReloadEnabled, setAutoReloadEnabled] = useState<boolean>(true);
+
+  useEffect(() => {
+    // Initialize from session storage
+    const stored = sessionStorage.getItem('autoReloadEnabled');
+    if (stored !== null) {
+      setAutoReloadEnabled(JSON.parse(stored));
+    }
+  }, []);
+
+  const updateAutoReloadState = (enabled: boolean) => {
+    setAutoReloadEnabled(enabled);
+    sessionStorage.setItem('autoReloadEnabled', JSON.stringify(enabled));
+  };
+
+  return {
+    autoReloadEnabled,
+    updateAutoReloadState
+  };
+}
+
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/debounce.hook.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useDebounce.tsx
similarity index 100%
rename from hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/debounce.hook.tsx
rename to hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useDebounce.tsx
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/buckets/buckets.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/buckets/buckets.tsx
index 1c039f42709b..7d2c77de3c38 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/buckets/buckets.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/buckets/buckets.tsx
@@ -32,7 +32,7 @@ import { AutoReloadHelper } from '@/utils/autoReloadHelper';
 import { AxiosGetHelper, cancelRequests } from "@/utils/axiosRequestHelper";
 import { showDataFetchError } from '@/utils/common';
 import { LIMIT_OPTIONS } from '@/v2/constants/limit.constants';
-import { useDebounce } from '@/v2/hooks/debounce.hook';
+import { useDebounce } from '@/v2/hooks/useDebounce';
 
 import {
   Bucket,
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/containers/containers.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/containers/containers.tsx
index 5cdbdd52625a..3a784bb9932c 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/containers/containers.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/containers/containers.tsx
@@ -29,7 +29,7 @@ import AutoReloadPanel from "@/components/autoReloadPanel/autoReloadPanel";
 import { showDataFetchError } from "@/utils/common";
 import { AutoReloadHelper } from "@/utils/autoReloadHelper";
 import { AxiosGetHelper, cancelRequests } from "@/utils/axiosRequestHelper";
-import { useDebounce } from "@/v2/hooks/debounce.hook";
+import { useDebounce } from "@/v2/hooks/useDebounce";
 
 import {
   Container,
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx
index 33dd661d97ba..7c044b2ae1e6 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx
@@ -45,7 +45,7 @@ import {
   cancelRequests
 } from '@/utils/axiosRequestHelper';
 
-import { useDebounce } from '@/v2/hooks/debounce.hook';
+import { useDebounce } from '@/v2/hooks/useDebounce';
 import {
   Datanode,
   DatanodeDecomissionInfo,
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/components/SummaryCard.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/components/SummaryCard.tsx
new file mode 100644
index 000000000000..6d2673cd8a1e
--- /dev/null
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/components/SummaryCard.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import OverviewSimpleCard from '@/v2/components/overviewCard/overviewSimpleCard';
+import { Col } from 'antd';
+import ErrorMessage from '@/v2/components/errors/errorMessage';
+
+type SummaryCardProps = {
+  loading: boolean;
+  error: string | null;
+  volumes: number;
+  buckets: number;
+  keys: number;
+  pipelines: number;
+  deletedContainers: number;
+}
+
+const SummaryCard: React.FC<SummaryCardProps> = ({
+  loading,
+  error,
+  volumes,
+  buckets,
+  keys,
+  pipelines,
+  deletedContainers
+}) => {
+
+  if (error) {
+    return (
+      <Col flex="1 0" className="summary-error-msg">
+        <ErrorMessage />
+      </Col>
+    )
+  }
+
+  return (
+    <>
+      <Col flex="1 0 20%">
+        <OverviewSimpleCard
+          title='Volumes'
+          icon='inbox'
+          loading={loading}
+          data={volumes}
+          linkToUrl='/Volumes' />
+      </Col>
+      <Col flex="1 0 20%">
+        <OverviewSimpleCard
+          title='Buckets'
+          icon='folder-open'
+          loading={loading}
+          data={buckets}
+          linkToUrl='/Buckets' />
+      </Col>
+      <Col flex="1 0 20%">
+        <OverviewSimpleCard
+          title='Keys'
+          icon='file-text'
+          loading={loading}
+          data={keys} />
+      </Col>
+      <Col flex="1 0 20%">
+        <OverviewSimpleCard
+          title='Pipelines'
+          icon='deployment-unit'
+          loading={loading}
+          data={pipelines}
+          linkToUrl='/Pipelines' />
+      </Col>
+      <Col flex="1 0 20%">
+        <OverviewSimpleCard
+          title='Deleted Containers'
+          icon='delete'
+          loading={loading}
+          data={deletedContainers} />
+      </Col>
+    </>
+  )
+}
+
+export default SummaryCard;
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx
index 6014577f90a2..c9df4f02a8ed 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx
@@ -16,31 +16,56 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
-import moment from 'moment';
-import filesize from 'filesize';
-import axios from 'axios';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { Row, Col, Button } from 'antd';
-import {
-  CheckCircleFilled,
-  WarningFilled
-} from '@ant-design/icons';
 import { Link } from 'react-router-dom';
+import moment from 'moment';
 
-import AutoReloadPanel from '@/components/autoReloadPanel/autoReloadPanel';
+import OverviewSimpleCard from '@/v2/components/overviewCard/overviewSimpleCard';
 import OverviewSummaryCard from '@/v2/components/overviewCard/overviewSummaryCard';
 import OverviewStorageCard from '@/v2/components/overviewCard/overviewStorageCard';
-import OverviewSimpleCard from '@/v2/components/overviewCard/overviewSimpleCard';
-
-import { AutoReloadHelper } from '@/utils/autoReloadHelper';
-import { checkResponseError, showDataFetchError } from '@/utils/common';
-import { AxiosGetHelper, cancelRequests, PromiseAllSettledGetHelper } from '@/utils/axiosRequestHelper';
-
-import { ClusterStateResponse, OverviewState, StorageReport } from '@/v2/types/overview.types';
-
+import { AxiosGetHelper } from '@/utils/axiosRequestHelper';
+import { showDataFetchError } from '@/utils/common';
+import { cancelRequests } from '@/utils/axiosRequestHelper';
+import { useApiData } from '@/v2/hooks/useAPIData.hook';
+import { useAutoReload } from '@/v2/hooks/useAutoReload.hook';
+import AutoReloadPanel from '@/components/autoReloadPanel/autoReloadPanel';
+import { ClusterStateResponse, KeysSummary, OverviewState, TaskStatus } from '@/v2/types/overview.types';
 import './overview.less';
+import filesize from 'filesize';
+import { CheckCircleFilled, WarningFilled } from '@ant-design/icons';
+import SummaryCard from '@/v2/pages/overview/components/SummaryCard';
+
+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'
+};
 
+const DEFAULT_TASK_STATUS: TaskStatus[] = [];
+const DEFAULT_OPEN_KEYS_SUMMARY: KeysSummary & {totalOpenKeys: number} = {
+  totalUnreplicatedDataSize: 0,
+  totalReplicatedDataSize: 0,
+  totalOpenKeys: 0
+};
+const DEFAULT_DELETE_PENDING_KEYS_SUMMARY: KeysSummary & {totalDeletedKeys: number} = {
+  totalUnreplicatedDataSize: 0,
+  totalReplicatedDataSize: 0,
+  totalDeletedKeys: 0
+};
 
+// ------------- Helper Functions -------------- //
 const size = filesize.partial({ round: 1 });
 
 const getHealthIcon = (value: string): React.ReactElement => {
@@ -82,165 +107,54 @@ const getSummaryTableValue = (
   return size(value as number)
 }
 
+// ------------- Main Component -------------- //
 const Overview: React.FC<{}> = () => {
-
-  const cancelOverviewSignal = useRef<AbortController>();
   const cancelOMDBSyncSignal = useRef<AbortController>();
-
   const [state, setState] = useState<OverviewState>({
-    loading: false,
-    datanodes: '',
-    pipelines: 0,
-    containers: 0,
-    volumes: 0,
-    buckets: 0,
-    keys: 0,
-    missingContainersCount: 0,
-    lastRefreshed: 0,
-    lastUpdatedOMDBDelta: 0,
-    lastUpdatedOMDBFull: 0,
     omStatus: '',
-    openContainers: 0,
-    deletedContainers: 0,
-    openSummarytotalUnrepSize: 0,
-    openSummarytotalRepSize: 0,
-    openSummarytotalOpenKeys: 0,
-    deletePendingSummarytotalUnrepSize: 0,
-    deletePendingSummarytotalRepSize: 0,
-    deletePendingSummarytotalDeletedKeys: 0,
-    scmServiceId: '',
-    omServiceId: ''
-  })
-  const [storageReport, setStorageReport] = useState<StorageReport>({
-    capacity: 0,
-    used: 0,
-    remaining: 0,
-    committed: 0
-  })
-
-  // Component mounted, fetch initial data
-  useEffect(() => {
-    loadOverviewPageData();
-    autoReloadHelper.startPolling();
-    return (() => {
-      // Component will Un-mount
-      autoReloadHelper.stopPolling();
-      cancelRequests([
-        cancelOMDBSyncSignal.current!,
-        cancelOverviewSignal.current!
-      ]);
-    })
-  }, [])
-
-  const loadOverviewPageData = () => {
-    setState({
-      ...state,
-      loading: true
-    });
-
-    // Cancel any previous pending requests
-    cancelRequests([
-      cancelOMDBSyncSignal.current!,
-      cancelOverviewSignal.current!
-    ]);
-
-    const { requests, controller } = PromiseAllSettledGetHelper([
-      '/api/v1/clusterState',
-      '/api/v1/task/status',
-      '/api/v1/keys/open/summary',
-      '/api/v1/keys/deletePending/summary'
-    ], cancelOverviewSignal.current);
-    cancelOverviewSignal.current = controller;
+    lastRefreshed: 0
+  });
 
-    requests.then(axios.spread((
-      clusterStateResponse: Awaited<Promise<any>>,
-      taskstatusResponse: Awaited<Promise<any>>,
-      openResponse: Awaited<Promise<any>>,
-      deletePendingResponse: Awaited<Promise<any>>
-    ) => {
+  // Individual API calls using custom hook (no auto-refresh)
+  const clusterState = useApiData<ClusterStateResponse>(
+    '/api/v1/clusterState',
+    DEFAULT_CLUSTER_STATE,
+    { retryAttempts: 3 }
+  );
 
-      checkResponseError([
-        clusterStateResponse,
-        taskstatusResponse,
-        openResponse,
-        deletePendingResponse
-      ]);
+  const taskStatus = useApiData<TaskStatus[]>(
+    '/api/v1/task/status',
+    DEFAULT_TASK_STATUS,
+    { retryAttempts: 2 }
+  );
 
-      const clusterState: ClusterStateResponse = clusterStateResponse.value?.data ?? {
-        missingContainers: 'N/A',
-        totalDatanodes: 'N/A',
-        healthyDatanodes: 'N/A',
-        pipelines: 'N/A',
-        storageReport: {
-          capacity: 0,
-          used: 0,
-          remaining: 0,
-          committed: 0
-        },
-        containers: 'N/A',
-        volumes: 'N/A',
-        buckets: 'N/A',
-        keys: 'N/A',
-        openContainers: 'N/A',
-        deletedContainers: 'N/A',
-        keysPendingDeletion: 'N/A',
-        scmServiceId: 'N/A',
-        omServiceId: 'N/A',
-      };
-      const taskStatus = taskstatusResponse.value?.data ?? [{
-        taskName: 'N/A',
-        lastUpdatedTimestamp: 0,
-        lastUpdatedSeqNumber: 0
-      }];
-      const missingContainersCount = clusterState.missingContainers;
-      const omDBDeltaObject = taskStatus && taskStatus.find((item: any) => item.taskName === 'OmDeltaRequest');
-      const omDBFullObject = taskStatus && taskStatus.find((item: any) => item.taskName === 'OmSnapshotRequest');
+  const openKeysSummary = useApiData<KeysSummary & { totalOpenKeys: number}>(
+    '/api/v1/keys/open/summary',
+    DEFAULT_OPEN_KEYS_SUMMARY,
+    { retryAttempts: 2 }
+  );
 
-      setState({
-        ...state,
-        loading: false,
-        datanodes: `${clusterState.healthyDatanodes}/${clusterState.totalDatanodes}`,
-        pipelines: clusterState.pipelines,
-        containers: clusterState.containers,
-        volumes: clusterState.volumes,
-        buckets: clusterState.buckets,
-        keys: clusterState.keys,
-        missingContainersCount: missingContainersCount,
-        openContainers: clusterState.openContainers,
-        deletedContainers: clusterState.deletedContainers,
-        lastRefreshed: Number(moment()),
-        lastUpdatedOMDBDelta: omDBDeltaObject?.lastUpdatedTimestamp,
-        lastUpdatedOMDBFull: omDBFullObject?.lastUpdatedTimestamp,
-        openSummarytotalUnrepSize: openResponse?.value?.data?.totalUnreplicatedDataSize,
-        openSummarytotalRepSize: openResponse?.value?.data?.totalReplicatedDataSize,
-        openSummarytotalOpenKeys: openResponse?.value?.data?.totalOpenKeys,
-        deletePendingSummarytotalUnrepSize: deletePendingResponse?.value?.data?.totalUnreplicatedDataSize,
-        deletePendingSummarytotalRepSize: deletePendingResponse?.value?.data?.totalReplicatedDataSize,
-        deletePendingSummarytotalDeletedKeys: deletePendingResponse?.value?.data?.totalDeletedKeys,
-        scmServiceId: clusterState?.scmServiceId ?? 'N/A',
-        omServiceId: clusterState?.omServiceId ?? 'N/A'
-      });
-      setStorageReport({
-        ...storageReport,
-        ...clusterState.storageReport
-      });
-    })).catch((error: Error) => {
-      setState({
-        ...state,
-        loading: false
-      });
-      showDataFetchError(error.toString());
-    });
-  }
+  const deletePendingKeysSummary = useApiData<KeysSummary & { totalDeletedKeys: number}>(
+    '/api/v1/keys/deletePending/summary',
+    DEFAULT_DELETE_PENDING_KEYS_SUMMARY,
+    { retryAttempts: 2 }
+  );
 
-  let autoReloadHelper: AutoReloadHelper = new AutoReloadHelper(loadOverviewPageData);
+  const omDBDeltaObject = taskStatus.data?.find((item: TaskStatus) => item.taskName === 'OmDeltaRequest');
+  const omDBFullObject = taskStatus.data?.find((item: TaskStatus) => item.taskName === 'OmSnapshotRequest');
 
-  const syncOmData = () => {
-    setState({
-      ...state,
-      loading: true
-    });
+  const loadOverviewPageData = useCallback(() => {
+    clusterState.refetch();
+    taskStatus.refetch();
+    openKeysSummary.refetch();
+    deletePendingKeysSummary.refetch();
+    setState(prev => ({ ...prev, lastRefreshed: Number(moment()) }));
+  }, []);
+  
+  const autoReload = useAutoReload(loadOverviewPageData);
 
+  // OM DB Sync function
+  const syncOmData = useCallback(() => {
     const { request, controller } = AxiosGetHelper(
       '/api/v1/triggerdbsync/om',
       cancelOMDBSyncSignal.current,
@@ -250,56 +164,39 @@ const Overview: React.FC<{}> = () => {
 
     request.then(omStatusResponse => {
       const omStatus = omStatusResponse.data;
-      setState({
-        ...state,
-        loading: false,
-        omStatus: omStatus
-      });
+      setState(prev => ({ ...prev, omStatus }));
     }).catch((error: Error) => {
-      setState({
-        ...state,
-        loading: false
-      });
       showDataFetchError(error.toString());
     });
-  };
+  }, []);
 
-  const {
-    loading, datanodes, pipelines,
-    containers, volumes, buckets,
-    openSummarytotalUnrepSize,
-    openSummarytotalRepSize,
-    openSummarytotalOpenKeys,
-    deletePendingSummarytotalUnrepSize,
-    deletePendingSummarytotalRepSize,
-    deletePendingSummarytotalDeletedKeys,
-    keys, missingContainersCount,
-    lastRefreshed, lastUpdatedOMDBDelta,
-    lastUpdatedOMDBFull,
-    omStatus, openContainers,
-    deletedContainers, scmServiceId, omServiceId
-  } = state;
+  useEffect(() => {
+    autoReload.startPolling();
+    
+    return () => {
+      autoReload.stopPolling();
+      cancelRequests([cancelOMDBSyncSignal.current!]);
+    };
+  }, []);
 
   const healthCardIndicators = (
     <>
       <Col span={14}>
         Datanodes
-        {getHealthIcon(datanodes)}
+        {getHealthIcon(`${clusterState.data?.healthyDatanodes}/${clusterState.data?.totalDatanodes}`)}
       </Col>
       <Col span={10}>
         Containers
-        {getHealthIcon(`${(containers - missingContainersCount)}/${containers}`)}
+        {getHealthIcon(`${(clusterState.data?.containers || 0) - (clusterState.data?.missingContainers || 0)}/${clusterState.data?.containers}`)}
       </Col>
     </>
-  )
+  );
 
   const datanodesLink = (
-    <Button
-      type='link'
-      size='small'>
+    <Button type='link' size='small'>
       <Link to='/Datanodes'> View More </Link>
     </Button>
-  )
+  );
 
   const containersLink = (
     <Button
@@ -309,13 +206,34 @@ const Overview: React.FC<{}> = () => {
     </Button>
   )
 
+  const loading = clusterState.loading || taskStatus.loading || openKeysSummary.loading || deletePendingKeysSummary.loading;
+  const {
+    healthyDatanodes,
+    totalDatanodes,
+    containers,
+    missingContainers,
+    storageReport,
+    omServiceId,
+    scmServiceId
+  } = clusterState.data;
+  const {
+    totalReplicatedDataSize: openSummarytotalRepSize,
+    totalUnreplicatedDataSize: openSummarytotalUnrepSize,
+    totalOpenKeys: openSummarytotalOpenKeys,
+  } = openKeysSummary.data ?? {};
+  const {
+    totalReplicatedDataSize: deletePendingSummarytotalRepSize,  
+    totalUnreplicatedDataSize: deletePendingSummarytotalUnrepSize,
+    totalDeletedKeys: deletePendingSummarytotalDeletedKeys
+  } = deletePendingKeysSummary.data ?? {};
+
   return (
     <>
       <div className='page-header-v2'>
         Overview
-        <AutoReloadPanel isLoading={loading} lastRefreshed={lastRefreshed}
-          lastUpdatedOMDBDelta={lastUpdatedOMDBDelta} lastUpdatedOMDBFull={lastUpdatedOMDBFull}
-          togglePolling={autoReloadHelper.handleAutoReloadToggle} onReload={loadOverviewPageData} omSyncLoad={syncOmData} omStatus={omStatus} />
+        <AutoReloadPanel isLoading={loading} lastRefreshed={state.lastRefreshed}
+          lastUpdatedOMDBDelta={omDBDeltaObject?.lastUpdatedTimestamp} lastUpdatedOMDBFull={omDBFullObject?.lastUpdatedTimestamp}
+          togglePolling={autoReload.handleAutoReloadToggle} onReload={loadOverviewPageData} omSyncLoad={syncOmData} omStatus={state.omStatus} />
       </div>
       <div className='data-container'>
         <Row
@@ -356,20 +274,21 @@ const Overview: React.FC<{}> = () => {
                 {
                   key: 'datanodes',
                   name: 'Datanodes',
-                  value: datanodes,
+                  value: `${healthyDatanodes}/${totalDatanodes}`,
                   action: datanodesLink
                 },
                 {
                   key: 'containers',
                   name: 'Containers',
-                  value: `${(containers - missingContainersCount)}/${containers}`,
+                  value: `${containers - missingContainers}/${containers}`,
                   action: containersLink
                 }
               ]}
+              error={clusterState.error}
             />
           </Col>
           <Col xs={24} sm={24} md={24} lg={14} xl={14}>
-            <OverviewStorageCard storageReport={storageReport} loading={loading} />
+            <OverviewStorageCard storageReport={storageReport} loading={loading} error={clusterState.error}/>
           </Col>
         </Row>
         <Row gutter={[
@@ -380,44 +299,10 @@ const Overview: React.FC<{}> = () => {
             lg: 16,
             xl: 16
           }, 20]}>
-          <Col flex="1 0 20%">
-            <OverviewSimpleCard
-              title='Volumes'
-              icon='inbox'
-              loading={loading}
-              data={volumes}
-              linkToUrl='/Volumes' />
-          </Col>
-          <Col flex="1 0 20%">
-            <OverviewSimpleCard
-              title='Buckets'
-              icon='folder-open'
-              loading={loading}
-              data={buckets}
-              linkToUrl='/Buckets' />
-          </Col>
-          <Col flex="1 0 20%">
-            <OverviewSimpleCard
-              title='Keys'
-              icon='file-text'
-              loading={loading}
-              data={keys} />
-          </Col>
-          <Col flex="1 0 20%">
-            <OverviewSimpleCard
-              title='Pipelines'
-              icon='deployment-unit'
-              loading={loading}
-              data={pipelines}
-              linkToUrl='/Pipelines' />
-          </Col>
-          <Col flex="1 0 20%">
-            <OverviewSimpleCard
-              title='Deleted Containers'
-              icon='delete'
-              loading={loading}
-              data={deletedContainers} />
-          </Col>
+          <SummaryCard
+            loading={loading}
+            error={clusterState.error}
+            {...clusterState.data} />
         </Row>
         <Row gutter={[
           {
@@ -522,4 +407,4 @@ const Overview: React.FC<{}> = () => {
   );
 }
 
-export default Overview;
\ No newline at end of file
+export default Overview;
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/pipelines/pipelines.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/pipelines/pipelines.tsx
index f6ff87c7e132..19a3c9447a6d 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/pipelines/pipelines.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/pipelines/pipelines.tsx
@@ -31,7 +31,7 @@ import PipelinesTable, { COLUMNS } from '@/v2/components/tables/pipelinesTable';
 import { showDataFetchError } from '@/utils/common';
 import { AutoReloadHelper } from '@/utils/autoReloadHelper';
 import { AxiosGetHelper, cancelRequests } from '@/utils/axiosRequestHelper';
-import { useDebounce } from '@/v2/hooks/debounce.hook';
+import { useDebounce } from '@/v2/hooks/useDebounce';
 
 import {
   Pipeline,
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx
index b4614d387f3a..a10b71282cea 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx
@@ -31,7 +31,7 @@ import { showDataFetchError } from '@/utils/common';
 import { AutoReloadHelper } from '@/utils/autoReloadHelper';
 import { AxiosGetHelper, cancelRequests } from "@/utils/axiosRequestHelper";
 import { LIMIT_OPTIONS } from '@/v2/constants/limit.constants';
-import { useDebounce } from '@/v2/hooks/debounce.hook';
+import { useDebounce } from '@/v2/hooks/useDebounce';
 
 import {
   Volume,
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.types.ts b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.types.ts
index f8390fd43468..8fdeda63a7f7 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.types.ts
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.types.ts
@@ -33,29 +33,15 @@ export type ClusterStateResponse = {
   omServiceId: string;
 }
 
-export type OverviewState = {
-  loading: boolean;
-  datanodes: string;
-  pipelines: number;
-  containers: number;
-  volumes: number;
-  buckets: number;
-  keys: number;
-  missingContainersCount: number;
-  lastRefreshed: number;
-  lastUpdatedOMDBDelta: number;
-  lastUpdatedOMDBFull: number;
-  omStatus: string;
-  openContainers: number;
-  deletedContainers: number;
-  openSummarytotalUnrepSize: number;
-  openSummarytotalRepSize: number;
-  openSummarytotalOpenKeys: number;
-  deletePendingSummarytotalUnrepSize: number;
-  deletePendingSummarytotalRepSize: number;
-  deletePendingSummarytotalDeletedKeys: number;
-  scmServiceId: string;
-  omServiceId: string;
+export type TaskStatus = {
+  taskName: string;
+  lastUpdatedTimestamp: number;
+  lastUpdatedSeqNumber: number;
+}
+
+export type KeysSummary = {
+  totalUnreplicatedDataSize: number;
+  totalReplicatedDataSize: number;
 }
 
 export type StorageReport = {
@@ -64,3 +50,8 @@ export type StorageReport = {
   remaining: number;
   committed: number;
 }
+
+export type OverviewState = {
+  omStatus: string;
+  lastRefreshed: number;
+}
\ No newline at end of file

From 7f222b52d4041e646e8f465477394f496b5bb079 Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Wed, 3 Sep 2025 21:17:28 +0530
Subject: [PATCH 2/7] Fix individual card loading

---
 .../recon/ozone-recon-web/src/app.less        | 19 ++---
 .../{errorMessage.tsx => errorCard.tsx}       | 34 +++++++--
 .../overviewCard/overviewSimpleCard.tsx       | 10 ++-
 .../overviewCard/overviewStorageCard.tsx      | 16 +----
 .../overviewCard/overviewSummaryCard.tsx      | 16 +----
 .../src/v2/hooks/useAPIData.hook.ts           | 16 ++++-
 .../pages/overview/components/SummaryCard.tsx | 41 +----------
 .../src/v2/pages/overview/overview.tsx        | 72 +++++++++++++++----
 8 files changed, 120 insertions(+), 104 deletions(-)
 rename hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/{errorMessage.tsx => errorCard.tsx} (52%)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.less b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.less
index 073949e476a4..6819ff701e6f 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.less
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.less
@@ -171,19 +171,8 @@ body {
   height: 80vh;
 }
 
-.error-msg {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  color: #6d6d6d;
-  margin: 40px auto;
-
-  #error-icon {
-    font-size: 42px;
-    padding-bottom: 12px;
-  }
-
-  #error-txt {
-    font-size: 18px;
-  }
+#error-icon {
+  font-size: 24px;
+  width: 100%;
+  color: #5A656D;
 }
\ No newline at end of file
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorMessage.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorCard.tsx
similarity index 52%
rename from hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorMessage.tsx
rename to hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorCard.tsx
index 17514794b16f..45f52dd6a8df 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorMessage.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorCard.tsx
@@ -18,15 +18,35 @@
 
 
 import React from 'react';
-import { CloudServerOutlined } from "@ant-design/icons"
+import { DisconnectOutlined } from "@ant-design/icons"
+import { Card } from 'antd';
 
-const ErrorMessage: React.FC<object> = () => {
+type ErrorCardProps = {
+  title: string;
+  compact?: boolean;
+};
+
+// ------------- Styles -------------- //
+const cardHeadStyle: React.CSSProperties = { fontSize: '14px' };
+const compactCardBodyStyle: React.CSSProperties = {
+  padding: '24px',
+  justifyTracks: 'space-between'
+}
+const cardBodyStyle: React.CSSProperties = {
+  padding: '80px'
+}
+
+const ErrorCard: React.FC<ErrorCardProps> = ({ title, compact }) => {
   return (
-    <div className="error-msg">
-      <CloudServerOutlined id="error-icon" />
-      <span id="error-txt">Something went wrong, please refer to the logs for more details</span>    
-    </div>
+    <Card
+      size='small'
+      title={title}
+      headStyle={cardHeadStyle}
+      bodyStyle={(compact) ? compactCardBodyStyle : cardBodyStyle}
+      data-testid={`error-${title}`}>
+      <DisconnectOutlined id="error-icon" />
+    </Card>
   )
 };
 
-export default ErrorMessage;
+export default ErrorCard;
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSimpleCard.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSimpleCard.tsx
index bba33eb8e7f9..5971934381e9 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSimpleCard.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSimpleCard.tsx
@@ -20,7 +20,6 @@ import React from 'react';
 import { Card, Col, Row } from 'antd';
 import { Link } from 'react-router-dom';
 import {
-  CloseCircleOutlined,
   ClusterOutlined,
   ContainerOutlined,
   DatabaseOutlined,
@@ -32,6 +31,7 @@ import {
   QuestionCircleOutlined
 } from '@ant-design/icons';
 import { numberWithCommas } from '@/utils/common';
+import ErrorCard from '@/v2/components/errors/errorCard';
 
 
 // ------------- Types -------------- //
@@ -46,6 +46,7 @@ type OverviewCardProps = {
   hoverable?: boolean;
   loading?: boolean;
   linkToUrl?: string;
+  error?: string | null;
 }
 
 // ------------- Styles -------------- //
@@ -110,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'>
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 81c0e0bfa71f..ce9287b3db8d 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
@@ -24,7 +24,8 @@ 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/errorMessage';
+import ErrorMessage from '@/v2/components/errors/errorCard';
+import ErrorCard from '@/v2/components/errors/errorCard';
 
 // ------------- Types -------------- //
 type OverviewStorageCardProps = {
@@ -80,18 +81,7 @@ const OverviewStorageCard: React.FC<OverviewStorageCardProps> = ({
 }) => {
 
   if (error) {
-    return (
-      <Card
-        size='small'
-        className={'overview-card'}
-        loading={loading}
-        hoverable={false}
-        title='Cluster Capacity'
-        headStyle={cardHeadStyle}
-        bodyStyle={cardBodyStyle}>
-          <ErrorMessage />
-      </Card>
-    )
+    return <ErrorCard title='Cluster Capacity' />
   }
 
   const {
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSummaryCard.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSummaryCard.tsx
index 76962ce9d21b..9214c456b6c7 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSummaryCard.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSummaryCard.tsx
@@ -21,7 +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/errorMessage';
+import ErrorMessage from '@/v2/components/errors/errorCard';
+import ErrorCard from '@/v2/components/errors/errorCard';
 
 // ------------- Types -------------- //
 type TableData = {
@@ -72,18 +73,7 @@ const OverviewSummaryCard: React.FC<OverviewTableCardProps> = ({
 }) => {
 
   if (error) {
-    return (
-      <Card 
-        size='small'
-        className={'overview-card'}
-        hoverable={hoverable}
-        title={title}
-        headStyle={cardHeadStyle}
-        bodyStyle={cardBodyStyle}
-        style={cardStyle}>
-          <ErrorMessage />
-      </Card>
-    );
+    return <ErrorCard title={title} />;
   }
 
   const titleElement = (linkToUrl)
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts
index d4a3dd5ef321..d1781026c271 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts
@@ -12,7 +12,8 @@ export interface UseApiDataOptions {
   retryAttempts?: number;
   retryDelay?: number;
   initialFetch?: boolean;
-}
+  onError?: (error: string) => void;
+};
 
 export function useApiData<T>(
   url: string,
@@ -25,7 +26,8 @@ export function useApiData<T>(
   const {
     retryAttempts = 3,
     retryDelay = 1000,
-    initialFetch = true
+    initialFetch = true,
+    onError
   } = options;
 
   const [state, setState] = useState<ApiState<T>>({
@@ -43,6 +45,7 @@ export function useApiData<T>(
   const urlRef = useRef(url);
   const retryAttemptsRef = useRef(retryAttempts);
   const retryDelayRef = useRef(retryDelay);
+  const onErrorRef = useRef(onError);
 
   // Update refs when props change
   useEffect(() => {
@@ -57,6 +60,11 @@ export function useApiData<T>(
     retryDelayRef.current = retryDelay;
   }, [retryDelay]);
 
+  useEffect(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+
+
   const fetchData = async (isRetry = false) => {
     if (!isRetry) {
       setState(prev => ({ ...prev, loading: true, error: null }));
@@ -105,6 +113,10 @@ export function useApiData<T>(
         return;
       }
 
+      if (onErrorRef.current) {
+        onErrorRef.current(errorMessage);
+      }
+
       setState({
         data: defaultValue,
         loading: false,
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/components/SummaryCard.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/components/SummaryCard.tsx
index 6d2673cd8a1e..f19861ed1bcf 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/components/SummaryCard.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/components/SummaryCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import OverviewSimpleCard from '@/v2/components/overviewCard/overviewSimpleCard';
 import { Col } from 'antd';
-import ErrorMessage from '@/v2/components/errors/errorMessage';
+import ErrorMessage from '@/v2/components/errors/errorCard';
 
 type SummaryCardProps = {
   loading: boolean;
@@ -33,44 +33,7 @@ const SummaryCard: React.FC<SummaryCardProps> = ({
 
   return (
     <>
-      <Col flex="1 0 20%">
-        <OverviewSimpleCard
-          title='Volumes'
-          icon='inbox'
-          loading={loading}
-          data={volumes}
-          linkToUrl='/Volumes' />
-      </Col>
-      <Col flex="1 0 20%">
-        <OverviewSimpleCard
-          title='Buckets'
-          icon='folder-open'
-          loading={loading}
-          data={buckets}
-          linkToUrl='/Buckets' />
-      </Col>
-      <Col flex="1 0 20%">
-        <OverviewSimpleCard
-          title='Keys'
-          icon='file-text'
-          loading={loading}
-          data={keys} />
-      </Col>
-      <Col flex="1 0 20%">
-        <OverviewSimpleCard
-          title='Pipelines'
-          icon='deployment-unit'
-          loading={loading}
-          data={pipelines}
-          linkToUrl='/Pipelines' />
-      </Col>
-      <Col flex="1 0 20%">
-        <OverviewSimpleCard
-          title='Deleted Containers'
-          icon='delete'
-          loading={loading}
-          data={deletedContainers} />
-      </Col>
+      
     </>
   )
 }
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx
index c9df4f02a8ed..7530ac017f96 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx
@@ -34,7 +34,6 @@ import { ClusterStateResponse, KeysSummary, OverviewState, TaskStatus } from '@/
 import './overview.less';
 import filesize from 'filesize';
 import { CheckCircleFilled, WarningFilled } from '@ant-design/icons';
-import SummaryCard from '@/v2/pages/overview/components/SummaryCard';
 
 const DEFAULT_CLUSTER_STATE: ClusterStateResponse = {
   missingContainers: 0,
@@ -119,25 +118,25 @@ const Overview: React.FC<{}> = () => {
   const clusterState = useApiData<ClusterStateResponse>(
     '/api/v1/clusterState',
     DEFAULT_CLUSTER_STATE,
-    { retryAttempts: 3 }
+    { retryAttempts: 2, onError: (error) => showDataFetchError(error) }
   );
 
   const taskStatus = useApiData<TaskStatus[]>(
     '/api/v1/task/status',
     DEFAULT_TASK_STATUS,
-    { retryAttempts: 2 }
+    { retryAttempts: 2, onError: (error) => showDataFetchError(error) }
   );
 
   const openKeysSummary = useApiData<KeysSummary & { totalOpenKeys: number}>(
     '/api/v1/keys/open/summary',
     DEFAULT_OPEN_KEYS_SUMMARY,
-    { retryAttempts: 2 }
+    { retryAttempts: 2, onError: (error) => showDataFetchError(error) }
   );
 
   const deletePendingKeysSummary = useApiData<KeysSummary & { totalDeletedKeys: number}>(
     '/api/v1/keys/deletePending/summary',
     DEFAULT_DELETE_PENDING_KEYS_SUMMARY,
-    { retryAttempts: 2 }
+    { retryAttempts: 2, onError: (error) => showDataFetchError(error) }
   );
 
   const omDBDeltaObject = taskStatus.data?.find((item: TaskStatus) => item.taskName === 'OmDeltaRequest');
@@ -213,6 +212,11 @@ const Overview: React.FC<{}> = () => {
     containers,
     missingContainers,
     storageReport,
+    volumes,
+    buckets,
+    keys,
+    pipelines,
+    deletedContainers,
     omServiceId,
     scmServiceId
   } = clusterState.data;
@@ -251,6 +255,7 @@ const Overview: React.FC<{}> = () => {
               title='Health'
               data={healthCardIndicators}
               showHeader={true}
+              loading={clusterState.loading}
               columns={[
                 {
                   title: '',
@@ -299,10 +304,49 @@ const Overview: React.FC<{}> = () => {
             lg: 16,
             xl: 16
           }, 20]}>
-          <SummaryCard
-            loading={loading}
-            error={clusterState.error}
-            {...clusterState.data} />
+          <Col flex="1 0 20%">
+            <OverviewSimpleCard
+              title='Volumes'
+              icon='inbox'
+              loading={clusterState.loading}
+              data={volumes}
+              linkToUrl='/Volumes'
+              error={clusterState.error} />
+          </Col>
+          <Col flex="1 0 20%">
+            <OverviewSimpleCard
+              title='Buckets'
+              icon='folder-open'
+              loading={clusterState.loading}
+              data={buckets}
+              linkToUrl='/Buckets'
+              error={clusterState.error} />
+          </Col>
+          <Col flex="1 0 20%">
+            <OverviewSimpleCard
+              title='Keys'
+              icon='file-text'
+              loading={clusterState.loading}
+              data={keys}
+              error={clusterState.error} />
+          </Col>
+          <Col flex="1 0 20%">
+            <OverviewSimpleCard
+              title='Pipelines'
+              icon='deployment-unit'
+              loading={clusterState.loading}
+              data={pipelines}
+              linkToUrl='/Pipelines'
+              error={clusterState.error} />
+          </Col>
+          <Col flex="1 0 20%">
+            <OverviewSimpleCard
+              title='Deleted Containers'
+              icon='delete'
+              loading={clusterState.loading}
+              data={deletedContainers}
+              error={clusterState.error} />
+          </Col>
         </Row>
         <Row gutter={[
           {
@@ -315,7 +359,7 @@ const Overview: React.FC<{}> = () => {
           <Col xs={24} sm={24} md={24} lg={12} xl={12}>
             <OverviewSummaryCard
               title='Open Keys Summary'
-              loading={loading}
+              loading={openKeysSummary.loading}
               columns={[
                 {
                   title: 'Name',
@@ -350,12 +394,13 @@ const Overview: React.FC<{}> = () => {
                 }
               ]}
               linkToUrl='/Om'
-              state={{activeTab: '2'}} />
+              state={{activeTab: '2'}}
+              error={openKeysSummary.error} />
           </Col>
           <Col xs={24} sm={24} md={24} lg={12} xl={12}>
             <OverviewSummaryCard
               title='Delete Pending Keys Summary'
-              loading={loading}
+              loading={deletePendingKeysSummary.loading}
               columns={[
                 {
                   title: 'Name',
@@ -390,7 +435,8 @@ const Overview: React.FC<{}> = () => {
                 }
               ]}
               linkToUrl='/Om'
-              state={{activeTab: '3'}} />
+              state={{activeTab: '3'}}
+              error={deletePendingKeysSummary.error} />
           </Col>
         </Row>
         <span style={{ paddingLeft: '8px' }}>

From 7a9a7a4ef200a0aa6e785c7dce2cc5a6c3f29b1f Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Mon, 15 Sep 2025 11:07:50 +0530
Subject: [PATCH 3/7] Fix repetitive API call behaviour

---
 .../src/v2/pages/overview/overview.tsx        | 37 +++++++++++++------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx
index 7530ac017f96..45d8b8df555a 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Row, Col, Button } from 'antd';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
@@ -118,42 +118,58 @@ const Overview: React.FC<{}> = () => {
   const clusterState = useApiData<ClusterStateResponse>(
     '/api/v1/clusterState',
     DEFAULT_CLUSTER_STATE,
-    { retryAttempts: 2, onError: (error) => showDataFetchError(error) }
+    {
+      retryAttempts: 2,
+      initialFetch: false,
+      onError: (error) => showDataFetchError(error)
+    }
   );
 
   const taskStatus = useApiData<TaskStatus[]>(
     '/api/v1/task/status',
     DEFAULT_TASK_STATUS,
-    { retryAttempts: 2, onError: (error) => showDataFetchError(error) }
+    {
+      retryAttempts: 2,
+      initialFetch: false,
+      onError: (error) => showDataFetchError(error)
+    }
   );
 
   const openKeysSummary = useApiData<KeysSummary & { totalOpenKeys: number}>(
     '/api/v1/keys/open/summary',
     DEFAULT_OPEN_KEYS_SUMMARY,
-    { retryAttempts: 2, onError: (error) => showDataFetchError(error) }
+    {
+      retryAttempts: 2,
+      initialFetch: false,
+      onError: (error) => showDataFetchError(error)
+    }
   );
 
   const deletePendingKeysSummary = useApiData<KeysSummary & { totalDeletedKeys: number}>(
     '/api/v1/keys/deletePending/summary',
     DEFAULT_DELETE_PENDING_KEYS_SUMMARY,
-    { retryAttempts: 2, onError: (error) => showDataFetchError(error) }
+    {
+      retryAttempts: 2,
+      initialFetch: false,
+      onError: (error) => showDataFetchError(error)
+    }
   );
 
   const omDBDeltaObject = taskStatus.data?.find((item: TaskStatus) => item.taskName === 'OmDeltaRequest');
   const omDBFullObject = taskStatus.data?.find((item: TaskStatus) => item.taskName === 'OmSnapshotRequest');
 
-  const loadOverviewPageData = useCallback(() => {
+  const loadOverviewPageData = () => {
     clusterState.refetch();
     taskStatus.refetch();
     openKeysSummary.refetch();
     deletePendingKeysSummary.refetch();
     setState(prev => ({ ...prev, lastRefreshed: Number(moment()) }));
-  }, []);
+  };
   
   const autoReload = useAutoReload(loadOverviewPageData);
 
   // OM DB Sync function
-  const syncOmData = useCallback(() => {
+  const syncOmData = () => {
     const { request, controller } = AxiosGetHelper(
       '/api/v1/triggerdbsync/om',
       cancelOMDBSyncSignal.current,
@@ -167,13 +183,10 @@ const Overview: React.FC<{}> = () => {
     }).catch((error: Error) => {
       showDataFetchError(error.toString());
     });
-  }, []);
+  };
 
   useEffect(() => {
-    autoReload.startPolling();
-    
     return () => {
-      autoReload.stopPolling();
       cancelRequests([cancelOMDBSyncSignal.current!]);
     };
   }, []);

From fcd410d203be6430d22cf68385eccb792459da55 Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Mon, 15 Sep 2025 11:16:50 +0530
Subject: [PATCH 4/7] Remove unused hooks

---
 .../src/v2/hooks/useAutoReloadPanel.hook.tsx  | 55 -------------------
 .../src/v2/hooks/useAutoReloadState.hook.tsx  | 42 --------------
 2 files changed, 97 deletions(-)
 delete mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadPanel.hook.tsx
 delete mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadState.hook.tsx

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadPanel.hook.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadPanel.hook.tsx
deleted file mode 100644
index 3c07d5f2555c..000000000000
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadPanel.hook.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * 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 { useCallback } from 'react';
-import { useAutoReload } from './useAutoReload.hook';
-import { useAutoReloadState } from './useAutoReloadState.hook';
-
-export function useAutoReloadPanel(refreshFunction: () => void, interval?: number) {
-  const { startPolling, stopPolling, isPolling, handleAutoReloadToggle } = useAutoReload(refreshFunction, interval);
-  const { autoReloadEnabled, updateAutoReloadState } = useAutoReloadState();
-
-  const togglePolling = useCallback((isEnabled: boolean) => {
-    updateAutoReloadState(isEnabled);
-    if (isEnabled) {
-      startPolling();
-    } else {
-      stopPolling();
-    }
-  }, [startPolling, stopPolling, updateAutoReloadState]);
-
-  const manualRefresh = useCallback(() => {
-    refreshFunction();
-  }, [refreshFunction]);
-
-  return {
-    // Auto-reload state
-    autoReloadEnabled,
-    isPolling,
-    
-    // Control functions
-    togglePolling,
-    manualRefresh,
-    startPolling,
-    stopPolling,
-    
-    // For backward compatibility
-    handleAutoReloadToggle
-  };
-}
-
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadState.hook.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadState.hook.tsx
deleted file mode 100644
index 0e4e705d87b2..000000000000
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReloadState.hook.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * 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 { useState, useEffect } from 'react';
-
-export function useAutoReloadState() {
-  const [autoReloadEnabled, setAutoReloadEnabled] = useState<boolean>(true);
-
-  useEffect(() => {
-    // Initialize from session storage
-    const stored = sessionStorage.getItem('autoReloadEnabled');
-    if (stored !== null) {
-      setAutoReloadEnabled(JSON.parse(stored));
-    }
-  }, []);
-
-  const updateAutoReloadState = (enabled: boolean) => {
-    setAutoReloadEnabled(enabled);
-    sessionStorage.setItem('autoReloadEnabled', JSON.stringify(enabled));
-  };
-
-  return {
-    autoReloadEnabled,
-    updateAutoReloadState
-  };
-}
-

From 260e7c2135731f515081883b928a1578f5ae0e0f Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Mon, 15 Sep 2025 11:22:10 +0530
Subject: [PATCH 5/7] Remove more unused code

---
 .../autoReloadPanel/autoReloadPanelHooks.tsx  | 120 ------------------
 .../src/utils/autoReloadHelper.tsx            |   4 -
 2 files changed, 124 deletions(-)
 delete mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/autoReloadPanel/autoReloadPanelHooks.tsx

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/autoReloadPanel/autoReloadPanelHooks.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/autoReloadPanel/autoReloadPanelHooks.tsx
deleted file mode 100644
index 86b9121799f1..000000000000
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/autoReloadPanel/autoReloadPanelHooks.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/*
- * 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 moment from 'moment';
-import { Tooltip, Button, Switch } from 'antd';
-import { PlayCircleOutlined, ReloadOutlined } from '@ant-design/icons';
-import { useLocation } from 'react-router-dom';
-
-import { useAutoReloadState } from '@/v2/hooks/useAutoReloadState.hook';
-import './autoReloadPanel.less';
-
-interface IAutoReloadPanelProps {
-  onReload: () => void;
-  lastRefreshed: number;
-  lastUpdatedOMDBDelta: number;
-  lastUpdatedOMDBFull: number;
-  isLoading: boolean;
-  omStatus: string;
-  togglePolling: (isEnabled: boolean) => void;
-  omSyncLoad: () => void;
-}
-
-const AutoReloadPanel: React.FC<IAutoReloadPanelProps> = ({
-  onReload,
-  lastRefreshed,
-  lastUpdatedOMDBDelta,
-  lastUpdatedOMDBFull,
-  isLoading,
-  omSyncLoad,
-  omStatus,
-  togglePolling
-}) => {
-  const { autoReloadEnabled, updateAutoReloadState } = useAutoReloadState();
-  const location = useLocation();
-
-  const autoReloadToggleHandler = (checked: boolean) => {
-    updateAutoReloadState(checked);
-    togglePolling(checked);
-  };
-
-  const lastRefreshedText = lastRefreshed === 0 || lastRefreshed === undefined ? 'NA' :
-    (
-      <Tooltip
-        placement='bottom' title={moment(lastRefreshed).format('ll LTS')}
-      >
-        {moment(lastRefreshed).format('LT')}
-      </Tooltip>
-    );
-
-  const omSyncStatusDisplay = omStatus === '' ? '' : omStatus ? <div>OM DB update is successfully triggered.</div> : <div>OM DB update is already running.</div>;
-
-  const omDBDeltaFullToolTip = <span>
-    {omSyncStatusDisplay}
-    {'Delta Update'}: {moment(lastUpdatedOMDBDelta).fromNow()}, {moment(lastUpdatedOMDBDelta).format('LT')}
-    <br />
-    {'Full Update'}: {moment(lastUpdatedOMDBFull).fromNow()}, {moment(lastUpdatedOMDBFull).format('LT')}
-  </span>
-
-  const lastUpdatedOMLatest = lastUpdatedOMDBDelta > lastUpdatedOMDBFull ? lastUpdatedOMDBDelta : lastUpdatedOMDBFull;
-
-  const lastUpdatedDeltaFullToolTip = lastUpdatedOMDBDelta === 0 || lastUpdatedOMDBDelta === undefined || lastUpdatedOMDBFull === 0 || lastUpdatedOMDBFull === undefined ? 'NA' :
-    (
-      <Tooltip
-        placement='bottom' title={omDBDeltaFullToolTip}
-      >
-        {moment(lastUpdatedOMLatest).format('LT')}
-      </Tooltip>
-    );
-
-  const lastUpdatedDeltaFullText = lastUpdatedOMDBDelta === 0 || lastUpdatedOMDBDelta === undefined || lastUpdatedOMDBFull === 0 || lastUpdatedOMDBFull === undefined ? '' :
-    //omSyncLoad should be clickable at all times. If the response from the dbsync is false it will show DB update is already running else show triggered sync
-    (
-      <>
-        &nbsp; | DB Synced at {lastUpdatedDeltaFullToolTip}
-        &nbsp;<Button shape='circle' icon={<PlayCircleOutlined />} size='small' loading={isLoading} onClick={omSyncLoad} />
-      </>
-    );
-
-  return (
-    <div className='auto-reload-panel' data-testid='autoreload-panel'>
-      Auto Refresh
-      &nbsp;
-      <Switch
-        checked={autoReloadEnabled}
-        size='small'
-        className='toggle-switch'
-        onChange={autoReloadToggleHandler}
-        data-testid='autoreload-panel-switch' />
-      &nbsp; | Refreshed at {lastRefreshedText}
-      &nbsp;
-      <Button
-        shape='circle'
-        icon={<ReloadOutlined />}
-        size='small'
-        loading={isLoading}
-        onClick={onReload}
-        data-testid='autoreload-panel-refresh' />
-      {lastUpdatedDeltaFullText}
-    </div>
-  );
-};
-
-export default AutoReloadPanel;
-
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/autoReloadHelper.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/autoReloadHelper.tsx
index d212e4ac8742..5a81efde37b6 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/autoReloadHelper.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/autoReloadHelper.tsx
@@ -42,10 +42,6 @@ class AutoReloadHelper {
     }
   };
 
-  isPolling = () => {
-    return this.interval > 0;
-  }
-
   handleAutoReloadToggle = (checked: boolean) => {
     sessionStorage.setItem('autoReloadEnabled', JSON.stringify(checked));
     if (checked) {

From 87dad31bb3346ca54a350fc7784c769c79f9398b Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Mon, 15 Sep 2025 19:37:38 +0530
Subject: [PATCH 6/7] Address RAT check

---
 .../src/v2/hooks/useAPIData.hook.ts           | 18 ++++++++
 .../pages/overview/components/SummaryCard.tsx | 41 -------------------
 2 files changed, 18 insertions(+), 41 deletions(-)
 delete mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/components/SummaryCard.tsx

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts
index d1781026c271..55da998d5a89 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts
@@ -1,3 +1,21 @@
+/*
+ * 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 { useState, useEffect, useRef } from 'react';
 import { AxiosGetHelper } from '@/utils/axiosRequestHelper';
 
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/components/SummaryCard.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/components/SummaryCard.tsx
deleted file mode 100644
index f19861ed1bcf..000000000000
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/components/SummaryCard.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import OverviewSimpleCard from '@/v2/components/overviewCard/overviewSimpleCard';
-import { Col } from 'antd';
-import ErrorMessage from '@/v2/components/errors/errorCard';
-
-type SummaryCardProps = {
-  loading: boolean;
-  error: string | null;
-  volumes: number;
-  buckets: number;
-  keys: number;
-  pipelines: number;
-  deletedContainers: number;
-}
-
-const SummaryCard: React.FC<SummaryCardProps> = ({
-  loading,
-  error,
-  volumes,
-  buckets,
-  keys,
-  pipelines,
-  deletedContainers
-}) => {
-
-  if (error) {
-    return (
-      <Col flex="1 0" className="summary-error-msg">
-        <ErrorMessage />
-      </Col>
-    )
-  }
-
-  return (
-    <>
-      
-    </>
-  )
-}
-
-export default SummaryCard;

From 325aad2ba236f6841a1013bf2a753583af4f3262 Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Mon, 15 Sep 2025 22:05:21 +0530
Subject: [PATCH 7/7] Address review comments

---
 .../src/v2/components/errors/errorCard.tsx    |  2 +-
 .../src/v2/constants/overview.constants.tsx   | 50 +++++++++++++++++++
 .../src/v2/hooks/useAPIData.hook.ts           |  7 +--
 .../src/v2/hooks/useAutoReload.hook.tsx       | 13 ++++-
 .../src/v2/pages/overview/overview.tsx        | 45 ++++-------------
 .../src/v2/types/overview.types.ts            |  2 +-
 6 files changed, 77 insertions(+), 42 deletions(-)
 create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/constants/overview.constants.tsx

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorCard.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorCard.tsx
index 45f52dd6a8df..b904673a93d5 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorCard.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errors/errorCard.tsx
@@ -30,7 +30,7 @@ type ErrorCardProps = {
 const cardHeadStyle: React.CSSProperties = { fontSize: '14px' };
 const compactCardBodyStyle: React.CSSProperties = {
   padding: '24px',
-  justifyTracks: 'space-between'
+  justifyContent: 'space-between'
 }
 const cardBodyStyle: React.CSSProperties = {
   padding: '80px'
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/constants/overview.constants.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/constants/overview.constants.tsx
new file mode 100644
index 000000000000..0429580c8e0c
--- /dev/null
+++ b/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
+};
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts
index 55da998d5a89..dfcdec0cefae 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAPIData.hook.ts
@@ -112,9 +112,10 @@ export function useApiData<T>(
         return;
       }
 
-      const errorMessage = error.response?.data?.message || 
-                          error.message || 
-                          'An unexpected error occurred';
+      const errorMessage = error.response?.data?.message ||
+                          error.response?.statusText ||
+                          error.message ||
+                          `Request failed with status: ${error.response?.status || 'unknown'}`;
 
       // Clear any existing retry timeout
       if (retryTimeoutRef.current) {
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReload.hook.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReload.hook.tsx
index a84d6c68bb1f..baa8190bfc91 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReload.hook.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/useAutoReload.hook.tsx
@@ -26,6 +26,7 @@ export function useAutoReload(
   const intervalRef = useRef<number>(0);
   const [isPolling, setIsPolling] = useState<boolean>(false);
   const refreshFunctionRef = useRef(refreshFunction);
+  const lastPollCallRef = useRef<number>(0); // This is used to store the last time poll was called
 
   // Update the ref when the function changes
   refreshFunctionRef.current = refreshFunction;
@@ -41,7 +42,17 @@ export function useAutoReload(
   const startPolling = () => {
     stopPolling();
     const poll = () => {
-      refreshFunctionRef.current();
+      /**
+       * Prevent any extra polling calls within 100ms of the last call,
+       * This is done in case at any place multiple API calls are made, for example
+       * the useEffect on mount in this component will call the startPolling() function.
+       * If this startPolling() function is called elsewhere in a different component then
+       * race condition can occur where this gets called in succession multiple times.
+       */
+      if (Date.now() - lastPollCallRef.current > 100) {
+        refreshFunctionRef.current();
+        lastPollCallRef.current = Date.now();
+      }
       intervalRef.current = window.setTimeout(poll, interval);
     };
     poll();
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx
index 45d8b8df555a..70c774cd441d 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx
@@ -18,9 +18,12 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 import { Row, Col, Button } from 'antd';
+import { CheckCircleFilled, WarningFilled } from '@ant-design/icons';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
+import filesize from 'filesize';
 
+import AutoReloadPanel from '@/components/autoReloadPanel/autoReloadPanel';
 import OverviewSimpleCard from '@/v2/components/overviewCard/overviewSimpleCard';
 import OverviewSummaryCard from '@/v2/components/overviewCard/overviewSummaryCard';
 import OverviewStorageCard from '@/v2/components/overviewCard/overviewStorageCard';
@@ -29,40 +32,10 @@ import { showDataFetchError } from '@/utils/common';
 import { cancelRequests } from '@/utils/axiosRequestHelper';
 import { useApiData } from '@/v2/hooks/useAPIData.hook';
 import { useAutoReload } from '@/v2/hooks/useAutoReload.hook';
-import AutoReloadPanel from '@/components/autoReloadPanel/autoReloadPanel';
+import * as CONSTANTS from '@/v2/constants/overview.constants';
 import { ClusterStateResponse, KeysSummary, OverviewState, TaskStatus } from '@/v2/types/overview.types';
-import './overview.less';
-import filesize from 'filesize';
-import { CheckCircleFilled, WarningFilled } from '@ant-design/icons';
 
-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'
-};
-
-const DEFAULT_TASK_STATUS: TaskStatus[] = [];
-const DEFAULT_OPEN_KEYS_SUMMARY: KeysSummary & {totalOpenKeys: number} = {
-  totalUnreplicatedDataSize: 0,
-  totalReplicatedDataSize: 0,
-  totalOpenKeys: 0
-};
-const DEFAULT_DELETE_PENDING_KEYS_SUMMARY: KeysSummary & {totalDeletedKeys: number} = {
-  totalUnreplicatedDataSize: 0,
-  totalReplicatedDataSize: 0,
-  totalDeletedKeys: 0
-};
+import './overview.less';
 
 // ------------- Helper Functions -------------- //
 const size = filesize.partial({ round: 1 });
@@ -117,7 +90,7 @@ const Overview: React.FC<{}> = () => {
   // Individual API calls using custom hook (no auto-refresh)
   const clusterState = useApiData<ClusterStateResponse>(
     '/api/v1/clusterState',
-    DEFAULT_CLUSTER_STATE,
+    CONSTANTS.DEFAULT_CLUSTER_STATE,
     {
       retryAttempts: 2,
       initialFetch: false,
@@ -127,7 +100,7 @@ const Overview: React.FC<{}> = () => {
 
   const taskStatus = useApiData<TaskStatus[]>(
     '/api/v1/task/status',
-    DEFAULT_TASK_STATUS,
+    CONSTANTS.DEFAULT_TASK_STATUS,
     {
       retryAttempts: 2,
       initialFetch: false,
@@ -137,7 +110,7 @@ const Overview: React.FC<{}> = () => {
 
   const openKeysSummary = useApiData<KeysSummary & { totalOpenKeys: number}>(
     '/api/v1/keys/open/summary',
-    DEFAULT_OPEN_KEYS_SUMMARY,
+    CONSTANTS.DEFAULT_OPEN_KEYS_SUMMARY,
     {
       retryAttempts: 2,
       initialFetch: false,
@@ -147,7 +120,7 @@ const Overview: React.FC<{}> = () => {
 
   const deletePendingKeysSummary = useApiData<KeysSummary & { totalDeletedKeys: number}>(
     '/api/v1/keys/deletePending/summary',
-    DEFAULT_DELETE_PENDING_KEYS_SUMMARY,
+    CONSTANTS.DEFAULT_DELETE_PENDING_KEYS_SUMMARY,
     {
       retryAttempts: 2,
       initialFetch: false,
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.types.ts b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.types.ts
index 8fdeda63a7f7..ef3043f8955e 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.types.ts
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.types.ts
@@ -34,7 +34,7 @@ export type ClusterStateResponse = {
 }
 
 export type TaskStatus = {
-  taskName: string;
+  taskName: 'OmDeltaRequest' | 'OmSnapshotRequest' | string;
   lastUpdatedTimestamp: number;
   lastUpdatedSeqNumber: number;
 }