HDDS-13843. Add Open Containers card in new UI (#9204).

Author: devabhishekpal

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,15 +309,15 @@ 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'
               loading={clusterState.loading}
               data={keys}
               error={clusterState.error} />
           </Col>
-          <Col flex="1 0 20%">
+          <Col flex="1 0 15%">
             <OverviewSimpleCard
               title='Pipelines'
               icon='deployment-unit'
@@ -325,14 +326,22 @@ 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'
               loading={clusterState.loading}
               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={[
           {