This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev-2.1.3
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
The following commit(s) were added to refs/heads/dev-2.1.3 by this push:
new e0455ebad [Improve]: Optimize Docker and Email Settings Page Popup
Content (#3588)
e0455ebad is described below
commit e0455ebada76e919613759a174e11d26747e64e1
Author: Kriszu <[email protected]>
AuthorDate: Wed Feb 28 16:18:07 2024 +0800
[Improve]: Optimize Docker and Email Settings Page Popup Content (#3588)
* fix: setting form modal
* style: modal center
---
.../src/api/flink/setting/index.ts | 2 +-
.../src/locales/lang/en/setting/system.ts | 44 +++++++
.../src/locales/lang/zh-CN/setting/system.ts | 44 +++++++
.../src/views/setting/System/SettingForm.vue | 73 ++++-------
.../src/views/setting/System/config.ts | 138 +++++++++++++++++++++
5 files changed, 251 insertions(+), 50 deletions(-)
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 f12e09378..4e0689872 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
@@ -23,7 +23,7 @@ enum SETTING_APi {
CHECK_HADOOP = '/flink/setting/checkHadoop',
UPDATE = '/flink/setting/update',
UPDATE_DOCKER = '/flink/setting/update/docker',
- UPDATE_ALERT = '/flink/setting/update/alert/email',
+ UPDATE_ALERT = '/flink/setting/update/email',
}
/**
* Get system settings
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 8bfb8d93a..106d439ba 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
@@ -36,4 +36,48 @@ export default {
update: {
success: 'setting updated successfully',
},
+ docker: {
+ address: {
+ label: 'Docker Register Address',
+ desc: 'Docker container service address',
+ },
+ namespace: {
+ label: 'Docker namespace',
+ desc: 'Namespace for docker image used in docker building env and target
image register',
+ },
+ userName: {
+ label: 'Docker Register User',
+ desc: 'Docker container service authentication username',
+ },
+ password: {
+ label: 'Docker Register Password',
+ desc: 'Docker container service authentication password',
+ },
+ },
+ email: {
+ host: {
+ label: 'Alert Email Smtp Host',
+ desc: 'Alert Mailbox Smtp Host',
+ },
+ port: {
+ label: 'Alert Email Smtp Port',
+ desc: 'Smtp Port of the alarm mailbox',
+ },
+ from: {
+ label: 'Alert Email From',
+ desc: 'Email to send alerts',
+ },
+ userName: {
+ label: 'Alert Email User',
+ desc: 'Authentication username used to send alert emails',
+ },
+ password: {
+ label: 'Alert Email Password',
+ desc: 'Authentication password used to send alarm email',
+ },
+ ssl: {
+ label: 'Alert Email SSL',
+ 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 03c138c8e..9b7c74fe2 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
@@ -36,4 +36,48 @@ export default {
update: {
success: '设置更新成功！',
},
+ docker: {
+ address: {
+ label: 'Docker注册地址',
+ desc: 'Docker容器服务地址',
+ },
+ namespace: {
+ label: 'Docker命名空间',
+ desc: 'Docker构建环境和目标镜像注册使用的命名空间',
+ },
+ userName: {
+ label: 'Docker注册用户',
+ desc: 'Docker容器服务认证用户名',
+ },
+ password: {
+ label: 'Docker注册密码',
+ desc: 'Docker容器服务认证密码',
+ },
+ },
+ email: {
+ host: {
+ label: '告警邮件Smtp主机',
+ desc: '告警邮箱Smtp主机',
+ },
+ port: {
+ label: '告警邮件Smtp端口',
+ desc: '告警邮箱Smtp端口',
+ },
+ userName: {
+ label: '告警邮件用户名',
+ desc: '用于发送告警邮件的用户名认证',
+ },
+ password: {
+ label: '告警邮件密码',
+ desc: '用于发送告警邮件的密码认证',
+ },
+ from: {
+ label: '告警邮件发送者',
+ desc: '发送告警的邮箱',
+ },
+ ssl: {
+ label: '告警邮件SSL',
+ desc: '是否在发送告警邮箱中启用 SSL',
+ },
+ },
};
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 03f0c1527..abb2059cb 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
@@ -19,7 +19,6 @@
import { SettingTwoTone } from '@ant-design/icons-vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form';
import { BasicModal, useModalInner } from '/@/components/Modal';
- import { SystemSetting } from '/@/api/flink/setting/types/setting.type';
import {
fetchEmailConfig,
fetchEmailUpdate,
@@ -29,13 +28,14 @@
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { isNullOrUnDef } from '/@/utils/is';
+ import { settingFormSchema } from './config';
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const { t } = useI18n();
defineOptions({ name: 'DockerSetting' });
- const settings = ref<SystemSetting[]>();
+ const settingConfig = ref<Recordable>({});
const type = ref('docker');
const title = computed(() => {
if (type.value == 'docker') return
t('setting.system.systemSettingItems.dockerSetting.name');
@@ -46,21 +46,17 @@
try {
changeLoading(true);
await resetFields();
- let res: any;
type.value = data.type;
if (data.type === 'docker') {
- res = await fetchDockerConfig();
+ settingConfig.value = await fetchDockerConfig();
} else if (data.type === 'email') {
- res = await fetchEmailConfig();
+ settingConfig.value = await fetchEmailConfig();
}
- settings.value = res
- ?.filter((i) => i.settingKey.startsWith(data.type))
- ?.sort((a, b) => a.orderNum - b.orderNum);
await setFieldsValue(
- data.settings.reduce((pre, cur) => {
- if (!isNullOrUnDef(cur.settingValue)) pre[cur.settingKey] =
cur.settingValue;
+ Object.keys(settingConfig.value).reduce((pre, cur) => {
+ if (!isNullOrUnDef(settingConfig.value[cur])) pre[cur] =
settingConfig.value[cur];
return pre;
}, {}),
);
@@ -80,43 +76,16 @@
showActionButtonGroup: false,
});
const formSchemas = computed((): FormSchema[] => {
- return (
- settings.value?.map((item) => {
- const component =
- item.type === 1
- ? item.settingKey.endsWith('password')
- ? 'InputPassword'
- : 'Input'
- : 'Switch';
-
- const getField = () => {
- if (type.value == 'docker') {
- return item.settingKey.replaceAll('docker.register.', '');
- }
- if (type.value == 'email') {
- return item.settingKey.replaceAll('alert.email.', '');
- }
- return item.settingKey;
- };
- return {
- field: getField(),
- label: item.settingName,
- helpMessage: item.description,
- component,
- componentProps:
- component == 'Switch'
- ? {
- checkedChildren: 'ON',
- unCheckedChildren: 'OFF',
- }
- : {
- autocomplete: 'new-password',
- },
- //TODO Required or not according to the back-end interface
- required: item.type == 1,
- };
- }) ?? []
- );
+ if (Reflect.has(settingFormSchema, type.value)) {
+ return settingFormSchema[type.value];
+ }
+ return Object.keys(settingConfig.value).map((key) => {
+ return {
+ field: key,
+ label: key,
+ component: 'Input',
+ };
+ });
});
async function handleOk() {
try {
@@ -131,12 +100,18 @@
}
}
async function afterClose() {
- settings.value = [];
+ settingConfig.value = [];
}
</script>
<template>
- <BasicModal @register="registerModal" :width="750" @ok="handleOk"
:after-close="afterClose">
+ <BasicModal
+ @register="registerModal"
+ :width="750"
+ @ok="handleOk"
+ :after-close="afterClose"
+ centered
+ >
<template #title>
<SettingTwoTone class="ml-10px" theme="twoTone" two-tone-color="#4a9ff5"
/>
{{ title }}
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
new file mode 100644
index 000000000..aeaeed515
--- /dev/null
+++
b/streampark-console/streampark-console-webapp/src/views/setting/System/config.ts
@@ -0,0 +1,138 @@
+/*
+ * 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
+ *
+ * https://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 { FormSchema } from '/@/components/Form';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+export type SettingType = 'docker' | 'email';
+
+type SettingForm = {
+ [P in SettingType]: FormSchema[];
+};
+
+const { t } = useI18n();
+export const settingFormSchema: SettingForm = {
+ docker: [
+ {
+ field: 'address',
+ label: t('setting.system.docker.address.label'),
+ helpMessage: t('setting.system.docker.address.desc'),
+ component: 'Input',
+ componentProps: {
+ placeholder: t('setting.system.docker.address.label'),
+ },
+ required: true,
+ },
+ {
+ field: 'namespace',
+ label: t('setting.system.docker.namespace.label'),
+ helpMessage: t('setting.system.docker.namespace.desc'),
+ component: 'Input',
+ componentProps: {
+ placeholder: t('setting.system.docker.address.label'),
+ },
+ required: true,
+ },
+ {
+ field: 'userName',
+ label: t('setting.system.docker.userName.label'),
+ helpMessage: t('setting.system.docker.userName.desc'),
+ component: 'Input',
+ componentProps: {
+ placeholder: t('setting.system.docker.address.label'),
+ },
+ required: true,
+ },
+ {
+ field: 'password',
+ label: t('setting.system.docker.password.label'),
+ helpMessage: t('setting.system.docker.password.desc'),
+ component: 'InputPassword',
+ componentProps: {
+ autocomplete: 'new-password',
+ placeholder: t('setting.system.docker.password.label'),
+ },
+ required: true,
+ },
+ ],
+ email: [
+ {
+ field: 'host',
+ label: t('setting.system.email.host.label'),
+ helpMessage: t('setting.system.email.host.desc'),
+ component: 'Input',
+ componentProps: {
+ placeholder: t('setting.system.email.host.label'),
+ },
+ required: true,
+ },
+ {
+ field: 'port',
+ label: t('setting.system.email.port.label'),
+ helpMessage: t('setting.system.email.port.desc'),
+ component: 'InputNumber',
+ componentProps: {
+ class: '!w-full',
+ controls: false,
+ min: 0,
+ max: 65535,
+ placeholder: t('setting.system.email.port.label'),
+ },
+ required: true,
+ },
+ {
+ field: 'from',
+ label: t('setting.system.email.from.label'),
+ helpMessage: t('setting.system.email.from.desc'),
+ component: 'Input',
+ componentProps: {
+ placeholder: t('setting.system.email.from.label'),
+ },
+ required: true,
+ },
+ {
+ field: 'userName',
+ label: t('setting.system.email.userName.label'),
+ helpMessage: t('setting.system.email.userName.desc'),
+ component: 'Input',
+ componentProps: {
+ placeholder: t('setting.system.email.userName.label'),
+ },
+ required: true,
+ },
+ {
+ field: 'password',
+ label: t('setting.system.email.password.label'),
+ helpMessage: t('setting.system.email.password.label'),
+ component: 'InputPassword',
+ componentProps: {
+ autocomplete: 'new-password',
+ placeholder: t('setting.system.email.password.label'),
+ },
+ required: true,
+ },
+ {
+ field: 'ssl',
+ label: t('setting.system.email.ssl.label'),
+ helpMessage: t('setting.system.email.ssl.label'),
+ component: 'Switch',
+ componentProps: {
+ checkedChildren: 'ON',
+ unCheckedChildren: 'OFF',
+ },
+ },
+ ],
+};
