diff --git a/dinky-web/src/locales/en-US/pages.ts b/dinky-web/src/locales/en-US/pages.ts index 1eba76ca55..55d10342df 100644 --- a/dinky-web/src/locales/en-US/pages.ts +++ b/dinky-web/src/locales/en-US/pages.ts @@ -56,6 +56,7 @@ export default { * */ 'catalog.name': 'Job Name', + 'catalog.useTemplate': 'Use Template', 'catalog.name.placeholder': 'Please enter the job name', 'catalog.name.validate.error': 'Job name cannot contain _ characters, K8s naming specification', 'catalog.name.tip': diff --git a/dinky-web/src/locales/zh-CN/pages.ts b/dinky-web/src/locales/zh-CN/pages.ts index 7e06bbae8e..955e0a5220 100644 --- a/dinky-web/src/locales/zh-CN/pages.ts +++ b/dinky-web/src/locales/zh-CN/pages.ts @@ -53,6 +53,7 @@ export default { * */ 'catalog.name': '作业名称', + 'catalog.useTemplate': '使用模板', 'catalog.name.placeholder': '请输入作业名称', 'catalog.name.validate.error': '作业名称不允许出现 _ 字符,K8s 命名规范', 'catalog.name.tip': '此名称可作为 FlinkSql 任务的 JobName', diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobModal/components/TemplateSelect.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobModal/components/TemplateSelect.tsx new file mode 100644 index 0000000000..80ec4e1e82 --- /dev/null +++ b/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobModal/components/TemplateSelect.tsx @@ -0,0 +1,104 @@ +/* + * + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +import CodeShow from '@/components/CustomEditor/CodeShow'; +import { queryList } from '@/services/api'; +import { API_CONSTANTS } from '@/services/endpoints'; +import { Document } from '@/types/RegCenter/data'; +import { l } from '@/utils/intl'; +import { ProCard, ProList } from '@ant-design/pro-components'; +import { Typography } from 'antd'; +import React, { useEffect, useState } from 'react'; + +const TemplateSelect: React.FC<{ type: string; onChange: (v: string) => void }> = (props) => { + const { type, onChange } = props; + const [currentSelect, setCurrentSelect] = useState(); + + useEffect(() => { + setCurrentSelect(undefined); + onChange(''); + }, [type]); + + const renderItem = (item: Document) => { + return ( +
+ + {item.description} + + } + bodyStyle={{ padding: 8 }} + onClick={() => { + setCurrentSelect(item); + onChange(item.fillValue); + }} + > + + +
+ ); + }; + + return ( + {l('catalog.useTemplate')}} + collapsibleIconRender={() => {'>'}} + size={'small'} + ghost + > + + pagination={{ + pageSize: 6, + size: 'small', + showTotal: () => ( + + + {l('rc.cc.addConfig')} + + ) + }} + params={{ subtype: type }} + grid={{ gutter: 24, column: 3 }} + renderItem={renderItem} + request={(params) => queryList(API_CONSTANTS.DOCUMENT, { ...params })} + /> + + ); +}; + +export default TemplateSelect; diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobModal/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobModal/index.tsx index 6ba6399b07..7b37af5589 100644 --- a/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobModal/index.tsx +++ b/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobModal/index.tsx @@ -20,12 +20,20 @@ import { FormContextValue } from '@/components/Context/FormContext'; import { JOB_TYPE } from '@/pages/DataStudio/LeftContainer/Project/constants'; import { isFlinkJob, isUDF } from '@/pages/DataStudio/LeftContainer/Project/function'; +import TemplateSelect from '@/pages/DataStudio/LeftContainer/Project/JobModal/components/TemplateSelect'; import { queryDataByParams } from '@/services/BusinessCrud'; import { RUN_MODE } from '@/services/constants'; import { API_CONSTANTS } from '@/services/endpoints'; import { Catalogue } from '@/types/Studio/data'; import { l } from '@/utils/intl'; -import { ModalForm, ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-components'; +import { + ModalForm, + ProFormGroup, + ProFormSelect, + ProFormText, + ProFormTextArea +} from '@ant-design/pro-components'; +import { ProFormDependency } from '@ant-design/pro-form'; import { ProFormCascader } from '@ant-design/pro-form/lib'; import { Form } from 'antd'; import { DefaultOptionType } from 'antd/es/select'; @@ -42,6 +50,7 @@ const JobModal: React.FC = (props) => { const { onCancel, onSubmit, modalVisible, title, values } = props; const [jobType, setJobType] = React.useState(values.type || 'FlinkSql'); const [udfTemplate, setUdfTemplate] = React.useState([]); + const [sqlTemplate, setSqlTemplate] = React.useState(''); const [form] = Form.useForm(); /** @@ -87,6 +96,7 @@ const JobModal: React.FC = (props) => { */ const handleCancel = () => { formContext.resetForm(); + setJobType(''); onCancel(); }; @@ -119,11 +129,12 @@ const JobModal: React.FC = (props) => { step: 1, // default step is develop alertGroupId: -1, // -1 is disabled type: RUN_MODE.LOCAL, // default run mode is local - dialect: formData.type + dialect: formData.type, + statement: sqlTemplate }; onSubmit({ ...values, ...formData, task: initTaskValue } as Catalogue); } else { - onSubmit({ ...values, ...formData } as Catalogue); + onSubmit({ ...values, ...formData, task: { statement: sqlTemplate } } as Catalogue); } }; @@ -146,7 +157,16 @@ const JobModal: React.FC = (props) => { const renderForm = () => { return ( <> - {!values.id && ( + + = (props) => { placeholder={l('catalog.type.placeholder')} rules={[{ required: true, message: l('catalog.type.placeholder') }]} allowClear={false} + width={'sm'} /> - )} - - + {isUDF(jobType) && ( - <> + + = (props) => { message: l('catalog.udf.templateId.placeholder') } ]} + width={'sm'} /> + + )} + - - + {/*不支持UDF模板*/} + {!isUDF(jobType) && ( + + {({ type }) => setSqlTemplate(v)} />} + )} ); @@ -212,10 +233,9 @@ const JobModal: React.FC = (props) => { title={title} form={form} - width={'30%'} + width={'40%'} initialValues={{ ...values }} open={modalVisible} - layout={'horizontal'} autoFocusFirstInput onValuesChange={onValuesChange} modalProps={{ diff --git a/dinky-web/src/pages/RegCenter/Cluster/Configuration/components/ConfigurationModal/ConfigurationForm/YarnConfig/index.tsx b/dinky-web/src/pages/RegCenter/Cluster/Configuration/components/ConfigurationModal/ConfigurationForm/YarnConfig/index.tsx index b51016afd8..a06a35199a 100644 --- a/dinky-web/src/pages/RegCenter/Cluster/Configuration/components/ConfigurationModal/ConfigurationForm/YarnConfig/index.tsx +++ b/dinky-web/src/pages/RegCenter/Cluster/Configuration/components/ConfigurationModal/ConfigurationForm/YarnConfig/index.tsx @@ -17,16 +17,11 @@ * */ +import FlinkOptionsSelect from '@/components/Flink/OptionsSelect'; import { StateType } from '@/pages/DataStudio/model'; import { l } from '@/utils/intl'; import { connect } from '@@/exports'; -import { - ProCard, - ProFormGroup, - ProFormList, - ProFormSelect, - ProFormText -} from '@ant-design/pro-components'; +import { ProCard, ProFormGroup, ProFormList, ProFormText } from '@ant-design/pro-components'; import { Col, Divider, Row, Space } from 'antd'; import { DefaultOptionType } from 'antd/es/select'; @@ -116,7 +111,7 @@ const YarnConfig = (props: { flinkConfigOptions: DefaultOptionType[] }) => { > -