Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[fix/workflow][taier-ui]fix workflow repeated name in validating #808

Merged
merged 1 commit into from
Oct 21, 2022
Merged

[fix/workflow][taier-ui]fix workflow repeated name in validating #808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion taier-ui/src/components/scaffolds/create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,16 @@ const DataSource = () => {
}, [taskType, prevTaskType]);

return (
<Form.Item label="数据源" name="datasourceId" required>
<Form.Item
label="数据源"
name="datasourceId"
rules={[
{
required: true,
message: '请选择数据源',
},
]}
>
<Select
placeholder="请选择任务执行的对应数据源"
optionFilterProp="label"
Expand Down
14 changes: 7 additions & 7 deletions taier-ui/src/components/task/create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import './create.scss';
const FormItem = Form.Item;

interface ICreateProps extends molecule.model.IEditor {
onSubmit?: (values: IFormFieldProps) => Promise<boolean>;
onSubmit?: (values: ICreateTaskFormFieldProps) => Promise<boolean>;
/**
* Only in editing
*/
Expand All @@ -53,7 +53,7 @@ interface ICreateProps extends molecule.model.IEditor {
isRenderPosition?: boolean;
}

export interface IFormFieldProps {
export interface ICreateTaskFormFieldProps {
name: string;
taskType: TASK_TYPE_ENUM;
nodePid: number;
Expand All @@ -74,7 +74,7 @@ const Create = connect(
molecule.editor,
({ onSubmit, record, current, isRequest = true, isRenderPosition = true }: ICreateProps) => {
const { supportJobTypes } = useContext(Context);
const [form] = Form.useForm<IFormFieldProps>();
const [form] = Form.useForm<ICreateTaskFormFieldProps>();
const [loading, setLoading] = useState(false);
const [pageLoading, setPageLoading] = useState(false);

Expand Down Expand Up @@ -153,20 +153,20 @@ const Create = connect(
});
} else {
form.setFieldsValue({
...(record as IFormFieldProps),
...(record as ICreateTaskFormFieldProps),
});
}
}
};

const handleSubmit = (values: IFormFieldProps) => {
const handleSubmit = (values: ICreateTaskFormFieldProps) => {
setLoading(true);
onSubmit?.({ ...values }).then((success) => {
setLoading(success);
});
};

const handleValuesChanged = (_: Partial<IFormFieldProps>, values: IFormFieldProps) => {
const handleValuesChanged = (_: Partial<ICreateTaskFormFieldProps>, values: ICreateTaskFormFieldProps) => {
if (current?.tab) {
const { id } = current.tab;
// Insert form values into tab for preventing losing the values when switch tabs
Expand Down Expand Up @@ -198,7 +198,7 @@ const Create = connect(
<div className="taier__create__container">
<div className="taier__create__wrapper">
<Spin spinning={pageLoading}>
<Form<IFormFieldProps>
<Form<ICreateTaskFormFieldProps>
form={form}
onFinish={handleSubmit}
onValuesChange={handleValuesChanged}
Expand Down
6 changes: 3 additions & 3 deletions taier-ui/src/extensions/folderTree/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import type { IExtension } from '@dtinsight/molecule/esm/model';
import { FileTypes, TreeNodeModel } from '@dtinsight/molecule/esm/model';
import { localize } from '@dtinsight/molecule/esm/i18n/localize';
import molecule from '@dtinsight/molecule/esm';
import type { IFormFieldProps } from '@/components/task/create';
import type { ICreateTaskFormFieldProps } from '@/components/task/create';
import Create from '@/components/task/create';
import EditFolder from '@/components/task/editFolder';
import { getParentNode } from '@/utils/extensions';
Expand Down Expand Up @@ -49,7 +49,7 @@ function getComputeType(type: TASK_TYPE_ENUM): number {
* Open a tab for creating task
*/
function openCreateTab(id?: string) {
const onSubmit = (values: IFormFieldProps) => {
const onSubmit = (values: ICreateTaskFormFieldProps) => {
const { resourceIdList, ...restValues } = values;
return new Promise<boolean>((resolve) => {
const params: Record<string, any> = {
Expand Down Expand Up @@ -311,7 +311,7 @@ function contextMenu() {
? `${ID_COLLECTIONS.EDIT_TASK_PREFIX}_${new Date().getTime()}`
: `${ID_COLLECTIONS.EDIT_FOLDER_PREFIX}_${new Date().getTime()}`;

const onSubmit = (values: IFormFieldProps) => {
const onSubmit = (values: ICreateTaskFormFieldProps) => {
return new Promise<boolean>((resolve) => {
const params = {
taskId: treeNode!.data.id,
Expand Down
54 changes: 35 additions & 19 deletions taier-ui/src/pages/editor/workflow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,7 @@ import type {
IKeyDownConfig,
} from '@/components/mxGraph/container';
import './index.scss';

interface IFormFieldProps {
name: string;
taskType: TASK_TYPE_ENUM;
taskDesc: string;
createModel?: Valueof<typeof CREATE_MODEL_TYPE>;
resourceIdList?: [string];
mainClass?: string;
exeArgs?: string;
componentVersion: Valueof<typeof FLINK_VERSIONS>;
}
import { ICreateTaskFormFieldProps } from '@/components/task/create';

// 是否编辑状态未保存的标志符
export const isEditing = Symbol('editing');
Expand Down Expand Up @@ -85,7 +75,7 @@ function Workflow({ current }: molecule.model.IEditor) {
editData: undefined,
});
const [graphData, setGraphData] = useState<IWorkflowData[]>([]);
const [form] = Form.useForm<IFormFieldProps>();
const [form] = Form.useForm<ICreateTaskFormFieldProps>();
const container = useRef<IContainerRef<IWorkflowData>>(null);
const dragStage = useRef<{
x: number;
Expand All @@ -107,15 +97,36 @@ function Workflow({ current }: molecule.model.IEditor) {
});
};

const validateTaskName = async (_: any, value: string) => {
if (value === '') return Promise.reject(new Error('节点名称不可为空!'));
const validateTaskName = async (value: string, cellId: string | number | undefined) => {
if (!value) return Promise.reject(new Error('节点名称不可为空!'));
if (value.length > 128) return Promise.reject(new Error('节点名称不得超过128个字符!'));
const reg = /^[A-Za-z0-9_\u4e00-\u9fa5]+$/;
if (!reg.test(value))
return Promise.reject(new Error('节点名称只能由字母、数字、中文、下划线组成!'));

const res = await api.validateRepeatTaskName({ taskName: value, tenantId: getTenantId() });
if (res.code !== 1) return Promise.reject(new Error('子节点名称已存在!'));
const selfCell = container.current
?.getCells()
.find((cell) => cell.vertex && cell.value?.id === cellId);

const isUpdatedName = selfCell?.value.name !== value;

if (isUpdatedName) {
// Validate duplicated name in back-end
const res = await api.validateRepeatTaskName({
taskName: value,
tenantId: getTenantId(),
});
if (res.code !== 1) return Promise.reject(new Error('子节点名称已存在!'));

// Validate duplicated name in front-end,
// since there were some nodes just added and still not be given to back-end
if (
container.current
?.getCells()
.some((cell) => cell.vertex && cell.value?.name === value)
)
return Promise.reject(new Error('子节点名称已存在!'));
}

return Promise.resolve();
};
Expand Down Expand Up @@ -244,7 +255,7 @@ function Workflow({ current }: molecule.model.IEditor) {

// eslint-disable-next-line no-inner-declarations
function handleSaveTaskName(this: HTMLInputElement) {
validateTaskName({}, this.value)
validateTaskName(this.value, cell.id)
.then(() => {
cell.setValue({
...data,
Expand Down Expand Up @@ -592,12 +603,17 @@ function Workflow({ current }: molecule.model.IEditor) {
}}
onOk={handleInsertCell}
>
<Form<IFormFieldProps> form={form} autoComplete="off" {...formItemLayout}>
<Form<ICreateTaskFormFieldProps> form={form} autoComplete="off" {...formItemLayout}>
<Form.Item
label="节点名称"
name="name"
validateTrigger="onBlur"
rules={[{ validator: validateTaskName }]}
rules={[
{
validator: (_, value) =>
validateTaskName(value, modalInfo.editData?.id),
},
]}
>
<Input placeholder="请输入节点名称" />
</Form.Item>
Expand Down