fix: cluster worker config issues

src/components/logs-viewer/xterm-viewer.tsx

@@ -95,7 +95,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
 
   const createChunkConnection = async () => {
     chunkRequedtRef.current?.current?.cancel?.();
-    chunkRequedtRef.current = await setChunkRequest({
+    chunkRequedtRef.current = setChunkRequest({
       url,
       params: {
         ...props.params,

src/components/scroller-modal/index.tsx

@@ -3,6 +3,7 @@ import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import { Modal, type ModalProps } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
+import { ScrollerContext } from './use-scroller-context';
 
 const Wrapper = styled.div<{ $maxHeight?: number | string }>`
   max-height: ${({ $maxHeight }) =>
@@ -16,7 +17,7 @@ const ScrollerModal = (
 ) => {
   const scroller = React.useRef<any>(null);
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
-  const { initialize, destroyInstance } = useOverlayScroller();
+  const { initialize, destroyInstance, scrollToBottom } = useOverlayScroller();
 
   React.useEffect(() => {
     if (props.open) {
@@ -68,16 +69,18 @@ const ScrollerModal = (
           : {}
       }}
     >
-      <Wrapper
+      <ScrollerContext.Provider value={{ scrollToBottom }}>
-        ref={scroller}
+        <Wrapper
-        data-overlayscrollbars-initialize
+          ref={scroller}
-        className="overlay-scroller-wrapper"
+          data-overlayscrollbars-initialize
-        $maxHeight={props.maxContentHeight || 500}
+          className="overlay-scroller-wrapper"
-        hidden={false}
+          $maxHeight={props.maxContentHeight || 500}
-        style={{ paddingInline: 24, paddingBlockEnd: 0 }}
+          hidden={false}
-      >
+          style={{ paddingInline: 24, paddingBlockEnd: 0 }}
-        {props.children}
+        >
-      </Wrapper>
+          {props.children}
+        </Wrapper>
+      </ScrollerContext.Provider>
     </Modal>
   );
 };

src/components/scroller-modal/use-scroller-context.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+interface ScrollerContextProps {
+  scrollToBottom: () => void;
+}
+
+export const ScrollerContext = createContext<ScrollerContextProps>({
+  scrollToBottom: () => {}
+});
+
+export const useScrollerContext = () => useContext(ScrollerContext);

src/hooks/use-chunk-request.ts

@@ -166,11 +166,11 @@ const useSetChunkRequest = () => {
     return axiosToken.current;
   };
 
-  const setChunkRequest = async (config: RequestConfig) => {
+  const setChunkRequest = (config: RequestConfig) => {
     requestConfig.current = { ...particalConfig, ...config };
     retryCount.current = totalCount;
     clearTimeout(timer.current);
-    await axiosChunkRequest(requestConfig.current);
+    axiosChunkRequest(requestConfig.current);
     return axiosToken;
   };
 

src/hooks/use-table-fetch.ts

@@ -117,7 +117,7 @@ export default function useTableFetch<T>(
     try {
       const query = _.omit(params || queryParams, ['page', 'perPage']);
 
-      chunkRequedtRef.current = await setChunkRequest({
+      chunkRequedtRef.current = setChunkRequest({
         url: `${API}?${qs.stringify(_.pickBy(query, (val: any) => !!val))}`,
         handler: updateHandler
       });

src/hooks/use-watch-list.ts

@@ -30,7 +30,7 @@ export default function useWatchList<T = Record<string, any>>(API: string) {
   const createWatchChunkRequest = useMemoizedFn(async () => {
     chunkRequestRef.current?.current?.cancel?.();
     try {
-      chunkRequestRef.current = await setChunkRequest({
+      chunkRequestRef.current = setChunkRequest({
         url: `${watchAPI}`,
         params: {},
         handler: updateWatchDataListHandler

src/locales/en-US/clusters.ts

@@ -100,5 +100,7 @@ Same applies to the <span class="bold-text">/opt/dtk</span> directory.`,
   'clusters.addworker.dataVolume.tips':
     'Specify a data storage path for GPUStack.',
   'clusters.table.ip.internal': 'Internal',
-  'clusters.table.ip.external': 'External'
+  'clusters.table.ip.external': 'External',
+  'clusters.form.serverUrl.tips':
+    'Specify the server URL accessible from your cloud provider.'
 };

src/locales/ja-JP/clusters.ts

@@ -100,7 +100,9 @@ Same applies to the <span class="bold-text">/opt/dtk</span> directory.`,
   'clusters.addworker.dataVolume.tips':
     'Specify a data storage path for GPUStack.',
   'clusters.table.ip.internal': 'Internal',
-  'clusters.table.ip.external': 'External'
+  'clusters.table.ip.external': 'External',
+  'clusters.form.serverUrl.tips':
+    'Specify the server URL accessible from your cloud provider.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -185,5 +187,6 @@ Same applies to the <span class="bold-text">/opt/dtk</span> directory.`,
 // 77. 'clusters.addworker.dataVolume': 'GPUStack Data Volume',
 // 78.  'clusters.addworker.dataVolume.tips': 'Specify a data storage path for GPUStack.',
 // 79.  'clusters.table.ip.internal': 'Internal',
-// 80.  'clusters.table.ip.external': 'External'
+// 80.  'clusters.table.ip.external': 'External',
+// 81.  'clusters.form.serverUrl.tips': 'Specify the server URL accessible from your cloud provider.'
 // ========== End of To-Do List ==========

src/locales/ru-RU/clusters.ts

@@ -100,7 +100,9 @@ export default {
   'clusters.addworker.dataVolume.tips':
     'Specify a data storage path for GPUStack.',
   'clusters.table.ip.internal': 'Internal',
-  'clusters.table.ip.external': 'External'
+  'clusters.table.ip.external': 'External',
+  'clusters.form.serverUrl.tips':
+    'Specify the server URL accessible from your cloud provider.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -116,5 +118,6 @@ export default {
 // 8. 'clusters.addworker.dataVolume': 'GPUStack Data Volume',
 // 9. 'clusters.addworker.dataVolume.tips': 'Specify a data storage path for GPUStack.',
 // 10. 'clusters.table.ip.internal': 'Internal',
-// 11. 'clusters.table.ip.external': 'External'
+// 11. 'clusters.table.ip.external': 'External',
+// 12. 'clusters.form.serverUrl.tips': 'Specify the server URL accessible from your cloud provider.'
 // ================================================================

src/locales/zh-CN/clusters.ts

@@ -96,5 +96,6 @@ export default {
   'clusters.addworker.dataVolume': 'GPUStack 数据卷',
   'clusters.addworker.dataVolume.tips': '为 GPUStack 指定数据存储路径。',
   'clusters.table.ip.internal': '内',
-  'clusters.table.ip.external': '外'
+  'clusters.table.ip.external': '外',
+  'clusters.form.serverUrl.tips': '指定可从您的云服务提供商访问的服务器地址。'
 };

src/pages/_components/yaml-editor/index.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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
         });