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

feat: cluster scope adds hostnames (#356) 

Signed-off-by: zhaoxinxin <1186037180@qq.com>
This commit is contained in:
Zhaoxinxin 2024-02-21 21:54:32 +08:00 committed by GitHub
parent ac604324be
commit 8bee0cf4a2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 477 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -171,6 +171,10 @@ describe('Cluster', () => {
cy.get('.MuiDialogContent-root').should('be.visible').and('contain', '10.0.0.0/8');
cy.get('body').click('topLeft');
cy.get(':nth-child(4) > .MuiPaper-root > .information_cidrsTags__4sKxa')
.should('be.visible')
.and('contain', 'cluster-1');
});
it('can display config', () => {
@ -373,6 +377,7 @@ describe('Cluster', () => {
).click();
cy.get('.information_clusterContainer__l8H8p > :nth-child(1) > .MuiTypography-subtitle1')
.scrollIntoView()
.should('be.visible')
.and('contain', 'cluster-10');
@ -444,6 +449,7 @@ describe('Cluster', () => {
).click();
cy.get('.information_clusterContainer__l8H8p > :nth-child(1) > .MuiTypography-subtitle1')
.scrollIntoView()
.should('be.visible')
.and('contain', 'cluster-1');
@ -516,6 +522,7 @@ describe('Cluster', () => {
).click();
cy.get('.information_clusterContainer__l8H8p > :nth-child(1) > .MuiTypography-subtitle1')
.scrollIntoView()
.should('be.visible')
.and('contain', 'cluster-10');
@ -565,6 +572,7 @@ describe('Cluster', () => {
).click();
cy.get('.information_clusterContainer__l8H8p > :nth-child(1) > .MuiTypography-subtitle1')
.scrollIntoView()
.should('be.visible')
.and('contain', 'cluster-10');

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

@ -280,6 +280,7 @@ describe('Create cluster', () => {
it('try to verify scopes', () => {
const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
const location = _.times(101, () => _.sample(characters)).join('');
const hostnames = _.times(31, () => _.sample(characters)).join('');
// Name is a required attribute.
cy.get('#name').type('cluster-12');
@ -323,6 +324,22 @@ describe('Create cluster', () => {
// Verification passed.
cy.get('#cidrs-helper-text').should('not.exist');
// Should display cidrs the validation error message.
cy.get(':nth-child(4) > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root').type('sigma');
cy.get('#save').click();
cy.url().should('include', '/clusters/new');
cy.get('#hostnames-helper-text')
.should('be.visible')
.and('contain', `Please press ENTER to end the Hostnames creation.`);
cy.get(':nth-child(4) > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root').type(
'hostname{enter}',
);
cy.get(':nth-child(4) > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root').type(hostnames);
cy.get('#hostnames-helper-text')
.should('be.visible')
.and('contain', `Fill in the characters, the length is 1-30.`);
});
it('try to verify config', () => {

21
cypress/e2e/clusters/update-cluster.cy.ts
View File

@ -66,6 +66,11 @@ describe('Update cluster', () => {
.and('contain', '192.168.0.0/16')
.and('contain', '172.16.0.0/12');
cy.get(':nth-child(4) > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root')
.should('contain', 'cluster-1')
.and('contain', 'cluster-2')
.and('contain', 'cluster-3');
// Show config.
cy.get('#seedPeerLoadLimit').should('have.value', 300);
cy.get('#peerLoadLimit').should('have.value', 51);
@ -332,6 +337,22 @@ describe('Update cluster', () => {
'192.168.40.0/24{enter}',
);
cy.get('#cidrs-helper-text').should('not.exist');
// Should display hostnames the validation error message.
cy.get(':nth-child(4) > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root').type('cluster-2');
cy.get('#save').click();
cy.url().should('include', '/clusters/1/edit');
// Show verification error message.
cy.get('#hostnames-helper-text')
.should('be.visible')
.and('contain', `Please press ENTER to end the Hostnames creation.`);
cy.get(':nth-child(4) > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root').type(
'cluster-1{enter}',
);
cy.get('#hostnames-helper-text').should('not.exist');
});
it('try to verify config', () => {

4
cypress/e2e/job/preheats/create-preheat.cy.ts
View File

@ -359,12 +359,12 @@ describe('Create preheat', () => {
// Incorrect header value entered.
cy.get('.new_headersValueInput__zn-9E > .MuiInputBase-root').type(value);
// Show header value verification error message.
// Show header value verification error message.
cy.get('.new_headersValueInput__zn-9E > .MuiFormHelperText-root')
.should('be.visible')
.and('have.text', 'Fill in the characters, the length is 1-1000.');
// Show header value verification error message.
// Show header value verification error message.
cy.get('.new_headersValueInput__zn-9E > .MuiFormHelperText-root')
.should('be.visible')
.and('have.text', 'Fill in the characters, the length is 1-1000.');

6
cypress/e2e/seed-peers/seed-peers.cy.ts
View File

@ -183,7 +183,7 @@ describe('Seed peers', () => {
describe('pagination', () => {
it('pagination updates results and page number', () => {
cy.get('#seed-peer-table').should('be.visible');
cy.get('#seed-peer-table').scrollIntoView().should('be.visible');
// Check number of pagination.
cy.get('#seed-peer-pagination > .MuiPagination-ul').children().should('have.length', 5);
@ -470,6 +470,8 @@ describe('Seed peers', () => {
.should('be.visible')
.and('contain', 'Inactive');
cy.get(':nth-child(5) > :nth-child(9) > .MuiButtonBase-root').click();
cy.intercept({ method: 'DELETE', url: '/api/v1/seed-peers/9' }, (req) => {
req.reply({
statusCode: 200,
@ -488,8 +490,6 @@ describe('Seed peers', () => {
},
);
cy.get(':nth-child(5) > :nth-child(9) > .MuiButtonBase-root').click();
cy.get('#deleteSeedPeer').click();
// Delete success message.

3
cypress/fixtures/clusters/cluster/cluster.json
View File

@ -5,7 +5,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", "cluster-2", "cluster-3"]
},
"scheduler_cluster_id": 1,
"seed_peer_cluster_id": 1,

3
cypress/fixtures/clusters/cluster/update-cluster.json
View File

@ -5,7 +5,8 @@
"scopes": {
"idc": "Hangzhou|Shanghai",
"location": "China|Shang|Hai",
"cidrs": ["10.0.0.0/8", "172.16.0.0/12", "192.168.0.0/16", "192.168.20.2"]
"cidrs": ["10.0.0.0/8", "172.16.0.0/12", "192.168.0.0/16", "192.168.20.2"],
"hostnames": ["cluster-1"]
},
"scheduler_cluster_id": 1,
"seed_peer_cluster_id": 1,

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

@ -31,7 +31,8 @@
"scopes": {
"idc": "",
"location": "",
"cidrs": []
"cidrs": [],
"hostnames": []
},
"scheduler_cluster_id": 2,
"seed_peer_cluster_id": 2,
@ -56,7 +57,8 @@
"scopes": {
"idc": "Korea",
"location": "Seoul|Korea",
"cidrs": ["192.168.0.0/16", "172.16.0.0/12"]
"cidrs": ["192.168.0.0/16", "172.16.0.0/12"],
"hostnames": []
},
"scheduler_cluster_id": 3,
"seed_peer_cluster_id": 3,
@ -81,7 +83,8 @@
"scopes": {
"idc": "hz|dl",
"location": "China|Hang|Zhou",
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"]
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"],
"hostnames": []
},
"scheduler_cluster_id": 4,
"seed_peer_cluster_id": 4,
@ -106,7 +109,8 @@
"scopes": {
"idc": "cq|cd",
"location": "China|Chong|Qing",
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"]
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"],
"hostnames": []
},
"scheduler_cluster_id": 5,
"seed_peer_cluster_id": 5,
@ -131,7 +135,8 @@
"scopes": {
"idc": "cq|cd",
"location": "China|Chong|Du",
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"]
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"],
"hostnames": []
},
"scheduler_cluster_id": 6,
"seed_peer_cluster_id": 6,
@ -156,7 +161,8 @@
"scopes": {
"idc": "cd",
"location": "China|Cheng|Du",
"cidrs": ["10.0.0.0/8", "172.16.0.0/19"]
"cidrs": ["10.0.0.0/8", "172.16.0.0/19"],
"hostnames": []
},
"scheduler_cluster_id": 7,
"seed_peer_cluster_id": 7,
@ -181,7 +187,8 @@
"scopes": {
"idc": "js",
"location": "China|Jiang|Su",
"cidrs": ["10.0.0.0/5", "172.16.0.0/19"]
"cidrs": ["10.0.0.0/5", "172.16.0.0/19"],
"hostnames": []
},
"scheduler_cluster_id": 8,
"seed_peer_cluster_id": 8,
@ -206,7 +213,8 @@
"scopes": {
"idc": "hz|hf",
"location": "China|Hang|Zhou",
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"]
"cidrs": ["10.0.0.0/8", "192.168.0.0/16"],
"hostnames": []
},
"scheduler_cluster_id": 9,
"seed_peer_cluster_id": 9,
@ -231,7 +239,8 @@
"scopes": {
"idc": "London",
"location": "London|England",
"cidrs": ["192.168.255.255"]
"cidrs": ["192.168.255.255"],
"hostnames": []
},
"scheduler_cluster_id": 10,
"seed_peer_cluster_id": 10,
@ -256,7 +265,8 @@
"scopes": {
"idc": "Paris",
"location": "Paris|France",
"cidrs": ["192.168.0.0", "10.0.0.0"]
"cidrs": ["192.168.0.0", "10.0.0.0"],
"hostnames": []
},
"scheduler_cluster_id": 11,
"seed_peer_cluster_id": 11,
@ -281,7 +291,8 @@
"scopes": {
"idc": "hz|sh",
"location": "China|Hang|Zhou",
"cidrs": ["10.0.0.0/8", "172.16.0.0/12", "192.168.0.0/16"]
"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,

9
public/icons/cluster/cidrs.svg
View File

@ -1 +1,8 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688107758875" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15284" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M650.9 362.3c-15.6-6.9-38.3-10.3-68.1-10.3h-77v272.8h63.7v-94.2H599c31.1 0 56-8.2 74.6-24.7 18.6-16.5 28-38 28-64.7 0-17.6-4.6-33.4-13.7-47.5-9.1-14-21.5-24.5-37-31.4z m-49.4 108.2h-33.4v-54.3h36.3c23.4 0 35.2 8.8 35.2 26.3-0.1 18.7-12.7 28-38.1 28zM370.6 624.9H433V352.1h-62.4v272.8z m554.2-287.3c-22.6-53.3-54.9-101.3-96-142.4-41.2-41.2-89.1-73.5-142.4-96C631.2 75.8 572.5 64 512 64S392.8 75.8 337.6 99.2c-53.3 22.6-101.3 54.9-142.4 96-41.1 41.1-73.5 89.1-96 142.4C75.8 392.8 64 451.5 64 512s11.8 119.2 35.2 174.4c22.6 53.3 54.9 101.3 96 142.4 41.2 41.2 89.1 73.5 142.4 96C392.8 948.2 451.5 960 512 960s119.2-11.8 174.4-35.2c53.3-22.6 101.3-54.9 142.4-96 41.1-41.1 73.5-89.1 96-142.4C948.2 631.2 960 572.5 960 512s-11.8-119.2-35.2-174.4zM793.9 653.7c0 41.1-33.6 74.7-74.7 74.7H304.7c-41.1 0-74.7-33.6-74.7-74.7V317.9c0-41.1 33.6-74.7 74.7-74.7h414.6c41.1 0 74.7 33.6 74.7 74.7v335.8z" fill="#2E8F79" p-id="15285"></path></svg>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688107758875"
class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15284"
xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
<path
d="M650.9 362.3c-15.6-6.9-38.3-10.3-68.1-10.3h-77v272.8h63.7v-94.2H599c31.1 0 56-8.2 74.6-24.7 18.6-16.5 28-38 28-64.7 0-17.6-4.6-33.4-13.7-47.5-9.1-14-21.5-24.5-37-31.4z m-49.4 108.2h-33.4v-54.3h36.3c23.4 0 35.2 8.8 35.2 26.3-0.1 18.7-12.7 28-38.1 28zM370.6 624.9H433V352.1h-62.4v272.8z m554.2-287.3c-22.6-53.3-54.9-101.3-96-142.4-41.2-41.2-89.1-73.5-142.4-96C631.2 75.8 572.5 64 512 64S392.8 75.8 337.6 99.2c-53.3 22.6-101.3 54.9-142.4 96-41.1 41.1-73.5 89.1-96 142.4C75.8 392.8 64 451.5 64 512s11.8 119.2 35.2 174.4c22.6 53.3 54.9 101.3 96 142.4 41.2 41.2 89.1 73.5 142.4 96C392.8 948.2 451.5 960 512 960s119.2-11.8 174.4-35.2c53.3-22.6 101.3-54.9 142.4-96 41.1-41.1 73.5-89.1 96-142.4C948.2 631.2 960 572.5 960 512s-11.8-119.2-35.2-174.4zM793.9 653.7c0 41.1-33.6 74.7-74.7 74.7H304.7c-41.1 0-74.7-33.6-74.7-74.7V317.9c0-41.1 33.6-74.7 74.7-74.7h414.6c41.1 0 74.7 33.6 74.7 74.7v335.8z"
fill="#2E8F79" p-id="15285"></path>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

9
public/icons/cluster/hostname.svg
View File

@ -1 +1,8 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689135184610" class="icon" viewBox="0 0 1121 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33953" xmlns:xlink="http://www.w3.org/1999/xlink" width="70.0625" height="64"><path d="M1089.8944 766.788267H31.547733a31.069867 31.069867 0 0 0-31.1552 31.0016v186.5216A31.086933 31.086933 0 0 0 31.402667 1015.466667h1058.491733a31.086933 31.086933 0 0 0 31.112533-31.061334V797.841067a31.095467 31.095467 0 0 0-31.112533-31.0528zM187.170133 953.250133H62.651733V828.910933H187.221333v124.3392h-0.0512z m186.743467 0H249.480533V828.910933h124.475734v124.3392h-0.042667z m186.7776 0H436.215467V828.910933h124.475733v124.3392zM1089.8944 20.7872H31.547733A31.086933 31.086933 0 0 0 0.392533 51.797333v186.555734a31.0784 31.0784 0 0 0 31.0528 31.112533h1058.449067a31.086933 31.086933 0 0 0 31.112533-31.061333V51.899733a31.095467 31.095467 0 0 0-31.061333-31.112533h-0.0512zM187.170133 207.249067H62.651733V82.961067H187.221333v124.3392l-0.0512-0.0512z m186.743467 0H249.480533V82.961067h124.475734v124.3392l-0.042667-0.0512z m186.7776 0H436.215467V82.961067h124.475733v124.3392-0.0512z m529.2032 186.513066H31.547733a31.086933 31.086933 0 0 0-31.1552 31.010134v186.564266a31.0784 31.0784 0 0 0 31.0528 31.112534h1058.449067a31.086933 31.086933 0 0 0 31.112533-31.061334V424.874667a31.086933 31.086933 0 0 0-31.061333-31.112534h-0.0512zM187.170133 580.2752H62.651733V455.936H187.221333v124.3392h-0.0512z m186.743467 0H249.480533V455.936h124.475734v124.3392h-0.042667z m186.7776 0H436.215467V455.936h124.475733v124.3392z" p-id="33954" fill="#2E8F79"></path></svg>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689135184610"
class="icon" viewBox="0 0 1121 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33953"
xmlns:xlink="http://www.w3.org/1999/xlink" width="70.0625" height="64">
<path
d="M1089.8944 766.788267H31.547733a31.069867 31.069867 0 0 0-31.1552 31.0016v186.5216A31.086933 31.086933 0 0 0 31.402667 1015.466667h1058.491733a31.086933 31.086933 0 0 0 31.112533-31.061334V797.841067a31.095467 31.095467 0 0 0-31.112533-31.0528zM187.170133 953.250133H62.651733V828.910933H187.221333v124.3392h-0.0512z m186.743467 0H249.480533V828.910933h124.475734v124.3392h-0.042667z m186.7776 0H436.215467V828.910933h124.475733v124.3392zM1089.8944 20.7872H31.547733A31.086933 31.086933 0 0 0 0.392533 51.797333v186.555734a31.0784 31.0784 0 0 0 31.0528 31.112533h1058.449067a31.086933 31.086933 0 0 0 31.112533-31.061333V51.899733a31.095467 31.095467 0 0 0-31.061333-31.112533h-0.0512zM187.170133 207.249067H62.651733V82.961067H187.221333v124.3392l-0.0512-0.0512z m186.743467 0H249.480533V82.961067h124.475734v124.3392l-0.042667-0.0512z m186.7776 0H436.215467V82.961067h124.475733v124.3392-0.0512z m529.2032 186.513066H31.547733a31.086933 31.086933 0 0 0-31.1552 31.010134v186.564266a31.0784 31.0784 0 0 0 31.0528 31.112534h1058.449067a31.086933 31.086933 0 0 0 31.112533-31.061334V424.874667a31.086933 31.086933 0 0 0-31.061333-31.112534h-0.0512zM187.170133 580.2752H62.651733V455.936H187.221333v124.3392h-0.0512z m186.743467 0H249.480533V455.936h124.475734v124.3392h-0.042667z m186.7776 0H436.215467V455.936h124.475733v124.3392z"
p-id="33954" fill="#2E8F79"></path>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

6
public/icons/cluster/hostnames.svg Normal file
View File

@ -0,0 +1,6 @@
<svg t="1708518105042" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6503"
width="200" height="200">
<path
d="M213.333333 426.666667h597.333334V256H213.333333v170.666667zM128 192a21.333333 21.333333 0 0 1 21.333333-21.333333h725.333334a21.333333 21.333333 0 0 1 21.333333 21.333333v298.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-725.333334a21.333333 21.333333 0 0 1-21.333333-21.333333v-298.666667zM213.333333 810.666667h597.333334v-170.666667H213.333333v170.666667z m-85.333333-234.666667a21.333333 21.333333 0 0 1 21.333333-21.333333h725.333334a21.333333 21.333333 0 0 1 21.333333 21.333333v298.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-725.333334a21.333333 21.333333 0 0 1-21.333333-21.333333v-298.666667z m170.666667-256a21.333333 21.333333 0 0 1 42.666666 0v42.666667a21.333333 21.333333 0 0 1-42.666666 0v-42.666667z m21.333333 362.666667a21.333333 21.333333 0 0 0-21.333333 21.333333v42.666667a21.333333 21.333333 0 0 0 42.666666 0v-42.666667a21.333333 21.333333 0 0 0-21.333333-21.333333zM384 320a21.333333 21.333333 0 0 1 42.666667 0v42.666667a21.333333 21.333333 0 0 1-42.666667 0v-42.666667z m21.333333 362.666667a21.333333 21.333333 0 0 0-21.333333 21.333333v42.666667a21.333333 21.333333 0 0 0 42.666667 0v-42.666667a21.333333 21.333333 0 0 0-21.333334-21.333333z m298.666667-384a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-85.333333a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333h85.333333z m21.333333 405.333333a21.333333 21.333333 0 0 0-21.333333-21.333333h-85.333333a21.333333 21.333333 0 0 0-21.333334 21.333333v42.666667a21.333333 21.333333 0 0 0 21.333334 21.333333h85.333333a21.333333 21.333333 0 0 0 21.333333-21.333333v-42.666667z"
p-id="6504" fill="#2E8F79"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

190
src/components/clusters/edit.tsx
View File

@ -34,7 +34,12 @@ export default function EditCluster() {
const [locationError, setLocationError] = useState(false);
const [idcError, setIDCError] = useState(false);
const [cidrsError, setCIDRsError] = useState(false);
const [hostnamesError, setHostnamesError] = useState(false);
const [loadingButton, setLoadingButton] = useState(false);
const cidrsOptions = ['10.0.0.0/8', '172.16.0.0/12', '192.168.0.0/16'];
const [idcHelperText, setIDCHelperText] = useState('Fill in the characters, the length is 0-100.');
const [cidrsHelperText, setCIDRsHelperText] = useState('Fill in the characters, the length is 0-1000.');
const [hostnamesHelperText, setHostnamesHelperText] = useState('Fill in the characters, the length is 1-30.');
const [cluster, setCluster] = useState<getClusterResponse>({
id: 0,
name: '',
@ -43,6 +48,7 @@ export default function EditCluster() {
idc: '',
location: '',
cidrs: [],
hostnames: [],
},
scheduler_cluster_id: 0,
seed_peer_cluster_id: 0,
@ -60,10 +66,6 @@ export default function EditCluster() {
updated_at: '',
is_default: false,
});
const cidrsOptions = ['10.0.0.0/8', '172.16.0.0/12', '192.168.0.0/16'];
const [idcHelperText, setIDCHelperText] = useState('Fill in the characters, the length is 0-100.');
const [cidrsHelperText, setCIDRsHelperText] = useState('Fill in the characters, the length is 0-1000.');
const navigate = useNavigate();
const params = useParams();
@ -73,7 +75,7 @@ export default function EditCluster() {
id,
peer_cluster_config: { load_limit },
scheduler_cluster_config: { candidate_parent_limit, filter_parent_limit },
scopes: { idc, location, cidrs },
scopes: { idc, location, cidrs, hostnames },
seed_peer_cluster_config,
} = cluster;
@ -162,6 +164,7 @@ export default function EditCluster() {
{
name: 'idc',
label: 'IDC',
enterMultiple: true,
scopesFormProps: {
value: cluster?.scopes?.idc ? cluster?.scopes?.idc.split('|') : [] || [],
options: [],
@ -189,7 +192,22 @@ export default function EditCluster() {
placeholder: 'Please enter IDC',
error: idcError,
helperText: idcError ? idcHelperText : '',
endadornment: (
<Tooltip
title={`The cluster needs to serve all peers in the IDC. When the IDC in the peer configuration matches the IDC in the cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. IDC has higher priority than location in the scopes.`}
placement="top"
>
<HelpIcon
color="disabled"
sx={{
width: '0.8rem',
height: '0.8rem',
mr: '0.3rem',
':hover': { color: 'var(--description-color)' },
}}
/>
</Tooltip>
),
onKeyDown: (e: any) => {
if (e.keyCode === 13) {
e.preventDefault();
@ -207,6 +225,7 @@ export default function EditCluster() {
{
name: 'cidrs',
label: 'CIDRs',
enterMultiple: true,
scopesFormProps: {
value: cidrs || [],
options: cidrsOptions,
@ -234,7 +253,24 @@ export default function EditCluster() {
placeholder: 'Please enter CIDRs',
error: cidrsError,
helperText: cidrsError ? cidrsHelperText : '',
endadornment: (
<Tooltip
title={
'The cluster needs to serve all peers in the CIDRs. The advertise IP will be reported in the peer configuration when the peer is started, and if the advertise IP is empty in the peer configuration, peer will automatically get expose IP as advertise IP. When advertise IP of the peer matches the CIDRs in cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. CIDRs has higher priority than IDC in the scopes. CIDRs has higher priority than IDC in the scopes. CIDRs has priority equal to hostname in the scopes.'
}
placement="top"
>
<HelpIcon
color="disabled"
sx={{
width: '0.8rem',
height: '0.8rem',
mr: '0.3rem',
':hover': { color: 'var(--description-color)' },
}}
/>
</Tooltip>
),
onKeyDown: (e: any) => {
if (e.keyCode === 13) {
e.preventDefault();
@ -249,6 +285,71 @@ export default function EditCluster() {
return reg.test(value);
},
},
{
name: 'hostnames',
label: 'Hostnames',
enterMultiple: true,
scopesFormProps: {
value: hostnames,
options: [],
onChange: (_e: any, newValue: any) => {
if (!scopesForm[3].formProps.error) {
setCluster({ ...cluster, scopes: { ...cluster.scopes, hostnames: newValue } });
}
},
onInputChange: (e: any) => {
setHostnamesHelperText('Fill in the characters, the length is 0-1000.');
changeValidate(e.target.value, scopesForm[3]);
},
renderTags: (value: any, getTagProps: any) =>
value.map((option: any, index: any) => (
<Chip size="small" key={index} label={option} {...getTagProps({ index })} />
)),
},
formProps: {
id: 'hostnames',
label: 'Hostnames',
name: 'hostnames',
placeholder: 'Please enter Hostnames',
error: hostnamesError,
helperText: hostnamesError ? hostnamesHelperText : '',
endadornment: (
<Tooltip
title={
'The cluster needs to serve all peers in hostname. The input parameter is the multiple hostname regexes. The hostname will be reported in the peer configuration when the peer is started. When the hostname matches the multiple hostname regexes in the cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. Hostname has higher priority than IDC in the scopes. Hostname has priority equal to CIDRs in the scopes.'
}
placement="top"
>
<HelpIcon
color="disabled"
sx={{
width: '0.8rem',
height: '0.8rem',
mr: '0.3rem',
':hover': { color: 'var(--description-color)' },
}}
/>
</Tooltip>
),
onKeyDown: (e: any) => {
if (e.keyCode === 13) {
e.preventDefault();
}
},
},
syncError: false,
setError: setHostnamesError,
validate: (value: string) => {
const reg = /^(.{1,30})$/;
return reg.test(value);
},
},
];
const configForm = [
@ -435,6 +536,7 @@ export default function EditCluster() {
const data = new FormData(event.currentTarget);
const idcText = event.currentTarget.elements.idc.value;
const cidrsText = event.currentTarget.elements.cidrs.value;
const hostnamesText = event.currentTarget.elements.hostnames.value;
if (idcText) {
setIDCHelperText('Please press ENTER to end the IDC creation.');
@ -452,6 +554,14 @@ export default function EditCluster() {
setCIDRsHelperText('Fill in the characters, the length is 0-100.');
}
if (hostnamesText) {
setHostnamesHelperText('Please press ENTER to end the Hostnames creation.');
setHostnamesError(true);
} else {
setHostnamesError(false);
setHostnamesHelperText('Fill in the characters, the length is 1-30.');
}
informationForm.forEach((item) => {
const value = data.get(item.formProps.name);
item.setError(!item.validate(value as string));
@ -477,7 +587,8 @@ export default function EditCluster() {
!scopesForm.filter((item) => item.syncError).length &&
!configForm.filter((item) => item.syncError).length &&
Boolean(!idcText) &&
Boolean(!cidrsText),
Boolean(!cidrsText) &&
Boolean(!hostnamesText),
);
const formdata = {
@ -494,6 +605,7 @@ export default function EditCluster() {
cidrs: cidrs,
idc: String(idc),
location: String(location),
hostnames: hostnames,
},
seed_peer_cluster_config: {
load_limit: Number(seed_peer_cluster_config.load_limit),
@ -612,7 +724,7 @@ export default function EditCluster() {
{scopesForm.map((item) => {
return (
<Box key={item.formProps.name}>
{item.label === 'CIDRs' ? (
{item.enterMultiple ? (
<Autocomplete
freeSolo
multiple
@ -625,65 +737,7 @@ export default function EditCluster() {
{...params}
InputProps={{
...params.InputProps,
endAdornment: (
<>
{params.InputProps.endAdornment}
<Tooltip
title={
'The cluster needs to serve all peers in the CIDRs. The advertise IP will be reported in the peer configuration when the peer is started, and if the advertise IP is empty in the peer configuration, peer will automatically get expose IP as advertise IP. When advertise IP of the peer matches the CIDRs in cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. CIDRs has higher priority than IDC in the scopes.'
}
placement="top"
>
<HelpIcon
color="disabled"
sx={{
width: '0.8rem',
height: '0.8rem',
mr: '0.3rem',
':hover': { color: 'var(--description-color)' },
}}
/>
</Tooltip>
</>
),
}}
color="success"
{...item.formProps}
/>
)}
/>
) : item.label === 'IDC' ? (
<Autocomplete
freeSolo
multiple
disableClearable
{...item.scopesFormProps}
size="small"
className={styles.idcInput}
renderInput={(params) => (
<TextField
{...params}
InputProps={{
...params.InputProps,
endAdornment: (
<>
{params.InputProps.endAdornment}
<Tooltip
title={`The cluster needs to serve all peers in the IDC. When the IDC in the peer configuration matches the IDC in the cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. IDC has higher priority than location in the scopes.`}
placement="top"
>
<HelpIcon
color="disabled"
sx={{
width: '0.8rem',
height: '0.8rem',
mr: '0.3rem',
':hover': { color: 'var(--description-color)' },
}}
/>
</Tooltip>
</>
),
endAdornment: item.formProps.endadornment,
}}
color="success"
{...item.formProps}

37
src/components/clusters/information.module.css
View File

@ -35,12 +35,26 @@
display: flex;
flex-direction: column;
justify-content: space-between;
width: 65%;
width: 60%;
align-items: stretch;
}
.scopesCard {
width: 50%;
padding-right: 0.6rem;
}
.scopesCard:nth-child(1) {
padding-bottom: 0.6rem !important;
}
.scopesCard:nth-child(2) {
padding-bottom: 0.6rem !important;
}
.scopesContentContainer {
display: flex;
flex-wrap: wrap;
height: 100%;
}
@ -86,12 +100,16 @@
.cidrsContainer {
height: 100%;
padding: 1.4rem;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cidrsTitleWrapper {
padding-bottom: 1rem;
}
.cidrsTitle {
display: flex;
align-items: center;
@ -122,26 +140,29 @@
}
.configRightContainer {
width: 35%;
width: 40%;
max-width: 55rem;
display: flex;
flex-direction: column;
}
.configContainer {
display: flex;
align-items: center;
margin-bottom: 0.6rem;
margin-bottom: 1rem;
}
.configListContainer {
padding-left: 1rem;
padding-right: 1rem;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-around;
}
.configContent {
padding: 1rem;
display: flex;
justify-content: space-between;
margin-top: 0.6rem;
margin-bottom: 0.6rem;
}
.idcDialogContainer {

104
src/components/clusters/information.tsx
View File

@ -12,6 +12,7 @@ export default function Information(props: { cluster: getClusterResponse; isLoad
const { cluster, isLoading } = props;
const [openCIDRs, setOpenCIDRs] = useState(false);
const [openIDC, setOpenIDC] = useState(false);
const [openHostnames, setOpenHostnames] = useState(false);
const [showSchedulerClusterIDCopyIcon, setShowSchedulerClusterIDCopyIcon] = useState(false);
const [showSeedPeerClusterIDCopyIcon, setShowSeedPeerClusterIDCopyIcon] = useState(false);
const [, setCopyToClipboard] = useCopyToClipboard();
@ -220,7 +221,7 @@ export default function Information(props: { cluster: getClusterResponse; isLoad
</Paper>
<Box className={styles.container}>
<Box className={styles.scopesContainer}>
<Grid sx={{ mb: '0.6rem', display: 'flex', alignItems: 'center' }}>
<Grid sx={{ mb: '1rem', display: 'flex', alignItems: 'center' }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="subtitle1" color="text.primary" fontFamily="mabry-bold" sx={{ mr: '0.4rem' }}>
Scopes
@ -235,8 +236,8 @@ export default function Information(props: { cluster: getClusterResponse; isLoad
</Box>
</Grid>
<Paper elevation={0} className={styles.scopesContentContainer}>
<Box sx={{ width: '33.3333%', pr: '0.6rem' }}>
<Paper variant="outlined" className={styles.locationContainer}>
<Box className={styles.scopesCard}>
<Paper variant="outlined" className={styles.cidrsContainer}>
<Box display="flex" justifyContent="space-between">
<Box className={styles.locationTitle}>
<Typography variant="body1" component="div" color="#80828B" sx={{ mr: '0.2rem' }}>
@ -262,7 +263,7 @@ export default function Information(props: { cluster: getClusterResponse; isLoad
</Box>
</Paper>
</Box>
<Box sx={{ width: '33.3333%', pr: '0.6rem' }}>
<Box className={styles.scopesCard}>
<Paper variant="outlined" className={styles.cidrsContainer}>
<Box display="flex" justifyContent="space-between">
<Box className={styles.cidrsTitle}>
@ -355,7 +356,7 @@ export default function Information(props: { cluster: getClusterResponse; isLoad
</Dialog>
</Paper>
</Box>
<Box sx={{ width: '33.3333%', pr: '0.6rem' }}>
<Box className={styles.scopesCard}>
<Paper variant="outlined" className={styles.cidrsContainer}>
<Box display="flex" justifyContent="space-between">
<Box className={styles.cidrsTitle}>
@ -363,7 +364,7 @@ export default function Information(props: { cluster: getClusterResponse; isLoad
CIDRs
</Typography>
<Tooltip
title={`The cluster needs to serve all peers in the CIDRs. The advertise IP will be reported in the peer configuration when the peer is started, and if the advertise IP is empty in the peer configuration, peer will automatically get expose IP as advertise IP. When advertise IP of the peer matches the CIDRs in cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. CIDRs has higher priority than IDC in the scopes.`}
title={`The cluster needs to serve all peers in the CIDRs. The advertise IP will be reported in the peer configuration when the peer is started, and if the advertise IP is empty in the peer configuration, peer will automatically get expose IP as advertise IP. When advertise IP of the peer matches the CIDRs in cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. CIDRs has higher priority than IDC in the scopes. CIDRs has higher priority than IDC in the scopes. CIDRs has priority equal to hostname in the scopes.`}
placement="top"
>
<HelpIcon color="disabled" className={styles.descriptionIcon} />
@ -444,6 +445,97 @@ export default function Information(props: { cluster: getClusterResponse; isLoad
</DialogContent>
</Dialog>
</Box>
<Box className={styles.scopesCard}>
<Paper variant="outlined" className={styles.cidrsContainer}>
<Box display="flex" justifyContent="space-between">
<Box className={styles.cidrsTitle}>
<Typography variant="subtitle1" component="div" color="#80828B" sx={{ mr: '0.2rem' }}>
Hostnames
</Typography>
<Tooltip
title={
'The cluster needs to serve all peers in hostname. The input parameter is the multiple hostname regexes. The hostname will be reported in the peer configuration when the peer is started. When the hostname matches the multiple hostname regexes in the cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. Hostname has higher priority than IDC in the scopes. Hostname has priority equal to CIDRs in the scopes.'
}
placement="top"
>
<HelpIcon color="disabled" className={styles.descriptionIcon} />
</Tooltip>
</Box>
<Box className={styles.scopesIconContainer}>
<Box component="img" className={styles.scopesIcon} src="/icons/cluster/hostnames.svg" />
</Box>
</Box>
{isLoading ? (
<Skeleton sx={{ width: '10rem' }} />
) : (
<Box className={styles.cidrsTags}>
{cluster?.scopes?.hostnames?.length > 0 ? (
<>
<Box sx={{ width: '80%' }}>
<Paper variant="outlined" className={styles.cidrsContent}>
<Tooltip title={cluster?.scopes?.hostnames[0] || '-'} placement="top">
<Typography variant="body2" className={styles.cidrsText}>
{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">
<Typography variant="body2" className={styles.cidrsText}>
{cluster?.scopes?.hostnames[1]}
</Typography>
</Tooltip>
</Paper>
) : (
<></>
)}
</Box>
{cluster?.scopes?.hostnames?.length > 2 ? (
<IconButton
size="small"
id="cidrs"
onClick={() => {
setOpenHostnames(true);
}}
>
<MoreVertIcon sx={{ color: 'var(--button-color)' }} />
</IconButton>
) : (
<></>
)}
</>
) : (
<Typography variant="subtitle1" component="div">
-
</Typography>
)}
</Box>
)}
</Paper>
<Dialog
maxWidth="sm"
fullWidth
open={openHostnames}
onClose={() => {
setOpenHostnames(false);
}}
>
<DialogTitle fontFamily="mabry-bold">Hostnames</DialogTitle>
<DialogContent dividers className={styles.cidrsDialogContainer}>
{cluster?.scopes?.hostnames?.map((item: any, id: any) => (
<Paper key={id} elevation={0} className={styles.cidrsDialogContent}>
<Box component="img" className={styles.cidrsIcon} src="/icons/cluster/hostnames.svg" />
<Tooltip title={item} placement="top">
<Typography variant="body2" component="div" className={styles.cidrsText} alignSelf="center">
{item}
</Typography>
</Tooltip>
</Paper>
))}
</DialogContent>
</Dialog>
</Box>
</Paper>
</Box>
<Box className={styles.configRightContainer}>

185
src/components/clusters/new.tsx
View File

@ -20,6 +20,7 @@ import CancelIcon from '@mui/icons-material/Cancel';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { useNavigate } from 'react-router-dom';
import { createCluster } from '../../lib/api';
import { hostname } from 'os';
export default function NewCluster() {
const [successMessage, setSuccessMessage] = useState(false);
@ -34,12 +35,15 @@ export default function NewCluster() {
const [locationError, setLocationError] = useState(false);
const [idcError, setIDCError] = useState(false);
const [cidrsError, setCIDRsError] = useState(false);
const [hostnamesError, setHostnamesError] = useState(false);
const [cidrs, setCIDRs] = useState([]);
const [idc, setIDC] = useState([]);
const [hostnames, setHostnames] = useState([]);
const [loadingButton, setLoadingButton] = useState(false);
const cidrsOptions = ['10.0.0.0/8', '172.16.0.0/12', '192.168.0.0/16'];
const [idcHelperText, setIDCHelperText] = useState('Fill in the characters, the length is 0-100.');
const [cidrsHelperText, setCIDRsHelperText] = useState('Fill in the characters, the length is 0-1000.');
const [hostnamesHelperText, setHostnamesHelperText] = useState('Fill in the characters, the length is 1-30.');
const navigate = useNavigate();
const informationForm = [
@ -129,6 +133,7 @@ export default function NewCluster() {
{
name: 'idc',
label: 'IDC',
enterMultiple: true,
scopesFormProps: {
value: idc,
options: [],
@ -156,7 +161,24 @@ export default function NewCluster() {
placeholder: 'Please enter IDC',
error: idcError,
helperText: idcError ? idcHelperText : '',
endadornment: (
<>
<Tooltip
title={`The cluster needs to serve all peers in the IDC. When the IDC in the peer configuration matches the IDC in the cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. IDC has higher priority than location in the scopes.`}
placement="top"
>
<HelpIcon
color="disabled"
sx={{
width: '0.8rem',
height: '0.8rem',
mr: '0.3rem',
':hover': { color: 'var(--description-color)' },
}}
/>
</Tooltip>
</>
),
onKeyDown: (e: any) => {
if (e.keyCode === 13) {
e.preventDefault();
@ -175,6 +197,7 @@ export default function NewCluster() {
{
name: 'cidrs',
label: 'CIDRs',
enterMultiple: true,
scopesFormProps: {
value: cidrs,
options: cidrsOptions,
@ -204,6 +227,24 @@ export default function NewCluster() {
error: cidrsError,
helperText: cidrsError ? cidrsHelperText : '',
endadornment: (
<Tooltip
title={
'The cluster needs to serve all peers in the CIDRs. The advertise IP will be reported in the peer configuration when the peer is started, and if the advertise IP is empty in the peer configuration, peer will automatically get expose IP as advertise IP. When advertise IP of the peer matches the CIDRs in cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. CIDRs has higher priority than IDC in the scopes. CIDRs has higher priority than IDC in the scopes. CIDRs has priority equal to hostname in the scopes.'
}
placement="top"
>
<HelpIcon
color="disabled"
sx={{
width: '0.8rem',
height: '0.8rem',
mr: '0.3rem',
':hover': { color: 'var(--description-color)' },
}}
/>
</Tooltip>
),
onKeyDown: (e: any) => {
if (e.keyCode === 13) {
e.preventDefault();
@ -219,6 +260,71 @@ export default function NewCluster() {
return reg.test(value);
},
},
{
name: 'hostnames',
label: 'Hostnames',
enterMultiple: true,
scopesFormProps: {
value: hostnames,
options: [],
onChange: (_e: any, newValue: any) => {
if (!scopesForm[3].formProps.error) {
setHostnames(newValue);
}
},
onInputChange: (e: any) => {
setHostnamesHelperText('Fill in the characters, the length is 1-30.');
changeValidate(e.target.value, scopesForm[3]);
},
renderTags: (value: any, getTagProps: any) =>
value.map((option: any, index: any) => (
<Chip size="small" key={index} label={option} {...getTagProps({ index })} />
)),
},
formProps: {
id: 'hostnames',
label: 'Hostnames',
name: 'hostnames',
placeholder: 'Please enter Hostnames',
error: hostnamesError,
helperText: hostnamesError ? hostnamesHelperText : '',
endadornment: (
<Tooltip
title={
'The cluster needs to serve all peers in hostname. The input parameter is the multiple hostname regexes. The hostname will be reported in the peer configuration when the peer is started. When the hostname matches the multiple hostname regexes in the cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. Hostname has higher priority than IDC in the scopes. Hostname has priority equal to CIDRs in the scopes.'
}
placement="top"
>
<HelpIcon
color="disabled"
sx={{
width: '0.8rem',
height: '0.8rem',
mr: '0.3rem',
':hover': { color: 'var(--description-color)' },
}}
/>
</Tooltip>
),
onKeyDown: (e: any) => {
if (e.keyCode === 13) {
e.preventDefault();
}
},
},
syncError: false,
setError: setHostnamesError,
validate: (value: string) => {
const reg = /^(.{1,30})$/;
return reg.test(value);
},
},
];
const configForm = [
@ -383,6 +489,7 @@ export default function NewCluster() {
const filterParentLimit = event.currentTarget.elements.filterParentLimit.value;
const idcText = event.currentTarget.elements.idc.value;
const cidrsText = event.currentTarget.elements.cidrs.value;
const hostnamesText = event.currentTarget.elements.hostnames.value;
if (idcText) {
setIDCHelperText('Please press ENTER to end the IDC creation.');
@ -397,7 +504,15 @@ export default function NewCluster() {
setCIDRsError(true);
} else {
setCIDRsError(false);
setCIDRsHelperText('Fill in the characters, the length is 0-100.');
setCIDRsHelperText('Fill in the characters, the length is 0-1000.');
}
if (hostnamesText) {
setHostnamesHelperText('Please press ENTER to end the Hostnames creation.');
setHostnamesError(true);
} else {
setHostnamesError(false);
setHostnamesHelperText('Fill in the characters, the length is 1-30.');
}
informationForm.forEach((item) => {
@ -427,7 +542,8 @@ export default function NewCluster() {
!scopesForm.filter((item) => item.syncError).length &&
!configForm.filter((item) => item.syncError).length &&
Boolean(!idcText) &&
Boolean(!cidrsText),
Boolean(!cidrsText) &&
Boolean(!hostnamesText),
);
const formData = {
@ -448,6 +564,7 @@ export default function NewCluster() {
cidrs: cidrs,
idc: idcs,
location: location,
hostnames: hostnames,
},
};
@ -560,7 +677,7 @@ export default function NewCluster() {
{scopesForm.map((item) => {
return (
<Box key={item.formProps.name}>
{item.label === 'CIDRs' ? (
{item.enterMultiple ? (
<Autocomplete
freeSolo
multiple
@ -573,65 +690,7 @@ export default function NewCluster() {
{...params}
InputProps={{
...params.InputProps,
endAdornment: (
<>
{params.InputProps.endAdornment}
<Tooltip
title={
'The cluster needs to serve all peers in the CIDRs. The advertise IP will be reported in the peer configuration when the peer is started, and if the advertise IP is empty in the peer configuration, peer will automatically get expose IP as advertise IP. When advertise IP of the peer matches the CIDRs in cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. CIDRs has higher priority than IDC in the scopes.'
}
placement="top"
>
<HelpIcon
color="disabled"
sx={{
width: '0.8rem',
height: '0.8rem',
mr: '0.3rem',
':hover': { color: 'var(--description-color)' },
}}
/>
</Tooltip>
</>
),
}}
color="success"
{...item.formProps}
/>
)}
/>
) : item.label === 'IDC' ? (
<Autocomplete
freeSolo
multiple
disableClearable
{...item.scopesFormProps}
size="small"
className={styles.cidrsInput}
renderInput={(params) => (
<TextField
{...params}
InputProps={{
...params.InputProps,
endAdornment: (
<>
{params.InputProps.endAdornment}
<Tooltip
title={`The cluster needs to serve all peers in the IDC. When the IDC in the peer configuration matches the IDC in the cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. IDC has higher priority than location in the scopes.`}
placement="top"
>
<HelpIcon
color="disabled"
sx={{
width: '0.8rem',
height: '0.8rem',
mr: '0.3rem',
':hover': { color: 'var(--description-color)' },
}}
/>
</Tooltip>
</>
),
endAdornment: item.formProps.endadornment,
}}
color="success"
{...item.formProps}

1
src/components/clusters/show.tsx
View File

@ -86,6 +86,7 @@ export default function ShowCluster() {
idc: '',
location: '',
cidrs: [],
hostnames: [],
},
scheduler_cluster_id: 0,
seed_peer_cluster_id: 0,

6
src/lib/api.ts
View File

@ -175,6 +175,7 @@ export interface getClustersResponse {
idc: string;
location: string;
cidrs: Array<string>;
hostnames: Array<string>;
};
created_at: string;
is_default: boolean;
@ -197,6 +198,7 @@ export interface getClusterResponse {
idc: string;
location: string;
cidrs: Array<string>;
hostnames: Array<string>;
};
scheduler_cluster_id: number;
seed_peer_cluster_id: number;
@ -239,6 +241,7 @@ interface createClusterRequest {
cidrs: Array<string>;
idc: string;
location: string;
hostnames: Array<string>;
};
}
@ -263,6 +266,7 @@ interface createClusterResponse {
cidrs: Array<string>;
idc: string;
location: string;
hostnames: Array<string>;
};
}
@ -286,6 +290,7 @@ interface updateClusterRequset {
cidrs: Array<string>;
idc: string;
location: string;
hostnames: Array<string>;
};
seed_peer_cluster_config: {
load_limit: number;
@ -313,6 +318,7 @@ interface updateClusterResponse {
cidrs: Array<string>;
idc: string;
location: string;
hostnames: Array<string>;
};
}