Skip to content

Commit

Permalink
[Optimized ]Optimized job creation and added template functionality (D…
Browse files Browse the repository at this point in the history
…ataLinkDC#2940)

* Optimized job creation and added template functionality

* formate code

* remove unuse code
  • Loading branch information
gaoyan1998 authored Jan 7, 2024
1 parent abc5385 commit 57465e4
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 41 deletions.
1 change: 1 addition & 0 deletions dinky-web/src/locales/en-US/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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':
Expand Down
1 change: 1 addition & 0 deletions dinky-web/src/locales/zh-CN/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export default {
* */

'catalog.name': '作业名称',
'catalog.useTemplate': '使用模板',
'catalog.name.placeholder': '请输入作业名称',
'catalog.name.validate.error': '作业名称不允许出现 _ 字符,K8s 命名规范',
'catalog.name.tip': '此名称可作为 FlinkSql 任务的 JobName',
Expand Down
Original file line number Diff line number Diff line change
@@ -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<Document>();

useEffect(() => {
setCurrentSelect(undefined);
onChange('');
}, [type]);

const renderItem = (item: Document) => {
return (
<div style={{ padding: 10, background: '#F8F9FA' }}>
<ProCard
checked={item.id == currentSelect?.id}
hoverable
bordered
title={
<Typography.Text ellipsis={true} style={{ width: '150px' }}>
{item.description}
</Typography.Text>
}
bodyStyle={{ padding: 8 }}
onClick={() => {
setCurrentSelect(item);
onChange(item.fillValue);
}}
>
<CodeShow
code={item.fillValue}
language={'sql'}
height={'15vh'}
lineNumbers={'off'}
options={{
renderSideBySide: false,
fontSize: 9,
scrollbar: {
vertical: 'hidden',
horizontal: 'hidden'
}
}}
/>
</ProCard>
</div>
);
};

return (
<ProCard
bodyStyle={{ padding: 0 }}
collapsible
defaultCollapsed={true}
title={<a>{l('catalog.useTemplate')}</a>}
collapsibleIconRender={() => <a>{'>'}</a>}
size={'small'}
ghost
>
<ProList<Document>
pagination={{
pageSize: 6,
size: 'small',
showTotal: () => (
<Typography.Link href={'#/registration/document'}>
+ {l('rc.cc.addConfig')}
</Typography.Link>
)
}}
params={{ subtype: type }}
grid={{ gutter: 24, column: 3 }}
renderItem={renderItem}
request={(params) => queryList(API_CONSTANTS.DOCUMENT, { ...params })}
/>
</ProCard>
);
};

export default TemplateSelect;
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -42,6 +50,7 @@ const JobModal: React.FC<JobModalProps> = (props) => {
const { onCancel, onSubmit, modalVisible, title, values } = props;
const [jobType, setJobType] = React.useState<string>(values.type || 'FlinkSql');
const [udfTemplate, setUdfTemplate] = React.useState<DefaultOptionType[]>([]);
const [sqlTemplate, setSqlTemplate] = React.useState<string>('');
const [form] = Form.useForm<Catalogue>();

/**
Expand Down Expand Up @@ -87,6 +96,7 @@ const JobModal: React.FC<JobModalProps> = (props) => {
*/
const handleCancel = () => {
formContext.resetForm();
setJobType('');
onCancel();
};

Expand Down Expand Up @@ -119,11 +129,12 @@ const JobModal: React.FC<JobModalProps> = (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);
}
};

Expand All @@ -146,7 +157,16 @@ const JobModal: React.FC<JobModalProps> = (props) => {
const renderForm = () => {
return (
<>
{!values.id && (
<ProFormGroup>
<ProFormText
name='name'
label={l('catalog.name')}
tooltip={l('catalog.name.tip')}
placeholder={l('catalog.name.placeholder')}
validateTrigger={['onBlur', 'onChange', 'onSubmit']}
rules={[{ required: true, validator: validateName }]}
width={'md'}
/>
<ProFormSelect
name={'type'}
label={l('catalog.type')}
Expand All @@ -157,23 +177,23 @@ const JobModal: React.FC<JobModalProps> = (props) => {
placeholder={l('catalog.type.placeholder')}
rules={[{ required: true, message: l('catalog.type.placeholder') }]}
allowClear={false}
width={'sm'}
/>
)}
<ProFormText
name='name'
label={l('catalog.name')}
tooltip={l('catalog.name.tip')}
placeholder={l('catalog.name.placeholder')}
validateTrigger={['onBlur', 'onChange', 'onSubmit']}
rules={[{ required: true, validator: validateName }]}
/>
<ProFormTextArea
name='note'
label={l('catalog.note')}
placeholder={l('catalog.note.placeholder')}
/>
</ProFormGroup>
{isUDF(jobType) && (
<>
<ProFormGroup>
<ProFormText
name={['configJson', 'udfConfig', 'className']}
label={l('catalog.udf.className')}
placeholder={l('catalog.udf.className.placeholder')}
rules={[
{
required: true,
message: l('catalog.udf.className.placeholder')
}
]}
width={'md'}
/>
<ProFormCascader
name={['configJson', 'udfConfig', 'selectKeys']}
label={l('catalog.udf.templateId')}
Expand All @@ -189,20 +209,21 @@ const JobModal: React.FC<JobModalProps> = (props) => {
message: l('catalog.udf.templateId.placeholder')
}
]}
width={'sm'}
/>
</ProFormGroup>
)}
<ProFormTextArea
name='note'
label={l('catalog.note')}
placeholder={l('catalog.note.placeholder')}
/>

<ProFormText
name={['configJson', 'udfConfig', 'className']}
label={l('catalog.udf.className')}
placeholder={l('catalog.udf.className.placeholder')}
rules={[
{
required: true,
message: l('catalog.udf.className.placeholder')
}
]}
/>
</>
{/*不支持UDF模板*/}
{!isUDF(jobType) && (
<ProFormDependency name={['type']}>
{({ type }) => <TemplateSelect type={type} onChange={(v) => setSqlTemplate(v)} />}
</ProFormDependency>
)}
</>
);
Expand All @@ -212,10 +233,9 @@ const JobModal: React.FC<JobModalProps> = (props) => {
<ModalForm<Catalogue>
title={title}
form={form}
width={'30%'}
width={'40%'}
initialValues={{ ...values }}
open={modalVisible}
layout={'horizontal'}
autoFocusFirstInput
onValuesChange={onValuesChange}
modalProps={{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -116,7 +111,7 @@ const YarnConfig = (props: { flinkConfigOptions: DefaultOptionType[] }) => {
>
<ProFormGroup key='flinkGroup' style={{ display: 'flex', width: '100%' }}>
<Space key={'config'} style={{ display: 'flex' }} align='baseline'>
<ProFormSelect
<FlinkOptionsSelect
name='name'
width={'md'}
mode={'single'}
Expand Down

0 comments on commit 57465e4

Please sign in to comment.