This is an automated email from the ASF dual-hosted git repository. benjobs pushed a commit to branch FE_docker_setting in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
commit c2c038d00f0b9de07bbe7ea437370cc805d08622 Author: benjobs <[email protected]> AuthorDate: Wed Feb 28 18:03:56 2024 +0800 [Improve] docker|email setting FE improvement --- .../console/core/controller/SettingController.java | 2 +- .../src/api/flink/setting/index.ts | 30 ++++++++++++-- .../src/assets/icons/maven.svg | 2 +- .../src/layouts/default/header/index.vue | 10 ++--- .../src/locales/lang/en/setting/system.ts | 18 ++++---- .../src/locales/lang/zh-CN/setting/system.ts | 38 ++++++++--------- .../src/utils/http/axios/index.ts | 2 +- .../src/views/setting/System/SettingForm.vue | 48 ++++++++++++++++++---- .../src/views/setting/System/config.ts | 4 +- 9 files changed, 102 insertions(+), 52 deletions(-) diff --git a/streampark-console/streampark-console-service/src/main/java/org/apache/streampark/console/core/controller/SettingController.java b/streampark-console/streampark-console-service/src/main/java/org/apache/streampark/console/core/controller/SettingController.java index 6517e7e1e..12555964d 100644 --- a/streampark-console/streampark-console-service/src/main/java/org/apache/streampark/console/core/controller/SettingController.java +++ b/streampark-console/streampark-console-service/src/main/java/org/apache/streampark/console/core/controller/SettingController.java @@ -122,7 +122,7 @@ public class SettingController { } @Operation(summary = "Check hadoop status") - @PostMapping("checkHadoop") + @PostMapping("check/hadoop") public RestResponse checkHadoop() { try { HadoopUtils.hdfs().getStatus(); diff --git a/streampark-console/streampark-console-webapp/src/api/flink/setting/index.ts b/streampark-console/streampark-console-webapp/src/api/flink/setting/index.ts index 4e0689872..c0d7045fc 100644 --- a/streampark-console/streampark-console-webapp/src/api/flink/setting/index.ts +++ b/streampark-console/streampark-console-webapp/src/api/flink/setting/index.ts @@ -19,10 +19,14 @@ import { defHttp } from '/@/utils/http/axios'; enum SETTING_APi { GET = '/flink/setting/get', + GET_DOCKER = '/flink/setting/docker', + GET_EMAIL = '/flink/setting/email', ALL = '/flink/setting/all', - CHECK_HADOOP = '/flink/setting/checkHadoop', UPDATE = '/flink/setting/update', + CHECK_HADOOP = '/flink/setting/check/hadoop', + CHECK_DOCKER = '/flink/setting/check/docker', UPDATE_DOCKER = '/flink/setting/update/docker', + CHECK_EMAIL = '/flink/setting/check/email', UPDATE_ALERT = '/flink/setting/update/email', } /** @@ -64,14 +68,34 @@ export function fetchCheckHadoop(): Promise<boolean> { * get docker setting info */ export function fetchDockerConfig() { - return defHttp.post({ url: '/flink/setting/docker' }); + return defHttp.post({ url: SETTING_APi.GET_DOCKER }); +} + +/** + * verify docker setting info + */ +export function fetchVerifyDocker(data: Recordable): Promise<boolean> { + return defHttp.post({ + url: SETTING_APi.CHECK_DOCKER, + data, + }); +} + +/** + * verify docker setting info + */ +export function fetchVerifyEmail(data: Recordable): Promise<boolean> { + return defHttp.post({ + url: SETTING_APi.CHECK_EMAIL, + data, + }); } /** * get alert setting info */ export function fetchEmailConfig() { - return defHttp.post({ url: '/flink/setting/email' }); + return defHttp.post({ url: SETTING_APi.GET_EMAIL }); } /** diff --git a/streampark-console/streampark-console-webapp/src/assets/icons/maven.svg b/streampark-console/streampark-console-webapp/src/assets/icons/maven.svg index 4698a8643..5f7bcdf25 100644 --- a/streampark-console/streampark-console-webapp/src/assets/icons/maven.svg +++ b/streampark-console/streampark-console-webapp/src/assets/icons/maven.svg @@ -1 +1 @@ -<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";><svg t="1615703567163" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"; p-id="5337" xmlns:xlink="http://www.w3.org/1999/xlink"; width="200" height="200"><defs><style type="text/css"></style></defs><path d="M105.344 681.92l134.144-288.128 84.48-189.824c49.024 0.512 87.68 0.768 115.84 0.768 23.232 0 58.88-0.256 107.136-0. [...] +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";><svg t="1615703567163" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"; p-id="5337" xmlns:xlink="http://www.w3.org/1999/xlink"; width="200" height="200"><defs><style type="text/css"></style></defs><path d="M105.344 681.92l134.144-288.128 84.48-189.824c49.024 0.512 87.68 0.768 115.84 0.768 23.232 0 58.88-0.256 107.136-0. [...] diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/header/index.vue b/streampark-console/streampark-console-webapp/src/layouts/default/header/index.vue index 63f21c8e8..839a048a9 100755 --- a/streampark-console/streampark-console-webapp/src/layouts/default/header/index.vue +++ b/streampark-console/streampark-console-webapp/src/layouts/default/header/index.vue @@ -39,13 +39,9 @@ </a-button> <Divider type="vertical" /> - <Popover - placement="bottom" - trigger="hover" - arrow-point-at-center - > + <Popover placement="bottom" trigger="hover" arrow-point-at-center> <template #content> - <img src="/@/assets/images/join_wechat.png" alt="qrcode" class="h-150px w-150px"/> + <img src="/@/assets/images/join_wechat.png" alt="qrcode" class="h-150px w-150px" /> </template> <Icon icon="ant-design:qrcode-outlined" :class="`${prefixCls}-action__item`" /> </Popover> @@ -130,7 +126,7 @@ LockScreen, Divider, AppDarkModeToggle, - Popover + Popover, }, props: { fixed: propTypes.bool, diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/en/setting/system.ts b/streampark-console/streampark-console-webapp/src/locales/lang/en/setting/system.ts index 106d439ba..8e856d67b 100644 --- a/streampark-console/streampark-console-webapp/src/locales/lang/en/setting/system.ts +++ b/streampark-console/streampark-console-webapp/src/locales/lang/en/setting/system.ts @@ -38,7 +38,7 @@ export default { }, docker: { address: { - label: 'Docker Register Address', + label: 'Docker Address', desc: 'Docker container service address', }, namespace: { @@ -46,37 +46,37 @@ export default { desc: 'Namespace for docker image used in docker building env and target image register', }, userName: { - label: 'Docker Register User', + label: 'Docker Username', desc: 'Docker container service authentication username', }, password: { - label: 'Docker Register Password', + label: 'Docker Password', desc: 'Docker container service authentication password', }, }, email: { host: { - label: 'Alert Email Smtp Host', + label: 'Smtp Host', desc: 'Alert Mailbox Smtp Host', }, port: { - label: 'Alert Email Smtp Port', + label: 'Smtp Port', desc: 'Smtp Port of the alarm mailbox', }, from: { - label: 'Alert Email From', + label: 'Email Address', desc: 'Email to send alerts', }, userName: { - label: 'Alert Email User', + label: 'Email Username', desc: 'Authentication username used to send alert emails', }, password: { - label: 'Alert Email Password', + label: 'Email Password', desc: 'Authentication password used to send alarm email', }, ssl: { - label: 'Alert Email SSL', + label: 'SSL enable', desc: 'Whether to enable SSL in the mailbox that sends the alert', }, }, diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/setting/system.ts b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/setting/system.ts index 9b7c74fe2..fe84288d9 100644 --- a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/setting/system.ts +++ b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/setting/system.ts @@ -38,45 +38,45 @@ export default { }, docker: { address: { - label: 'Docker注册地址', - desc: 'Docker容器服务地址', + label: 'Docker 地址', + desc: 'Docker 容器的服务地址', }, namespace: { - label: 'Docker命名空间', - desc: 'Docker构建环境和目标镜像注册使用的命名空间', + label: 'Docker 命名空间', + desc: 'Docker 构建环境和目标镜像注册使用的命名空间', }, userName: { - label: 'Docker注册用户', - desc: 'Docker容器服务认证用户名', + label: 'Docker 用户名', + desc: 'Docker 容器服务认证用户名', }, password: { - label: 'Docker注册密码', - desc: 'Docker容器服务认证密码', + label: 'Docker 密码', + desc: 'Docker 容器服务认证密码', }, }, email: { host: { - label: '告警邮件Smtp主机', - desc: '告警邮箱Smtp主机', + label: '邮件Smtp主机', + desc: '告警邮箱 Smtp主机', }, port: { - label: '告警邮件Smtp端口', - desc: '告警邮箱Smtp端口', + label: '邮箱Smtp端口', + desc: '告警邮箱 Smtp端口', }, userName: { - label: '告警邮件用户名', - desc: '用于发送告警邮件的用户名认证', + label: '邮箱用户名', + desc: '用于发送告警邮件的认证用户名', }, password: { - label: '告警邮件密码', - desc: '用于发送告警邮件的密码认证', + label: '邮箱密码', + desc: '用于发送告警邮件的认证密码', }, from: { - label: '告警邮件发送者', - desc: '发送告警的邮箱', + label: '邮箱地址', + desc: '用于发送告警的邮箱', }, ssl: { - label: '告警邮件SSL', + label: '开启 SSL', desc: '是否在发送告警邮箱中启用 SSL', }, }, diff --git a/streampark-console/streampark-console-webapp/src/utils/http/axios/index.ts b/streampark-console/streampark-console-webapp/src/utils/http/axios/index.ts index 7123a7ada..3b8f7e27e 100644 --- a/streampark-console/streampark-console-webapp/src/utils/http/axios/index.ts +++ b/streampark-console/streampark-console-webapp/src/utils/http/axios/index.ts @@ -95,7 +95,7 @@ const transform: AxiosTransform = { formatDate && data && !isString(data) && formatRequestDate(data); const teamId = getUserTeamId(); const localStore = useLocaleStoreWithOut(); - config.headers = Object.assign(config.headers || {}, { 'language': localStore.getLocale }); + config.headers = Object.assign(config.headers || {}, { language: localStore.getLocale }); if (config.method?.toUpperCase() === RequestEnum.GET) { if (!isString(params)) { // Add a timestamp parameter to the get request to avoid taking data from the cache. diff --git a/streampark-console/streampark-console-webapp/src/views/setting/System/SettingForm.vue b/streampark-console/streampark-console-webapp/src/views/setting/System/SettingForm.vue index abb2059cb..c1ed46e88 100644 --- a/streampark-console/streampark-console-webapp/src/views/setting/System/SettingForm.vue +++ b/streampark-console/streampark-console-webapp/src/views/setting/System/SettingForm.vue @@ -16,7 +16,6 @@ --> <script setup lang="ts"> import { computed, ref } from 'vue'; - import { SettingTwoTone } from '@ant-design/icons-vue'; import { BasicForm, FormSchema, useForm } from '/@/components/Form'; import { BasicModal, useModalInner } from '/@/components/Modal'; import { @@ -24,11 +23,15 @@ fetchEmailUpdate, fetchDockerConfig, fetchDockerUpdate, + fetchVerifyDocker, + fetchVerifyEmail, } from '/@/api/flink/setting'; import { useMessage } from '/@/hooks/web/useMessage'; import { useI18n } from '/@/hooks/web/useI18n'; import { isNullOrUnDef } from '/@/utils/is'; import { settingFormSchema } from './config'; + import { SvgIcon } from '/@/components/Icon'; + import Swal from 'sweetalert2'; const emit = defineEmits(['success', 'register']); const { createMessage } = useMessage(); @@ -68,11 +71,11 @@ }); const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({ colon: true, - labelWidth: 180, + labelWidth: 140, name: 'SettingForm', labelCol: { span: 8 }, - wrapperCol: { span: 15 }, - baseColProps: { span: 23 }, + wrapperCol: { span: 14 }, + baseColProps: { span: 24 }, showActionButtonGroup: false, }); const formSchemas = computed((): FormSchema[] => { @@ -90,8 +93,34 @@ async function handleOk() { try { const formData = await validate(); - if (type.value === 'docker') await fetchDockerUpdate(formData); - if (type.value === 'email') await fetchEmailUpdate(formData); + if (type.value === 'docker') { + const resp = await fetchVerifyDocker(formData); + if (resp.status === 200) { + await fetchDockerUpdate(formData); + } else { + Swal.fire({ + icon: 'error', + title: resp.msg, + showConfirmButton: true, + timer: 3500, + }); + return; + } + } + if (type.value === 'email') { + const resp = await fetchVerifyEmail(formData); + if (resp.status === 200) { + await fetchEmailUpdate(formData); + } else { + Swal.fire({ + icon: 'error', + title: resp.msg, + showConfirmButton: true, + timer: 3500, + }); + return; + } + } createMessage.success(t('setting.system.update.success')); closeModal(); emit('success'); @@ -107,15 +136,16 @@ <template> <BasicModal @register="registerModal" - :width="750" + :width="650" @ok="handleOk" :after-close="afterClose" centered > <template #title> - <SettingTwoTone class="ml-10px" theme="twoTone" two-tone-color="#4a9ff5" /> + <SvgIcon v-if="type === 'docker'" name="docker" size="20" class="ml-10px" /> + <SvgIcon v-if="type === 'email'" name="mail" size="18" class="ml-10px" /> {{ title }} </template> - <BasicForm @register="registerForm" :schemas="formSchemas" /> + <BasicForm @register="registerForm" :schemas="formSchemas" style="margin-top: 30px" /> </BasicModal> </template> diff --git a/streampark-console/streampark-console-webapp/src/views/setting/System/config.ts b/streampark-console/streampark-console-webapp/src/views/setting/System/config.ts index aeaeed515..f8aa94850 100644 --- a/streampark-console/streampark-console-webapp/src/views/setting/System/config.ts +++ b/streampark-console/streampark-console-webapp/src/views/setting/System/config.ts @@ -42,7 +42,7 @@ export const settingFormSchema: SettingForm = { helpMessage: t('setting.system.docker.namespace.desc'), component: 'Input', componentProps: { - placeholder: t('setting.system.docker.address.label'), + placeholder: t('setting.system.docker.namespace.label'), }, required: true, }, @@ -52,7 +52,7 @@ export const settingFormSchema: SettingForm = { helpMessage: t('setting.system.docker.userName.desc'), component: 'Input', componentProps: { - placeholder: t('setting.system.docker.address.label'), + placeholder: t('setting.system.docker.userName.label'), }, required: true, },
