diff --git a/src/components/clusters/edit.module.css b/src/components/clusters/edit.module.css
index c529b224..500a590b 100644
--- a/src/components/clusters/edit.module.css
+++ b/src/components/clusters/edit.module.css
@@ -19,7 +19,7 @@
.scopesContainer {
display: flex;
- flex-wrap: wrap;
+ flex-direction: column !important;
}
.configTitle {
@@ -44,6 +44,12 @@
margin-right: 1rem !important;
}
+.idcInput {
+ width: 37rem;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
+
.cidrsInput {
width: 37rem;
margin-top: 1rem;
diff --git a/src/components/clusters/edit.tsx b/src/components/clusters/edit.tsx
index 737bbac5..c0fd2709 100644
--- a/src/components/clusters/edit.tsx
+++ b/src/components/clusters/edit.tsx
@@ -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) => (
+
+ )),
+ },
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: (
-
-
-
- ),
+ 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);
@@ -193,7 +203,7 @@ export default function EditCluster() {
{
name: 'cidrs',
label: 'CIDRs',
- CIDRsFormProps: {
+ scopesFormProps: {
value: cidrs || [],
options: cidrsOptions,
@@ -202,11 +212,15 @@ 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) => ),
+ value.map((option: any, index: any) => (
+
+ )),
},
formProps: {
id: 'cidrs',
@@ -214,7 +228,7 @@ export default function EditCluster() {
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) {
@@ -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 &&
@@ -608,11 +628,20 @@ export default function EditCluster() {
}
/>
+ ) : item.label === 'IDC' ? (
+ }
+ />
) : (
)}
diff --git a/src/components/clusters/index.module.css b/src/components/clusters/index.module.css
index 1a58df75..ef4cf130 100644
--- a/src/components/clusters/index.module.css
+++ b/src/components/clusters/index.module.css
@@ -112,12 +112,7 @@
color: #b1b1b1;
}
-.locationContainer {
- width: 50%;
- padding-right: 0.2rem;
-}
-
-.locationText {
+.descriptionText {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
diff --git a/src/components/clusters/index.tsx b/src/components/clusters/index.tsx
index de0e5dad..4e489ce4 100644
--- a/src/components/clusters/index.tsx
+++ b/src/components/clusters/index.tsx
@@ -63,6 +63,7 @@ export default function Clusters() {
{
id: 0,
name: '',
+ bio: '',
scopes: {
idc: '',
location: '',
@@ -361,26 +362,11 @@ export default function Clusters() {
{clusterIsLoading ? : item.name}
-
-
- IDC :
+
+
+ {clusterIsLoading ? : item.bio || '-'}
-
-
- {clusterIsLoading ? : item.scopes.idc || '-'}
-
-
-
-
-
- Location :
-
-
-
- {clusterIsLoading ? : item.scopes.location || '-'}
-
-
-
+
-
+
@@ -254,128 +255,213 @@ export default function Information(props: { cluster: cluster; isLoading: boolea
-
-
-
-
-
-
-
- Location
-
-
-
-
+
+
+
+
+
+ Location
+
+
+
+
+
+
+
+
-
-
-
+
+
+
{isLoading ? : cluster?.scopes?.location || '-'}
-
-
-
-
-
-
-
-
-
-
-
- IDC
-
-
-
-
-
-
- {isLoading ? : cluster?.scopes?.idc || '-'}
+
+
+
+
+
+
+
+ IDC
+
+
+
+
+
+
+
+
+
+ {cluster?.scopes?.idc ? (
+ <>
+
+
+
+
+ {isLoading ? (
+
+ ) : (
+ cluster?.scopes?.idc.split('|')[0] || '-'
+ )}
+
+
+
+ {cluster?.scopes?.idc.split('|').length > 1 ? (
+
+
+
+ {isLoading ? (
+
+ ) : (
+ cluster?.scopes?.idc.split('|')[1] || '-'
+ )}
+
+
+
+ ) : (
+ <>
+ )}
+
+ {cluster?.scopes?.idc.split('|').length > 2 ? (
+ {
+ setOpenIDC(true);
+ }}
+ >
+
+
+ ) : (
+ <>
+ )}
+
+ ) : (
+
+ -
+
+ )}
+
+
+
+
+
+
+
+
+
+ CIDRs
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
- CIDRs
-
-
-
-
{isLoading ? (
) : (
{cluster?.scopes?.cidrs?.length > 0 ? (
-
-
- {cluster?.scopes?.cidrs[0]}
-
-
- ) : (
- <>-
- )}
- {cluster?.scopes?.cidrs?.length > 1 ? (
- {
- setOpenCIDRs(true);
- }}
- >
-
-
- ) : (
- <>
- )}
-
+ {cluster?.scopes?.cidrs?.length > 1 ? (
+
+
+
+ {cluster?.scopes?.cidrs[1]}
+
+
+
+ ) : (
+ <>
+ )}
+
+ {cluster?.scopes?.cidrs?.length > 2 ? (
+ {
+ setOpenCIDRs(true);
+ }}
+ >
+
+
+ ) : (
+ <>
+ )}
+
+ ) : (
+
+ -
+
+ )}
)}
-
-
+
+
+
@@ -500,7 +586,7 @@ export default function Information(props: { cluster: cluster; isLoading: boolea
-
+
);
diff --git a/src/components/clusters/new.module.css b/src/components/clusters/new.module.css
index c529b224..784c81d0 100644
--- a/src/components/clusters/new.module.css
+++ b/src/components/clusters/new.module.css
@@ -19,7 +19,7 @@
.scopesContainer {
display: flex;
- flex-wrap: wrap;
+ flex-direction: column !important;
}
.configTitle {
@@ -46,8 +46,8 @@
.cidrsInput {
width: 37rem;
- margin-top: 1rem;
- margin-bottom: 1rem;
+ margin-top: 1rem !important;
+ margin-bottom: 1rem !important;
}
.descriptionIcon {
diff --git a/src/components/clusters/new.tsx b/src/components/clusters/new.tsx
index 538ab45e..8dcf2dda 100644
--- a/src/components/clusters/new.tsx
+++ b/src/components/clusters/new.tsx
@@ -36,6 +36,7 @@ export default function NewCluster() {
const [idcError, setIDCError] = useState(false);
const [cidrsError, setCIDRsError] = useState(false);
const [cidrs, setCIDRs] = useState([]);
+ const [idc, setIDC] = useState([]);
const [loadingButton, setLoadingButton] = useState(false);
const cidrsOptions = ['10.0.0.0/8', '172.16.0.0/12', '192.168.0.0/16'];
const navigate = useNavigate();
@@ -94,7 +95,7 @@ export default function NewCluster() {
label: 'Location',
name: 'location',
autoComplete: 'family-name',
- placeholder: 'Please enter Location',
+ placeholder: 'Please enter location',
helperText: locationError ? 'Maximum length is 100' : '',
error: locationError,
@@ -122,30 +123,42 @@ export default function NewCluster() {
},
},
{
+ name: 'idc',
+ label: 'IDC',
+ scopesFormProps: {
+ value: idc,
+ options: [],
+ onChange: (_e: any, newValue: any) => {
+ if (!scopesForm[1].formProps.error) {
+ setIDC(newValue);
+ }
+ },
+
+ onInputChange: (e: any) => {
+ changeValidate(e.target.value, scopesForm[1]);
+ },
+
+ renderTags: (value: any, getTagProps: any) =>
+ value.map((option: any, index: any) => (
+
+ )),
+ },
+
formProps: {
id: 'idc',
label: 'IDC',
name: 'idc',
- autoComplete: 'family-name',
placeholder: 'Please enter IDC',
- helperText: idcError ? 'Maximum length is 100' : '',
error: idcError,
+ helperText: idcError ? 'Maximum length is 100' : '',
- onChange: (e: any) => {
- changeValidate(e.target.value, scopesForm[1]);
- },
-
- InputProps: {
- endAdornment: (
-
-
-
- ),
+ onKeyDown: (e: any) => {
+ if (e.keyCode === 13) {
+ e.preventDefault();
+ }
},
},
+
syncError: false,
setError: setIDCError,
@@ -157,7 +170,7 @@ export default function NewCluster() {
{
name: 'cidrs',
label: 'CIDRs',
- CIDRsFormProps: {
+ scopesFormProps: {
value: cidrs,
options: cidrsOptions,
@@ -172,7 +185,9 @@ export default function NewCluster() {
},
renderTags: (value: any, getTagProps: any) =>
- value.map((option: any, index: any) => ),
+ value.map((option: any, index: any) => (
+
+ )),
},
formProps: {
@@ -181,7 +196,7 @@ export default function NewCluster() {
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) {
@@ -391,7 +406,6 @@ export default function NewCluster() {
const isDefault = event.currentTarget.elements.isDefault.checked;
const description = event.currentTarget.elements.description.value;
const location = event.currentTarget.elements.location.value;
- const idc = event.currentTarget.elements.idc.value;
const seedPeerLoadLimit = event.currentTarget.elements.seedPeerLoadLimit.value;
const peerLoadLimit = event.currentTarget.elements.peerLoadLimit.value;
const numberOfConcurrentDownloadPieces = event.currentTarget.elements.numberOfConcurrentDownloadPieces.value;
@@ -404,10 +418,14 @@ export default function NewCluster() {
item.syncError = !item.validate(value as string);
});
+ const idcs = idc.join('|');
+
scopesForm.forEach((item) => {
- const value = data.get(item.formProps.name);
- item.setError(!item.validate(value as string));
- item.syncError = !item.validate(value as string);
+ if (item.formProps.name === 'location') {
+ const value = data.get(item.formProps.name);
+ item.setError(!item.validate(value as string));
+ item.syncError = !item.validate(value as string);
+ }
});
configForm.forEach((item) => {
@@ -439,7 +457,7 @@ export default function NewCluster() {
is_default: isDefault,
scopes: {
cidrs: cidrs,
- idc: idc,
+ idc: idcs,
location: location,
},
};
@@ -548,7 +566,7 @@ export default function NewCluster() {
-
+
{scopesForm.map((item) => {
return (
@@ -556,7 +574,16 @@ export default function NewCluster() {
}
+ />
+ ) : item.label === 'IDC' ? (
+ }
diff --git a/src/components/clusters/show.tsx b/src/components/clusters/show.tsx
index af4ad366..8b4b7fa1 100644
--- a/src/components/clusters/show.tsx
+++ b/src/components/clusters/show.tsx
@@ -678,7 +678,7 @@ export default function ShowCluster() {
{allSchedulers.length === 0 ? (
- -
+ You don't have scheduler cluster.
) : (
@@ -966,7 +966,7 @@ export default function ShowCluster() {
{allseedPeers.length === 0 ? (
- -
+ You don't have seed peer cluster.
) : (
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 5fc856b7..cb4e8ec0 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -170,6 +170,7 @@ interface getClustersParams {
interface clustersResponse {
id: number;
name: string;
+ bio:string;
scopes: {
idc: string;
location: string;