diff --git a/config/routes.ts b/config/routes.ts index c78b1006..a03af89a 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -199,16 +199,16 @@ export default [ hideInMenu: true, component: './cluster-management/cluster-detail' }, - { - name: 'clusterCreate', - path: '/cluster-management/clusters/create', - key: 'clusterCreate', - icon: 'icon-cluster2-outline', - selectedIcon: 'icon-cluster2-filled', - defaultIcon: 'icon-cluster2-outline', - hideInMenu: true, - component: './cluster-management/cluster-create' - }, + // { + // name: 'clusterCreate', + // path: '/cluster-management/clusters/create', + // key: 'clusterCreate', + // icon: 'icon-cluster2-outline', + // selectedIcon: 'icon-cluster2-filled', + // defaultIcon: 'icon-cluster2-outline', + // hideInMenu: true, + // component: './cluster-management/cluster-create' + // }, { name: 'credentials', path: '/cluster-management/credentials', diff --git a/src/components/seal-table/index.tsx b/src/components/seal-table/index.tsx index 03fb5296..8b67d5d9 100644 --- a/src/components/seal-table/index.tsx +++ b/src/components/seal-table/index.tsx @@ -23,6 +23,8 @@ const Wrapper = styled.div<{ $token: any }>` --ant-table-row-hover-bg: ${(props) => props.$token.rowHoverBg}; --ant-table-header-icon-color: ${(props) => props.$token.tableHeaderIconColor}; + --ant-table-header-icon-hover-color: ${(props) => + props.$token.tableHeaderIconHoverColor}; `; const SealTable: React.FC = ( @@ -152,6 +154,7 @@ const SealTable: React.FC = ( $token={{ ...token.Table, tableHeaderIconColor: token.colorTextQuaternary, + tableHeaderIconHoverColor: token.colorTextSecondary, colorBorderSecondary: token.colorBorderSecondary }} > diff --git a/src/components/seal-table/styles/header.less b/src/components/seal-table/styles/header.less index ba4cda3a..201681f9 100644 --- a/src/components/seal-table/styles/header.less +++ b/src/components/seal-table/styles/header.less @@ -38,6 +38,16 @@ justify-content: center; } + &:hover { + .sorter-header { + .sorter { + .anticon { + color: var(--ant-table-header-icon-hover-color); + } + } + } + } + .sorter-header { display: flex; flex: 1; @@ -55,6 +65,7 @@ .anticon { font-size: 12px; color: var(--ant-table-header-icon-color); + transition: color var(--ant-motion-duration-slow); } .sorter-up { diff --git a/src/config/theme/dark.ts b/src/config/theme/dark.ts index febcecb6..5c681e7c 100644 --- a/src/config/theme/dark.ts +++ b/src/config/theme/dark.ts @@ -25,7 +25,10 @@ export default { cellFontSize: 14, rowSelectedHoverBg: '#1d1d1d', rowHoverBg: '#1d1d1d', - rowSelectedBg: 'transparent' + rowSelectedBg: 'transparent', + headerSortActiveBg: 'transparent', + headerSortHoverBg: 'transparent', + headerBg: 'none' }, Button: { contentFontSizeLG: 14, diff --git a/src/config/theme/light.ts b/src/config/theme/light.ts index 45b21e83..9005465b 100644 --- a/src/config/theme/light.ts +++ b/src/config/theme/light.ts @@ -25,7 +25,10 @@ export default { cellFontSize: 14, rowSelectedHoverBg: 'rgb(249 249 249)', rowHoverBg: 'rgb(249 249 249)', - rowSelectedBg: 'transparent' + rowSelectedBg: 'transparent', + headerSortActiveBg: 'transparent', + headerSortHoverBg: 'transparent', + headerBg: 'none' }, Button: { contentFontSizeLG: 14, diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 55a6e570..b5755822 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -322,12 +322,12 @@ export default (props: any) => { }} modal={{ mask: { - blur: false + blur: true } }} drawer={{ mask: { - blur: false + blur: true } }} > diff --git a/src/pages/backends/config/index.ts b/src/pages/backends/config/index.ts index b02da3fc..2781bb1e 100644 --- a/src/pages/backends/config/index.ts +++ b/src/pages/backends/config/index.ts @@ -211,8 +211,8 @@ export const yamlTemplate = `# ---------------------------------------- # - run_command: optional # - entrypoint: optional # - custom_framework: -# - optional -# - choose from: ${Object.values(GPUDriverMap).join(', ')}, CPU +# - required +# - choose from: ${Object.values(GPUDriverMap).join(', ')}, cpu backend_name: vllm-custom description: this is my custom vllm backend @@ -231,5 +231,5 @@ version_configs: image_name: lm/vllm:test entrypoint: run_command: - custom_framework: + custom_framework: rocm `; diff --git a/src/pages/cluster-management/cluster-create.tsx b/src/pages/cluster-management/cluster-create.tsx index 534821d2..59d3bc82 100644 --- a/src/pages/cluster-management/cluster-create.tsx +++ b/src/pages/cluster-management/cluster-create.tsx @@ -44,7 +44,7 @@ const Content = styled.div` `; const StepsWrapper = styled.div` - width: 240px; + width: 220px; padding-inline: 24px; padding-block: 16px; border-right: 1px solid var(--ant-color-split); @@ -87,6 +87,8 @@ const ClusterCreate: React.FC<{ } as ClusterFormData); const [formValues, setFormValues] = useState>({}); const [submitLoading, setSubmitLoading] = useState(false); + const [isAddWorkerStep, setIsAddWorkerStep] = useState(false); + const [isComplete, setIsComplete] = useState(false); const formRefs: Record = { [moduleMap.BasicForm]: useRef(null), @@ -238,6 +240,12 @@ const ClusterCreate: React.FC<{ }); }; + // add worker or cluster registration step + const handleAddWorker = () => { + setIsAddWorkerStep(true); + onNext(); + }; + /** * this function is used to render the modules in the current step, they are not forms * @returns @@ -261,6 +269,8 @@ const ClusterCreate: React.FC<{ } registrationInfo={registrationInfo} provider={extraData.provider} + onSkip={onClose} + onAddWorker={handleAddWorker} /> ) : null; }); @@ -294,6 +304,7 @@ const ClusterCreate: React.FC<{ const res = await createCluster({ data }); const info = await queryClusterToken({ id: res.id }); setSubmitLoading(false); + setIsComplete(true); setRegistrationInfo({ ...info, cluster_id: res.id @@ -307,23 +318,16 @@ const ClusterCreate: React.FC<{ }; const handleCancel = () => { - // TODO: delete it if created by drawer - // if (clusterSession?.firstAddCluster) { - // setClusterSession({ - // firstAddCluster: false, - // firstAddWorker: false - // }); - // onClose?.(); - // return; - // } onClose?.(); }; return ( - - - + {/* {!isAddWorkerStep && ( + + + + )} */} } > - - {steps[currentStep]?.subTitle || steps[currentStep]?.title} - - - {steps[currentStep]?.description || steps[currentStep]?.content} - -
+ {/* {!isComplete && ( +
+ + {steps[currentStep]?.subTitle || steps[currentStep]?.title} + +
+ )} */} + {!isAddWorkerStep && ( +
+ +
+ )} +
{currentStep === startStep && ( void; } -const ClusterModal: React.FC = ({ open, onClose }) => { +const ClusterModal: React.FC = ({ + open, + onClose, + title +}) => { const handleCancel = () => { onClose(); }; return ( = ({ open, onClose }) => { body: { paddingBlock: 0 }, - wrapper: { width: 900 } + wrapper: { width: 700 } }} footer={false} > diff --git a/src/pages/cluster-management/clusters.tsx b/src/pages/cluster-management/clusters.tsx index c00481c7..75eb2be6 100644 --- a/src/pages/cluster-management/clusters.tsx +++ b/src/pages/cluster-management/clusters.tsx @@ -411,6 +411,9 @@ const Clusters: React.FC = () => { > diff --git a/src/pages/cluster-management/components/cluster-steps.tsx b/src/pages/cluster-management/components/cluster-steps.tsx index ae19f203..bc1d7984 100644 --- a/src/pages/cluster-management/components/cluster-steps.tsx +++ b/src/pages/cluster-management/components/cluster-steps.tsx @@ -1,4 +1,5 @@ import { CheckCircleFilled, CheckCircleOutlined } from '@ant-design/icons'; +import { Steps } from 'antd'; import React from 'react'; import styled from 'styled-components'; @@ -14,6 +15,12 @@ const Box = styled.div` font-size: 14px; margin-bottom: 24px; } + .ant-steps { + --steps-title-font-size: 14px; + .ant-steps-item { + --steps-item-base-width: 20px; + } + } `; const StepItemWrapper = styled.div` @@ -86,19 +93,30 @@ const ClusterSteps: React.FC<{ }> = (props) => { const { steps, currentStep = 0, onChange } = props; + const visibleSteps = steps.filter((step) => !step.hideInSteps); return ( -
- STEP {currentStep + 1} OF {steps.length} -
- {steps.map((item, index) => ( + {/* {visibleSteps.map((item, index) => ( - ))} + ))} */} + ); diff --git a/src/pages/cluster-management/components/footer-buttons.tsx b/src/pages/cluster-management/components/footer-buttons.tsx index defa227e..82975f41 100644 --- a/src/pages/cluster-management/components/footer-buttons.tsx +++ b/src/pages/cluster-management/components/footer-buttons.tsx @@ -58,7 +58,7 @@ const FooterButtons: React.FC = (props) => { )} - {showButtons.skip && ( + {showButtons.done && ( @@ -70,8 +70,7 @@ const FooterButtons: React.FC = (props) => { style={{ minWidth: 88 }} loading={loading} > - {/* {intl.formatMessage({ id: 'common.button.save' })} */} - Create & Continue + {intl.formatMessage({ id: 'common.button.save' })} )}
diff --git a/src/pages/cluster-management/components/success-result.tsx b/src/pages/cluster-management/components/success-result.tsx new file mode 100644 index 00000000..fd12e41a --- /dev/null +++ b/src/pages/cluster-management/components/success-result.tsx @@ -0,0 +1,54 @@ +import { CheckCircleFilled } from '@ant-design/icons'; +import { Button, Flex, Result } from 'antd'; +import React from 'react'; +import { ProviderValueMap } from '../config'; + +const SuccessResult: React.FC<{ + provider: string; + onSkip: () => void; + onAddWorker: () => void; +}> = ({ provider, onSkip, onAddWorker }) => { + const k8sTips = + 'Next, register this Kubernetes cluster. You can also skip this step and register it later from the cluster list.'; + const dockerTips = ( +
+ Next, add worker to this cluster. + + You can also skip this step and add them later from the cluster list. + +
+ ); + + return ( + + } + status="success" + title="Cluster Created Successfully!" + subTitle={provider === ProviderValueMap.Kubernetes ? k8sTips : dockerTips} + extra={[ + + + + + ]} + /> + ); +}; + +export default SuccessResult; diff --git a/src/pages/cluster-management/components/support-gpus.tsx b/src/pages/cluster-management/components/support-gpus.tsx index 9f43d281..758e522a 100644 --- a/src/pages/cluster-management/components/support-gpus.tsx +++ b/src/pages/cluster-management/components/support-gpus.tsx @@ -44,7 +44,6 @@ const Box = styled.div` font-size: 10px; font-weight: 400; background-color: var(--ant-blue-1); - color: var(--ant-color-info); } } `; diff --git a/src/pages/cluster-management/credentials.tsx b/src/pages/cluster-management/credentials.tsx index 24b59f59..24c544e1 100644 --- a/src/pages/cluster-management/credentials.tsx +++ b/src/pages/cluster-management/credentials.tsx @@ -1,4 +1,4 @@ -import { fromClusterCreationAtom } from '@/atoms/clusters'; +import { clusterSessionAtom, fromClusterCreationAtom } from '@/atoms/clusters'; import DeleteModal from '@/components/delete-modal'; import IconFont from '@/components/icon-font'; import { FilterBar } from '@/components/page-tools'; @@ -62,6 +62,7 @@ const Credentials: React.FC = () => { deleteAPI: deleteCredential, contentForDelete: 'menu.clusterManagement.credentials' }); + const [, setClusterSession] = useAtom(clusterSessionAtom); const [isFromCluster, setIsFromCluster] = useAtom(fromClusterCreationAtom); const intl = useIntl(); const navigate = useNavigate(); @@ -109,6 +110,10 @@ const Credentials: React.FC = () => { } else { await createCredential({ data: params }); if (isFromCluster) { + setClusterSession({ + firstAddWorker: false, + firstAddCluster: true + }); navigate(-1); } } diff --git a/src/pages/cluster-management/step-forms/module-registry.ts b/src/pages/cluster-management/step-forms/module-registry.ts index 7657f524..2bd67209 100644 --- a/src/pages/cluster-management/step-forms/module-registry.ts +++ b/src/pages/cluster-management/step-forms/module-registry.ts @@ -1,6 +1,7 @@ import React from 'react'; import AddWorkerStep from '../components/add-worker/add-worker-step'; import ProviderCatalog from '../components/provider-catalog'; +import SuccessResult from '../components/success-result'; import BasicForm from './basic-form'; import WorkerPoolForm from './worker-pools-form'; @@ -8,12 +9,14 @@ export const moduleMap = { BasicForm: 'BasicForm', WorkerPoolForm: 'WorkerPoolForm', ProviderCatalog: 'ProviderCatalog', - AddWorkerStep: 'AddWorkerStep' + AddWorkerStep: 'AddWorkerStep', + SuccessResult: 'SuccessResult' }; export const moduleRegistry: Record> = { [moduleMap.BasicForm]: BasicForm, [moduleMap.WorkerPoolForm]: WorkerPoolForm, [moduleMap.ProviderCatalog]: ProviderCatalog, - [moduleMap.AddWorkerStep]: AddWorkerStep + [moduleMap.AddWorkerStep]: AddWorkerStep, + [moduleMap.SuccessResult]: SuccessResult }; diff --git a/src/pages/cluster-management/step-forms/use-step-list.tsx b/src/pages/cluster-management/step-forms/use-step-list.tsx index 8e04e9d3..ea83f083 100644 --- a/src/pages/cluster-management/step-forms/use-step-list.tsx +++ b/src/pages/cluster-management/step-forms/use-step-list.tsx @@ -15,9 +15,9 @@ export default function useStepList() { return useMemo( () => [ { - title: intl.formatMessage({ id: 'clusters.table.provider' }), - content: 'Choose where your cluster will run.', - subTitle: 'Select Provider', + title: intl.formatMessage({ id: 'clusters.create.selectProvider' }), + content: '', + subTitle: '', description: 'Choose the environment where your cluster will be deployed.', showButtons: (provider?: ProviderType) => { @@ -25,7 +25,8 @@ export default function useStepList() { previous: false, next: true, save: false, - skip: false + skip: false, + done: false }; }, defaultShow: true, @@ -35,7 +36,7 @@ export default function useStepList() { }, { title: intl.formatMessage({ id: 'common.title.config' }), - content: 'Configure your cluster settings.', + content: '', description: 'Set the cluster name, description, or other essential parameters in advanced settings.', showButtons: (provider?: ProviderType) => { @@ -43,7 +44,8 @@ export default function useStepList() { previous: true, next: provider === ProviderValueMap.DigitalOcean, save: provider !== ProviderValueMap.DigitalOcean, - skip: false + skip: false, + done: false }; }, defaultShow: true, @@ -53,13 +55,14 @@ export default function useStepList() { }, { title: intl.formatMessage({ id: 'clusters.button.addNodePool' }), - content: 'Add worker pools to your cluster.', + content: '', showButtons: (provider?: ProviderType) => { return { previous: true, next: false, save: true, - skip: false + skip: false, + done: false }; }, defaultShow: false, @@ -69,37 +72,57 @@ export default function useStepList() { beforeNext: handleBack }, { - title: intl.formatMessage({ id: 'resources.button.create' }), - content: 'The cluster is created successfully.', - description: - 'The cluster is now set up and you can add workers to it. You can also add workers later from the cluster list.', + title: 'Completed', + content: '', + description: '', showButtons: (provider?: ProviderType) => { return { previous: false, next: false, save: false, - skip: true + skip: true, + done: false }; }, defaultShow: false, showForms: [], + showModules: [moduleMap.SuccessResult], + providers: [ProviderValueMap.Docker, ProviderValueMap.Kubernetes] + }, + { + title: intl.formatMessage({ id: 'resources.button.create' }), + content: '', + description: '', + showButtons: (provider?: ProviderType) => { + return { + previous: false, + next: false, + save: false, + skip: false, + done: true + }; + }, + defaultShow: false, + hideInSteps: true, + showForms: [], showModules: [moduleMap.AddWorkerStep], providers: [ProviderValueMap.Docker] }, { title: intl.formatMessage({ id: 'clusters.button.register' }), content: '', - description: - 'Register an existing Kubernetes cluster to manage its workers. You can also register a cluster later from the cluster list.', + description: '', showButtons: (provider?: ProviderType) => { return { previous: false, next: false, save: false, - skip: true + skip: false, + done: true }; }, defaultShow: false, + hideInSteps: true, showForms: [], showModules: [moduleMap.AddWorkerStep], providers: [ProviderValueMap.Kubernetes] diff --git a/src/pages/cluster-management/step-forms/worker-pools-form.tsx b/src/pages/cluster-management/step-forms/worker-pools-form.tsx index 0a123081..69fd6d14 100644 --- a/src/pages/cluster-management/step-forms/worker-pools-form.tsx +++ b/src/pages/cluster-management/step-forms/worker-pools-form.tsx @@ -179,7 +179,7 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => { return (
@@ -189,7 +189,12 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => { // // } left={ - } diff --git a/src/pages/llmodels/forms/index.tsx b/src/pages/llmodels/forms/index.tsx index 8f9cd1f0..11a9a6ad 100644 --- a/src/pages/llmodels/forms/index.tsx +++ b/src/pages/llmodels/forms/index.tsx @@ -414,7 +414,7 @@ const DataForm: React.FC = forwardRef((props, ref) => { } // TODO - // fetchContextLength({ ...params, source }); + fetchContextLength({ ...params, source }); }, [isGGUF, source, localPath, modelScopeModelId, huggingfaceRepoId]); return ( @@ -480,7 +480,8 @@ const DataForm: React.FC = forwardRef((props, ref) => { initialValues?.speculative_config?.ngram_max_match_length || 10 }, ...initialValues, - backend_version: initialValues?.backend_version || null + backend_version: initialValues?.backend_version || null, + max_context_len: initialValues?.max_context_len || 2048 }} > = forwardRef((props, ref) => { placement: 'right' }} minWidth={60} - maxWidth={180} + maxWidth={220} > {data.label} @@ -275,7 +275,7 @@ const ModelItem: React.FC = forwardRef((props, ref) => { placement: 'right' }} minWidth={60} - maxWidth={180} + maxWidth={220} > {data.label} diff --git a/src/pages/playground/style/model-item.less b/src/pages/playground/style/model-item.less index c44557d7..835d0863 100644 --- a/src/pages/playground/style/model-item.less +++ b/src/pages/playground/style/model-item.less @@ -16,7 +16,7 @@ width: 100%; .title { - max-width: min(100%, 180px); + max-width: min(100%, 230px); min-width: min(120px, 32%); } }