Optimized the Flink configuration form

dinky-common/src/main/resources/i18n/messages_zh_CN.properties

@@ -180,7 +180,7 @@ sys.env.settings.dinkyAddr.note=该地址必须与Dinky Application后台url中
 sys.env.settings.maxRetainDays=作业历史最大保留天数
 sys.env.settings.maxRetainDays.note=提交的作业历史与自动注册的集群记录最大保留天数，过期会被自动删除
 sys.env.settings.maxRetainCount=作业历史最大保留数量
-sys.env.settings.maxRetainCount.note=提交的作业历史与自动注册的集群记录最大保留数量，如果不足该数量，则不会被删除，即使已经过了做大保留天数
+sys.env.settings.maxRetainCount.note=提交的作业历史与自动注册的集群记录最大保留数量，如果不足该数量，则不会被删除，即使已经过了最大保留天数
 
 sys.dolphinscheduler.settings.enable=是否启用 DolphinScheduler
 sys.dolphinscheduler.settings.enable.note=是否启用 DolphinScheduler ,启用后才能使用 DolphinScheduler 的相关功能,请先填写下列配置项,完成后再开启此项配置, 另:请确保 DolphinScheduler 的相关配置正确

dinky-web/src/components/Flink/OptionsSelect/index.tsx

@@ -0,0 +1,48 @@
+/*
+ *
+ *  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 { l } from '@/utils/intl';
+import { ProFormSelect } from '@ant-design/pro-components';
+import { ProFormSelectProps } from '@ant-design/pro-form/es/components/Select';
+import { Divider, Typography } from 'antd';
+
+const { Link } = Typography;
+
+export type FlinkOptionsProps = ProFormSelectProps & {};
+
+const FlinkOptionsSelect = (props: FlinkOptionsProps) => {
+  const renderTemplateDropDown = (item: any) => {
+    return (
+      <>
+        <Link href={'#/registration/document'}>+ {l('rc.cc.addConfig')}</Link>
+        <Divider style={{ margin: '8px 0' }} />
+        {item}
+      </>
+    );
+  };
+
+  return (
+    <ProFormSelect
+      {...props}
+      fieldProps={{ dropdownRender: (item) => renderTemplateDropDown(item) }}
+    />
+  );
+};
+
+export default FlinkOptionsSelect;

dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx

@@ -32,7 +32,7 @@ import { transformTableDataToCsv } from '@/utils/function';
 import { l } from '@/utils/intl';
 import { SearchOutlined } from '@ant-design/icons';
 import { Highlight } from '@ant-design/pro-layout/es/components/Help/Search';
-import {Button, Empty, Input, InputRef, Space, Table, Tabs} from 'antd';
+import { Button, Empty, Input, InputRef, Space, Table, Tabs } from 'antd';
 import { ColumnsType, ColumnType } from 'antd/es/table';
 import { FilterConfirmProps } from 'antd/es/table/interface';
 import { DataIndex } from 'rc-table/es/interface';
@@ -44,7 +44,7 @@ type Data = {
   columns?: string[];
   rowData?: object[];
 };
-type DataList=Data[];
+type DataList = Data[];
 const Result = (props: any) => {
   const {
     tabs: { panes, activeKey }
@@ -132,11 +132,9 @@ const Result = (props: any) => {
     const consoleData = currentTabs.console;
     if (consoleData.result && !isRefresh) {
       setData(consoleData.result);
-    }
-    else if(consoleData.results && !isRefresh){
-      setDataList(consoleData.results)
-    }
-    else {
+    } else if (consoleData.results && !isRefresh) {
+      setDataList(consoleData.results);
+    } else {
       if (current.dialect && current.dialect.toLowerCase() == DIALECT.FLINK_SQL) {
         // flink sql
         // to do: get job data by history id list, not flink jid
@@ -173,7 +171,7 @@ const Result = (props: any) => {
     setData({});
     setDataList([]);
     loadData();
-  }, [currentTabs?.console?.result,currentTabs?.console?.results]);
+  }, [currentTabs?.console?.result, currentTabs?.console?.results]);
 
   const getColumns = (columns: string[]) => {
     return columns?.map((item) => {
@@ -243,28 +241,26 @@ const Result = (props: any) => {
           })}
           loading={loading}
         />
+      ) : dataList.length > 0 ? (
+        <Tabs defaultActiveKey='0'>
+          {dataList.map((data, index) => {
+            return (
+              <Tabs.TabPane key={index} tab={`Table ${index + 1}`}>
+                <Table
+                  columns={getColumns(data.columns)}
+                  size='small'
+                  dataSource={data.rowData?.map((item: any, index: number) => {
+                    return { ...item, key: index };
+                  })}
+                  loading={loading}
+                />
+              </Tabs.TabPane>
+            );
+          })}
+        </Tabs>
       ) : (
-        dataList.length>0?(
-
-            <Tabs defaultActiveKey="0">
-              {dataList.map((data, index) => {
-                return (
-                  <Tabs.TabPane key={index} tab={`Table ${index + 1}`}>
-                    <Table
-                      columns={getColumns(data.columns)}
-                      size='small'
-                      dataSource={data.rowData?.map((item: any, index: number) => {
-                        return { ...item, key: index };
-                      })}
-                      loading={loading}
-                    />
-                  </Tabs.TabPane>
-                );
-              })}
-            </Tabs>):
-            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-          )}
-
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      )}
     </div>
   );
 };

dinky-web/src/pages/DataStudio/HeaderContainer/index.tsx

@@ -223,8 +223,7 @@ const HeaderContainer = (props: connect) => {
     if (isSql(currentData.dialect)) {
       currentData.status = JOB_STATUS.FINISHED;
       if (currentTab) currentTab.console.results = res.data.results;
-    }
-    else {
+    } else {
       if (currentTab) currentTab.console.result = res.data.result;
     }
     // Common sql task is synchronized, so it needs to automatically update the status to finished.

dinky-web/src/pages/DataStudio/RightContainer/JobConfig/index.tsx

@@ -17,6 +17,7 @@
  *
  */
 
+import FlinkOptionsSelect from '@/components/Flink/OptionsSelect';
 import { SAVE_POINT_TYPE } from '@/pages/DataStudio/constants';
 import {
   getCurrentData,
@@ -305,7 +306,7 @@ const JobConfig = (props: any) => {
         >
           <ProFormGroup>
             <Space key={'config'} align='baseline'>
-              <ProFormSelect
+              <FlinkOptionsSelect
                 name='key'
                 width={calculatorWidth(rightContainer.width) + 30}
                 mode={'single'}

dinky-web/src/pages/DataStudio/model.ts

@@ -110,7 +110,7 @@ export type TaskType = {
 };
 
 export type ConsoleType = {
-  results:{}[];
+  results: {}[];
   // eslint-disable-next-line @typescript-eslint/ban-types
   result: {};
   // eslint-disable-next-line @typescript-eslint/ban-types

dinky-web/src/pages/RegCenter/Cluster/Configuration/components/ConfigurationModal/ConfigurationForm/FlinkK8s/index.tsx

@@ -18,6 +18,7 @@
  */
 
 import CodeEdit from '@/components/CustomEditor/CodeEdit';
+import FlinkOptionsSelect from '@/components/Flink/OptionsSelect';
 import { TagAlignCenter } from '@/components/StyledComponents';
 import { StateType } from '@/pages/DataStudio/model';
 import {
@@ -209,7 +210,7 @@ const FlinkK8s = (props: { type: string; value: any; form: FormInstance<Values>
           >
             <ProFormGroup key='flinkGroup'>
               <Space key={'config'} style={{ display: 'flex' }} align='baseline'>
-                <ProFormSelect
+                <FlinkOptionsSelect
                   name='name'
                   width={'md'}
                   mode={'single'}