Skip to content

Commit

Permalink
Add multi idc and change the scopes ui of the show cluster page (#289)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Liam-Zhao
Liam-Zhao committed Sep 11, 2023
1 parent b2cdcad commit 5e1a13d
Show file tree
Hide file tree
Showing 10 changed files with 356 additions and 241 deletions.
8 changes: 7 additions & 1 deletion src/components/clusters/edit.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

.scopesContainer {
display: flex;
flex-wrap: wrap;
flex-direction: column !important;
}

.configTitle {
Expand All @@ -44,6 +44,12 @@
margin-right: 1rem !important;
}

.idcInput {
width: 37rem;
margin-top: 1rem;
margin-bottom: 1rem;
}

.cidrsInput {
width: 37rem;
margin-top: 1rem;
Expand Down
73 changes: 51 additions & 22 deletions src/components/clusters/edit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,34 +157,44 @@ export default function EditCluster() {
},
},
{
name: 'idc',
label: 'IDC',
scopesFormProps: {
value: cluster?.scopes?.idc ? cluster?.scopes?.idc.split('|') : [] || [],
options: [],

onChange: (_e: any, newValue: any) => {
if (!scopesForm[1].formProps.error) {
setCluster({ ...cluster, scopes: { ...cluster.scopes, idc: newValue.join('|') } });
}
},

onInputChange: (e: any) => {
changeValidate(e.target.value, scopesForm[1]);
},

renderTags: (value: any, getTagProps: any) =>
value.map((option: any, index: any) => (
<Chip size="small" key={index} label={option} {...getTagProps({ index })} />
)),
},
formProps: {
id: 'idc',
label: 'IDC',
name: 'idc',
autoComplete: 'family-name',
placeholder: 'Please enter IDC',
value: idc,
helperText: idcError ? 'Maximum length is 100' : '',
error: idcError,
onChange: (e: any) => {
setCluster({ ...cluster, scopes: { ...cluster.scopes, idc: e.target.value } });
changeValidate(e.target.value, scopesForm[1]);
},
InputProps: {
endAdornment: (
<Tooltip
title={
'String 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" className={styles.descriptionIcon} />
</Tooltip>
),
helperText: idcError ? 'Maximum length is 100' : '',

onKeyDown: (e: any) => {
if (e.keyCode === 13) {
e.preventDefault();
}
},
},
syncError: false,
setError: setIDCError,

validate: (value: string) => {
const reg = /^(.{0,100})$/;
return reg.test(value);
Expand All @@ -193,7 +203,7 @@ export default function EditCluster() {
{
name: 'cidrs',
label: 'CIDRs',
CIDRsFormProps: {
scopesFormProps: {
value: cidrs || [],
options: cidrsOptions,

Expand All @@ -202,19 +212,23 @@ export default function EditCluster() {
setCluster({ ...cluster, scopes: { ...cluster.scopes, cidrs: newValue } });
}
},

onInputChange: (e: any) => {
changeValidate(e.target.value, scopesForm[2]);
},

renderTags: (value: any, getTagProps: any) =>
value.map((option: any, index: any) => <Chip key={index} label={option} {...getTagProps({ index })} />),
value.map((option: any, index: any) => (
<Chip size="small" key={index} label={option} {...getTagProps({ index })} />
)),
},
formProps: {
id: 'cidrs',
label: 'CIDRs',
name: 'cidrs',
placeholder: 'Please enter CIDRs',
error: cidrsError,
helperText: cidrsError ? 'Length: (0, 100]' : '',
helperText: cidrsError ? 'Maximum length is 1000' : '',

onKeyDown: (e: any) => {
if (e.keyCode === 13) {
Expand Down Expand Up @@ -466,6 +480,12 @@ export default function EditCluster() {
item.syncError = !item.validate(value as string);
});

scopesForm.forEach((item) => {
const value = data.get(item.formProps.name);
item.setError(!item.validate(value as string));
item.syncError = !item.validate(value as string);
});

const canSubmit = Boolean(
!informationForm.filter((item) => item.syncError).length &&
!scopesForm.filter((item) => item.syncError).length &&
Expand Down Expand Up @@ -608,11 +628,20 @@ export default function EditCluster() {
<Autocomplete
freeSolo
multiple
{...item.CIDRsFormProps}
{...item.scopesFormProps}
size="small"
className={styles.cidrsInput}
renderInput={(params) => <TextField {...params} color="success" {...item.formProps} />}
/>
) : item.label === 'IDC' ? (
<Autocomplete
freeSolo
multiple
{...item.scopesFormProps}
size="small"
className={styles.idcInput}
renderInput={(params) => <TextField {...params} color="success" {...item.formProps} />}
/>
) : (
<TextField size="small" className={styles.textField} color="success" {...item.formProps} />
)}
Expand Down
7 changes: 1 addition & 6 deletions src/components/clusters/index.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,12 +112,7 @@
color: #b1b1b1;
}

.locationContainer {
width: 50%;
padding-right: 0.2rem;
}

.locationText {
.descriptionText {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand Down
24 changes: 5 additions & 19 deletions src/components/clusters/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export default function Clusters() {
{
id: 0,
name: '',
bio: '',
scopes: {
idc: '',
location: '',
Expand Down Expand Up @@ -361,26 +362,11 @@ export default function Clusters() {
{clusterIsLoading ? <Skeleton sx={{ width: '6rem' }} /> : item.name}
</Typography>
<Box display="flex" mt="0.4rem">
<Box display="flex" className={styles.locationContainer}>
<Typography variant="body2" fontFamily="mabry-bold">
IDC&nbsp;:&nbsp;
<Tooltip title={item.bio || '-'} placement="top">
<Typography variant="body2" className={styles.descriptionText}>
{clusterIsLoading ? <Skeleton sx={{ width: '6rem' }} /> : item.bio || '-'}
</Typography>
<Tooltip title={item.scopes.idc || '-'} placement="top">
<Typography variant="body2" className={styles.locationText}>
{clusterIsLoading ? <Skeleton sx={{ width: '6rem' }} /> : item.scopes.idc || '-'}
</Typography>
</Tooltip>
</Box>
<Box display="flex" className={styles.locationContainer}>
<Typography variant="body2" fontFamily="mabry-bold">
Location&nbsp;:&nbsp;
</Typography>
<Tooltip title={item.scopes.location || '-'} placement="top">
<Typography variant="body2" className={styles.locationText}>
{clusterIsLoading ? <Skeleton sx={{ width: '6rem' }} /> : item.scopes.location || '-'}
</Typography>
</Tooltip>
</Box>
</Tooltip>
</Box>
<Box className={styles.creatTimeContainer}>
<Chip
Expand Down
97 changes: 41 additions & 56 deletions src/components/clusters/information.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
.container {
display: flex;
margin-top: 2rem;
padding: 0.6rem;
}

.scopesContainer {
Expand All @@ -46,11 +45,8 @@
}

.locationContainer {
padding: 1.6rem;
margin-right: 0.6rem;
width: 27%;
max-width: 27rem;
min-width: 11rem;
height: 100%;
padding: 1.4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
Expand All @@ -60,15 +56,15 @@
display: flex;
align-items: center;
justify-content: center;
background-color: var(--scopes-icon-color);
border-radius: 0.2rem;
width: 2.4rem;
height: 2.4rem;
background-color: #2e8f791c;
border-radius: 50%;
width: 2rem;
height: 2rem;
}

.scopesIcon {
width: 2rem;
height: 2rem;
width: 1.4rem;
height: 1.4rem;
}

.locationTitle {
Expand All @@ -88,40 +84,10 @@
text-overflow: ellipsis;
}

.idcContainer {
padding: 1.6rem;
margin-right: 0.6rem;
width: 27%;
max-width: 27rem;
min-width: 11rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.idcTitle {
display: flex;
align-items: center;
}

.idcTextContainer {
height: 2rem;
display: flex;
align-items: flex-end;
}

.idcContent {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.cidrsContainer {
padding: 1.6rem;
width: 46%;
height: 100%;
padding: 1.4rem;
display: flex;
max-width: 46rem;
flex-direction: column;
justify-content: space-between;
}
Expand All @@ -135,20 +101,27 @@
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 2rem;
}

.cidrsContent {
height: 1.6rem;
display: flex;
max-width: 100%;
margin-right: 0.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 0.4rem;
padding: 0.4rem;
margin-top: 0.4rem;
padding: 0.5rem;
border-radius: 2rem !important;
}

.cidrsText {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.configRightContainer {
margin-left: 0.6rem;
width: 35%;
max-width: 55rem;
}
Expand All @@ -171,9 +144,10 @@
margin-bottom: 0.4rem;
}

.cidrsDialogContainer {
.idcDialogContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.cidrsDialogContent {
Expand All @@ -188,14 +162,25 @@
margin-left: 0.5rem;
}

.cidrsDialogContainer {
display: flex;
flex-wrap: wrap;
}

.idcDialogContent {
width: 45%;
background-color: #f4f3f6 !important;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0.4rem 0.8rem;
margin-bottom: 0.8rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
}

.cidrsIcon {
width: 1.6rem;
height: 1.6rem;
margin-right: 0.3rem;
}

.cidrsText {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Loading

0 comments on commit 5e1a13d

Please sign in to comment.