From 4b24aa9950ec5ee35bb160aef3febe62a55bf49d Mon Sep 17 00:00:00 2001
From: Abhishek Pal <43001336+devabhishekpal@users.noreply.github.com>
Date: Wed, 16 Oct 2024 15:08:41 +0530
Subject: [PATCH] HDDS-11545. [UI] Add OM and SCM ID information (#7287)

---
 .../webapps/recon/ozone-recon-web/src/app.less    |  5 +++++
 .../src/v2/pages/buckets/buckets.tsx              |  2 +-
 .../src/v2/pages/datanodes/datanodes.tsx          |  2 +-
 .../src/v2/pages/diskUsage/diskUsage.tsx          |  2 +-
 .../src/v2/pages/overview/overview.tsx            | 15 ++++++++++++---
 .../src/v2/pages/pipelines/pipelines.tsx          |  2 +-
 .../src/v2/pages/volumes/volumes.tsx              |  2 +-
 7 files changed, 22 insertions(+), 8 deletions(-)

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 1895cabc184..44f53fa9d47 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
@@ -164,4 +164,9 @@ body {
 
 .pointer {
   cursor: pointer;
+}
+
+.data-container {
+  padding: 24px;
+  height: 80vh;
 }
\ No newline at end of file
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 1590f36a4aa..add571cec0a 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
@@ -282,7 +282,7 @@ const Buckets: React.FC<{}> = () => {
           onReload={loadData}
         />
       </div>
-      <div style={{ padding: '24px' }}>
+      <div className='data-container'>
         <div className='content-div'>
           <div className='table-header-section'>
             <div className='table-filter-section'>
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 13022dc05e0..fe22d08dafd 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
@@ -234,7 +234,7 @@ const Datanodes: React.FC<{}> = () => {
           togglePolling={autoReloadHelper.handleAutoReloadToggle}
           onReload={loadData} />
       </div>
-      <div style={{ padding: '24px' }}>
+      <div className='data-container'>
         <div className='content-div'>
           <div className='table-header-section'>
             <div className='table-filter-section'>
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx
index 1e92780619b..41da4565ac5 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx
@@ -103,7 +103,7 @@ const DiskUsage: React.FC<{}> = () => {
       <div className='page-header-v2'>
         Disk Usage
       </div>
-      <div style={{ padding: '24px' }}>
+      <div className='data-container'>
         <Alert
           className='du-alert-message'
           message="Additional block size is added to small entities, for better visibility.
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 1568cb4b3ed..458c363d6dd 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
@@ -238,8 +238,8 @@ const Overview: React.FC<{}> = () => {
         deletePendingSummarytotalUnrepSize: deletePendingResponse?.value?.data?.totalUnreplicatedDataSize,
         deletePendingSummarytotalRepSize: deletePendingResponse?.value?.data?.totalReplicatedDataSize,
         deletePendingSummarytotalDeletedKeys: deletePendingResponse?.value?.data?.totalDeletedKeys,
-        scmServiceId: clusterState?.scmServiceId,
-        omServiceId: clusterState?.omServiceId
+        scmServiceId: clusterState?.scmServiceId ?? 'N/A',
+        omServiceId: clusterState?.omServiceId ?? 'N/A'
       });
       setStorageReport({
         ...storageReport,
@@ -338,7 +338,7 @@ const Overview: React.FC<{}> = () => {
           lastUpdatedOMDBDelta={lastUpdatedOMDBDelta} lastUpdatedOMDBFull={lastUpdatedOMDBFull}
           togglePolling={autoReloadHelper.handleAutoReloadToggle} onReload={loadOverviewPageData} omSyncLoad={syncOmData} omStatus={omStatus} />
       </div>
-      <div style={{ padding: '24px' }}>
+      <div className='data-container'>
         <Row
           align='stretch'
           gutter={[
@@ -527,6 +527,15 @@ const Overview: React.FC<{}> = () => {
               linkToUrl='/Om' />
           </Col>
         </Row>
+        <span style={{ paddingLeft: '8px' }}>
+          <span style={{ color: '#6E6E6E' }}>OM ID:&nbsp;</span>
+          {omServiceId}
+        </span>
+        <span style={{ marginLeft: '12px', marginRight: '12px' }}> | </span>
+        <span>
+          <span style={{ color: '#6E6E6E' }}>SCM ID:&nbsp;</span>
+          {scmServiceId}
+        </span>
       </div>
     </>
   );
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 9059da91f91..f6ff87c7e13 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
@@ -120,7 +120,7 @@ const Pipelines: React.FC<{}> = () => {
           togglePolling={autoReloadHelper.handleAutoReloadToggle}
           onReload={loadData} />
       </div>
-      <div style={{ padding: '24px' }}>
+      <div className='data-container'>
         <div className='content-div'>
           <div className='table-header-section'>
             <div className='table-filter-section'>
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 cb25cedbcec..0b35a676d1f 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
@@ -182,7 +182,7 @@ const Volumes: React.FC<{}> = () => {
           onReload={loadData}
         />
       </div>
-      <div style={{ padding: '24px' }}>
+      <div className='data-container'>
         <div className='content-div'>
           <div className='table-header-section'>
             <div className='table-filter-section'>