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

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

Signed-off-by: zhaoxinxin <1186037180@qq.com>
This commit is contained in:
Zhaoxinxin 2024-04-08 10:55:22 +08:00 committed by GitHub
parent 7f73bda322
commit 200b74a7ff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 323 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,7 +359,7 @@ describe('Cluster', () => {
it('unable to display information', () => {
cy.get('.information_clusterContainer__l8H8p > :nth-child(1) > .MuiTypography-subtitle1').should(
'have.text',
'-',
'cluster-1',
);
cy.get('.information_clusterContainer__l8H8p > :nth-child(3) > .MuiTypography-subtitle1').should(
'have.text',
@ -259,33 +367,45 @@ describe('Cluster', () => {
);
cy.get('.information_clusterContainer__l8H8p > :nth-child(5) > .MuiTypography-subtitle1').should(
'have.text',
'No',
'Yes',
);
cy.get('.information_clusterContainer__l8H8p > :nth-child(7) > .css-70qvj9 > .MuiTypography-root').should(
'have.text',
'0',
'1',
);
cy.get('.information_clusterContainer__l8H8p > :nth-child(9) > .css-70qvj9 > .MuiTypography-root').should(
'have.text',
'0',
'1',
);
});
it('unable to display scopes', () => {
// Show location.
cy.get('.information_locationTextContainer__ZdjKa').should('have.text', '-');
cy.get(':nth-child(2) > .MuiPaper-root > .information_cidrsTags__4sKxa').should('have.text', '-');
// Show idc.
cy.get('#idc').should('not.exist');
cy.get(':nth-child(2) > .MuiPaper-root > .information_cidrsTags__4sKxa').should('have.text', '-');
cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label').should('have.text', 'Total: 0')
cy.get(':nth-child(3) > .MuiPaper-root > .information_cidrsTags__4sKxa').should('have.text', '-');
// Show cidrs.
cy.get('#cidrs').should('not.exist');
cy.get(':nth-child(3) > .MuiPaper-root > .information_cidrsTags__4sKxa').should('have.text', '-');
cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label').should('have.text', 'Total: 0')
// Show hostnames.
cy.get('#hostnames').should('not.exist');
cy.get(':nth-child(4) > .MuiPaper-root > .information_cidrsTags__4sKxa').should('have.text', '-');
cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label').should('have.text', 'Total: 0')
});
it('unable to display config', () => {
cy.get('.MuiPaper-root > :nth-child(1) > .MuiTypography-body1').should('have.text', 0);
cy.get('.MuiPaper-root > :nth-child(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');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2
public/index.html
View File

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

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

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

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

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