diff --git a/src/components/seal-form/seal-cascader.tsx b/src/components/seal-form/seal-cascader.tsx index a8854e4f..7e9f1cc0 100644 --- a/src/components/seal-form/seal-cascader.tsx +++ b/src/components/seal-form/seal-cascader.tsx @@ -35,7 +35,7 @@ const renderTag = (props: any) => { const OptionNodes = (props: { data: any; notFoundContent?: React.ReactNode; - optionNode: React.FC<{ data: any }>; + optionNode?: React.FC<{ data: any }>; }) => { const intl = useIntl(); const { data, optionNode: OptionNode, notFoundContent } = props; @@ -68,11 +68,17 @@ const OptionNodes = (props: { if (data.parent) { return ( - {data.label} + {data.label} ); } - return OptionNode ? : data.label; + return OptionNode ? ( + + ) : ( + + {data.label} + + ); }; const SealCascader: React.FC< @@ -183,17 +189,13 @@ const SealCascader: React.FC< {...rest} placeholder={placeholder} suffixIcon={} - optionRender={ - optionNode - ? (data) => ( - - ) - : undefined - } + optionRender={(data) => ( + + )} tagRender={tagRender ?? renderTag} ref={inputRef} options={children ? null : _options} diff --git a/src/pages/cluster-management/config/yaml-template.ts b/src/pages/cluster-management/config/yaml-template.ts index b22d9211..9eeaa8ec 100644 --- a/src/pages/cluster-management/config/yaml-template.ts +++ b/src/pages/cluster-management/config/yaml-template.ts @@ -1,54 +1,87 @@ -export default `# This is a template for worker_config. - +export const dockerConfig = `# This is a template for worker_config. + # debug: false - + # ========= directories =========== - + # cache_dir: "/var/lib/gpustack/cache" # log_dir: "/var/lib/gpustack/log" -# bin_dir: "/var/lib/gpustack/bin" - + # ========= container & image =========== - + # system_default_container_registry: "docker.io" -# image_name_override: "gpustack/gpustack:main" +# image_name_override: "gpustack/gpustack:dev" # image_repo: "gpustack/gpustack" - -# ========= gateway =========== - -# gateway_mode: "auto" -# gateway_concurrency: 16 -# gateway_kubeconfig: "/var/lib/gpustack/higress/kubeconfig" - + # ========= service & networking =========== + +# worker_port: 10150 +# worker_metrics_port: 10150 +# service_port_range: "40000-40063" +# ray_port_range: "41000-41999" + +# ========= resources =========== + +# system_reserved: +# ram: 2 +# vram: 1 + +# ========= huggingface =========== + +# huggingface_token: +# enable_hf_transfer: false +# enable_hf_xet: false + +# ========= metrics =========== + +# disable_worker_metrics: false + +# ========= proxy =========== + +# proxy_mode: worker +`; + +export const kubernetesConfig = `# This is a template for worker_config. + +# debug: false + +# ========= directories =========== + +# cache_dir: "/var/lib/gpustack/cache" +# log_dir: "/var/lib/gpustack/log" + +# ========= container & image =========== + +# system_default_container_registry: "docker.io" +# image_name_override: "gpustack/gpustack:dev" +# image_repo: "gpustack/gpustack" + +# ========= service & networking =========== + # service_discovery_name: "worker" # namespace: "gpustack-system" # worker_port: 10150 # worker_metrics_port: 10150 # service_port_range: "40000-40063" # ray_port_range: "41000-41999" - + # ========= resources =========== - -# resources: - + +# system_reserved: +# ram: 2 +# vram: 1 + # ========= huggingface =========== - + # huggingface_token: # enable_hf_transfer: false # enable_hf_xet: false - + # ========= metrics =========== - + # disable_worker_metrics: false - -# ========= tools & runtime =========== - -# pipx_path: "/usr/local/bin/pipx" -# tools_download_base_url: - + # ========= proxy =========== - -# proxy_mode: worker -`; + +# proxy_mode: worker`; diff --git a/src/pages/cluster-management/step-forms/advance-config.tsx b/src/pages/cluster-management/step-forms/advance-config.tsx index 9af8a5ab..239ea8a3 100644 --- a/src/pages/cluster-management/step-forms/advance-config.tsx +++ b/src/pages/cluster-management/step-forms/advance-config.tsx @@ -1,14 +1,15 @@ import IconFont from '@/components/icon-font'; import SealInput from '@/components/seal-form/seal-input'; +import { PageAction } from '@/config'; import { PageActionType } from '@/config/types'; import YamlEditor from '@/pages/_components/yaml-editor'; import { useIntl } from '@umijs/max'; import { Button, Form } from 'antd'; -import React, { forwardRef, useImperativeHandle } from 'react'; -import { ProviderType } from '../config'; +import React, { forwardRef, useEffect, useImperativeHandle } from 'react'; +import { ProviderType, ProviderValueMap } from '../config'; import { ClusterFormData as FormData } from '../config/types'; import schema from '../config/worker-config.json'; -import yamlTemplate from '../config/yaml-template'; +import { dockerConfig, kubernetesConfig } from '../config/yaml-template'; const ClusterAdvanceConfig: React.FC<{ action: PageActionType; @@ -18,18 +19,32 @@ const ClusterAdvanceConfig: React.FC<{ const [form] = Form.useForm(); const intl = useIntl(); const editorRef = React.useRef(null); - const [fileContent, setFileContent] = React.useState(yamlTemplate); + const [fileContent, setFileContent] = React.useState(''); useImperativeHandle(ref, () => ({ getYamlValue: () => { return editorRef.current?.getValue(); }, setYamlValue: (values: any) => { - console.log('setYamlValue:', values); - editorRef.current?.setValue(values || yamlTemplate); + editorRef.current?.setValue( + values || + (provider === ProviderValueMap.Kubernetes + ? kubernetesConfig + : dockerConfig) + ); } })); + useEffect(() => { + if (action === PageAction.CREATE) { + setFileContent( + provider === ProviderValueMap.Kubernetes + ? kubernetesConfig + : dockerConfig + ); + } + }, [provider, action]); + return ( <> diff --git a/src/pages/maas-provider/components/provider-models.tsx b/src/pages/maas-provider/components/provider-models.tsx index 26302b39..0baf7be8 100644 --- a/src/pages/maas-provider/components/provider-models.tsx +++ b/src/pages/maas-provider/components/provider-models.tsx @@ -21,8 +21,8 @@ const ProviderModels: React.FC = ({ dataList }) => { const intl = useIntl(); - const head12Items = dataList.slice(0, 8); - const restItems = dataList.slice(8); + const head12Items = dataList.slice(0, 4); + const restItems = dataList.slice(4); const renderModels = (dataList: ProviderModel[]) => { return ( diff --git a/src/pages/maas-provider/index.tsx b/src/pages/maas-provider/index.tsx index 5969de52..934a7763 100644 --- a/src/pages/maas-provider/index.tsx +++ b/src/pages/maas-provider/index.tsx @@ -161,14 +161,14 @@ const MaasProvider: React.FC = () => { { const { onFallbackChange, action } = useFormContext(); const intl = useIntl(); @@ -162,7 +177,6 @@ const TargetsForm = forwardRef((props, ref) => { return !selectedKeys.has(key) || key === currKey; }); - console.log('children', children); return { ...model, @@ -172,13 +186,52 @@ const TargetsForm = forwardRef((props, ref) => { .filter((model) => model.children && model.children.length > 0); }; - const displayRender = (labels: any[]) => { + const displayRender = (labels: any[], option: any) => { return ( - - {labels[0]} - / - {labels[1]} - + + + + {labels[0]} / {labels[1]} + + } + > + + {labels[0]} / {labels[1]} + + + + ); + }; + + const optionRender = (option: any) => { + const { data } = option; + + if (!data.isParent) { + return {data.label}; + } + + if (data.providerType === 'deployments') { + return ( + + + + {intl.formatMessage({ id: 'menu.models.deployment' })} + + + ); + } + + return ( + + + + {data.label} + + ); }; @@ -269,6 +322,7 @@ const TargetsForm = forwardRef((props, ref) => { options={filterOptions(item.value)} showCheckedStrategy="SHOW_CHILD" displayRender={displayRender} + optionNode={optionRender} getPopupContainer={(triggerNode) => triggerNode.parentNode} >: @@ -320,6 +374,7 @@ const TargetsForm = forwardRef((props, ref) => { onChange={(value, options) => handleFallbackChange(value, options)} showCheckedStrategy="SHOW_CHILD" displayRender={displayRender} + optionNode={optionRender} getPopupContainer={(triggerNode) => triggerNode.parentNode} > diff --git a/src/pages/model-routes/hooks/use-target-source-models.tsx b/src/pages/model-routes/hooks/use-target-source-models.tsx index b9ad134c..d7376d77 100644 --- a/src/pages/model-routes/hooks/use-target-source-models.tsx +++ b/src/pages/model-routes/hooks/use-target-source-models.tsx @@ -1,8 +1,6 @@ -import GPUStackLogo from '@/assets/images/small-logo-200x200.png'; import { queryModelsList } from '@/pages/llmodels/apis'; import { ListItem as ModelListItem } from '@/pages/llmodels/config/types'; import { queryMaasProviders } from '@/pages/maas-provider/apis'; -import ProviderLogo from '@/pages/maas-provider/components/provider-logo'; import { MaasProviderItem } from '@/pages/maas-provider/config/types'; import { useIntl } from '@umijs/max'; import _ from 'lodash'; @@ -44,15 +42,11 @@ const useTargetSourceModels = () => { const modelsList = [ { - label: ( - - GPUStack - {intl.formatMessage({ id: 'menu.models.deployment' })} - - ), + label: intl.formatMessage({ id: 'menu.models.deployment' }), value: 'deployments', providerType: 'deployments', - parent: true, + parent: false, + isParent: true, children: _.uniqBy( models.items?.map?.((model: ModelListItem) => ({ label: model.name, @@ -82,14 +76,10 @@ const useTargetSourceModels = () => { })); return { - label: ( - - - {provider.name} - - ), + label: provider.name, value: provider.id, - parent: true, + parent: false, + isParent: true, providerType: provider.config?.type, children: _.uniqBy(children, 'value') };