Feat change cluster card layout (#382)

Signed-off-by: zhaoxinxin <[email protected]>
dragonflyoss · Aug 27, 2024 · 85ef849 · 85ef849
1 parent 9b38889
commit 85ef849
Show file tree

Hide file tree

Showing 7 changed files with 472 additions and 47 deletions.
diff --git a/cypress/e2e/clusters/cluster.cy.ts b/cypress/e2e/clusters/cluster.cy.ts
@@ -577,7 +577,7 @@ describe('Cluster', () => {
         ':nth-child(1) > .css-q5fqw0 > .clusters_clusterContentContainer__ZxKuh > .css-zm3ms > .css-70qvj9 > .MuiTypography-root',
       )
         .should('be.visible')
-        .and('contain', 11);
+        .and('contain', 16);
       cy.get(
         ':nth-child(1) > .css-q5fqw0 > .clusters_clusterContentContainer__ZxKuh > .css-zm3ms > .MuiGrid-root > .clusters_clusterBottomContentContainer__KII0M > .clusters_clusterBottomContent__k3P4u',
       )
@@ -647,7 +647,7 @@ describe('Cluster', () => {
         ':nth-child(1) > .css-q5fqw0 > .clusters_clusterContentContainer__ZxKuh > .css-zm3ms > .css-70qvj9 > .MuiTypography-root',
       )
         .should('be.visible')
-        .and('contain', 10);
+        .and('contain', 15);
 
       // Display the default number after deletion.
       cy.get(

diff --git a/cypress/e2e/clusters/clusters.cy.ts b/cypress/e2e/clusters/clusters.cy.ts
@@ -53,7 +53,7 @@ describe('Clusters', () => {
         ':nth-child(1) > .css-q5fqw0 > .clusters_clusterContentContainer__ZxKuh > .css-zm3ms > .css-70qvj9 > .MuiTypography-root',
       )
         .should('be.visible')
-        .and('contain', '11');
+        .and('contain', '16');
 
       cy.get(
         ':nth-child(1) > .css-q5fqw0 > .clusters_clusterContentContainer__ZxKuh > .css-zm3ms > .MuiGrid-root > .clusters_clusterBottomContentContainer__KII0M > .clusters_clusterBottomContent__k3P4u',
@@ -290,12 +290,14 @@ describe('Clusters', () => {
       // Go to last page.
       cy.get('.MuiPagination-ul > :nth-child(3) > .MuiButtonBase-root').click();
 
-      cy.get('.clusters_clusterListContent__UwWjF > .MuiTypography-h6')
+      cy.get(':nth-child(2) > .MuiPaper-root > .clusters_clusterListContent__UwWjF > .MuiTypography-h6')
         .should('be.visible')
         .and('contain', 'cluster-8');
 
       // Go to show cluster page.
-      cy.get('.clusters_creatTimeContainer__k6XfL > .MuiButtonBase-root').click();
+      cy.get(
+        ':nth-child(2) > .MuiPaper-root > .clusters_clusterListContent__UwWjF > .clusters_creatTimeContainer__k6XfL > .MuiButtonBase-root',
+      ).click();
 
       // Then I see that the current page is the show cluster.
       cy.url().should('include', '/clusters/8');
@@ -306,7 +308,7 @@ describe('Clusters', () => {
       // Check the current page number.
       cy.get('#clusterPagination > .MuiPagination-ul .Mui-selected').should('have.text', '2');
 
-      cy.get('.clusters_clusterListContent__UwWjF > .MuiTypography-h6')
+      cy.get(':nth-child(2) > .MuiPaper-root > .clusters_clusterListContent__UwWjF > .MuiTypography-h6')
         .should('be.visible')
         .and('contain', 'cluster-8');
     });
@@ -481,4 +483,43 @@ describe('Clusters', () => {
       cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Failed to fetch');
     });
   });
+
+  it('call onChange when changing page size', () => {
+    // The viewport will now be changed to 1440px x 1080px
+    cy.viewport(1440, 1080);
+
+    // Check if the number of page size is 9.
+    cy.get('#clustersCard').should('exist').children().should('have.length', 9);
+
+    // The viewport will now be changed to 1600px x 1080px
+    cy.viewport(1600, 1080);
+    cy.wait(1000);
+
+    // Check if the number of page size is 9.
+    cy.get('#clustersCard').should('exist').children().should('have.length', 9);
+
+    // The viewport will now be changed to 1920px x 1080px
+    cy.viewport(1920, 1080);
+    cy.wait(1000);
+
+    // Check if the number of page size is 12.
+    cy.get('#clustersCard').should('exist').children().should('have.length', 12);
+
+    // The viewport will now be changed to 2048px x 1080px
+    cy.viewport(2048, 1080);
+    cy.wait(1000);
+
+    // Check if the number of page size is 12.
+    cy.get('#clustersCard').should('exist').children().should('have.length', 12);
+
+    // The viewport will now be changed to 2560px x 1080px
+    cy.viewport(2560, 1080);
+    cy.wait(1000);
+
+    // Check if the number of page size is 15.
+    cy.get('#clustersCard').should('exist').children().should('have.length', 15);
+    // cy.get('#clusters').should('have.length', 9);
+
+    // cy.get('#clusters').children().should('have.length', 9);
+  });
 });
diff --git a/cypress/e2e/clusters/create-cluster.cy.ts b/cypress/e2e/clusters/create-cluster.cy.ts
@@ -56,7 +56,7 @@ describe('Create cluster', () => {
       ':nth-child(1) > .css-q5fqw0 > .clusters_clusterContentContainer__ZxKuh > .css-zm3ms > .css-70qvj9 > .MuiTypography-root',
     )
       .should('be.visible')
-      .and('contain', '11');
+      .and('contain', '16');
 
     // Show number of cluster default.
     cy.get(
@@ -72,7 +72,7 @@ describe('Create cluster', () => {
 
     // Add Information.
     cy.get('.PrivateSwitchBase-input').click();
-    cy.get('#name').type('cluster-12');
+    cy.get('#name').type('cluster-17');
     cy.get('#description').type('Add new cluster case');
     cy.get('#location').type('China|Hang|Zhou');
 
@@ -127,14 +127,14 @@ describe('Create cluster', () => {
     // Displays successfully added clusters.
     cy.get(':nth-child(8) > .MuiPaper-root > .clusters_clusterListContent__UwWjF > .MuiTypography-h6')
       .should('be.visible')
-      .and('contain', 'cluster-12');
+      .and('contain', 'cluster-17');
 
     // The number of clusters has been increased.
     cy.get(
       ':nth-child(1) > .css-q5fqw0 > .clusters_clusterContentContainer__ZxKuh > .css-zm3ms > .css-70qvj9 > .MuiTypography-root',
     )
       .should('be.visible')
-      .and('contain', '12');
+      .and('contain', '17');
 
     // The default number of clusters has been increased.
     cy.get(
@@ -210,7 +210,7 @@ describe('Create cluster', () => {
         });
     });
 
-    cy.get('#name').type('cluster-12{enter}');
+    cy.get('#name').type('cluster-17{enter}');
 
     // Show error message.
     cy.get('.MuiAlert-message').should('be.visible').and('contain', 'permission deny');
@@ -231,7 +231,7 @@ describe('Create cluster', () => {
         });
     });
 
-    cy.get('#name').type('cluster-12');
+    cy.get('#name').type('cluster-17');
     cy.get('#save').click();
     cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Failed to fetch');
   });

diff --git a/cypress/fixtures/clusters/cluster/delete-clusters.json b/cypress/fixtures/clusters/cluster/delete-clusters.json
@@ -7,7 +7,7 @@
       "idc": "Hangzhou|Shanghai|Beijing",
       "location": "China|Hang|Zhou",
       "cidrs": ["10.0.0.0/8", "192.168.0.0/16", "172.16.0.0/12"],
-      "hostnames": ["cluster-1"]
+      "hostnames": null
     },
     "scheduler_cluster_id": 1,
     "seed_peer_cluster_id": 1,
@@ -53,7 +53,7 @@
   {
     "id": 3,
     "name": "cluster-3",
-    "bio": "Cluster-3 is a high-performance computing cluster located in Korea, specifically in Seoul data centers. ",
+    "bio": "Cluster-3 is a high-performance computing cluster located in Korea, specifically in Seoul data centers.",
     "scopes": {
       "idc": "Korea",
       "location": "Seoul|Korea",
@@ -78,7 +78,7 @@
   {
     "id": 4,
     "name": "cluster-4",
-    "bio": "Cluster-4 is a high-performance computing cluster located in China, specifically in Hangzhou data centers. ",
+    "bio": "Cluster-4 is a high-performance computing cluster located in China, specifically in Hangzhou data centers.",
     "scopes": {
       "idc": "hz|dl",
       "location": "China|Hang|Zhou",
@@ -103,7 +103,7 @@
   {
     "id": 5,
     "name": "cluster-5",
-    "bio": "Cluster-5 is a high-performance computing cluster located in China, specifically in Chongqing data centers. ",
+    "bio": "Cluster-5 is a high-performance computing cluster located in China, specifically in Chongqing data centers.",
     "scopes": {
       "idc": "cq|cd",
       "location": "China|Chong|Qing",
@@ -128,7 +128,7 @@
   {
     "id": 6,
     "name": "cluster-6",
-    "bio": "Cluster-6 is a high-performance computing cluster located in China, specifically in Chongdu data centers. ",
+    "bio": "Cluster-6 is a high-performance computing cluster located in China, specifically in Chongdu data centers.",
     "scopes": {
       "idc": "cq|cd",
       "location": "China|Chong|Du",
@@ -153,7 +153,7 @@
   {
     "id": 7,
     "name": "cluster-7",
-    "bio": "Cluster-7 is a high-performance computing cluster located in China, specifically in Chongdu data centers. ",
+    "bio": "Cluster-7 is a high-performance computing cluster located in China, specifically in Chongdu data centers.",
     "scopes": {
       "idc": "cd",
       "location": "China|Cheng|Du",
@@ -178,7 +178,7 @@
   {
     "id": 8,
     "name": "cluster-8",
-    "bio": "Cluster-8 is a high-performance computing cluster located in China, specifically in Jiangsu data centers. ",
+    "bio": "Cluster-8 is a high-performance computing cluster located in China, specifically in Jiangsu data centers.",
     "scopes": {
       "idc": "js",
       "location": "China|Jiang|Su",
@@ -203,7 +203,7 @@
   {
     "id": 9,
     "name": "cluster-9",
-    "bio": "Cluster-9 is a high-performance computing cluster located in China, specifically in Hangzhou data centers. ",
+    "bio": "Cluster-9 is a high-performance computing cluster located in China, specifically in Hangzhou data centers.",
     "scopes": {
       "idc": "hz|hf",
       "location": "China|Hang|Zhou",
@@ -249,5 +249,130 @@
     "created_at": "2023-11-01T10:19:36Z",
     "updated_at": "2023-11-01T10:19:36Z",
     "is_default": false
+  },
+  {
+    "id": 12,
+    "name": "cluster-12",
+    "bio": "Cluster-12 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 12,
+    "seed_peer_cluster_id": 12,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-01T10:19:36Z",
+    "updated_at": "2023-12-01T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 13,
+    "name": "cluster-13",
+    "bio": "Cluster-13 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 13,
+    "seed_peer_cluster_id": 13,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-03T10:19:36Z",
+    "updated_at": "2023-12-03T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 14,
+    "name": "cluster-14",
+    "bio": "Cluster-14 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 14,
+    "seed_peer_cluster_id": 14,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-04T10:19:36Z",
+    "updated_at": "2023-12-04T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 15,
+    "name": "cluster-15",
+    "bio": "Cluster-15 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 15,
+    "seed_peer_cluster_id": 15,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-05T10:19:36Z",
+    "updated_at": "2023-12-05T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 16,
+    "name": "cluster-16",
+    "bio": "Cluster-10 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 16,
+    "seed_peer_cluster_id": 16,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-06T10:19:36Z",
+    "updated_at": "2023-12-06T10:19:36Z",
+    "is_default": false
   }
 ]