feat: clusters page shows multiple idc CIDR and hostname (#363)

Signed-off-by: zhaoxinxin <1186037180@qq.com>

cypress/e2e/clusters/cluster.cy.ts

@@ -149,19 +149,31 @@ describe('Cluster', () => {
         .should('be.visible')
         .and('contain', 'Shanghai');
 
-      // Click the button to show more idc.
+      // The number of idc is 2 and the button is no longer displayed.
       cy.get('#idc').should('exist').click();
 
-      // Show idc dialog module.
+      // Click the button to show more idc.
-      cy.get('.MuiDialogContent-root').should('exist');
+      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('be.visible').and('have.text', 'Hangzhou')
-      cy.get('.MuiDialogContent-root > :nth-child(3)').should('be.visible').and('contain', 'Beijing');
+      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('be.visible').and('have.text', 'Shanghai')
+      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('not.be.visible');
+      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('not.be.visible');
+
+
+      cy.get('.MuiDialogContent-root').should('exist')
+
+      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label').should('contain', 'Total: 4')
+
       cy.get('body').click('topLeft');
+
+      // Show CIDRs
       cy.get(
         ':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .MuiBox-root > :nth-child(2) > .MuiTypography-root',
       )
         .should('be.visible')
         .and('contain', '192.168.0.0/16');
 
+      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label').should('contain', 'Total: 4')
+
       // Click the button to show more cidrs.
       cy.get('#cidrs').should('exist').click();
 
@@ -172,11 +184,82 @@ describe('Cluster', () => {
 
       cy.get('body').click('topLeft');
 
+      // The number of CIDRs displayed is 2.  
+      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('have.text', '10.0.0.0/8');
+      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('have.text', '192.168.0.0/16');
+      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('not.be.visible');
+      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('not.be.visible');
+
+      // The number of hostnames displayed is 2.  
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('have.text', 'cluster-1');
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('have.text', 'cluster-2');
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('not.be.visible');
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('not.be.visible');
+
       cy.get(':nth-child(4) > .MuiPaper-root > .information_cidrsTags__4sKxa')
         .should('be.visible')
         .and('contain', 'cluster-1');
+
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root').should('contain', 'Total: 4')
+
+      // Click the button to show more cidrs.
+      cy.get('#hostnames').should('exist').click();
+
+      // Show hostnames dialog module.
+      cy.get('.MuiDialogContent-root').children().should('have.length', 4);
+
+      cy.get('body').click('topLeft');
+
+      cy.get('.MuiDialogContent-root').should('not.be.visible')
     });
 
+    it('the visible width of the screen is 1920px. Display scopes', () => {
+      cy.viewport(1920, 1080);
+
+      // The number of idc displayed is 3.  
+      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('be.visible').and('have.text', 'Hangzhou')
+      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('be.visible').and('have.text', 'Shanghai')
+      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('be.visible').and('have.text', 'Beijing')
+      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('not.be.visible');
+
+
+      // The number of CIDRs displayed is 3.  
+      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('have.text', '10.0.0.0/8');
+      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('have.text', '192.168.0.0/16');
+      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('have.text', '172.16.0.0/12');
+      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('not.be.visible');
+
+      // The number of hostnames displayed is 3.  
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('have.text', 'cluster-1');
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('have.text', 'cluster-2');
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('have.text', 'cluster-3');
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('not.be.visible');
+
+    })
+
+    it('the visible width of the screen is 1920px. Display scopes', () => {
+      cy.viewport(2560, 1080);
+
+      // The number of idc displayed is 4.  
+      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('be.visible').and('have.text', 'Hangzhou')
+      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('be.visible').and('have.text', 'Shanghai')
+      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('be.visible').and('have.text', 'Beijing')
+      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('be.visible').and('have.text', 'Xiamen')
+
+
+      // The number of CIDRs displayed is 4.  
+      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('have.text', '10.0.0.0/8');
+      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('have.text', '192.168.0.0/16');
+      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('have.text', '172.16.0.0/12');
+      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('have.text', '173.16.0.1/11');
+
+      // The number of hostnames displayed is 4.  
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('have.text', 'cluster-1');
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('have.text', 'cluster-2');
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('have.text', 'cluster-3');
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('have.text', 'cluster-4');
+    })
+
     it('can display config', () => {
       cy.get('.MuiPaper-root > :nth-child(1) > .MuiTypography-body1').should('be.visible').and('have.text', '300');
       cy.get('.MuiPaper-root > :nth-child(3) > .MuiTypography-body1').should('be.visible').and('have.text', '51');
@@ -232,7 +315,32 @@ describe('Cluster', () => {
         (req) => {
           req.reply({
             statusCode: 200,
-            body: [],
+            body: {
+              "id": 1,
+              "name": "cluster-1",
+              "bio": "",
+              "scopes": {
+                "idc": "",
+                "location": "",
+                "cidrs": null,
+                "hostnames": null
+              },
+              "scheduler_cluster_id": 1,
+              "seed_peer_cluster_id": 1,
+              "scheduler_cluster_config": {
+                "candidate_parent_limit": 4,
+                "filter_parent_limit": 15
+              },
+              "seed_peer_cluster_config": {
+                "load_limit": 500
+              },
+              "peer_cluster_config": {
+                "load_limit": 200
+              },
+              "created_at": "2024-04-07T06:30:14Z",
+              "updated_at": "2024-04-07T06:30:14Z",
+              "is_default": true
+            },
           });
         },
       );
@@ -251,7 +359,7 @@ describe('Cluster', () => {
     it('unable to display information', () => {
       cy.get('.information_clusterContainer__l8H8p > :nth-child(1) > .MuiTypography-subtitle1').should(
         'have.text',
-        '-',
+        'cluster-1',
       );
       cy.get('.information_clusterContainer__l8H8p > :nth-child(3) > .MuiTypography-subtitle1').should(
         'have.text',
@@ -259,33 +367,45 @@ describe('Cluster', () => {
       );
       cy.get('.information_clusterContainer__l8H8p > :nth-child(5) > .MuiTypography-subtitle1').should(
         'have.text',
-        'No',
+        'Yes',
       );
       cy.get('.information_clusterContainer__l8H8p > :nth-child(7) > .css-70qvj9 > .MuiTypography-root').should(
         'have.text',
-        '0',
+        '1',
       );
       cy.get('.information_clusterContainer__l8H8p > :nth-child(9) > .css-70qvj9 > .MuiTypography-root').should(
         'have.text',
-        '0',
+        '1',
       );
     });
 
     it('unable to display scopes', () => {
+
+      // Show location.
       cy.get('.information_locationTextContainer__ZdjKa').should('have.text', '-');
-      cy.get(':nth-child(2) > .MuiPaper-root > .information_cidrsTags__4sKxa').should('have.text', '-');
 
+      // Show idc.
       cy.get('#idc').should('not.exist');
+      cy.get(':nth-child(2) > .MuiPaper-root > .information_cidrsTags__4sKxa').should('have.text', '-');
+      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label').should('have.text', 'Total: 0')
 
-      cy.get(':nth-child(3) > .MuiPaper-root > .information_cidrsTags__4sKxa').should('have.text', '-');
+      // Show cidrs.
       cy.get('#cidrs').should('not.exist');
+      cy.get(':nth-child(3) > .MuiPaper-root > .information_cidrsTags__4sKxa').should('have.text', '-');
+      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label').should('have.text', 'Total: 0')
+
+      // Show hostnames.
+      cy.get('#hostnames').should('not.exist');
+      cy.get(':nth-child(4) > .MuiPaper-root > .information_cidrsTags__4sKxa').should('have.text', '-');
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label').should('have.text', 'Total: 0')
+
     });
 
     it('unable to display config', () => {
-      cy.get('.MuiPaper-root > :nth-child(1) > .MuiTypography-body1').should('have.text', 0);
+      cy.get('.MuiPaper-root > :nth-child(1) > .MuiTypography-body1').should('have.text', 500);
-      cy.get('.MuiPaper-root > :nth-child(3) > .MuiTypography-body1').should('have.text', 0);
+      cy.get('.MuiPaper-root > :nth-child(3) > .MuiTypography-body1').should('have.text', 200);
-      cy.get(':nth-child(5) > .MuiTypography-body1').should('have.text', 0);
+      cy.get(':nth-child(5) > .MuiTypography-body1').should('have.text', 4);
-      cy.get(':nth-child(7) > .MuiTypography-body1').should('have.text', 0);
+      cy.get(':nth-child(7) > .MuiTypography-body1').should('have.text', 15);
     });
   });
 
@@ -376,8 +496,9 @@ describe('Cluster', () => {
         ':nth-child(7) > .MuiPaper-root > .clusters_clusterListContent__UwWjF > .clusters_creatTimeContainer__k6XfL > .MuiButtonBase-root',
       ).click();
 
+      cy.get('.information_clusterContainer__l8H8p > :nth-child(1) > .MuiTypography-subtitle1').scrollIntoView();
+
       cy.get('.information_clusterContainer__l8H8p > :nth-child(1) > .MuiTypography-subtitle1')
-        .scrollIntoView()
         .should('be.visible')
         .and('contain', 'cluster-10');
 

cypress/e2e/clusters/update-cluster.cy.ts

@@ -59,7 +59,6 @@ describe('Update cluster', () => {
     cy.get(':nth-child(2) > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root')
       .should('contain', 'Hangzhou')
       .and('contain', 'Shanghai')
-      .and('contain', 'Beijing');
 
     cy.get(':nth-child(3) > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root')
       .should('contain', '10.0.0.0/8')
@@ -158,7 +157,7 @@ describe('Update cluster', () => {
       (req.body = ''),
         req.reply({
           statusCode: 200,
-          body: [],
+          body: {},
         });
     });
     cy.visit('/clusters/1');

cypress/fixtures/clusters/cluster/cluster.json

@@ -3,10 +3,10 @@
   "name": "cluster-1",
   "bio": "Cluster-1 is a high-performance computing cluster located in China, specifically in Hangzhou and Beijing data centers.",
   "scopes": {
-    "idc": "Hangzhou|Shanghai|Beijing",
+    "idc": "Hangzhou|Shanghai|Beijing|Xiamen",
     "location": "China|Hang|Zhou",
-    "cidrs": ["10.0.0.0/8", "192.168.0.0/16", "172.16.0.0/12"],
+    "cidrs": ["10.0.0.0/8", "192.168.0.0/16", "172.16.0.0/12", "173.16.0.1/11"],
-    "hostnames": ["cluster-1", "cluster-2", "cluster-3"]
+    "hostnames": ["cluster-1", "cluster-2", "cluster-3", "cluster-4"]
   },
   "scheduler_cluster_id": 1,
   "seed_peer_cluster_id": 1,

cypress/fixtures/clusters/cluster/delete-cluster.json

@@ -5,7 +5,8 @@
   "scopes": {
     "idc": "London",
     "location": "London|England",
-    "cidrs": ["192.168.255.255"]
+    "cidrs": ["192.168.255.255"],
+    "hostnames": ["cluster-1"]
   },
   "scheduler_cluster_id": 10,
   "seed_peer_cluster_id": 10,

cypress/fixtures/clusters/cluster/delete-clusters.json

@@ -6,7 +6,8 @@
     "scopes": {
       "idc": "Hangzhou|Shanghai|Beijing",
       "location": "China|Hang|Zhou",
-      "cidrs": ["10.0.0.0/8", "192.168.0.0/16", "172.16.0.0/12"]
+      "cidrs": ["10.0.0.0/8", "192.168.0.0/16", "172.16.0.0/12"],
+      "hostnames": ["cluster-1"]
     },
     "scheduler_cluster_id": 1,
     "seed_peer_cluster_id": 1,

cypress/fixtures/clusters/clusters.json

@@ -6,7 +6,8 @@
     "scopes": {
       "idc": "Hangzhou|Shanghai|Beijing",
       "location": "China|Hang|Zhou",
-      "cidrs": ["10.0.0.0/8", "192.168.0.0/16", "172.16.0.0/12"]
+      "cidrs": ["10.0.0.0/8", "192.168.0.0/16", "172.16.0.0/12"],
+      "hostnames": null
     },
     "scheduler_cluster_id": 1,
     "seed_peer_cluster_id": 1,

cypress/fixtures/clusters/create-cluster.json

@@ -6,7 +6,8 @@
     "scopes": {
       "idc": "Hangzhou|Shanghai|Beijing",
       "location": "China|Hang|Zhou",
-      "cidrs": ["10.0.0.0/8", "192.168.0.0/16", "172.16.0.0/12"]
+      "cidrs": ["10.0.0.0/8", "192.168.0.0/16", "172.16.0.0/12"],
+      "hostnames": null
     },
     "scheduler_cluster_id": 1,
     "seed_peer_cluster_id": 1,

cypress/fixtures/clusters/search-cluster.json

@@ -6,7 +6,8 @@
     "scopes": {
       "idc": "Hangzhou|Shanghai|Beijing",
       "location": "China|Hang|Zhou",
-      "cidrs": ["10.0.0.0/8", "192.168.0.0/16", "172.16.0.0/12"]
+      "cidrs": ["10.0.0.0/8", "192.168.0.0/16", "172.16.0.0/12"],
+      "hostnames": null
     },
     "scheduler_cluster_id": 1,
     "seed_peer_cluster_id": 1,

public/index.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8" />
   <link rel="icon" href="./favicon/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="theme-color" content="#000000" />
   <meta name="keywords"
     content="dragonfly, console, cncf, p2p, cloud-native, registry, containers, docker-image, accelerate-image">

src/components/clusters/information.module.css

@@ -66,6 +66,11 @@
   justify-content: space-between;
 }
 
+.scopesIcon {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
 .scopesIconContainer {
   display: flex;
   align-items: center;
@@ -76,11 +81,6 @@
   height: 2rem;
 }
 
-.scopesIcon {
-  width: 1.4rem;
-  height: 1.4rem;
-}
-
 .locationTitle {
   display: flex;
   align-items: center;
@@ -121,9 +121,62 @@
   justify-content: space-between;
 }
 
+@media only screen and (min-width: 2049px) and (max-width: 2560px) {
+  .cidrsContent:nth-child(3) {
+    display: flex !important;
+  }
+
+  .cidrsContent:nth-child(4) {
+    display: flex !important;
+  }
+
   .cidrsContent {
+    width: 8rem !important;
+  }
+}
+
+@media only screen and (max-width: 1920px) {
+  .cidrsContent:nth-child(3) {
+    display: flex !important;
+  }
+
+  .cidrsContent:nth-child(4) {
+    display: none !important;
+  }
+
+  .cidrsContent {
+    width: 7rem !important;
+  }
+}
+
+@media only screen and (max-width: 1600px) {
+  .cidrsContent:nth-child(3) {
+    display: none !important;
+  }
+
+  .cidrsContent:nth-child(4) {
+    display: none !important;
+  }
+}
+
+@media only screen and (max-width: 1440px) {
+  .cidrsContent:nth-child(3) {
+    display: none !important;
+  }
+
+  .cidrsContent:nth-child(4) {
+    display: none !important;
+  }
+}
+
+.cidrWrapper {
+  display: flex;
+  width: 80%;
+}
+
+.cidrsContent {
+  width: 6rem;
   height: 1.6rem;
-  max-width: 100%;
   margin-right: 0.6rem;
   display: inline-flex;
   align-items: center;
@@ -172,7 +225,7 @@
 }
 
 .cidrsDialogContent {
-  width: 30.4%;
+  width: 45%;
   background-color: #f4f3f6 !important;
   display: flex;
   align-items: center;

src/components/clusters/information.tsx

@@ -1,5 +1,5 @@
 import Divider from '@mui/material/Divider';
-import { Box, Grid, Tooltip, Typography, Paper, DialogTitle, DialogContent, IconButton, Skeleton } from '@mui/material';
+import { Box, Grid, Tooltip, Typography, Paper, DialogTitle, DialogContent, IconButton, Skeleton, Chip } from '@mui/material';
 import Dialog from '@mui/material/Dialog';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import styles from './information.module.css';
@@ -277,14 +277,17 @@ export default function Information(props: { cluster: getClusterResponse; isLoad
                         <HelpIcon color="disabled" className={styles.descriptionIcon} />
                       </Tooltip>
                     </Box>
-                    <Box className={styles.scopesIconContainer}>
+                    <Chip
+                      size="small"
+                      icon={
                         <Box component="img" className={styles.scopesIcon} src="/icons/cluster/idc.svg" />
-                    </Box>
+                      }
+                      label={`Total: ${cluster?.scopes?.idc !== '' ? cluster?.scopes?.idc.split('|').length : 0}`} />
                   </Box>
                   <Box className={styles.cidrsTags}>
                     {cluster?.scopes?.idc ? (
                       <>
-                        <Box sx={{ width: '80%' }}>
+                        <Box className={styles.cidrWrapper}>
                           <Paper variant="outlined" className={styles.cidrsContent}>
                             <Tooltip title={cluster?.scopes?.idc.split('|')[0] || '-'} placement="top">
                               <Typography variant="body2" component="div" className={styles.cidrsText}>
@@ -298,17 +301,50 @@ export default function Information(props: { cluster: getClusterResponse; isLoad
                           </Paper>
                           {cluster?.scopes?.idc.split('|').length > 1 ? (
                             <Paper variant="outlined" className={styles.cidrsContent}>
-                              <Tooltip title={cluster?.scopes?.idc.split('|')[0] || '-'} placement="top">
+                              <Tooltip title={cluster?.scopes?.idc.split('|')[1] || ''} placement="top">
                                 <Typography variant="body2" component="div" className={styles.cidrsText}>
                                   {isLoading ? (
                                     <Skeleton sx={{ width: '8rem' }} />
                                   ) : (
-                                    cluster?.scopes?.idc.split('|')[1] || '-'
+                                    cluster?.scopes?.idc.split('|')[1] || ''
                                   )}
                                 </Typography>
                               </Tooltip>
                             </Paper>
+                          )
+                            : (
+                              <></>
+                            )}
+                          {cluster?.scopes?.idc.split('|').length > 2 ? (
+                            <Paper variant="outlined" className={styles.cidrsContent}>
+                              <Tooltip title={cluster?.scopes?.idc.split('|')[2] || ''} placement="top">
+                                <Typography variant="body2" component="div" className={styles.cidrsText}>
+                                  {isLoading ? (
+                                    <Skeleton sx={{ width: '8rem' }} />
                                   ) : (
+                                    cluster?.scopes?.idc.split('|')[2] || ''
+                                  )}
+                                </Typography>
+                              </Tooltip>
+                            </Paper>
+                          )
+                            : (
+                              <></>
+                            )}
+                          {cluster?.scopes?.idc.split('|').length > 3 ? (
+                            <Paper variant="outlined" className={styles.cidrsContent}>
+                              <Tooltip title={cluster?.scopes?.idc.split('|')[3] || ''} placement="top">
+                                <Typography variant="body2" component="div" className={styles.cidrsText}>
+                                  {isLoading ? (
+                                    <Skeleton sx={{ width: '8rem' }} />
+                                  ) : (
+                                    cluster?.scopes?.idc.split('|')[3] || ''
+                                  )}
+                                </Typography>
+                              </Tooltip>
+                            </Paper>
+                          )
+                            : (
                               <></>
                             )}
                         </Box>
@@ -370,9 +406,12 @@ export default function Information(props: { cluster: getClusterResponse; isLoad
                         <HelpIcon color="disabled" className={styles.descriptionIcon} />
                       </Tooltip>
                     </Box>
-                    <Box className={styles.scopesIconContainer}>
+                    <Chip
+                      size="small"
+                      icon={
                         <Box component="img" className={styles.scopesIcon} src="/icons/cluster/cidrs.svg" />
-                    </Box>
+                      }
+                      label={`Total: ${cluster?.scopes?.cidrs?.length ? cluster?.scopes?.cidrs?.length : 0}`} />
                   </Box>
                   {isLoading ? (
                     <Skeleton sx={{ width: '10rem' }} />
@@ -380,19 +419,41 @@ export default function Information(props: { cluster: getClusterResponse; isLoad
                     <Box className={styles.cidrsTags}>
                       {cluster?.scopes?.cidrs?.length > 0 ? (
                         <>
-                          <Box sx={{ width: '80%' }}>
+                          <Box className={styles.cidrWrapper}>
                             <Paper variant="outlined" className={styles.cidrsContent}>
                               <Tooltip title={cluster?.scopes?.cidrs[0] || '-'} placement="top">
                                 <Typography variant="body2" className={styles.cidrsText}>
-                                  {cluster?.scopes?.cidrs[0]}
+                                  {cluster?.scopes?.cidrs[0] || ''}
                                 </Typography>
                               </Tooltip>
                             </Paper>
                             {cluster?.scopes?.cidrs?.length > 1 ? (
                               <Paper variant="outlined" className={styles.cidrsContent}>
-                                <Tooltip title={cluster?.scopes?.cidrs[1] || '-'} placement="top">
+                                <Tooltip title={cluster?.scopes?.cidrs[1] || ''} placement="top">
                                   <Typography variant="body2" className={styles.cidrsText}>
-                                    {cluster?.scopes?.cidrs[1]}
+                                    {cluster?.scopes?.cidrs[1] || ''}
+                                  </Typography>
+                                </Tooltip>
+                              </Paper>
+                            ) : (
+                              <></>
+                            )}
+                            {cluster?.scopes?.cidrs?.length > 2 ? (
+                              <Paper variant="outlined" className={styles.cidrsContent}>
+                                <Tooltip title={cluster?.scopes?.cidrs[2] || ''} placement="top">
+                                  <Typography variant="body2" className={styles.cidrsText}>
+                                    {cluster?.scopes?.cidrs[2] || ''}
+                                  </Typography>
+                                </Tooltip>
+                              </Paper>
+                            ) : (
+                              <></>
+                            )}
+                            {cluster?.scopes?.cidrs?.length > 3 ? (
+                              <Paper variant="outlined" className={styles.cidrsContent}>
+                                <Tooltip title={cluster?.scopes?.cidrs[3] || ''} placement="top">
+                                  <Typography variant="body2" className={styles.cidrsText}>
+                                    {cluster?.scopes?.cidrs[3] || ''}
                                   </Typography>
                                 </Tooltip>
                               </Paper>
@@ -461,9 +522,12 @@ export default function Information(props: { cluster: getClusterResponse; isLoad
                         <HelpIcon color="disabled" className={styles.descriptionIcon} />
                       </Tooltip>
                     </Box>
-                    <Box className={styles.scopesIconContainer}>
+                    <Chip
+                      size="small"
+                      icon={
                         <Box component="img" className={styles.scopesIcon} src="/icons/cluster/hostnames.svg" />
-                    </Box>
+                      }
+                      label={`Total: ${cluster?.scopes?.hostnames?.length ? cluster?.scopes?.hostnames?.length : 0}`} />
                   </Box>
                   {isLoading ? (
                     <Skeleton sx={{ width: '10rem' }} />
@@ -471,19 +535,41 @@ export default function Information(props: { cluster: getClusterResponse; isLoad
                     <Box className={styles.cidrsTags}>
                       {cluster?.scopes?.hostnames?.length > 0 ? (
                         <>
-                          <Box sx={{ width: '80%' }}>
+                          <Box className={styles.cidrWrapper}>
                             <Paper variant="outlined" className={styles.cidrsContent}>
                               <Tooltip title={cluster?.scopes?.hostnames[0] || '-'} placement="top">
                                 <Typography variant="body2" className={styles.cidrsText}>
-                                  {cluster?.scopes?.hostnames[0]}
+                                  {cluster?.scopes?.hostnames[0] || '-'}
                                 </Typography>
                               </Tooltip>
                             </Paper>
                             {cluster?.scopes?.hostnames?.length > 1 ? (
                               <Paper variant="outlined" className={styles.cidrsContent}>
-                                <Tooltip title={cluster?.scopes?.hostnames[1] || '-'} placement="top">
+                                <Tooltip title={cluster?.scopes?.hostnames[1] || ''} placement="top">
                                   <Typography variant="body2" className={styles.cidrsText}>
-                                    {cluster?.scopes?.hostnames[1]}
+                                    {cluster?.scopes?.hostnames[1] || ''}
+                                  </Typography>
+                                </Tooltip>
+                              </Paper>
+                            ) : (
+                              <></>
+                            )}
+                            {cluster?.scopes?.hostnames?.length > 2 ? (
+                              <Paper variant="outlined" className={styles.cidrsContent}>
+                                <Tooltip title={cluster?.scopes?.hostnames[2] || ''} placement="top">
+                                  <Typography variant="body2" className={styles.cidrsText}>
+                                    {cluster?.scopes?.hostnames[2] || ''}
+                                  </Typography>
+                                </Tooltip>
+                              </Paper>
+                            ) : (
+                              <></>
+                            )}
+                            {cluster?.scopes?.hostnames?.length > 3 ? (
+                              <Paper variant="outlined" className={styles.cidrsContent}>
+                                <Tooltip title={cluster?.scopes?.hostnames[3] || ''} placement="top">
+                                  <Typography variant="body2" className={styles.cidrsText}>
+                                    {cluster?.scopes?.hostnames[3] || ''}
                                   </Typography>
                                 </Tooltip>
                               </Paper>
@@ -494,7 +580,7 @@ export default function Information(props: { cluster: getClusterResponse; isLoad
                           {cluster?.scopes?.hostnames?.length > 2 ? (
                             <IconButton
                               size="small"
-                              id="cidrs"
+                              id="hostnames"
                               onClick={() => {
                                 setOpenHostnames(true);
                               }}