style: backend list styles
This commit is contained in:
jialin
@@ -1,318 +0,0 @@
|
||||
import IconFont from '@/components/icon-font';
|
||||
import LabelSelector from '@/components/label-selector';
|
||||
import CheckboxField from '@/components/seal-form/checkbox-field';
|
||||
import SealSelect from '@/components/seal-form/seal-select';
|
||||
import TooltipList from '@/components/tooltip-list';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Collapse, Form, FormInstance } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import {
|
||||
getBackendParamsTips,
|
||||
modelCategories,
|
||||
placementStrategyOptions,
|
||||
ScheduleValueMap
|
||||
} from '../config';
|
||||
import BackendParameters, {
|
||||
backendOptionsMap
|
||||
} from '../config/backend-parameters';
|
||||
import { useFormContext } from '../config/form-context';
|
||||
import { FormData } from '../config/types';
|
||||
import Backend from '../forms/backend';
|
||||
import BackendParametersList from '../forms/backend-parameters-list';
|
||||
import Performance from '../forms/performance';
|
||||
import dataformStyles from '../style/data-form.less';
|
||||
|
||||
interface AdvanceConfigProps {
|
||||
isGGUF: boolean;
|
||||
form: FormInstance;
|
||||
gpuOptions: Array<any>;
|
||||
action: PageActionType;
|
||||
source: string;
|
||||
}
|
||||
|
||||
const placementStrategyTips = [
|
||||
{
|
||||
title: 'Spread',
|
||||
tips: 'resources.form.spread.tips'
|
||||
},
|
||||
{
|
||||
title: 'Binpack',
|
||||
tips: 'resources.form.binpack.tips'
|
||||
}
|
||||
];
|
||||
|
||||
const AdvanceConfig = () => {
|
||||
const intl = useIntl();
|
||||
const form = Form.useFormInstance();
|
||||
const wokerSelector = Form.useWatch('worker_selector', form);
|
||||
const EnviromentVars = Form.useWatch('env', form);
|
||||
const scheduleType = Form.useWatch('scheduleType', form);
|
||||
const backend = Form.useWatch('backend', form);
|
||||
const backend_parameters = Form.useWatch('backend_parameters', form);
|
||||
const categories = Form.useWatch('categories', form);
|
||||
const backend_version = Form.useWatch('backend_version', form);
|
||||
const placement_strategy = Form.useWatch('placement_strategy', form);
|
||||
const gpuSelectorIds = Form.useWatch(['gpu_selector', 'gpu_ids'], form);
|
||||
const worker_selector = Form.useWatch('worker_selector', form);
|
||||
const { onValuesChange, gpuOptions, source, isGGUF } = useFormContext();
|
||||
|
||||
const paramsConfig = useMemo(() => {
|
||||
return _.get(BackendParameters, backend, []);
|
||||
}, [backend]);
|
||||
|
||||
const backendParamsTips = useMemo(() => {
|
||||
return getBackendParamsTips(backend);
|
||||
}, [backend]);
|
||||
|
||||
const handleWorkerLabelsChange = useCallback(
|
||||
(labels: Record<string, any>) => {
|
||||
form.setFieldValue('worker_selector', labels);
|
||||
},
|
||||
[]
|
||||
);
|
||||
const handleEnviromentVarsChange = useCallback(
|
||||
(labels: Record<string, any>) => {
|
||||
form.setFieldValue('env', labels);
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleBackendParametersChange = useCallback((list: string[]) => {
|
||||
form.setFieldValue('backend_parameters', list);
|
||||
}, []);
|
||||
|
||||
const handleBackendParametersOnBlur = () => {
|
||||
onValuesChange?.({}, form.getFieldsValue());
|
||||
};
|
||||
|
||||
const handleDeleteBackendParameters = (index: number) => {
|
||||
onValuesChange?.({}, form.getFieldsValue());
|
||||
};
|
||||
|
||||
const onSelectorChange = (field: string, allowEmpty?: boolean) => {
|
||||
const workerSelector = form.getFieldValue(field);
|
||||
// check if all keys have values
|
||||
const hasEmptyValue = _.some(_.keys(workerSelector), (k: string) => {
|
||||
return !workerSelector[k];
|
||||
});
|
||||
if (!hasEmptyValue || allowEmpty) {
|
||||
onValuesChange?.({}, form.getFieldsValue());
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectorOnBlur = () => {
|
||||
onSelectorChange('worker_selector');
|
||||
};
|
||||
|
||||
const handleDeleteWorkerSelector = (index: number) => {
|
||||
onValuesChange?.({}, form.getFieldsValue());
|
||||
};
|
||||
|
||||
const handleEnvSelectorOnBlur = () => {
|
||||
onSelectorChange('env', true);
|
||||
};
|
||||
|
||||
const handleDeleteEnvSelector = (index: number) => {
|
||||
onValuesChange?.({}, form.getFieldsValue());
|
||||
};
|
||||
|
||||
const collapseItems = useMemo(() => {
|
||||
const children = (
|
||||
<>
|
||||
<Form.Item<FormData> name="categories">
|
||||
<SealSelect
|
||||
allowNull
|
||||
label={intl.formatMessage({
|
||||
id: 'models.form.categories'
|
||||
})}
|
||||
options={modelCategories}
|
||||
></SealSelect>
|
||||
</Form.Item>
|
||||
<Backend></Backend>
|
||||
{scheduleType === ScheduleValueMap.Auto && (
|
||||
<>
|
||||
<Form.Item<FormData> name="placement_strategy">
|
||||
<SealSelect
|
||||
label={intl.formatMessage({
|
||||
id: 'resources.form.placementStrategy'
|
||||
})}
|
||||
options={placementStrategyOptions}
|
||||
description={
|
||||
<TooltipList list={placementStrategyTips}></TooltipList>
|
||||
}
|
||||
></SealSelect>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData>
|
||||
name="worker_selector"
|
||||
rules={[
|
||||
({ getFieldValue }) => ({
|
||||
validator(rule, value) {
|
||||
if (
|
||||
getFieldValue('scheduleType') === ScheduleValueMap.Auto &&
|
||||
_.keys(value).length > 0
|
||||
) {
|
||||
if (_.some(_.keys(value), (k: string) => !value[k])) {
|
||||
return Promise.reject(
|
||||
intl.formatMessage(
|
||||
{
|
||||
id: 'common.validate.value'
|
||||
},
|
||||
{
|
||||
name: intl.formatMessage({
|
||||
id: 'models.form.selector'
|
||||
})
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
})
|
||||
]}
|
||||
>
|
||||
<LabelSelector
|
||||
label={intl.formatMessage({
|
||||
id: 'resources.form.workerSelector'
|
||||
})}
|
||||
labels={wokerSelector}
|
||||
onChange={handleWorkerLabelsChange}
|
||||
onBlur={handleSelectorOnBlur}
|
||||
onDelete={handleDeleteWorkerSelector}
|
||||
description={
|
||||
<span>
|
||||
{intl.formatMessage({
|
||||
id: 'resources.form.workerSelector.description'
|
||||
})}
|
||||
</span>
|
||||
}
|
||||
></LabelSelector>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
|
||||
<BackendParametersList></BackendParametersList>
|
||||
<Form.Item<FormData> name="env">
|
||||
<LabelSelector
|
||||
label={intl.formatMessage({
|
||||
id: 'models.form.env'
|
||||
})}
|
||||
labels={EnviromentVars}
|
||||
btnText={intl.formatMessage({ id: 'common.button.vars' })}
|
||||
onBlur={handleEnvSelectorOnBlur}
|
||||
onDelete={handleDeleteEnvSelector}
|
||||
onChange={handleEnviromentVarsChange}
|
||||
></LabelSelector>
|
||||
</Form.Item>
|
||||
|
||||
{scheduleType === ScheduleValueMap.Auto &&
|
||||
[backendOptionsMap.vllm, backendOptionsMap.ascendMindie].includes(
|
||||
backend
|
||||
) && (
|
||||
<div style={{ paddingBottom: 22, paddingLeft: 10 }}>
|
||||
<Form.Item<FormData>
|
||||
name="distributed_inference_across_workers"
|
||||
valuePropName="checked"
|
||||
style={{ padding: '0 10px', marginBottom: 0 }}
|
||||
noStyle
|
||||
>
|
||||
<CheckboxField
|
||||
description={intl.formatMessage({
|
||||
id: 'models.form.distribution.tips'
|
||||
})}
|
||||
label={intl.formatMessage({
|
||||
id: 'resources.form.enableDistributedInferenceAcrossWorkers'
|
||||
})}
|
||||
></CheckboxField>
|
||||
</Form.Item>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ paddingBottom: 22, paddingLeft: 10 }}>
|
||||
<Form.Item<FormData>
|
||||
name="restart_on_error"
|
||||
valuePropName="checked"
|
||||
style={{ padding: '0 10px', marginBottom: 0 }}
|
||||
noStyle
|
||||
>
|
||||
<CheckboxField
|
||||
description={intl.formatMessage({
|
||||
id: 'models.form.restart.onerror.tips'
|
||||
})}
|
||||
label={intl.formatMessage({
|
||||
id: 'models.form.restart.onerror'
|
||||
})}
|
||||
></CheckboxField>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
return [
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<span
|
||||
style={{ fontWeight: 'var(--font-weight-medium)' }}
|
||||
className="font-size-14"
|
||||
>
|
||||
Performance
|
||||
</span>
|
||||
),
|
||||
forceRender: true,
|
||||
children: <Performance></Performance>
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
label: (
|
||||
<span
|
||||
style={{ fontWeight: 'var(--font-weight-medium)' }}
|
||||
className="font-size-14"
|
||||
>
|
||||
{intl.formatMessage({ id: 'resources.form.advanced' })}
|
||||
</span>
|
||||
),
|
||||
forceRender: true,
|
||||
children
|
||||
}
|
||||
];
|
||||
}, [
|
||||
form,
|
||||
source,
|
||||
intl,
|
||||
gpuOptions,
|
||||
paramsConfig,
|
||||
scheduleType,
|
||||
wokerSelector,
|
||||
backend,
|
||||
backend_parameters,
|
||||
isGGUF,
|
||||
categories,
|
||||
backend_version,
|
||||
placement_strategy,
|
||||
gpuSelectorIds,
|
||||
EnviromentVars,
|
||||
worker_selector
|
||||
]);
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
expandIconPosition="start"
|
||||
bordered={false}
|
||||
ghost
|
||||
accordion
|
||||
destroyOnHidden={false}
|
||||
className={dataformStyles['advanced-collapse']}
|
||||
expandIcon={({ isActive }) => (
|
||||
<IconFont
|
||||
type="icon-down"
|
||||
rotate={isActive ? 0 : -90}
|
||||
style={{ fontSize: '14px' }}
|
||||
></IconFont>
|
||||
)}
|
||||
items={collapseItems}
|
||||
></Collapse>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvanceConfig;
|
||||
@@ -1,280 +0,0 @@
|
||||
import SealInput from '@/components/seal-form/seal-input';
|
||||
import SealSelect from '@/components/seal-form/seal-select';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import useAppUtils from '@/hooks/use-app-utils';
|
||||
import CollapsePanel from '@/pages/_components/collapse-panel';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Form } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React, { forwardRef, useImperativeHandle } from 'react';
|
||||
import { excludeFields, ScheduleValueMap, sourceOptions } from '../config';
|
||||
import { backendOptionsMap } from '../config/backend-parameters';
|
||||
import { FormContext } from '../config/form-context';
|
||||
import {
|
||||
BackendOption,
|
||||
DeployFormKey,
|
||||
FormData,
|
||||
SourceType
|
||||
} from '../config/types';
|
||||
import { generateGPUIds } from '../config/utils';
|
||||
import CatalogFrom from '../forms/catalog';
|
||||
import LocalPathSource from '../forms/local-path-source';
|
||||
import OnlineSource from '../forms/online-source';
|
||||
import { useGenerateGPUOptions } from '../hooks/use-form-initial-values';
|
||||
// import AdvanceConfig from './advance-config';
|
||||
import AdvanceConfig from '../forms/advance-config';
|
||||
import Performance from '../forms/performance';
|
||||
|
||||
interface DataFormProps {
|
||||
initialValues?: any;
|
||||
ref?: any;
|
||||
source: SourceType;
|
||||
action: PageActionType;
|
||||
isGGUF: boolean;
|
||||
formKey: DeployFormKey;
|
||||
sourceDisable?: boolean;
|
||||
backendOptions: BackendOption[];
|
||||
sourceList?: Global.BaseOption<string>[];
|
||||
clusterList: Global.BaseOption<number>[];
|
||||
fields?: string[];
|
||||
onValuesChange?: (changedValues: any, allValues: any) => void;
|
||||
onSourceChange?: (value: string) => void;
|
||||
onOk: (values: FormData) => void;
|
||||
onBackendChange?: (value: string) => void;
|
||||
}
|
||||
|
||||
const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
|
||||
const {
|
||||
action,
|
||||
isGGUF,
|
||||
formKey,
|
||||
initialValues,
|
||||
sourceDisable = true,
|
||||
backendOptions = [],
|
||||
sourceList,
|
||||
clusterList = [],
|
||||
fields = ['source'],
|
||||
onSourceChange,
|
||||
onValuesChange,
|
||||
onOk
|
||||
} = props;
|
||||
const { getGPUOptionList, gpuOptions } = useGenerateGPUOptions();
|
||||
const { getRuleMessage } = useAppUtils();
|
||||
const [form] = Form.useForm();
|
||||
const intl = useIntl();
|
||||
const [activeKey, setActiveKey] = React.useState<string[]>([]);
|
||||
|
||||
const handleSumit = () => {
|
||||
form.submit();
|
||||
};
|
||||
|
||||
// voxbox is not support multi gpu
|
||||
const updateGPUSelector = (backend: string) => {
|
||||
const gpuids = form.getFieldValue(['gpu_selector', 'gpu_ids']) || [];
|
||||
|
||||
if (backend === backendOptionsMap.voxBox && gpuids.length > 0) {
|
||||
return {
|
||||
gpu_selector: { gpu_ids: [gpuids[0]] }
|
||||
};
|
||||
}
|
||||
return {
|
||||
gpu_selector: { gpu_ids: gpuids }
|
||||
};
|
||||
};
|
||||
|
||||
const handleBackendChange = async (val: string, option: BackendOption) => {
|
||||
form.setFieldsValue({
|
||||
env: null,
|
||||
backend_version: option.default_version || '',
|
||||
backend_parameters: option.default_backend_param || [],
|
||||
...updateGPUSelector(val)
|
||||
});
|
||||
props.onBackendChange?.(val);
|
||||
};
|
||||
|
||||
// generate the data is available for the backend including the gpu_ids
|
||||
const handleOk = async (formdata: FormData) => {
|
||||
let data = _.cloneDeep(formdata);
|
||||
data.categories = data.categories ? [data.categories] : [];
|
||||
const gpuSelector = generateGPUIds(data);
|
||||
const allValues = {
|
||||
..._.omit(data, ['scheduleType']),
|
||||
...gpuSelector
|
||||
};
|
||||
|
||||
onOk(allValues);
|
||||
};
|
||||
|
||||
const handleOnSourceChange = (val: string) => {
|
||||
onSourceChange?.(val);
|
||||
};
|
||||
|
||||
const handleClusterChange = (value: number) => {
|
||||
getGPUOptionList({ clusterId: value });
|
||||
};
|
||||
|
||||
const handleOnValuesChange = async (changedValues: any, allValues: any) => {
|
||||
const fieldName = Object.keys(changedValues)[0];
|
||||
|
||||
if (excludeFields.includes(fieldName)) {
|
||||
return;
|
||||
}
|
||||
onValuesChange?.(changedValues, allValues);
|
||||
};
|
||||
|
||||
const handleOnCollapseChange = (keys: string | string[]) => {
|
||||
setActiveKey(Array.isArray(keys) ? keys : [keys]);
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => {
|
||||
return {
|
||||
form: form,
|
||||
submit: handleSumit,
|
||||
resetFields: (fields: any[]) => {
|
||||
form.resetFields(fields);
|
||||
},
|
||||
setFieldsValue: (values: FormData) => {
|
||||
form.setFieldsValue(values);
|
||||
},
|
||||
setFieldValue: (name: string, value: any) => {
|
||||
form.setFieldValue(name, value);
|
||||
},
|
||||
getFieldValue: (name: string) => {
|
||||
return form.getFieldValue(name);
|
||||
},
|
||||
getFieldsValue: () => {
|
||||
return form.getFieldsValue();
|
||||
},
|
||||
getGPUOptionList: async (params: { clusterId: number }) => {
|
||||
return await getGPUOptionList(params);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<FormContext.Provider
|
||||
value={{
|
||||
isGGUF: isGGUF,
|
||||
formKey: formKey,
|
||||
source: props.source,
|
||||
pageAction: action,
|
||||
gpuOptions: gpuOptions,
|
||||
backendOptions: backendOptions,
|
||||
onValuesChange: onValuesChange,
|
||||
onBackendChange: handleBackendChange
|
||||
}}
|
||||
>
|
||||
<Form
|
||||
name="deployModel"
|
||||
form={form}
|
||||
onFinish={handleOk}
|
||||
preserve={false}
|
||||
clearOnDestroy={true}
|
||||
onValuesChange={handleOnValuesChange}
|
||||
scrollToFirstError={true}
|
||||
initialValues={{
|
||||
replicas: 1,
|
||||
source: props.source,
|
||||
placement_strategy: 'spread',
|
||||
cpu_offloading: true,
|
||||
scheduleType: ScheduleValueMap.Auto,
|
||||
categories: null,
|
||||
restart_on_error: true,
|
||||
distributed_inference_across_workers: true,
|
||||
...initialValues
|
||||
}}
|
||||
>
|
||||
<Form.Item<FormData>
|
||||
name="name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: getRuleMessage('input', 'common.table.name')
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
label={intl.formatMessage({
|
||||
id: 'common.table.name'
|
||||
})}
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
{fields.includes('source') && (
|
||||
<Form.Item<FormData>
|
||||
name="source"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: getRuleMessage('select', 'models.form.source')
|
||||
}
|
||||
]}
|
||||
>
|
||||
{
|
||||
<SealSelect
|
||||
onChange={handleOnSourceChange}
|
||||
disabled={sourceDisable}
|
||||
label={intl.formatMessage({
|
||||
id: 'models.form.source'
|
||||
})}
|
||||
options={sourceList ?? sourceOptions}
|
||||
required
|
||||
></SealSelect>
|
||||
}
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<OnlineSource></OnlineSource>
|
||||
<LocalPathSource></LocalPathSource>
|
||||
<Form.Item<FormData>
|
||||
name="cluster_id"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: getRuleMessage('select', 'clusters.title')
|
||||
}
|
||||
]}
|
||||
>
|
||||
{
|
||||
<SealSelect
|
||||
onChange={handleClusterChange}
|
||||
label={intl.formatMessage({ id: 'clusters.title' })}
|
||||
options={clusterList}
|
||||
required
|
||||
></SealSelect>
|
||||
}
|
||||
</Form.Item>
|
||||
<CatalogFrom></CatalogFrom>
|
||||
<Form.Item<FormData> name="description">
|
||||
<SealInput.TextArea
|
||||
scaleSize={true}
|
||||
label={intl.formatMessage({
|
||||
id: 'common.table.description'
|
||||
})}
|
||||
></SealInput.TextArea>
|
||||
</Form.Item>
|
||||
<CollapsePanel
|
||||
activeKey={activeKey}
|
||||
accordion={false}
|
||||
onChange={handleOnCollapseChange}
|
||||
items={[
|
||||
{
|
||||
key: 'performance',
|
||||
label: 'Performance',
|
||||
forceRender: true,
|
||||
children: <Performance></Performance>
|
||||
},
|
||||
{
|
||||
key: 'advance_config',
|
||||
label: 'Advanced',
|
||||
forceRender: true,
|
||||
children: <AdvanceConfig></AdvanceConfig>
|
||||
}
|
||||
]}
|
||||
></CollapsePanel>
|
||||
</Form>
|
||||
</FormContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
export default DataForm;
|
||||
@@ -20,10 +20,10 @@ import { backendOptionsMap } from '../config/backend-parameters';
|
||||
import { CatalogFormContext } from '../config/form-context';
|
||||
import { CatalogSpec, FormData, ListItem, SourceType } from '../config/types';
|
||||
import { generateGPUIds } from '../config/utils';
|
||||
import DataForm from '../forms';
|
||||
import { useCheckCompatibility } from '../hooks';
|
||||
import useFormInitialValues from '../hooks/use-form-initial-values';
|
||||
import CompatibilityAlert from './compatible-alert';
|
||||
import DataForm from './data-form';
|
||||
|
||||
const pickFieldsFromSpec = [
|
||||
'backend_version',
|
||||
|
||||
@@ -11,6 +11,7 @@ import ColumnWrapper from '../../_components/column-wrapper';
|
||||
import { defaultFormValues, deployFormKeyMap, modelSourceMap } from '../config';
|
||||
import { backendOptionsMap } from '../config/backend-parameters';
|
||||
import { BackendOption, FormData, SourceType } from '../config/types';
|
||||
import DataForm from '../forms';
|
||||
import {
|
||||
MessageStatus,
|
||||
WarningStausOptions,
|
||||
@@ -19,7 +20,6 @@ import {
|
||||
} from '../hooks';
|
||||
import useCheckBackend from '../hooks/use-check-backend';
|
||||
import CompatibilityAlert from './compatible-alert';
|
||||
import DataForm from './data-form';
|
||||
import GGUFResult from './gguf-result';
|
||||
import ModelCard from './model-card';
|
||||
import SearchModel from './search-model';
|
||||
@@ -488,6 +488,9 @@ const AddModal: FC<AddModalProps> = (props) => {
|
||||
<FormWrapper>
|
||||
<ColumnWrapper
|
||||
paddingBottom={warningStatus.show ? 170 : 50}
|
||||
styles={{
|
||||
container: { paddingTop: 0 }
|
||||
}}
|
||||
footer={
|
||||
<>
|
||||
<CompatibilityAlert
|
||||
|
||||
@@ -14,9 +14,9 @@ import {
|
||||
import { backendOptionsMap } from '../config/backend-parameters';
|
||||
import { BackendOption, FormData } from '../config/types';
|
||||
import { generateGPUSelector } from '../config/utils';
|
||||
import DataForm from '../forms';
|
||||
import { useCheckCompatibility } from '../hooks';
|
||||
import CompatibilityAlert from './compatible-alert';
|
||||
import DataForm from './data-form';
|
||||
|
||||
type AddModalProps = {
|
||||
title: string;
|
||||
|
||||
Reference in New Issue
Block a user