root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add pool not work

Browse Source
This commit is contained in:
jialin
2025-09-16 11:26:17 +08:00
parent c467280170
commit f1bb305cbc
18 changed files with 185 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/cluster-management/components/add-credential.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React, { useEffect } from 'react';
import { ProviderValueMap } from '../config';
import { ProviderType, ProviderValueMap } from '../config';
import {
CredentialFormData as FormData,
CredentialListItem as ListItem
@@ -20,7 +20,7 @@ type AddModalProps = {
onOk: (values: FormData) => void;
currentData?: ListItem;
onCancel: () => void;
provider: string; // 'kubernetes' | 'digitalocean';
provider: ProviderType;
};
const AddModal: React.FC<AddModalProps> = ({
title,
src/pages/cluster-management/components/add-pool.tsx
+19 -1
View File
@@ -1,12 +1,14 @@
import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal';
import { PageActionType } from '@/config/types';
import React, { useRef } from 'react';
import React, { useEffect, useRef } from 'react';
import { ProviderType } from '../config';
import {
ClusterListItem,
NodePoolFormData as FormData,
NodePoolListItem as ListItem
} from '../config/types';
import { useProviderRegions } from '../hooks/use-provider-regions';
import PoolForm from './pool-form';
type AddModalProps = {
@@ -15,6 +17,7 @@ type AddModalProps = {
open: boolean;
provider: ProviderType; // 'kubernetes' | 'custom' | 'digitalocean';
currentData?: ListItem | null;
clusterData?: ClusterListItem | null;
onOk: (values: FormData) => void;
onCancel: () => void;
};
@@ -25,8 +28,11 @@ const AddPool: React.FC<AddModalProps> = ({
provider,
onOk,
currentData,
clusterData,
onCancel
}) => {
const { getInstanceTypes, getOSImages, updateInstanceTypes, updateOSImages } =
useProviderRegions();
const formRef = useRef<any>(null);
const handleSubmit = async () => {
@@ -42,6 +48,18 @@ const AddPool: React.FC<AddModalProps> = ({
onCancel();
};
useEffect(() => {
const init = async (clusterData: ClusterListItem) => {
const allTyps = await getInstanceTypes(clusterData.credential_id);
const allImages = await getOSImages(clusterData.credential_id);
updateInstanceTypes(clusterData.region, allTyps);
updateOSImages(clusterData.region, allImages);
};
if (open && clusterData && clusterData.credential_id) {
init(clusterData);
}
}, [clusterData, open]);
return (
<ScrollerModal
title={title}
src/pages/cluster-management/components/add-worker-command.tsx
+35
View File
@@ -0,0 +1,35 @@
import HighlightCode from '@/components/highlight-code';
import { addWorkerGuide } from '@/pages/resources/config';
import React from 'react';
type ViewModalProps = {
registrationInfo: {
token: string;
image: string;
server_url: string;
};
};
const AddWorkerCommand: React.FC<ViewModalProps> = ({ registrationInfo }) => {
const code = React.useMemo(() => {
const commandCode = addWorkerGuide['cuda'];
return commandCode?.registerWorker({
server: registrationInfo.server_url || origin,
tag: '',
image: registrationInfo.image,
token: registrationInfo.token || '${token}',
workerip: '${workerip}'
});
}, [registrationInfo]);
return (
<HighlightCode
theme="dark"
code={code.replace(/\\/g, '')}
copyValue={code}
lang="bash"
></HighlightCode>
);
};
export default AddWorkerCommand;
src/pages/cluster-management/components/add-worker-step.tsx
+12 -2
View File
@@ -1,6 +1,8 @@
import { useIntl } from '@umijs/max';
import React from 'react';
import styled from 'styled-components';
import { ProviderType, ProviderValueMap } from '../config';
import AddWorkerCommand from './add-worker-command';
import RegisterClusterInner from './register-cluster-inner';
import SupportedHardware from './support-hardware';
@@ -11,6 +13,7 @@ const Title = styled.div`
`;
type AddModalProps = {
provider: ProviderType;
registrationInfo: {
token: string;
image: string;
@@ -18,12 +21,19 @@ type AddModalProps = {
cluster_id: number;
};
};
const AddWorkerStep: React.FC<AddModalProps> = ({ registrationInfo }) => {
const AddWorkerStep: React.FC<AddModalProps> = ({
provider,
registrationInfo
}) => {
const intl = useIntl();
return (
<div>
<Title>{intl.formatMessage({ id: 'clusters.create.execCommand' })}</Title>
<RegisterClusterInner registrationInfo={registrationInfo} />
{provider === ProviderValueMap.Kubernetes ? (
<RegisterClusterInner registrationInfo={registrationInfo} />
) : (
<AddWorkerCommand registrationInfo={registrationInfo} />
)}
<Title style={{ marginTop: 32 }}>
{intl.formatMessage({ id: 'clusters.create.supportedGpu' })}
</Title>
src/pages/cluster-management/components/cloud-provider-form.tsx
+8 -1
View File
@@ -55,6 +55,7 @@ interface CloudProviderProps {
}
const NotFoundContent: React.FC<{ loading: boolean }> = ({ loading }) => {
const intl = useIntl();
if (loading) {
return (
<NoContent>
@@ -62,7 +63,11 @@ const NotFoundContent: React.FC<{ loading: boolean }> = ({ loading }) => {
</NoContent>
);
}
return <NoContent>No regions available</NoContent>;
return (
<NoContent>
{intl.formatMessage({ id: 'clusters.create.noRegions' })}
</NoContent>
);
};
const optionRender = (
@@ -159,6 +164,7 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
]}
>
<SealSelect
disabled={action === PageAction.EDIT}
label={intl.formatMessage({ id: 'clusters.credential.title' })}
required
options={credentialList}
@@ -176,6 +182,7 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
>
<SealSelect
showSearch
disabled={action === PageAction.EDIT}
label={intl.formatMessage({ id: 'clusters.workerpool.region' })}
required
options={regions}
src/pages/cluster-management/components/pool-form.tsx
+36 -6
View File
@@ -7,6 +7,7 @@ import CollapsibleContainer, {
} from '@/components/collapse-container';
import IconFont from '@/components/icon-font';
import LabelSelector from '@/components/label-selector';
import AutoComplete from '@/components/seal-form/auto-complete';
import SealInputNumber from '@/components/seal-form/input-number';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
@@ -76,7 +77,21 @@ const DescriptionWrapper = styled.div`
`;
const NotFoundContent = () => {
return <NoContent>No instance type available</NoContent>;
const intl = useIntl();
return (
<NoContent>
{intl.formatMessage({ id: 'clusters.create.noInstanceTypes' })}
</NoContent>
);
};
const NotFoundImageContent = () => {
const intl = useIntl();
return (
<NoContent>
{intl.formatMessage({ id: 'clusters.create.noImages' })}
</NoContent>
);
};
export const RenderInstanceOption = (option: any) => {
@@ -171,7 +186,8 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
}
}, [currentData]);
const labelRender = (data: { label: string; value: string }) => {
const imageLabelRender = (data: { label: string; value: string }) => {
console.log('imageLabelRender========', data);
if (action === PageAction.EDIT) {
return currentData?.image_name || currentData?.os_image;
}
@@ -187,7 +203,8 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
const handleOsImageChange = (value: string) => {
form.setFieldsValue({
image_name: osImageList.find((item) => item.value === value)?.label
image_name:
osImageList.find((item) => item.value === value)?.label || value
});
};
@@ -215,6 +232,14 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
);
};
const filterImageOption = (inputValue: string, option: any) => {
return (
option.label.toLowerCase().includes(inputValue.toLowerCase()) ||
option.value.toLowerCase().includes(inputValue.toLowerCase()) ||
option.description.toLowerCase().includes(inputValue.toLowerCase())
);
};
useImperativeHandle(ref, () => ({
resetFields: () => {
form.resetFields();
@@ -337,6 +362,9 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
]}
>
<SealInputNumber
description={intl.formatMessage({
id: 'clusters.workerpool.batchSize.desc'
})}
label={intl.formatMessage({
id: 'clusters.workerpool.batchSize'
})}
@@ -353,18 +381,20 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
}
]}
>
<SealSelect
<AutoComplete
showSearch
notFoundContent={<NotFoundImageContent />}
onChange={handleOsImageChange}
filterOption={filterImageOption}
optionRender={RenderInstanceOption}
labelRender={labelRender}
labelRender={imageLabelRender}
options={osImageList}
disabled={action === PageAction.EDIT}
label={intl.formatMessage({
id: 'clusters.workerpool.osImage'
})}
required
></SealSelect>
></AutoComplete>
</Form.Item>
<Form.Item<FormData>