HDDS-11545. [UI] Add OM and SCM ID information (apache#7287)

(cherry picked from commit 4b24aa9)
ptlrs · Oct 16, 2024 · 236de87 · 236de87
1 parent e77b5b0
commit 236de87
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 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
@@ -164,4 +164,9 @@ body {
 
 .pointer {
   cursor: pointer;
+}
+
+.data-container {
+  padding: 24px;
+  height: 80vh;
 }
diff --git a/...e/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/buckets/buckets.tsx b/...e/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/...con/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx b/...con/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/...con/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.tsx b/...con/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/...recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx b/...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/...con/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/pipelines/pipelines.tsx b/...con/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/...e/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx b/...e/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'>