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

fix: anti double submit in form

Browse Source
This commit is contained in:
jialin
2026-06-11 20:02:27 +08:00
committed by jialin
parent 1218c6d096
commit a7b33a928b
23 changed files with 246 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/use-submit-lock.ts
+46
View File
@@ -0,0 +1,46 @@
import { useMemoizedFn } from 'ahooks';
import { useRef, useState } from 'react';
/**
* Centralizes the anti-double-submit + anti-deadlock logic shared by the
* "add/edit" modals.
*
* The lock has to straddle antd's async field validation, whose result comes
* back through two separate callbacks (`onFinish` / `onFinishFailed`). So the
* three wiring points below are intentional and map 1:1 to those anchors:
*
* - `guard` wrap the submit trigger (button / ModalFooter onOk). Blocks
* re-entry while a submit is already in flight, then fires submit.
* - `run` wrap the `onFinish` handler. Holds the lock + loading until the
* `onOk` request settles (success or error).
* - `release` pass as the form's `onFinishFailed`. Releases the lock when
* validation fails, otherwise the button would dead-lock.
*/
export default function useSubmitLock() {
const [loading, setLoading] = useState<boolean>(false);
const lockRef = useRef<boolean>(false);
const release = useMemoizedFn(() => {
setLoading(false);
lockRef.current = false;
});
const guard = useMemoizedFn((submit: () => void) => {
if (lockRef.current) {
return;
}
lockRef.current = true;
submit();
});
const run = useMemoizedFn(async (task: () => void | Promise<void>) => {
setLoading(true);
try {
await task();
} finally {
release();
}
});
return { loading, guard, run, release };
}
src/pages/api-keys/components/add-apikey-modal/index.tsx
+24 -22
View File
@@ -1,5 +1,6 @@
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useSubmitLock from '@/hooks/use-submit-lock';
import {
AlertBlockInfo,
Input as CInput,
@@ -45,7 +46,7 @@ const AddModal: React.FC<AddModalProps> = ({
const intl = useIntl();
const [showKey, setShowKey] = useState(false);
const [apikeyValue, setAPIKeyValue] = useState('');
const [loading, setLoading] = useState(false);
const { loading, guard, run, release } = useSubmitLock();
const [isChanged, setIsChanged] = useState(false);
const cacheFormRef = useRef<{
allowed_type: string;
@@ -116,31 +117,31 @@ const AddModal: React.FC<AddModalProps> = ({
};
const handleOnOk = async (formdata: FormData) => {
try {
setLoading(true);
const data = {
..._.omit(formdata, ['allowed_type']),
allowed_model_names:
formdata.allowed_type === 'all' ||
!formdata.scope?.includes('inference')
? []
: formdata.allowed_model_names || []
};
if (action === PageAction.CREATE) {
await createAPIKey(data);
} else if (action === PageAction.EDIT && currentData?.id) {
await updateAPIKey({
..._.omit(data, ['expires_in'])
});
await run(async () => {
try {
const data = {
..._.omit(formdata, ['allowed_type']),
allowed_model_names:
formdata.allowed_type === 'all' ||
!formdata.scope?.includes('inference')
? []
: formdata.allowed_model_names || []
};
if (action === PageAction.CREATE) {
await createAPIKey(data);
} else if (action === PageAction.EDIT && currentData?.id) {
await updateAPIKey({
..._.omit(data, ['expires_in'])
});
}
} catch (error) {
// handled in interceptor
}
setLoading(false);
} catch (error) {
setLoading(false);
}
});
};
const handleSumit = () => {
form.submit();
guard(() => form.submit());
};
const handleDone = () => {
@@ -278,6 +279,7 @@ const AddModal: React.FC<AddModalProps> = ({
name="addAPIKey"
form={form}
onFinish={handleOnOk}
onFinishFailed={release}
preserve={false}
initialValues={{
allowed_type: 'all',
src/pages/backends/components/add-modal.tsx
+28 -17
View File
@@ -1,5 +1,6 @@
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useSubmitLock from '@/hooks/use-submit-lock';
import {
AlertBlockInfo,
GSDrawer,
@@ -63,6 +64,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
const [yamlContent, setYamlContent] = useState<string>('');
const [formContent, setFormContent] = useState<FormData>({} as FormData);
const alertRef = useRef<HTMLDivElement>(null);
const { loading, guard, run, release } = useSubmitLock();
const showVersionCustomSuffix =
currentData?.backend_source === BackendSourceValueMap.BUILTIN ||
@@ -92,17 +94,22 @@ const AddModal: React.FC<AddModalProps> = (props) => {
};
const onOk = () => {
if (activeKey === 'yaml') {
const content = editorRef.current?.getContent();
if (content) {
onSubmitYaml({ content: content });
guard(() => {
if (activeKey === 'yaml') {
const content = editorRef.current?.getContent();
if (!content) {
// nothing to submit — drop the lock so the button stays usable
release();
return;
}
run(() => onSubmitYaml({ content: content }));
return;
}
} else {
formRef.current?.submit();
}
});
};
const onFinish = (values: FormData) => {
const onFinish = async (values: FormData) => {
const versionConfigs = values.version_configs?.reduce(
(acc: Record<string, any>, curr) => {
if (curr.version_no) {
@@ -117,16 +124,18 @@ const AddModal: React.FC<AddModalProps> = (props) => {
const defaultVersion = values.version_configs?.find((v) => v.is_default);
onSubmit({
...values,
parameter_format:
values.parameter_format === 'auto' || !values.parameter_format
? null
: values.parameter_format,
default_version: defaultVersion?.version_no || '',
// @ts-ignore
version_configs: versionConfigs
});
await run(() =>
onSubmit({
...values,
parameter_format:
values.parameter_format === 'auto' || !values.parameter_format
? null
: values.parameter_format,
default_version: defaultVersion?.version_no || '',
// @ts-ignore
version_configs: versionConfigs
})
);
};
useEffect(() => {
@@ -279,6 +288,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
<ModalFooter
onCancel={onClose}
onOk={onOk}
loading={loading}
style={ModalFooterStyle}
></ModalFooter>
</>
@@ -295,6 +305,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
children: (
<BackendForm
onFinish={onFinish}
onFinishFailed={release}
action={action}
currentData={formContent as ListItem}
ref={formRef}
src/pages/backends/forms/index.tsx
+5 -3
View File
@@ -13,10 +13,11 @@ type AddModalProps = {
action: PageActionType;
currentData?: ListItem;
onFinish: (values: FormData) => void;
onFinishFailed?: (errorInfo: any) => void;
ref?: any;
};
const BackendForm: React.FC<AddModalProps> = forwardRef(
({ action, currentData, onFinish }, ref) => {
({ action, currentData, onFinish, onFinishFailed }, ref) => {
const intl = useIntl();
const [form] = Form.useForm();
const [activeKey, setActiveKey] = React.useState<string[]>([]);
@@ -26,7 +27,7 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
currentData?.backend_source === BackendSourceValueMap.BUILTIN ||
currentData?.backend_source === BackendSourceValueMap.COMMUNITY;
const onFinishFailed = (errorInfo: any) => {
const handleOnFinishFailed = (errorInfo: any) => {
const errorFields = errorInfo.errorFields || [];
if (errorFields.length > 0) {
const versionError = errorFields.find((field: any) =>
@@ -38,6 +39,7 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
setActiveKey([]);
}
}
onFinishFailed?.(errorInfo);
};
const handleOnFinish = (values: FormData) => {
@@ -106,7 +108,7 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
preserve={false}
scrollToFirstError={true}
initialValues={_.omit(currentData, ['version_configs'])}
onFinishFailed={onFinishFailed}
onFinishFailed={handleOnFinishFailed}
>
<BasicForm></BasicForm>
<VersionsForm
src/pages/benchmark/components/add-benchmark-modal.tsx
+12 -6
View File
@@ -1,4 +1,5 @@
import { PageActionType } from '@/config/types';
import useSubmitLock from '@/hooks/use-submit-lock';
import { FormDrawer } from '@gpustack/core-ui';
import React, { useRef } from 'react';
import { FormData, BenchmarkListItem as ListItem } from '../config/types';
@@ -22,21 +23,24 @@ const AddBenchmark: React.FC<AddModalProps> = ({
open,
currentData,
clusterList,
profilesOptions,
datasetList,
profilesOptions = [],
datasetList = [],
onOk,
onCancel
}) => {
const form = useRef<any>(null);
const { loading, guard, run, release } = useSubmitLock();
const handleSubmit = () => {
form.current?.submit();
guard(() => form.current?.submit());
};
const handleOk = async (data: FormData) => {
onOk({
...data
});
await run(() =>
onOk({
...data
})
);
};
const handleCancel = () => {
@@ -51,6 +55,7 @@ const AddBenchmark: React.FC<AddModalProps> = ({
onCancel={handleCancel}
onSubmit={handleSubmit}
width={600}
loading={loading}
>
<BenchmarkForm
ref={form}
@@ -61,6 +66,7 @@ const AddBenchmark: React.FC<AddModalProps> = ({
profilesOptions={profilesOptions}
datasetList={datasetList}
onFinish={handleOk}
onFinishFailed={release}
/>
</FormDrawer>
);
src/pages/benchmark/forms/index.tsx
+3
View File
@@ -29,6 +29,7 @@ interface ProviderFormProps {
datasetList: Global.BaseOption<number | string>[];
profilesOptions: Global.BaseOption<string>[];
onFinish: (values: FormData) => Promise<void>;
onFinishFailed?: (errorInfo: any) => void;
}
const TABKeysMap = {
@@ -42,6 +43,7 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
action,
currentData,
onFinish,
onFinishFailed,
open,
clusterList,
profilesOptions,
@@ -122,6 +124,7 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
<Form
form={form}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
initialValues={{
dataset_input_tokens: null,
dataset_output_tokens: null,
src/pages/cluster-management/components/add-cluster.tsx
+11 -5
View File
@@ -1,5 +1,6 @@
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useSubmitLock from '@/hooks/use-submit-lock';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { AlertBlockInfo, FormDrawer, ModalFooter } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
@@ -39,20 +40,23 @@ const AddCluster: React.FC<AddModalProps> = ({
}) => {
const intl = useIntl();
const form = useRef<any>(null);
const { loading, guard, run, release } = useSubmitLock();
// Whether the user has changed any k8s_options field. Lifted from ClusterForm
// so the "re-run registration" notice can sit in the drawer footer, above the
// Save/Cancel buttons (mirrors the model edit interaction).
const [k8sOptionsChanged, setK8sOptionsChanged] = useState<boolean>(false);
const handleSubmit = () => {
form.current?.submit();
guard(() => form.current?.submit());
};
const handleOk = async (data: FormData) => {
onOk({
...data,
provider
});
await run(() =>
onOk({
...data,
provider
})
);
};
const handleCancel = () => {
@@ -84,6 +88,7 @@ const AddCluster: React.FC<AddModalProps> = ({
<ModalFooter
onOk={handleSubmit}
onCancel={handleCancel}
loading={loading}
style={ModalFooterStyle}
></ModalFooter>
</>
@@ -96,6 +101,7 @@ const AddCluster: React.FC<AddModalProps> = ({
action={action}
currentData={currentData}
onFinish={handleOk}
onFinishFailed={release}
onK8sOptionsChange={setK8sOptionsChanged}
/>
</FormDrawer>
src/pages/cluster-management/components/cluster-form.tsx
+4 -1
View File
@@ -36,6 +36,7 @@ type AddModalProps = {
provider: ProviderType;
credentialList: Global.BaseOption<number>[];
onFinish: (values: FormData) => void;
onFinishFailed?: (errorInfo: any) => void;
// Reports whether the user has changed any k8s_options field, so the parent
// can show the "re-run registration" notice in the footer.
onK8sOptionsChange?: (changed: boolean) => void;
@@ -49,6 +50,7 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
currentData,
credentialList,
onFinish,
onFinishFailed,
onK8sOptionsChange
},
ref
@@ -212,8 +214,9 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
}
}));
const handleOnFinishFailed = () => {
const handleOnFinishFailed = (errorInfo: any) => {
setSubmitAttempted(true);
onFinishFailed?.(errorInfo);
};
return (
src/pages/gpu-service/instances/components/add-modal.tsx
+6 -7
View File
@@ -1,5 +1,6 @@
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useSubmitLock from '@/hooks/use-submit-lock';
import { useQueryClusterList } from '@/pages/cluster-management/services/use-query-cluster-list';
import Separator from '@/pages/llmodels/components/separator';
import { SearchOutlined } from '@ant-design/icons';
@@ -89,7 +90,7 @@ const AddModal: React.FC<AddModalProps> = ({
const [templateId, setTemplateId] = useState<number | undefined>();
const [instanceKeyword, setInstanceKeyword] = useState('');
const [templateKeyword, setTemplateKeyword] = useState('');
const [loading, setLoading] = useState(false);
const { loading, guard, run, release } = useSubmitLock();
const initializedRef = useRef(false);
const {
@@ -385,7 +386,7 @@ const AddModal: React.FC<AddModalProps> = ({
});
const handleSubmit = () => {
form.current?.submit();
guard(() => form.current?.submit());
};
const handleCancel = () => {
@@ -394,15 +395,12 @@ const AddModal: React.FC<AddModalProps> = ({
};
const onFinish = async (values: FormData) => {
setLoading(true);
try {
await run(async () => {
await onOk({
...values
});
console.log('submit form values', values);
} finally {
setLoading(false);
}
});
};
const handleInstanceTypeChange = (item: InstanceTypeItem) => {
@@ -576,6 +574,7 @@ const AddModal: React.FC<AddModalProps> = ({
currentData={data}
disabled={readonly}
onFinish={onFinish}
onFinishFailed={release}
onScopeChange={handleScopeChange}
open={open}
instanceTypeList={ownedInstanceTypes}
src/pages/gpu-service/instances/forms/index.tsx
+4 -1
View File
@@ -70,6 +70,7 @@ interface InstanceFormProps {
// tenant-scoped instance-type / template offerings.
onScopeChange?: (orgId: number | null | undefined) => void;
onFinish: (values: FormData) => Promise<void>;
onFinishFailed?: (errorInfo: any) => void;
}
const TABKeysMap = {
@@ -113,7 +114,8 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
instanceTypeList = [],
noAvailableInstanceTypes,
onScopeChange,
onFinish
onFinish,
onFinishFailed
} = props;
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
@@ -370,6 +372,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
]
}));
rawHandleOnFinishFailed({ ...errorInfo, errorFields });
onFinishFailed?.(errorInfo);
};
const detectMode = (volume?: FormData['spec']['volume']) => {
if (volume?.persistent?.name || volume?.persistentTemplate?.name) {
src/pages/gpu-service/public-keys/components/add-public-key-modal.tsx
+6 -2
View File
@@ -1,4 +1,5 @@
import { PageActionType } from '@/config/types';
import useSubmitLock from '@/hooks/use-submit-lock';
import { ModalFooter } from '@gpustack/core-ui';
import { useRef } from 'react';
import FormDrawer from '../../../_components/form-drawer';
@@ -23,9 +24,10 @@ const AddPublicKeyModal: React.FC<AddPublicKeyModalProps> = ({
onCancel
}) => {
const form = useRef<any>(null);
const { loading, guard, run, release } = useSubmitLock();
const handleSubmit = () => {
form.current?.submit();
guard(() => form.current?.submit());
};
const handleCancel = () => {
@@ -34,7 +36,7 @@ const AddPublicKeyModal: React.FC<AddPublicKeyModalProps> = ({
};
const onFinish = async (values: FormData) => {
onOk({ ...values });
await run(() => onOk({ ...values }));
};
return (
@@ -48,6 +50,7 @@ const AddPublicKeyModal: React.FC<AddPublicKeyModalProps> = ({
<ModalFooter
onOk={handleSubmit}
onCancel={handleCancel}
loading={loading}
style={{
padding: '16px 24px 8px',
display: 'flex',
@@ -61,6 +64,7 @@ const AddPublicKeyModal: React.FC<AddPublicKeyModalProps> = ({
action={action}
currentData={data}
onFinish={onFinish}
onFinishFailed={release}
open={open}
/>
</FormDrawer>
src/pages/gpu-service/public-keys/forms/index.tsx
+3 -1
View File
@@ -11,11 +11,12 @@ interface PublicKeyFormProps {
action: PageActionType;
currentData?: ListItem | null;
onFinish: (values: FormData) => Promise<void>;
onFinishFailed?: (errorInfo: any) => void;
}
const GPUServicePublicKeyForm: React.FC<PublicKeyFormProps> = forwardRef(
(props, ref) => {
const { action, currentData, open, onFinish } = props;
const { action, currentData, open, onFinish, onFinishFailed } = props;
const [form] = Form.useForm<FormData>();
useEffect(() => {
@@ -50,6 +51,7 @@ const GPUServicePublicKeyForm: React.FC<PublicKeyFormProps> = forwardRef(
name="gpuServicePublicKeyForm"
form={form}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
preserve={false}
initialValues={{}}
>
src/pages/gpu-service/storage-types/components/add-storage-type-modal.tsx
+6 -2
View File
@@ -1,4 +1,5 @@
import { PageActionType } from '@/config/types';
import useSubmitLock from '@/hooks/use-submit-lock';
import { ModalFooter } from '@gpustack/core-ui';
import { useRef } from 'react';
import FormDrawer from '../../../_components/form-drawer';
@@ -23,9 +24,10 @@ const AddStorageTypeModal: React.FC<AddStorageTypeModalProps> = ({
onCancel
}) => {
const form = useRef<any>(null);
const { loading, guard, run, release } = useSubmitLock();
const handleSubmit = () => {
form.current?.submit();
guard(() => form.current?.submit());
};
const handleCancel = () => {
@@ -34,7 +36,7 @@ const AddStorageTypeModal: React.FC<AddStorageTypeModalProps> = ({
};
const onFinish = async (values: FormData) => {
onOk({ ...values });
await run(() => onOk({ ...values }));
};
return (
@@ -48,6 +50,7 @@ const AddStorageTypeModal: React.FC<AddStorageTypeModalProps> = ({
<ModalFooter
onOk={handleSubmit}
onCancel={handleCancel}
loading={loading}
style={{
padding: '16px 24px 8px',
display: 'flex',
@@ -61,6 +64,7 @@ const AddStorageTypeModal: React.FC<AddStorageTypeModalProps> = ({
action={action}
currentData={data}
onFinish={onFinish}
onFinishFailed={release}
open={open}
/>
</FormDrawer>
src/pages/gpu-service/storage-types/forms/index.tsx
+3 -1
View File
@@ -18,6 +18,7 @@ interface StorageTypeFormProps {
action: PageActionType;
currentData?: ListItem | null;
onFinish: (values: FormData) => Promise<void>;
onFinishFailed?: (errorInfo: any) => void;
}
const detectKind = (item?: ListItem | null): StorageTypeKind => {
@@ -27,7 +28,7 @@ const detectKind = (item?: ListItem | null): StorageTypeKind => {
const GPUServiceStorageTypeForm: React.FC<StorageTypeFormProps> = forwardRef(
(props, ref) => {
const { action, currentData, open, onFinish } = props;
const { action, currentData, open, onFinish, onFinishFailed } = props;
const [form] = Form.useForm<FormData>();
const kind = Form.useWatch('type', form);
@@ -115,6 +116,7 @@ const GPUServiceStorageTypeForm: React.FC<StorageTypeFormProps> = forwardRef(
name="gpuServiceStorageTypeForm"
form={form}
onFinish={handleFinish}
onFinishFailed={onFinishFailed}
preserve={false}
initialValues={{}}
>
src/pages/gpu-service/storage/components/add-modal.tsx
+10 -4
View File
@@ -1,4 +1,5 @@
import { PageActionType } from '@/config/types';
import useSubmitLock from '@/hooks/use-submit-lock';
import { ModalFooter } from '@gpustack/core-ui';
import { useRef } from 'react';
import FormDrawer from '../../../_components/form-drawer';
@@ -26,9 +27,10 @@ const AddModal: React.FC<AddModalProps> = ({
storageClassList
}) => {
const form = useRef<any>(null);
const { loading, guard, run, release } = useSubmitLock();
const handleSubmit = () => {
form.current?.submit();
guard(() => form.current?.submit());
};
const handleCancel = () => {
@@ -37,9 +39,11 @@ const AddModal: React.FC<AddModalProps> = ({
};
const onFinish = async (values: FormData) => {
onOk({
...values
});
await run(() =>
onOk({
...values
})
);
};
return (
@@ -53,6 +57,7 @@ const AddModal: React.FC<AddModalProps> = ({
<ModalFooter
onOk={handleSubmit}
onCancel={handleCancel}
loading={loading}
style={{
padding: '16px 24px 8px',
display: 'flex',
@@ -67,6 +72,7 @@ const AddModal: React.FC<AddModalProps> = ({
action={action}
currentData={data}
onFinish={onFinish}
onFinishFailed={release}
open={open}
/>
</FormContext.Provider>
src/pages/gpu-service/storage/forms/index.tsx
+3 -1
View File
@@ -11,11 +11,12 @@ interface StorageFormProps {
action: PageActionType;
currentData?: ListItem | null;
onFinish: (values: FormData) => Promise<void>;
onFinishFailed?: (errorInfo: any) => void;
}
const GPUServiceStorageForm: React.FC<StorageFormProps> = forwardRef(
(props, ref) => {
const { action, currentData, open, onFinish } = props;
const { action, currentData, open, onFinish, onFinishFailed } = props;
const [form] = Form.useForm<FormData>();
useEffect(() => {
@@ -51,6 +52,7 @@ const GPUServiceStorageForm: React.FC<StorageFormProps> = forwardRef(
name="gpuServiceStorageForm"
form={form}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
preserve={false}
initialValues={{}}
>
src/pages/gpu-service/templates/components/add-modal.tsx
+10 -4
View File
@@ -1,4 +1,5 @@
import { PageActionType } from '@/config/types';
import useSubmitLock from '@/hooks/use-submit-lock';
import { ModalFooter } from '@gpustack/core-ui';
import { useRef } from 'react';
import FormDrawer from '../../../_components/form-drawer';
@@ -23,9 +24,10 @@ const AddModal: React.FC<AddModalProps> = ({
onCancel
}) => {
const form = useRef<any>(null);
const { loading, guard, run, release } = useSubmitLock();
const handleSubmit = () => {
form.current?.submit();
guard(() => form.current?.submit());
};
const handleCancel = () => {
@@ -34,9 +36,11 @@ const AddModal: React.FC<AddModalProps> = ({
};
const onFinish = async (values: FormData) => {
onOk({
...values
});
await run(() =>
onOk({
...values
})
);
};
return (
@@ -50,6 +54,7 @@ const AddModal: React.FC<AddModalProps> = ({
<ModalFooter
onOk={handleSubmit}
onCancel={handleCancel}
loading={loading}
style={{
padding: '16px 24px 8px',
display: 'flex',
@@ -63,6 +68,7 @@ const AddModal: React.FC<AddModalProps> = ({
action={action}
currentData={currentData}
onFinish={onFinish}
onFinishFailed={release}
open={open}
/>
</FormDrawer>
src/pages/gpu-service/templates/forms/index.tsx
+3 -1
View File
@@ -12,11 +12,12 @@ interface TemplateFormProps {
action: PageActionType;
currentData?: ListItem | null;
onFinish: (values: FormData) => Promise<void>;
onFinishFailed?: (errorInfo: any) => void;
}
const GPUServiceTemplateForm: React.FC<TemplateFormProps> = forwardRef(
(props, ref) => {
const { action, currentData, open, onFinish } = props;
const { action, currentData, open, onFinish, onFinishFailed } = props;
const [form] = Form.useForm<FormData>();
useEffect(() => {
@@ -58,6 +59,7 @@ const GPUServiceTemplateForm: React.FC<TemplateFormProps> = forwardRef(
name="gpuServiceTemplateForm"
form={form}
onFinish={handleFinish}
onFinishFailed={onFinishFailed}
preserve={false}
scrollToFirstError
initialValues={{
src/pages/maas-provider/components/add-provider-modal.tsx
+10 -4
View File
@@ -1,4 +1,5 @@
import { PageActionType } from '@/config/types';
import useSubmitLock from '@/hooks/use-submit-lock';
import { FormDrawer } from '@gpustack/core-ui';
import React, { useRef } from 'react';
import { FormData, MaasProviderItem as ListItem } from '../config/types';
@@ -22,16 +23,19 @@ const AddProvider: React.FC<AddModalProps> = ({
onCancel
}) => {
const form = useRef<any>(null);
const { loading, guard, run, release } = useSubmitLock();
const handleSubmit = () => {
form.current?.submit();
guard(() => form.current?.submit());
};
const handleOnFinish = async (data: FormData) => {
console.log('handleOnFinish', data);
onOk({
...data
});
await run(() =>
onOk({
...data
})
);
};
const handleCancel = () => {
@@ -46,12 +50,14 @@ const AddProvider: React.FC<AddModalProps> = ({
onCancel={handleCancel}
onSubmit={handleSubmit}
width={600}
loading={loading}
>
<ProviderForm
ref={form}
action={action}
currentData={currentData}
onFinish={handleOnFinish}
onFinishFailed={release}
/>
</FormDrawer>
);
src/pages/maas-provider/forms/index.tsx
+8 -2
View File
@@ -31,6 +31,7 @@ interface ProviderFormProps {
action: PageActionType;
currentData?: ListItem; // Used when action is EDIT
onFinish: (values: FormData) => Promise<void>;
onFinishFailed?: (errorInfo: any) => void;
}
const TABKeysMap = {
@@ -51,7 +52,7 @@ const requiredFields = {
};
const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
const { action, currentData, onFinish } = props;
const { action, currentData, onFinish, onFinishFailed } = props;
const intl = useIntl();
const providerRequiredFieldsMap = useProviderRequiredFields();
const [form] = Form.useForm();
@@ -146,6 +147,11 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
updateActiveKey
});
const handleFinishFailed = (errorInfo: any) => {
handleOnFinishFailed(errorInfo);
onFinishFailed?.(errorInfo);
};
useImperativeHandle(ref, () => ({
submit: () => {
form.submit();
@@ -217,7 +223,7 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
<Form
form={form}
onFinish={handleOnFinish}
onFinishFailed={handleOnFinishFailed}
onFinishFailed={handleFinishFailed}
initialValues={{
proxy_enabled: false,
proxy_url: '',
src/pages/model-routes/components/add-route-modal.tsx
+10 -4
View File
@@ -1,4 +1,5 @@
import { PageActionType } from '@/config/types';
import useSubmitLock from '@/hooks/use-submit-lock';
import { AlertBlockInfo, FormDrawer, ModalFooter } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import React, { useRef } from 'react';
@@ -26,15 +27,18 @@ const AddProvider: React.FC<AddModalProps> = ({
const intl = useIntl();
const [isChanged, setIsChanged] = React.useState(false);
const form = useRef<any>(null);
const { loading, guard, run, release } = useSubmitLock();
const handleSubmit = () => {
form.current?.submit();
guard(() => form.current?.submit());
};
const onFinish = async (data: FormData) => {
onOk({
...data
});
await run(() =>
onOk({
...data
})
);
};
const handleCancel = () => {
@@ -63,6 +67,7 @@ const AddProvider: React.FC<AddModalProps> = ({
<ModalFooter
onOk={handleSubmit}
onCancel={onCancel}
loading={loading}
styles={{
wrapper: {
paddingTop: 16
@@ -78,6 +83,7 @@ const AddProvider: React.FC<AddModalProps> = ({
realAction={realAction}
currentData={currentData}
onFinish={onFinish}
onFinishFailed={release}
open={open}
onFallbackChange={(changed: boolean) => {
setIsChanged(changed);
src/pages/model-routes/forms/index.tsx
+16 -3
View File
@@ -65,6 +65,7 @@ interface ProviderFormProps {
routeTargets?: RouteTargetFormItem[];
}; // Used when action is EDIT
onFinish: (values: FormData) => Promise<void>;
onFinishFailed?: (errorInfo: any) => void;
onFallbackChange?: (changed: boolean) => void;
}
@@ -86,8 +87,15 @@ const requiredFields = {
const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
const intl = useIntl();
const { action, realAction, currentData, open, onFinish, onFallbackChange } =
props;
const {
action,
realAction,
currentData,
open,
onFinish,
onFinishFailed,
onFallbackChange
} = props;
const { getScrollElementScrollableHeight } = useWrapperContext();
const [form] = Form.useForm();
const scrollTabsRef = useRef<any>(null);
@@ -238,6 +246,11 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
updateActiveKey
});
const handleFinishFailed = (errorInfo: any) => {
handleOnFinishFailed(errorInfo);
onFinishFailed?.(errorInfo);
};
useImperativeHandle(ref, () => ({
submit: () => {
form.submit();
@@ -266,7 +279,7 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
<Form
form={form}
onFinish={handleOnFinish}
onFinishFailed={handleOnFinishFailed}
onFinishFailed={handleFinishFailed}
initialValues={{
categories: [modelCategoriesMap.llm],
meta: {}
src/pages/users/components/add-modal.tsx
+15 -2
View File
@@ -1,5 +1,6 @@
import { PageAction, PasswordReg } from '@/config';
import { PageActionType } from '@/config/types';
import useSubmitLock from '@/hooks/use-submit-lock';
import {
Input as CInput,
FormDrawer,
@@ -32,6 +33,7 @@ const AddModal: React.FC<AddModalProps> = ({
const { initialState } = useModel('@@initialState') || {};
const [form] = Form.useForm();
const intl = useIntl();
const { loading, guard, run, release } = useSubmitLock();
const initFormValue = () => {
if (action === PageAction.EDIT && open) {
@@ -49,7 +51,11 @@ const AddModal: React.FC<AddModalProps> = ({
};
const handleSubmit = () => {
form.submit();
guard(() => form.submit());
};
const onFinish = async (values: FormData) => {
await run(() => onOk(values));
};
useEffect(() => {
@@ -62,8 +68,15 @@ const AddModal: React.FC<AddModalProps> = ({
open={open}
onCancel={onCancel}
onSubmit={handleSubmit}
loading={loading}
>
<Form name="addUserForm" form={form} onFinish={onOk} preserve={false}>
<Form
name="addUserForm"
form={form}
onFinish={onFinish}
onFinishFailed={release}
preserve={false}
>
<Form.Item<FormData>
name="username"
rules={[