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

style: change select to radio group

Browse Source
This commit is contained in:
jialin
2024-10-09 14:08:27 +08:00
parent c041d768b2
commit 2b22481443
12 changed files with 118 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/advance-config.tsx
+56 -7
View File
@@ -1,22 +1,25 @@
import LabelSelector from '@/components/label-selector';
import FieldWrapper from '@/components/label-selector/wrapper';
import ListInput from '@/components/list-input';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import {
Checkbox,
Collapse,
Form,
FormInstance,
Radio,
Select,
Tooltip,
Typography
} from 'antd';
import _ from 'lodash';
import React, { useCallback, useMemo } from 'react';
import { backendOptionsMap, placementStrategyOptions } from '../config';
import { backendOptionsMap } from '../config';
import llamaConfig from '../config/llama-config';
import { FormData } from '../config/types';
import vllmConfig from '../config/vllm-config';
@@ -116,7 +119,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
const children = (
<>
<Form.Item name="scheduleType">
<SealSelect
{/* <SealSelect
label={intl.formatMessage({ id: 'models.form.scheduletype' })}
description={renderSelectTips(scheduleTypeTips)}
options={[
@@ -133,18 +136,46 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
value: 'manual'
}
]}
></SealSelect>
></SealSelect> */}
<FieldWrapper
label={intl.formatMessage({ id: 'models.form.scheduletype' })}
description={renderSelectTips(scheduleTypeTips)}
>
<Radio.Group style={{ marginTop: 5 }}>
<Radio value="auto">
{intl.formatMessage({
id: 'models.form.scheduletype.auto'
})}
</Radio>
<Radio value="manual">
{intl.formatMessage({
id: 'models.form.scheduletype.manual'
})}
</Radio>
</Radio.Group>
</FieldWrapper>
</Form.Item>
{scheduleType === 'auto' && (
<>
<Form.Item<FormData> name="placement_strategy">
<SealSelect
{/* <SealSelect
label={intl.formatMessage({
id: 'resources.form.placementStrategy'
})}
options={placementStrategyOptions}
description={renderSelectTips(placementStrategyTips)}
></SealSelect>
></SealSelect> */}
<FieldWrapper
label={intl.formatMessage({
id: 'resources.form.placementStrategy'
})}
description={renderSelectTips(placementStrategyTips)}
>
<Radio.Group style={{ marginTop: 5 }}>
<Radio value="spread">Spread</Radio>
<Radio value="binpack">Binpack</Radio>
</Radio.Group>
</FieldWrapper>
</Form.Item>
<Form.Item<FormData>
name="worker_selector"
@@ -219,7 +250,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
</Form.Item>
)}
<Form.Item name="backend">
<SealSelect
{/* <SealSelect
label={intl.formatMessage({ id: 'models.form.backend' })}
options={[
{
@@ -234,7 +265,25 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
}
]}
disabled={action === PageAction.EDIT}
></SealSelect>
></SealSelect> */}
<FieldWrapper
label={intl.formatMessage({ id: 'models.form.backend' })}
>
<Radio.Group>
<Radio
value={backendOptionsMap.llamaBox}
disabled={!isGGUF || action === PageAction.EDIT}
>
llama-box(llama.cpp)
</Radio>
<Radio
value={backendOptionsMap.vllm}
disabled={isGGUF || action === PageAction.EDIT}
>
vLLM
</Radio>
</Radio.Group>
</FieldWrapper>
</Form.Item>
<Form.Item<FormData> name="backend_parameters">
<ListInput
src/pages/llmodels/components/update-modal.tsx
+17 -26
View File
@@ -72,33 +72,21 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
setGpuOptions(list);
};
const initFormValue = () => {
if (action === PageAction.CREATE && open) {
form.setFieldsValue({
source: modelSourceMap.huggingface_value,
replicas: 1
});
}
if (action === PageAction.EDIT && open) {
const result = setSourceRepoConfigValue(
props.data?.source || '',
props.data
);
const initFormValue = useMemo(() => {
const result = setSourceRepoConfigValue(
props.data?.source || '',
props.data
);
form.setFieldsValue({
...result.values,
..._.omit(props.data, result.omits),
scheduleType: props.data?.gpu_selector ? 'manual' : 'auto',
gpu_selector: props.data?.gpu_selector
? `${props.data?.gpu_selector.worker_name}-${props.data?.gpu_selector.gpu_name}-${props.data?.gpu_selector.gpu_index}`
: null
});
}
};
useEffect(() => {
initFormValue();
}, [open]);
return {
...result.values,
..._.omit(props.data, result.omits),
scheduleType: props.data?.gpu_selector ? 'manual' : 'auto',
gpu_selector: props.data?.gpu_selector
? `${props.data?.gpu_selector.worker_name}-${props.data?.gpu_selector.gpu_name}-${props.data?.gpu_selector.gpu_index}`
: null
};
}, [props.data]);
useEffect(() => {
setIsGGUF(props.data?.backend === backendOptionsMap.llamaBox);
@@ -306,6 +294,9 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
padding: 'var(--ant-modal-content-padding)',
paddingBlock: 0
}}
initialValues={{
...initFormValue
}}
>
<Form.Item<FormData>
name="name"
src/pages/llmodels/components/view-logs-modal.tsx
+4 -1
View File
@@ -41,7 +41,10 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
<Modal
title={
<span className="flex flex-center">
<span> {intl.formatMessage({ id: 'common.button.viewlog' })}</span>
<span style={{ fontWeight: 'var(--font-weight-bold)' }}>
{' '}
{intl.formatMessage({ id: 'common.button.viewlog' })}
</span>
</span>
}
open={open}