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

Signed-off-by: zhaoxinxin <[email protected]>
dragonflyoss · Apr 8, 2024 · 200b74a · 200b74a
1 parent 7f73bda
commit 200b74a
Show file tree

Hide file tree

Showing 11 changed files with 323 additions and 59 deletions.
diff --git a/cypress/e2e/clusters/cluster.cy.ts b/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.
-      cy.get('.MuiDialogContent-root').should('exist');
-      cy.get('.MuiDialogContent-root > :nth-child(3)').should('be.visible').and('contain', 'Beijing');
+      // Click the button to show more idc.
+      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('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,41 +359,53 @@ 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',
         '-',
       );
       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(3) > .MuiTypography-body1').should('have.text', 0);
-      cy.get(':nth-child(5) > .MuiTypography-body1').should('have.text', 0);
-      cy.get(':nth-child(7) > .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', 200);
+      cy.get(':nth-child(5) > .MuiTypography-body1').should('have.text', 4);
+      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');
 

diff --git a/cypress/e2e/clusters/update-cluster.cy.ts b/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');

diff --git a/cypress/fixtures/clusters/cluster/cluster.json b/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"],
-    "hostnames": ["cluster-1", "cluster-2", "cluster-3"]
+    "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", "cluster-4"]
   },
   "scheduler_cluster_id": 1,
   "seed_peer_cluster_id": 1,

diff --git a/cypress/fixtures/clusters/cluster/delete-cluster.json b/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,

diff --git a/cypress/fixtures/clusters/cluster/delete-clusters.json b/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,

diff --git a/cypress/fixtures/clusters/clusters.json b/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,

diff --git a/cypress/fixtures/clusters/create-cluster.json b/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,

diff --git a/cypress/fixtures/clusters/search-cluster.json b/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,

diff --git a/public/index.html b/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">