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

fix: cluster worker config issues

Browse Source
This commit is contained in:
jialin
2025-12-18 17:29:07 +08:00
parent e83bff6923
commit 78368e9979
21 changed files with 112 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/_components/yaml-editor/index.tsx
+4 -2
View File
@@ -18,7 +18,9 @@ const { Text } = Typography;
loader.config({ monaco });
const Container = styled.div`
const Container = styled.div<{ $minHeight: string | number }>`
min-height: ${({ $minHeight }) =>
typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};
position: relative;
border: 1px solid var(--ant-color-border);
border-radius: var(--ant-border-radius);
@@ -151,7 +153,7 @@ const YamlEditor: React.FC<ViewerProps> = forwardRef((props, ref) => {
}, [value]);
return (
<Container>
<Container $minHeight={height}>
<EditorInner
ref={editorRef}
header={renderHeader()}
src/pages/cluster-management/cluster-create.tsx
+1
View File
@@ -224,6 +224,7 @@ const ClusterCreate = () => {
return ModuleComponent ? (
<ModuleComponent
key={key}
actionSource={'page'}
stepList={
extraData.provider === ProviderValueMap.Docker
? DockerStepsFromCluster
src/pages/cluster-management/components/add-cluster.tsx
+1
View File
@@ -56,6 +56,7 @@ const AddCluster: React.FC<AddModalProps> = ({
closeIcon={true}
maskClosable={false}
keyboard={false}
centered={true}
width={680}
footer={
<ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
src/pages/cluster-management/components/add-worker/add-worker-step.tsx
+6 -4
View File
@@ -30,7 +30,7 @@ const Container = styled.div`
* clusterList and onClusterChange are only required when from worker page.
*/
type AddWorkerProps = {
isModal?: boolean;
actionSource?: 'modal' | 'page';
provider: ProviderType;
clusterList?: Global.BaseOption<number, ClusterListItem>[];
clusterLoading?: boolean;
@@ -51,7 +51,7 @@ type AddWorkerProps = {
*/
const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
const {
isModal = false,
actionSource,
registrationInfo,
provider,
clusterList,
@@ -81,10 +81,12 @@ const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
}, [stepList]);
React.useEffect(() => {
if (!isModal) {
// this effect is only triggered when used in cluster create page
console.log('actionSource:', actionSource);
if (actionSource === 'page') {
createModelsChunkRequest();
}
}, [isModal]);
}, [actionSource]);
return (
<AddWorkerContext.Provider
src/pages/cluster-management/components/add-worker/index.tsx
+1 -1
View File
@@ -141,7 +141,7 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
}
>
<AddWorkerStep
isModal={true}
actionSource={'modal'}
stepList={stepList}
provider={provider}
clusterList={clusterList}
src/pages/cluster-management/components/cloud-provider-form.tsx
+3
View File
@@ -193,6 +193,9 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
]}
>
<SealInput.Input
description={intl.formatMessage({
id: 'clusters.form.serverUrl.tips'
})}
label={intl.formatMessage({ id: 'clusters.create.serverUrl' })}
required={true}
trim={true}
src/pages/cluster-management/components/cluster-form.tsx
+25 -4
View File
@@ -1,3 +1,4 @@
import { useScrollerContext } from '@/components/scroller-modal/use-scroller-context';
import SealInput from '@/components/seal-form/seal-input';
import SealTextArea from '@/components/seal-form/seal-textarea';
import { PageActionType } from '@/config/types';
@@ -24,21 +25,41 @@ type AddModalProps = {
};
const ClusterForm: React.FC<AddModalProps> = forwardRef(
({ action, provider, currentData, credentialList, onFinish }, ref) => {
const { scrollToBottom } = useScrollerContext();
const [form] = Form.useForm();
const intl = useIntl();
const [activeKey, setActiveKey] = React.useState<string[]>([]);
const advanceConfigRef = React.useRef<any>(null);
const handleOnCollapseChange = (keys: string | string[]) => {
const handleOnCollapseChange = async (keys: string | string[]) => {
setActiveKey(Array.isArray(keys) ? keys : [keys]);
if (currentData && advanceConfigRef.current) {
if (keys?.includes?.('advanceConfig')) {
await new Promise((resolve) => {
setTimeout(resolve, 500);
});
scrollToBottom();
}
};
const handleOnFinish = (values: FormData) => {
const workerConfig = yaml2Json(advanceConfigRef.current?.getYamlValue());
onFinish({
...values,
worker_config: {
...workerConfig
}
});
};
useEffect(() => {
if (currentData) {
form.setFieldsValue(currentData);
}
}, [currentData]);
useEffect(() => {
if (currentData) {
if (advanceConfigRef.current) {
const workerConfigYaml = json2Yaml(currentData.worker_config || {});
advanceConfigRef.current?.setYamlValue(workerConfigYaml);
@@ -78,7 +99,7 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
<Form
name="clusterForm"
form={form}
onFinish={onFinish}
onFinish={handleOnFinish}
preserve={false}
scrollToFirstError={true}
initialValues={currentData}
@@ -113,7 +134,7 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
)}
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
<SealTextArea
autoSize={{ minRows: 4, maxRows: 6 }}
autoSize={{ minRows: 2, maxRows: 4 }}
label={intl.formatMessage({ id: 'common.table.description' })}
></SealTextArea>
</Form.Item>
src/pages/cluster-management/hooks/use-add-worker-message.ts
+2 -3
View File
@@ -25,7 +25,6 @@ export default function useAddWorkerMessage() {
onCreate: (newItems: any) => {
if (startWatchRef.current) {
newItemsRef.current = newItemsRef.current.concat(newItems);
console.log('newItemsRef.current:', newItemsRef.current);
showAddWorkerMessage();
}
}
@@ -48,13 +47,13 @@ export default function useAddWorkerMessage() {
chunkRequestRef.current?.current?.cancel?.();
resetAddedCount();
try {
chunkRequestRef.current = await setChunkRequest({
chunkRequestRef.current = setChunkRequest({
url: WORKERS_API,
handler: updateHandler
});
timerRef.current = setTimeout(() => {
startWatchRef.current = true;
}, 1000);
}, 5000);
} catch (error) {
// ignore
}
src/pages/cluster-management/step-forms/advance-config.tsx
+22 -3
View File
@@ -1,8 +1,9 @@
import IconFont from '@/components/icon-font';
import SealInput from '@/components/seal-form/seal-input';
import { PageActionType } from '@/config/types';
import YamlEditor from '@/pages/_components/yaml-editor';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { Button, Form } from 'antd';
import React, { forwardRef, useImperativeHandle } from 'react';
import { ProviderType, ProviderValueMap } from '../config';
import { ClusterFormData as FormData } from '../config/types';
@@ -24,7 +25,6 @@ const ClusterAdvanceConfig: React.FC<{
return editorRef.current?.getValue();
},
setYamlValue: (values: any) => {
console.log('setYamlValue:', values, editorRef.current);
editorRef.current?.setValue(values);
}
}));
@@ -42,6 +42,9 @@ const ClusterAdvanceConfig: React.FC<{
]}
>
<SealInput.Input
description={intl.formatMessage({
id: 'clusters.form.serverUrl.tips'
})}
label={intl.formatMessage({ id: 'clusters.create.serverUrl' })}
required={false}
trim={true}
@@ -62,7 +65,23 @@ const ClusterAdvanceConfig: React.FC<{
</Form.Item>
<YamlEditor
ref={editorRef}
title={`${intl.formatMessage({ id: 'clusters.create.workerConfig' })} YAML`}
title={
<span className="flex-center">
<span>{`${intl.formatMessage({ id: 'clusters.create.workerConfig' })} YAML`}</span>
<Button
size="small"
type="link"
target="_blank"
href="https://docs.gpustack.ai/latest/cli-reference/start/#config-file"
>
{intl.formatMessage({ id: 'playground.audio.enablemic.doc' })}{' '}
<IconFont
type="icon-external-link"
className="font-size-14"
></IconFont>
</Button>
</span>
}
value={fileContent}
height={300}
onUpload={(content) => {
src/pages/llmodels/components/view-logs-modal.tsx
+1 -3
View File
@@ -72,11 +72,9 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
if (!props.id) return;
if (open) {
requestRef.current?.current?.cancel?.();
setChunkRequest({
requestRef.current = setChunkRequest({
url: `${MODELS_API}/${props.modelId}/instances`,
handler: updateHandler
}).then((res) => {
requestRef.current = res;
});
} else {
logsViewerRef.current?.abort();
src/pages/llmodels/index.tsx
+1 -1
View File
@@ -201,7 +201,7 @@ const Models: React.FC = () => {
search: search,
categories: categories
};
chunkRequedtRef.current = await setChunkRequest({
chunkRequedtRef.current = setChunkRequest({
url: `${MODELS_API}?${qs.stringify(_.pickBy(query, (val: any) => !!val))}`,
handler: updateHandler
});