150 lines
3.8 KiB
TypeScript
150 lines
3.8 KiB
TypeScript
import { PageAction } from '@/config';
|
|
import { PageActionType } from '@/config/types';
|
|
import { CollapsePanel, IconFont, ScrollSpyTabs } from '@gpustack/core-ui';
|
|
import { useWrapperContext } from '@gpustack/core-ui/lib/components/column-wrapper/use-wrapper-context';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Form } from 'antd';
|
|
import {
|
|
forwardRef,
|
|
useEffect,
|
|
useImperativeHandle,
|
|
useRef,
|
|
useState
|
|
} from 'react';
|
|
import FormContext from '../config/form-context';
|
|
import { FormData, BenchmarkListItem as ListItem } from '../config/types';
|
|
import Basic from './basic';
|
|
import DatasetForm from './dataset';
|
|
|
|
interface ProviderFormProps {
|
|
ref?: any;
|
|
action: PageActionType;
|
|
currentData?: ListItem; // Used when action is EDIT
|
|
open?: boolean;
|
|
clusterList?: Global.BaseOption<number>[];
|
|
datasetList: Global.BaseOption<number | string>[];
|
|
profilesOptions: Global.BaseOption<string>[];
|
|
onFinish: (values: FormData) => Promise<void>;
|
|
}
|
|
|
|
const TABKeysMap = {
|
|
BASIC: 'basic',
|
|
PROFILE: 'profile',
|
|
ADVANCED: 'advanced'
|
|
};
|
|
|
|
const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
|
|
const {
|
|
action,
|
|
currentData,
|
|
onFinish,
|
|
open,
|
|
clusterList,
|
|
profilesOptions,
|
|
datasetList
|
|
} = props;
|
|
const intl = useIntl();
|
|
const [form] = Form.useForm();
|
|
const { getScrollElementScrollableHeight } = useWrapperContext();
|
|
const [activeKey, setActiveKey] = useState<string[]>([TABKeysMap.PROFILE]);
|
|
const scrollTabsRef = useRef<any>(null);
|
|
|
|
const segmentOptions = [
|
|
{
|
|
value: TABKeysMap.BASIC,
|
|
label: intl.formatMessage({ id: 'common.title.basicInfo' }),
|
|
icon: <IconFont type="icon-basic" />,
|
|
field: 'name'
|
|
},
|
|
{
|
|
value: TABKeysMap.PROFILE,
|
|
label: intl.formatMessage({ id: 'common.title.config' }),
|
|
icon: <IconFont type="icon-settings" />,
|
|
field: 'profile'
|
|
}
|
|
];
|
|
|
|
const handleActiveChange = (key: string[]) => {
|
|
setActiveKey(key);
|
|
};
|
|
|
|
const handleOnCollapseChange = (keys: string | string[]) => {
|
|
setActiveKey(Array.isArray(keys) ? keys : [keys]);
|
|
};
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
submit: () => {
|
|
form.submit();
|
|
},
|
|
resetFields: () => {
|
|
form.resetFields();
|
|
}
|
|
}));
|
|
|
|
useEffect(() => {
|
|
if (action === PageAction.EDIT && currentData) {
|
|
form.setFieldsValue({
|
|
...currentData,
|
|
model_instance: [
|
|
currentData.model_name,
|
|
currentData.model_instance_name
|
|
]
|
|
});
|
|
}
|
|
}, [form, currentData, action]);
|
|
|
|
return (
|
|
<ScrollSpyTabs
|
|
ref={scrollTabsRef}
|
|
defaultTarget="basic"
|
|
segmentOptions={segmentOptions}
|
|
activeKey={activeKey}
|
|
setActiveKey={handleActiveChange}
|
|
segmentedTop={{
|
|
top: 0,
|
|
offsetTop: 96
|
|
}}
|
|
getScrollElementScrollableHeight={getScrollElementScrollableHeight}
|
|
>
|
|
<FormContext.Provider
|
|
value={{
|
|
action,
|
|
open,
|
|
clusterList: clusterList,
|
|
profilesOptions: profilesOptions,
|
|
datasetList: datasetList
|
|
}}
|
|
>
|
|
<Form
|
|
form={form}
|
|
onFinish={onFinish}
|
|
initialValues={{
|
|
dataset_input_tokens: null,
|
|
dataset_output_tokens: null,
|
|
total_requests: null,
|
|
request_rate: null,
|
|
dataset_seed: null
|
|
}}
|
|
>
|
|
<Basic />
|
|
<CollapsePanel
|
|
activeKey={activeKey}
|
|
accordion={false}
|
|
onChange={handleOnCollapseChange}
|
|
items={[
|
|
{
|
|
key: TABKeysMap.PROFILE,
|
|
label: intl.formatMessage({ id: 'common.title.config' }),
|
|
forceRender: true,
|
|
children: <DatasetForm />
|
|
}
|
|
]}
|
|
></CollapsePanel>
|
|
</Form>
|
|
</FormContext.Provider>
|
|
</ScrollSpyTabs>
|
|
);
|
|
});
|
|
|
|
export default ProviderForm;
|