From bfb898fd478f3dde4bac6045f8e9bf7de17bbfaa Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Mon, 27 Oct 2025 19:31:35 +0530
Subject: [PATCH] HDDS-13843. Add Open Containers card in new UI

---
 .../src/v2/pages/overview/overview.tsx        | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 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 70c774cd441d..383709210057 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
@@ -203,6 +203,7 @@ const Overview: React.FC<{}> = () => {
     keys,
     pipelines,
     deletedContainers,
+    openContainers,
     omServiceId,
     scmServiceId
   } = clusterState.data;
@@ -290,7 +291,7 @@ const Overview: React.FC<{}> = () => {
             lg: 16,
             xl: 16
           }, 20]}>
-          <Col flex="1 0 20%">
+          <Col flex="1 0 15%">
             <OverviewSimpleCard
               title='Volumes'
               icon='inbox'
@@ -299,7 +300,7 @@ const Overview: React.FC<{}> = () => {
               linkToUrl='/Volumes'
               error={clusterState.error} />
           </Col>
-          <Col flex="1 0 20%">
+          <Col flex="1 0 15%">
             <OverviewSimpleCard
               title='Buckets'
               icon='folder-open'
@@ -308,7 +309,7 @@ const Overview: React.FC<{}> = () => {
               linkToUrl='/Buckets'
               error={clusterState.error} />
           </Col>
-          <Col flex="1 0 20%">
+          <Col flex="1 0 15%">
             <OverviewSimpleCard
               title='Keys'
               icon='file-text'
@@ -316,7 +317,7 @@ const Overview: React.FC<{}> = () => {
               data={keys}
               error={clusterState.error} />
           </Col>
-          <Col flex="1 0 20%">
+          <Col flex="1 0 15%">
             <OverviewSimpleCard
               title='Pipelines'
               icon='deployment-unit'
@@ -325,7 +326,7 @@ const Overview: React.FC<{}> = () => {
               linkToUrl='/Pipelines'
               error={clusterState.error} />
           </Col>
-          <Col flex="1 0 20%">
+          <Col flex="1 0 15%">
             <OverviewSimpleCard
               title='Deleted Containers'
               icon='delete'
@@ -333,6 +334,14 @@ const Overview: React.FC<{}> = () => {
               data={deletedContainers}
               error={clusterState.error} />
           </Col>
+          <Col flex="1 0 15%">
+            <OverviewSimpleCard
+              title='Open Containers'
+              icon='container'
+              loading={clusterState.loading}
+              data={openContainers}
+              error={clusterState.error} />
+          </Col>
         </Row>
         <Row gutter={[
           {