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/components/seal-form/wrapper/select.ts
+5
View File
@@ -101,6 +101,11 @@ const SelectWrapper = styled.div`
// top: 20px !important;
// inset-inline-start: ${INPUT_INNER_PADDING}px;
}
&.ant-select-auto-complete {
.ant-select-selection-search {
inset-inline-start: ${INPUT_INNER_PADDING}px;
}
}
&.ant-select-multiple.ant-cascader .ant-select-selection-search {
top: 0 !important;
}
src/locales/en-US/clusters.ts
+6 -1
View File
@@ -32,5 +32,10 @@ export default {
'clusters.create.configBasic': 'Basic Configuration',
'clusters.create.execCommand': 'Execute Command',
'clusters.create.supportedGpu': 'Supported GPUs',
'clusters.create.skipfornow': 'Skip for now'
'clusters.create.skipfornow': 'Skip for now',
'clusters.create.noImages': 'No images available',
'clusters.create.noInstanceTypes': 'No instance types available',
'clusters.create.noRegions': 'No regions available',
'clusters.workerpool.batchSize.desc':
'Number of workers created simultaneously in the Worker pool'
};
src/locales/ja-JP/clusters.ts
+11 -2
View File
@@ -32,7 +32,12 @@ export default {
'clusters.create.configBasic': 'Basic Configuration',
'clusters.create.execCommand': 'Execute Command',
'clusters.create.supportedGpu': 'Supported GPUs',
'clusters.create.skipfornow': 'Skip for now'
'clusters.create.skipfornow': 'Skip for now',
'clusters.create.noImages': 'No images available',
'clusters.create.noInstanceTypes': 'No instance types available',
'clusters.create.noRegions': 'No regions available',
'clusters.workerpool.batchSize.desc':
'Number of workers created simultaneously in the Worker pool'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -69,6 +74,10 @@ export default {
// 31. 'clusters.create.configBasic': 'Basic Configuration',
// 32. 'clusters.create.execCommand': 'Execute Command',
// 33. 'clusters.create.supportedGpu': 'Supported GPUs',
// 34. 'clusters.create.skipfornow': 'Skip for now'
// 34. 'clusters.create.skipfornow': 'Skip for now',
// 35. 'clusters.create.noImages': 'No images available',
// 36. 'clusters.create.noInstanceTypes': 'No instance types available',
// 37. 'clusters.create.noRegions': 'No regions available',
// 38. 'clusters.workerpool.batchSize.desc': 'Number of workers created simultaneously in the Worker pool'
// ========== End of To-Do List ==========
src/locales/ru-RU/clusters.ts
+11 -2
View File
@@ -32,7 +32,12 @@ export default {
'clusters.create.configBasic': 'Basic Configuration',
'clusters.create.execCommand': 'Execute Command',
'clusters.create.supportedGpu': 'Supported GPUs',
'clusters.create.skipfornow': 'Skip for now'
'clusters.create.skipfornow': 'Skip for now',
'clusters.create.noImages': 'No images available',
'clusters.create.noInstanceTypes': 'No instance types available',
'clusters.create.noRegions': 'No regions available',
'clusters.workerpool.batchSize.desc':
'Number of workers created simultaneously in the Worker pool'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -69,6 +74,10 @@ export default {
// 31. 'clusters.create.configBasic': 'Basic Configuration',
// 32. 'clusters.create.execCommand': 'Execute Command',
// 33. 'clusters.create.supportedGpu': 'Supported GPUs',
// 34. 'clusters.create.skipfornow': 'Skip for now'
// 34. 'clusters.create.skipfornow': 'Skip for now',
// 35. 'clusters.create.noImages': 'No images available',
// 36. 'clusters.create.noInstanceTypes': 'No instance types available',
// 37. 'clusters.create.noRegions': 'No regions available',
// 38. 'clusters.workerpool.batchSize.desc': 'Number of workers created simultaneously in the Worker pool'
// ========== End of To-Do List ==========
src/locales/zh-CN/clusters.ts
+5 -1
View File
@@ -32,5 +32,9 @@ export default {
'clusters.create.configBasic': '基本配置',
'clusters.create.execCommand': '执行命令',
'clusters.create.supportedGpu': '支持的 GPU',
'clusters.create.skipfornow': '暂时跳过'
'clusters.create.skipfornow': '暂时跳过',
'clusters.create.noImages': '没有可用的镜像',
'clusters.create.noInstanceTypes': '没有可用的实例类型',
'clusters.create.noRegions': '没有可用的区域',
'clusters.workerpool.batchSize.desc': 'Worker池中同时创建的worker数量'
};
src/pages/cluster-management/cluster-create.tsx
+5 -1
View File
@@ -244,7 +244,11 @@ const ClusterCreate = () => {
return moduleKeys.map((key) => {
const ModuleComponent = moduleRegistry[key];
return ModuleComponent ? (
<ModuleComponent key={key} registrationInfo={registrationInfo} />
<ModuleComponent
key={key}
registrationInfo={registrationInfo}
provider={extraData.provider}
/>
) : null;
});
};
src/pages/cluster-management/clusters.tsx
+11 -46
View File
@@ -17,7 +17,6 @@ import { useAtom } from 'jotai';
import { useEffect, useState } from 'react';
import {
CLUSTERS_API,
createCluster,
createWorkerPool,
deleteCluster,
queryClusterList,
@@ -31,7 +30,7 @@ import AddCluster from './components/add-cluster';
import AddPool from './components/add-pool';
import PoolRows from './components/pool-rows';
import RegisterCluster from './components/register-cluster';
import { ProviderLabelMap, ProviderType, ProviderValueMap } from './config';
import { ProviderType, ProviderValueMap } from './config';
import {
ClusterListItem,
ClusterFormData as FormData,
@@ -50,7 +49,6 @@ const Credentials: React.FC = () => {
handleDeleteBatch,
fetchData,
handlePageChange,
handleTableChange,
handleSearch,
handleNameChange
} = useTableFetch<ListItem>({
@@ -129,40 +127,24 @@ const Credentials: React.FC = () => {
title: string;
provider: ProviderType;
clusterId: number;
clusterData: ClusterListItem | null;
}>({
open: false,
action: PageAction.CREATE,
title: '',
provider: ProviderValueMap.DigitalOcean as ProviderType,
clusterId: 0
clusterId: 0,
clusterData: null
});
const handleAddCluster = (value: string) => {
const label = ProviderLabelMap[value];
const clusterLabel =
value === ProviderValueMap.Custom
? intl.formatMessage({ id: 'clusters.provider.custom' })
: label;
setOpenAddModal({
open: true,
action: PageAction.CREATE,
currentData: undefined,
title: intl.formatMessage(
{ id: 'clusters.add.cluster' },
{ cluster: clusterLabel }
),
provider: value as ProviderType
});
};
const handleAddPool = (row: ListItem) => {
setAddPoolStatus({
open: true,
action: PageAction.CREATE,
title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
provider: row.provider as ProviderType,
clusterId: row.id
clusterId: row.id,
clusterData: row
});
};
@@ -180,27 +162,11 @@ const Credentials: React.FC = () => {
data: params,
id: openAddModal.currentData!.id
});
} else {
await createCluster({ data: params });
}
fetchData();
setOpenAddModal({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: null
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
} catch (error) {
setOpenAddModal({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: null
});
}
} catch (error) {}
};
const handleModalCancel = () => {
@@ -377,10 +343,7 @@ const Credentials: React.FC = () => {
>
<SealTable
rowKey="id"
tableLayout="fixed"
style={{ width: '100%' }}
loadChildren={getWorkerPoolList}
onChange={handleTableChange}
expandedRowKeys={expandedRowKeys}
onExpand={handleExpandChange}
onExpandAll={handleToggleExpandAll}
@@ -444,13 +407,15 @@ const Credentials: React.FC = () => {
open={addPoolStatus.open}
action={addPoolStatus.action}
title={addPoolStatus.title}
clusterData={addPoolStatus.clusterData}
onCancel={() => {
setAddPoolStatus({
open: false,
action: PageAction.CREATE,
title: '',
provider: ProviderValueMap.DigitalOcean as ProviderType,
clusterId: 0
clusterId: 0,
clusterData: null
});
}}
onOk={handleSubmitWorkerPool}
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>
src/pages/cluster-management/credentials.tsx
+4 -4
View File
@@ -16,7 +16,7 @@ import {
updateCredential
} from './apis';
import AddModal from './components/add-credential';
import { ProviderLabelMap, ProviderValueMap } from './config';
import { ProviderLabelMap, ProviderType, ProviderValueMap } from './config';
import {
CredentialFormData as FormData,
CredentialListItem as ListItem
@@ -55,13 +55,13 @@ const Credentials: React.FC = () => {
const intl = useIntl();
const [openModalStatus, setOpenModalStatus] = useState<{
provider: string;
provider: ProviderType;
open: boolean;
action: PageActionType;
title: string;
currentData: ListItem | undefined;
}>({
provider: '',
provider: null,
open: false,
action: PageAction.CREATE,
title: '',
@@ -70,7 +70,7 @@ const Credentials: React.FC = () => {
const handleAddCredential = (item: { key: string; label: string }) => {
setOpenModalStatus({
provider: item.key,
provider: item.key as ProviderType,
open: true,
action: PageAction.CREATE,
title: intl.formatMessage(
src/pages/cluster-management/hooks/use-cluster-columns.tsx
+2 -2
View File
@@ -1,9 +1,9 @@
// columns.ts
import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import { SealColumnProps } from '@/components/seal-table/types';
import StatusTag from '@/components/status-tag';
import { Link, useIntl } from '@umijs/max';
import { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import { useMemo } from 'react';
import {
@@ -25,7 +25,7 @@ const setActionsItems = (row: ClusterListItem) => {
const useClusterColumns = (
handleSelect: (val: string, record: ClusterListItem) => void
): ColumnsType<ClusterListItem & { dataIndex: string; span: number }> => {
): SealColumnProps[] => {
const intl = useIntl();
return useMemo(() => {
src/pages/cluster-management/hooks/use-provider-regions.ts
+8 -4
View File
@@ -130,6 +130,7 @@ export const useProviderRegions = () => {
};
});
setAllInstanceTypes(list);
return list;
} catch (error) {
setAllInstanceTypes([]);
}
@@ -155,18 +156,21 @@ export const useProviderRegions = () => {
};
});
setAllOSImageList(list);
return list;
} catch (error) {}
};
const updateInstanceTypes = (region: string) => {
const sizes = allInstanceTypes.filter((item) =>
const updateInstanceTypes = (region: string, allTypes?: any[]) => {
const sizes = (allTypes || allInstanceTypes).filter((item) =>
item.regions.includes(region)
);
setInstanceTypes(sizes);
};
const updateOSImages = (region: string) => {
const list = allOSImageList.filter((item) => item.regions.includes(region));
const updateOSImages = (region: string, allImages?: any[]) => {
const list = (allImages || allOSImageList).filter((item) =>
item.regions.includes(region)
);
setOSImageList(list);
};
src/pages/cluster-management/step-forms/worker-pools-form.tsx
+2 -3
View File
@@ -100,7 +100,6 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
const gatherFormValues = (results: PromiseSettledResult<any>[]) => {
const resultList = results.map((result: PromiseSettledResult<any>) => {
console.log('gatherFormValues========', results);
if (result.status === 'fulfilled') {
return result.value;
}
@@ -109,8 +108,8 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
}
return {};
});
return resultList;
console.log('gatherFormValues========', resultList);
return resultList.filter((item) => item);
};
const validateFields = async () => {
src/pages/resources/config/index.ts
+3 -1
View File
@@ -17,7 +17,9 @@ export const WorkerStatusMapValue = {
[WorkerStatusMap.unreachable]: 'Unreachable',
[WorkerStatusMap.provisioning]: 'Provisioning',
[WorkerStatusMap.deleting]: 'Deleting',
[WorkerStatusMap.error]: 'Error'
[WorkerStatusMap.error]: 'Error',
[WorkerStatusMap.provisioned]: 'Provisioned',
[WorkerStatusMap.pending]: 'Pending'
};
export const status: any = {