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

style: column wrapper srollable style

Browse Source
This commit is contained in:
jialin
2025-12-13 19:47:48 +08:00
parent b327eedb45
commit 7a0ee6aac4
15 changed files with 81 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/compatible-alert.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ interface CompatibilityAlertProps {
const DivWrapper = styled.div`
position: relative;
padding-inline: 24px;
padding-block: 10px 0;
padding-block: 8px 0;
&:hover {
.close-wrapper {
display: block;
src/pages/llmodels/components/deploy-builtin-modal.tsx
+2 -2
View File
@@ -357,7 +357,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
<ColumnWrapper
styles={{
container: {
paddingTop: 0
paddingBlock: 0
}
}}
footer={
@@ -387,7 +387,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
)
}
style={{
padding: '16px 24px',
padding: '16px 24px 8px',
display: 'flex',
justifyContent: 'flex-end'
}}
src/pages/llmodels/components/deploy-modal.tsx
+2 -2
View File
@@ -41,7 +41,7 @@ const dropFieldsFromForm = [
const resetFields = ['worker_selector', 'env'];
const ModalFooterStyle = {
padding: '16px 24px',
padding: '16px 24px 8px',
display: 'flex',
justifyContent: 'flex-end'
};
@@ -586,7 +586,7 @@ const AddModal: FC<AddModalProps> = (props) => {
<FormWrapper>
<ColumnWrapper
styles={{
container: { paddingTop: 0 }
container: { paddingBlock: 0 }
}}
footer={
<>
src/pages/llmodels/components/update-modal.tsx
+2 -2
View File
@@ -35,7 +35,7 @@ type AddModalProps = {
};
const ModalFooterStyle = {
padding: '16px 24px',
padding: '16px 24px 8px',
display: 'flex',
justifyContent: 'flex-end'
};
@@ -249,7 +249,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
<ColumnWrapper
styles={{
container: {
paddingTop: 0
paddingBlock: 0
}
}}
footer={
src/pages/llmodels/config/backend-parameters/vllm.ts
+1
View File
@@ -490,6 +490,7 @@ const options: BackendParameter[] = [
'quark',
'moe_wna16',
'torchao',
'ascend',
'None'
]
},
src/pages/llmodels/config/index.ts
+1 -1
View File
@@ -375,7 +375,7 @@ export const defaultFormValues = {
gpu_selector: {},
worker_selector: {},
backend_parameters: [],
backend_version: ''
backend_version: null
};
export const getBackendParamsTips = (backend: string) => {
src/pages/llmodels/download/index.tsx
+2 -2
View File
@@ -207,7 +207,7 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
<FormWrapper>
<ColumnWrapper
styles={{
container: { paddingTop: 0 }
container: { paddingBlock: 0 }
}}
footer={
<>
@@ -218,7 +218,7 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
loading: loading
}}
style={{
padding: '16px 24px',
padding: '16px 24px 8px',
display: 'flex',
justifyContent: 'flex-end'
}}
src/pages/llmodels/forms/backend.tsx
+20 -1
View File
@@ -118,6 +118,11 @@ const BackendFields: React.FC = () => {
return option.title;
};
const backendVersionLabelRender = (option: any) => {
console.log('backendVersionLabelRender option:', option);
return option.title;
};
const renderVersionOptions = (values: any[], label: string) => {
if (!values || values.length === 0) {
return null;
@@ -188,7 +193,8 @@ const BackendFields: React.FC = () => {
<SealSelect
allowClear
showSearch
labelRender={labelRender}
allowNull
labelRender={backendVersionLabelRender}
placeholder={intl.formatMessage({
id: 'models.form.backendVersion.holder'
})}
@@ -216,6 +222,19 @@ const BackendFields: React.FC = () => {
</dl>
}
>
{(backendVersions.builtIn.length > 0 ||
backendVersions.custom.length > 0) && (
<Select.Option
key="auto"
value={null}
title={intl.formatMessage({ id: 'common.options.auto' })}
label={intl.formatMessage({
id: 'common.options.auto'
})}
>
{intl.formatMessage({ id: 'common.options.auto' })}
</Select.Option>
)}
{renderVersionOptions(
backendVersions.builtIn,
intl.formatMessage({ id: 'backend.builtin' })
src/pages/llmodels/forms/index.tsx
+4 -6
View File
@@ -95,8 +95,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
onClusterChange,
onOk
} = props;
const { getScrollElementScrollableHeight, osInstance, scrollEventElement } =
useWrapperContext();
const { getScrollElementScrollableHeight } = useWrapperContext();
const { backendOptions, getBackendOptions } = useQueryBackends();
const { getGPUOptionList, gpuOptions, workerLabelOptions } =
useGenerateGPUOptions();
@@ -105,8 +104,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
const [activeKey, setActiveKey] = React.useState<string[]>([]);
const [target, setTarget] = React.useState<string>(TABKeysMap.BASIC);
console.log('scroller instance in form:', osInstance, scrollEventElement);
const segmentOptions = [
{
value: TABKeysMap.BASIC,
@@ -226,7 +223,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
});
form.setFieldsValue({
env: null,
backend_version: '', // don't set default version here, let the user select it
backend_version: null, // don't set default version here, let the user select it
backend_parameters: option.default_backend_param || [],
...updateKVCacheConfig(val, option),
...updateGPUSelector(val)
@@ -454,7 +451,8 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
ngram_max_match_length:
initialValues?.speculative_config?.ngram_max_match_length || 10
},
...initialValues
...initialValues,
backend_version: initialValues?.backend_version || null
}}
>
<BasicForm
src/pages/llmodels/forms/schedule-type.tsx
+1 -29
View File
@@ -4,7 +4,6 @@ import SealCascader from '@/components/seal-form/seal-cascader';
import SealSelect from '@/components/seal-form/seal-select';
import TooltipList from '@/components/tooltip-list';
import useAppUtils from '@/hooks/use-app-utils';
import { useWrapperContext } from '@/pages/_components/column-wrapper/use-wrapper-context';
import { useIntl } from '@umijs/max';
import { Form, InputNumber } from 'antd';
import _ from 'lodash';
@@ -72,8 +71,6 @@ const ScheduleTypeForm: React.FC = () => {
clearCacheFormValues,
initialValues
} = useFormContext();
const { setSScrollContentPaddingBottom, getScrollElementScrollableHeight } =
useWrapperContext();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance();
const scheduleType = Form.useWatch('scheduleType', form);
@@ -82,29 +79,6 @@ const ScheduleTypeForm: React.FC = () => {
['gpu_selector', 'gpus_per_replica'],
form
);
const gpuSekectorElRef = React.useRef<HTMLElement | null>(null);
const setContentPaddingBottom = () => {
if (!gpuSekectorElRef.current) {
gpuSekectorElRef.current = document.querySelector(
'[data-field="gpu_selector.gpu_ids"]'
);
}
if (gpuSekectorElRef.current) {
const { scrollHeight, scrollTop } =
getScrollElementScrollableHeight?.() || {
scrollHeight: 0,
scrollTop: 0
};
const rect = gpuSekectorElRef.current.getBoundingClientRect();
const bottomSpace =
window.innerHeight - rect.bottom + (scrollHeight - scrollTop);
if (bottomSpace < 340) {
setSScrollContentPaddingBottom?.(340 - bottomSpace);
}
}
};
const handleScheduleTypeChange = async (value: string) => {
await new Promise((resolve) => {
@@ -118,11 +92,9 @@ const ScheduleTypeForm: React.FC = () => {
gpu_ids: [],
gpus_per_replica: null
});
requestAnimationFrame(() => {
setContentPaddingBottom();
});
}
};
const handleGpusPerReplicasChange = (val: string | number | null) => {
if (val === null) {
form.setFieldValue(['gpu_selector', 'gpus_per_replica'], null);