[Fix-2982][web] fix job execute model render error (DataLinkDC#3017)

Co-authored-by: Zzm0809 <[email protected]>

dinky-web/src/components/WaterMarkExt/index.tsx

@@ -0,0 +1,53 @@
+/*
+ *
+ *  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 { WaterMark } from '@ant-design/pro-components';
+import React from 'react';
+
+interface WaterMarkExtProps {
+  children: React.ReactNode;
+  hiddenWaterMark?: boolean;
+  waterMarkContent?: string[] | string;
+  contentColor?: string;
+}
+
+const WaterMarkExt = (props: WaterMarkExtProps) => {
+  const { children, hiddenWaterMark, waterMarkContent = [] || '', contentColor } = props;
+
+  return (
+    <>
+      {hiddenWaterMark ? (
+        <>{children}</>
+      ) : (
+        <>
+          <WaterMark
+            fontColor={contentColor}
+            fontStyle={'oblique'}
+            fontSize={18}
+            content={waterMarkContent}
+          >
+            {children}
+          </WaterMark>
+        </>
+      )}
+    </>
+  );
+};
+
+export default WaterMarkExt;

dinky-web/src/locales/en-US/pages.ts

@@ -442,6 +442,8 @@ export default {
     'If there is no data in the drop-down box, please configure/create a new cluster instance first, or check whether the cluster configuration/cluster instance is healthy and available.',
   'pages.datastudio.label.jobConfig.execmode.tip':
     'Specify the execution mode of the Flink task, the default is Local',
+  'pages.datastudio.label.jobConfig.watermark':
+    'Current task has published,Config cannot modified,If you need to modify, please offline first',
   'pages.datastudio.label.jobConfig.flinksql.env': 'FlinkSQL environment',
   'pages.datastudio.label.jobConfig.flinksql.env.tip1':
     'Select the FlinkSQL execution environment of the current task, and the environment statement will be executed in advance. The default is none. ',

dinky-web/src/locales/zh-CN/pages.ts

@@ -422,6 +422,7 @@ export default {
   'pages.datastudio.label.jobConfig.clusterConfig.tip2':
     '如下拉框无数据,请先配置/新建集群实例,或者检查集群配置/集群实例是否为健康可用状态',
   'pages.datastudio.label.jobConfig.execmode.tip': '指定 Flink 任务的执行模式，默认为 Local',
+  'pages.datastudio.label.jobConfig.watermark': '当前任务已发布，配置禁止修改，如需修改，请先下线',
   'pages.datastudio.label.jobConfig.flinksql.env': 'FlinkSQL 环境',
   'pages.datastudio.label.jobConfig.flinksql.env.tip1':
     '选择当前任务的 FlinkSQL 执行环境，会提前执行环境语句，默认无。',

dinky-web/src/pages/DataStudio/MiddleContainer/StudioEditor/constants.tsx

@@ -56,5 +56,6 @@ export const TASK_VAR_FILTER = [
   'clusterConfigurationName',
   'databaseName',
   'envName',
-  'alertGroupName'
+  'alertGroupName',
+  'variables'
 ];

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

@@ -75,7 +75,7 @@ export const buildRunModelOptions = () => {
  */
 export const buildClusterOptions = (
   selectedRunMode: string,
-  sessionCluster: Cluster.Instance[]
+  sessionCluster: Cluster.Instance[] = []
 ) => {
   const sessionClusterOptions: DefaultOptionType[] = [];
   // filter session cluster options, and need to filter auto register cluster and status is normal(1)

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

@@ -24,7 +24,7 @@ import {
   getCurrentTab,
   isDataStudioTabsItemType
 } from '@/pages/DataStudio/function';
-import { SessionType, StateType, STUDIO_MODEL, STUDIO_MODEL_ASYNC } from '@/pages/DataStudio/model';
+import { StateType, STUDIO_MODEL, STUDIO_MODEL_ASYNC } from '@/pages/DataStudio/model';
 import {
   buildAlertGroupOptions,
   buildClusterConfigOptions,
@@ -35,6 +35,7 @@ import {
   isCanRenderClusterConfiguration,
   isCanRenderClusterInstance
 } from '@/pages/DataStudio/RightContainer/JobConfig/function';
+import { JOB_LIFE_CYCLE } from '@/pages/DevOps/constants';
 import { AlertStateType, ALERT_MODEL_ASYNC } from '@/pages/RegCenter/Alert/AlertInstance/model';
 import { DIALECT, RUN_MODE, SWITCH_OPTIONS } from '@/services/constants';
 import { l } from '@/utils/intl';
@@ -48,14 +49,12 @@ import {
   ProFormSwitch,
   ProFormText
 } from '@ant-design/pro-components';
-import { Badge, Space, Typography } from 'antd';
+import { Alert, Space } from 'antd';
 import { useForm } from 'antd/es/form/Form';
 import { debounce } from 'lodash';
 import { useEffect, useState } from 'react';
 import { connect } from 'umi';
 
-const { Text } = Typography;
-
 const JobConfig = (props: any) => {
   const {
     sessionCluster,
@@ -70,16 +69,9 @@ const JobConfig = (props: any) => {
 
   const current = getCurrentData(panes, activeKey);
 
-  const currentSession: SessionType = {
-    connectors: [],
-    sessionConfig: {
-      clusterId: current?.clusterId,
-      clusterName: current?.clusterName
-    }
-  };
   const [form] = useForm();
 
-  const [selectRunMode, setSelectRunMode] = useState<string>(current?.type ?? RUN_MODE.LOCAL);
+  const [selectRunMode, setSelectRunMode] = useState<string>(current?.type);
 
   useEffect(() => {
     dispatch({
@@ -88,8 +80,8 @@ const JobConfig = (props: any) => {
     dispatch({
       type: ALERT_MODEL_ASYNC.queryAlertGroup
     });
-
-    form.setFieldsValue({ ...current, type: current?.type ?? RUN_MODE.LOCAL });
+    setSelectRunMode(current?.type);
+    form.setFieldsValue({ ...current, type: current?.type });
   }, [current]);
 
   const onValuesChange = (change: { [key in string]: any }, all: any) => {
@@ -118,53 +110,13 @@ const JobConfig = (props: any) => {
     });
   };
 
-  const onChangeClusterSession = () => {
-    //todo 这里需要验证
-    // showTables(currentSession.session, dispatch);
-  };
-
-  const statusElement = currentSession.sessionConfig?.clusterId ? (
-    <Space>
-      <Badge status='success' />
-      <Text type='success'>{currentSession.sessionConfig.clusterName}</Text>
-    </Space>
-  ) : (
-    <Space>
-      <Badge status='error' />
-      <Text type='danger'>{l('pages.devops.jobinfo.localenv')}</Text>
-    </Space>
-  );
-
-  const execMode = currentSession.session ? (
-    statusElement
-  ) : (
-    <ProFormSelect
-      style={{ width: '100%' }}
-      placeholder={l('pages.datastudio.label.jobConfig.clusterConfig.tip1', '', {
-        type: current?.type
-      })}
-      label={l('pages.datastudio.label.jobConfig.cluster')}
-      tooltip={l('pages.datastudio.label.jobConfig.clusterConfig.tip1', '', {
-        type: current?.type
-      })}
-      rules={[
-        {
-          required: true,
-          message: l('pages.datastudio.label.jobConfig.clusterConfig.tip1', '', {
-            type: current?.type
-          })
-        }
-      ]}
-      name='clusterId'
-      options={buildClusterOptions(selectRunMode, sessionCluster)}
-      fieldProps={{
-        onChange: onChangeClusterSession
-      }}
-    />
-  );
-
   return (
-    <div style={{ maxHeight: rightContainer.height }}>
+    <div style={{ maxHeight: rightContainer.height, marginTop: 10 }}>
+      {current?.step === JOB_LIFE_CYCLE.PUBLISH && (
+        <>
+          <Alert message={l('pages.datastudio.label.jobConfig.watermark')} type='info' showIcon />
+        </>
+      )}
       <ProForm
         size={'middle'}
         initialValues={{
@@ -175,11 +127,13 @@ const JobConfig = (props: any) => {
           alertGroupId: -1
         }}
         className={'data-studio-form'}
-        style={{ paddingInline: '15px', overflow: 'scroll' }}
+        style={{ paddingInline: '15px', overflow: 'scroll', marginTop: 5 }}
         form={form}
         submitter={false}
         layout='vertical'
+        disabled={current?.step === JOB_LIFE_CYCLE.PUBLISH} // 当该任务处于发布状态时 表单禁用 不允许修改 | when this job is publishing, the form is disabled , and it is not allowed to modify
         onValuesChange={debounce(onValuesChange, 500)}
+        syncToInitialValues
       >
         <ProFormSelect
           name='type'
@@ -195,33 +149,61 @@ const JobConfig = (props: any) => {
           }}
           allowClear={false}
         />
+        {selectRunMode !== RUN_MODE.LOCAL && (
+          <>
+            {/*集群实例渲染逻辑*/}
+            {isCanRenderClusterInstance(selectRunMode) && (
+              <>
+                <ProFormSelect
+                  style={{ width: '100%' }}
+                  placeholder={l('pages.datastudio.label.jobConfig.clusterConfig.tip1', '', {
+                    type: current?.type
+                  })}
+                  label={l('pages.datastudio.label.jobConfig.cluster')}
+                  tooltip={l('pages.datastudio.label.jobConfig.clusterConfig.tip1', '', {
+                    type: current?.type
+                  })}
+                  rules={[
+                    {
+                      required: true,
+                      message: l('pages.datastudio.label.jobConfig.clusterConfig.tip1', '', {
+                        type: current?.type
+                      })
+                    }
+                  ]}
+                  name='clusterId'
+                  options={buildClusterOptions(selectRunMode, sessionCluster)}
+                />
+              </>
+            )}
 
-        {isCanRenderClusterInstance(selectRunMode) && <>{execMode}</>}
-
-        {isCanRenderClusterConfiguration(selectRunMode) && (
-          <ProFormSelect
-            name='clusterConfigurationId'
-            placeholder={l('pages.datastudio.label.jobConfig.clusterConfig.tip1', '', {
-              type: selectRunMode
-            })}
-            label={l('pages.datastudio.label.jobConfig.clusterConfig')}
-            tooltip={l('pages.datastudio.label.jobConfig.clusterConfig.tip2', '', {
-              type: selectRunMode
-            })}
-            rules={[
-              {
-                required: true,
-                message: l('pages.datastudio.label.jobConfig.clusterConfig.tip1', '', {
+            {/*集群配置渲染逻辑*/}
+            {isCanRenderClusterConfiguration(selectRunMode) && (
+              <ProFormSelect
+                name='clusterConfigurationId'
+                placeholder={l('pages.datastudio.label.jobConfig.clusterConfig.tip1', '', {
                   type: selectRunMode
-                })
-              }
-            ]}
-            options={buildClusterConfigOptions(selectRunMode, clusterConfiguration)}
-            allowClear={false}
-          />
+                })}
+                label={l('pages.datastudio.label.jobConfig.clusterConfig')}
+                tooltip={l('pages.datastudio.label.jobConfig.clusterConfig.tip2', '', {
+                  type: selectRunMode
+                })}
+                rules={[
+                  {
+                    required: true,
+                    message: l('pages.datastudio.label.jobConfig.clusterConfig.tip1', '', {
+                      type: selectRunMode
+                    })
+                  }
+                ]}
+                options={buildClusterConfigOptions(selectRunMode, clusterConfiguration)}
+                allowClear={false}
+              />
+            )}
+          </>
         )}
 
-        {current?.dialect?.toLowerCase() === DIALECT.FLINK_SQL && (
+        {current?.dialect && current?.dialect?.toLowerCase() === DIALECT.FLINK_SQL && (
           <ProFormSelect
             name='envId'
             label={l('pages.datastudio.label.jobConfig.flinksql.env')}
@@ -244,19 +226,6 @@ const JobConfig = (props: any) => {
             max={9999}
             min={1}
           />
-          {/*{current?.dialect?.toLowerCase() === DIALECT.FLINK_SQL && (
-            <ProFormSwitch
-              label={l('pages.datastudio.label.jobConfig.insert')}
-              name='statementSet'
-              valuePropName='checked'
-              tooltip={{
-                title: l('pages.datastudio.label.jobConfig.insert.tip'),
-                icon: <InfoCircleOutlined />
-              }}
-              {...SWITCH_OPTIONS()}
-            />
-          )}*/}
-
           <ProFormSwitch
             label={l('pages.datastudio.label.jobConfig.fragment')}
             name='fragment'

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

@@ -233,19 +233,6 @@ export type BottomContainerContent = {
   console: string;
 };
 
-export type SessionType = {
-  session?: string;
-  sessionConfig?: {
-    type?: string;
-    clusterId?: number;
-    clusterName?: string;
-    address?: string;
-  };
-  createUser?: string;
-  createTime?: string;
-  connectors: ConnectorType[];
-};
-
 /**
  * job running type msg
  */
@@ -457,7 +444,7 @@ const Model: ModelType = {
       });
     },
     *querySessionData({ payload }, { call, put }) {
-      const response: SessionType = yield call(getSessionData, payload);
+      const response: Cluster.Instance[] = yield call(getSessionData, payload);
       yield put({
         type: 'saveSession',
         payload: response

dinky-web/src/utils/intl.ts

@@ -25,3 +25,7 @@ export const l = (id: string, defaultMessage?: string, value?: {}): string => {
   }
   return getIntl().formatMessage({ id, defaultMessage }, value);
 };
+
+export const parseSplitI18nToWaterMarkList = (i18nMsg: string, splitter: string): string[] => {
+  return i18nMsg.split(splitter);
+};