dragonflyoss
/
console
mirror of https://github.com/dragonflyoss/console.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Feat change cluster card layout (#382) 

Signed-off-by: zhaoxinxin <1186037180@qq.com>
This commit is contained in:
Zhaoxinxin 2024-08-27 17:28:01 +08:00 committed by GitHub
parent 9b38889169
commit 85ef84998a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 472 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/e2e/clusters/cluster.cy.ts
View File

@ -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(

49
cypress/e2e/clusters/clusters.cy.ts
View File

@ -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);
});
});

12
cypress/e2e/clusters/create-cluster.cy.ts
View File

@ -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');
});

141
cypress/fixtures/clusters/cluster/delete-clusters.json
View File

@ -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
}
]

125
cypress/fixtures/clusters/clusters.json
View File

@ -274,5 +274,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
}
]

159
cypress/fixtures/clusters/create-cluster.json
View File

@ -32,8 +32,7 @@
"scopes": {
"idc": "",
"location": "",
"cidrs": [],
"hostnames": []
"cidrs": []
},
"scheduler_cluster_id": 2,
"seed_peer_cluster_id": 2,
@ -58,8 +57,7 @@
"scopes": {
"idc": "Korea",
"location": "Seoul|Korea",
"cidrs": ["192.168.0.0/16", "172.16.0.0/12"],
"hostnames": []
"cidrs": ["192.168.0.0/16", "172.16.0.0/12"]
},
"scheduler_cluster_id": 3,
"seed_peer_cluster_id": 3,
@ -84,8 +82,7 @@
"scopes": {
"idc": "hz|dl",
"location": "China|Hang|Zhou",
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"],
"hostnames": []
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"]
},
"scheduler_cluster_id": 4,
"seed_peer_cluster_id": 4,
@ -110,8 +107,7 @@
"scopes": {
"idc": "cq|cd",
"location": "China|Chong|Qing",
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"],
"hostnames": []
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"]
},
"scheduler_cluster_id": 5,
"seed_peer_cluster_id": 5,
@ -136,8 +132,7 @@
"scopes": {
"idc": "cq|cd",
"location": "China|Chong|Du",
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"],
"hostnames": []
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"]
},
"scheduler_cluster_id": 6,
"seed_peer_cluster_id": 6,
@ -162,8 +157,7 @@
"scopes": {
"idc": "cd",
"location": "China|Cheng|Du",
"cidrs": ["10.0.0.0/8", "172.16.0.0/19"],
"hostnames": []
"cidrs": ["10.0.0.0/8", "172.16.0.0/19"]
},
"scheduler_cluster_id": 7,
"seed_peer_cluster_id": 7,
@ -188,8 +182,7 @@
"scopes": {
"idc": "js",
"location": "China|Jiang|Su",
"cidrs": ["10.0.0.0/5", "172.16.0.0/19"],
"hostnames": []
"cidrs": ["10.0.0.0/5", "172.16.0.0/19"]
},
"scheduler_cluster_id": 8,
"seed_peer_cluster_id": 8,
@ -214,8 +207,7 @@
"scopes": {
"idc": "hz|hf",
"location": "China|Hang|Zhou",
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"],
"hostnames": []
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"]
},
"scheduler_cluster_id": 9,
"seed_peer_cluster_id": 9,
@ -240,8 +232,7 @@
"scopes": {
"idc": "London",
"location": "London|England",
"cidrs": ["192.168.255.255"],
"hostnames": []
"cidrs": ["192.168.255.255"]
},
"scheduler_cluster_id": 10,
"seed_peer_cluster_id": 10,
@ -266,8 +257,7 @@
"scopes": {
"idc": "Paris",
"location": "Paris|France",
"cidrs": ["192.168.0.0", "10.0.0.0"],
"hostnames": []
"cidrs": ["192.168.0.0", "10.0.0.0"]
},
"scheduler_cluster_id": 11,
"seed_peer_cluster_id": 11,
@ -288,6 +278,131 @@
{
"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
},
{
"id": 17,
"name": "cluster-17",
"bio": "Add new cluster case",
"scopes": {
"idc": "hz|sh",
@ -295,8 +410,8 @@
"cidrs": ["10.0.0.0/8", "172.16.0.0/12", "192.168.0.0/16"],
"hostnames": []
},
"scheduler_cluster_id": 12,
"seed_peer_cluster_id": 12,
"scheduler_cluster_id": 17,
"seed_peer_cluster_id": 17,
"scheduler_cluster_config": {
"candidate_parent_limit": 4,
"filter_parent_limit": 40

29
src/components/clusters/index.tsx
View File

@ -33,7 +33,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
import MoreTimeIcon from '@mui/icons-material/MoreTime';
import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
import { useNavigate } from 'react-router-dom';
import { DEFAULT_PAGE_SIZE, MAX_PAGE_SIZE } from '../../lib/constants';
import { MAX_PAGE_SIZE } from '../../lib/constants';
const theme = createTheme({
breakpoints: {
@ -62,6 +62,7 @@ export default function Clusters() {
const [clusterIsLoading, setClusterIsLoading] = useState(true);
const [clusterPage, setClusterPage] = useState(1);
const [totalPages, setTotalPages] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(9);
const [searchClusters, setSearchClusters] = useState('');
const [clusterCount, setClusterCount] = useState<getClustersResponse[]>([]);
const [cluster, setCluster] = useState<getClustersResponse[]>([]);
@ -115,9 +116,27 @@ export default function Clusters() {
}
});
const totalPage = Math.ceil(cluster.length / DEFAULT_PAGE_SIZE);
const updatePageSize = () => {
if (window.matchMedia('(max-width: 1440px)').matches) {
setPageSize(9);
} else if (window.matchMedia('(max-width: 1600px)').matches) {
setPageSize(9);
} else if (window.matchMedia('(max-width: 1920px)').matches) {
setPageSize(12);
} else if (window.matchMedia('(max-width: 2048px)').matches) {
setPageSize(12);
} else if (window.matchMedia('(max-width: 2560px)').matches) {
setPageSize(15);
}
};
const currentPageData = getPaginatedList(cluster, clusterPage, DEFAULT_PAGE_SIZE);
updatePageSize();
window.addEventListener('resize', updatePageSize);
const totalPage = Math.ceil(cluster.length / pageSize);
const currentPageData = getPaginatedList(cluster, clusterPage, pageSize);
setTotalPages(totalPage);
setAllClusters(currentPageData);
@ -126,7 +145,7 @@ export default function Clusters() {
setTotalPages(1);
setAllClusters([]);
}
}, [cluster, clusterPage]);
}, [cluster, clusterPage, pageSize]);
const numberOfDefaultClusters =
Array.isArray(clusterCount) && clusterCount?.filter((item: any) => item?.is_default === true).length;
@ -334,7 +353,7 @@ export default function Clusters() {
<SearchIcon sx={{ color: 'rgba(0,0,0,0.6)' }} />
</IconButton>
</Box>
<Box className={styles.clusterListContainer}>
<Box id="clustersCard" className={styles.clusterListContainer}>
{allClusters.length === 0 ? (
<></>
) : (