From 71e8a1fcba8dc877a27f6e298368f77c9fdf4de9 Mon Sep 17 00:00:00 2001 From: Zzm0809 <934230207@qq.com> Date: Thu, 18 Jan 2024 14:36:05 +0800 Subject: [PATCH] [Fix-2982][web] fix job execute model render error (#3017) Co-authored-by: Zzm0809 --- .../src/components/WaterMarkExt/index.tsx | 53 ++++++ dinky-web/src/locales/en-US/pages.ts | 2 + dinky-web/src/locales/zh-CN/pages.ts | 1 + .../StudioEditor/constants.tsx | 3 +- .../RightContainer/JobConfig/function.tsx | 2 +- .../RightContainer/JobConfig/index.tsx | 163 +++++++----------- dinky-web/src/pages/DataStudio/model.ts | 15 +- dinky-web/src/utils/intl.ts | 4 + 8 files changed, 130 insertions(+), 113 deletions(-) create mode 100644 dinky-web/src/components/WaterMarkExt/index.tsx diff --git a/dinky-web/src/components/WaterMarkExt/index.tsx b/dinky-web/src/components/WaterMarkExt/index.tsx new file mode 100644 index 0000000000..8be551864a --- /dev/null +++ b/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} + ) : ( + <> + + {children} + + + )} + + ); +}; + +export default WaterMarkExt; diff --git a/dinky-web/src/locales/en-US/pages.ts b/dinky-web/src/locales/en-US/pages.ts index 55d10342df..3b0763d435 100644 --- a/dinky-web/src/locales/en-US/pages.ts +++ b/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. ', diff --git a/dinky-web/src/locales/zh-CN/pages.ts b/dinky-web/src/locales/zh-CN/pages.ts index e79b4e0878..887bc2c3e2 100644 --- a/dinky-web/src/locales/zh-CN/pages.ts +++ b/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 执行环境，会提前执行环境语句，默认无。', diff --git a/dinky-web/src/pages/DataStudio/MiddleContainer/StudioEditor/constants.tsx b/dinky-web/src/pages/DataStudio/MiddleContainer/StudioEditor/constants.tsx index 799d8383e7..fd7b3af421 100644 --- a/dinky-web/src/pages/DataStudio/MiddleContainer/StudioEditor/constants.tsx +++ b/dinky-web/src/pages/DataStudio/MiddleContainer/StudioEditor/constants.tsx @@ -56,5 +56,6 @@ export const TASK_VAR_FILTER = [ 'clusterConfigurationName', 'databaseName', 'envName', - 'alertGroupName' + 'alertGroupName', + 'variables' ]; diff --git a/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/function.tsx b/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/function.tsx index a1313f82dd..83e6695519 100644 --- a/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/function.tsx +++ b/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) diff --git a/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/index.tsx b/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/index.tsx index 098ad52536..af0a1e66d9 100644 --- a/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/index.tsx +++ b/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(current?.type ?? RUN_MODE.LOCAL); + const [selectRunMode, setSelectRunMode] = useState(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 ? ( - - - {currentSession.sessionConfig.clusterName} - - ) : ( - - - {l('pages.devops.jobinfo.localenv')} - - ); - - const execMode = currentSession.session ? ( - statusElement - ) : ( - - ); - return ( -
+
+ {current?.step === JOB_LIFE_CYCLE.PUBLISH && ( + <> + + + )} { 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 > { }} allowClear={false} /> + {selectRunMode !== RUN_MODE.LOCAL && ( + <> + {/*集群实例渲染逻辑*/} + {isCanRenderClusterInstance(selectRunMode) && ( + <> + + + )} - {isCanRenderClusterInstance(selectRunMode) && <>{execMode}} - - {isCanRenderClusterConfiguration(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', '', { + type: selectRunMode + }) + } + ]} + options={buildClusterConfigOptions(selectRunMode, clusterConfiguration)} + allowClear={false} + /> + )} + )} - {current?.dialect?.toLowerCase() === DIALECT.FLINK_SQL && ( + {current?.dialect && current?.dialect?.toLowerCase() === DIALECT.FLINK_SQL && ( { max={9999} min={1} /> - {/*{current?.dialect?.toLowerCase() === DIALECT.FLINK_SQL && ( - - }} - {...SWITCH_OPTIONS()} - /> - )}*/} - { } return getIntl().formatMessage({ id, defaultMessage }, value); }; + +export const parseSplitI18nToWaterMarkList = (i18nMsg: string, splitter: string): string[] => { + return i18nMsg.split(splitter); +};