Skip to content

Commit e0455eb

Browse files
wangsizhu0504wangsizhu0504
authored
[Improve]: Optimize Docker and Email Settings Page Popup Content (#3588)
* fix: setting form modal * style: modal center
1 parent 30cce1f commit e0455eb

File tree

5 files changed

+251
-50
lines changed

5 files changed

+251
-50
lines changed

Diff for: ‎streampark-console/streampark-console-webapp/src/api/flink/setting/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ enum SETTING_APi {
2323
CHECK_HADOOP = '/flink/setting/checkHadoop',
2424
UPDATE = '/flink/setting/update',
2525
UPDATE_DOCKER = '/flink/setting/update/docker',
26-
UPDATE_ALERT = '/flink/setting/update/alert/email',
26+
UPDATE_ALERT = '/flink/setting/update/email',
2727
}
2828
/**
2929
* Get system settings

Diff for: ‎streampark-console/streampark-console-webapp/src/locales/lang/en/setting/system.ts

+44
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,48 @@ export default {
3636
update: {
3737
success: 'setting updated successfully',
3838
},
39+
docker: {
40+
address: {
41+
label: 'Docker Register Address',
42+
desc: 'Docker container service address',
43+
},
44+
namespace: {
45+
label: 'Docker namespace',
46+
desc: 'Namespace for docker image used in docker building env and target image register',
47+
},
48+
userName: {
49+
label: 'Docker Register User',
50+
desc: 'Docker container service authentication username',
51+
},
52+
password: {
53+
label: 'Docker Register Password',
54+
desc: 'Docker container service authentication password',
55+
},
56+
},
57+
email: {
58+
host: {
59+
label: 'Alert Email Smtp Host',
60+
desc: 'Alert Mailbox Smtp Host',
61+
},
62+
port: {
63+
label: 'Alert Email Smtp Port',
64+
desc: 'Smtp Port of the alarm mailbox',
65+
},
66+
from: {
67+
label: 'Alert Email From',
68+
desc: 'Email to send alerts',
69+
},
70+
userName: {
71+
label: 'Alert Email User',
72+
desc: 'Authentication username used to send alert emails',
73+
},
74+
password: {
75+
label: 'Alert Email Password',
76+
desc: 'Authentication password used to send alarm email',
77+
},
78+
ssl: {
79+
label: 'Alert Email SSL',
80+
desc: 'Whether to enable SSL in the mailbox that sends the alert',
81+
},
82+
},
3983
};

Diff for: ‎streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/setting/system.ts

+44
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,48 @@ export default {
3636
update: {
3737
success: '设置更新成功！',
3838
},
39+
docker: {
40+
address: {
41+
label: 'Docker注册地址',
42+
desc: 'Docker容器服务地址',
43+
},
44+
namespace: {
45+
label: 'Docker命名空间',
46+
desc: 'Docker构建环境和目标镜像注册使用的命名空间',
47+
},
48+
userName: {
49+
label: 'Docker注册用户',
50+
desc: 'Docker容器服务认证用户名',
51+
},
52+
password: {
53+
label: 'Docker注册密码',
54+
desc: 'Docker容器服务认证密码',
55+
},
56+
},
57+
email: {
58+
host: {
59+
label: '告警邮件Smtp主机',
60+
desc: '告警邮箱Smtp主机',
61+
},
62+
port: {
63+
label: '告警邮件Smtp端口',
64+
desc: '告警邮箱Smtp端口',
65+
},
66+
userName: {
67+
label: '告警邮件用户名',
68+
desc: '用于发送告警邮件的用户名认证',
69+
},
70+
password: {
71+
label: '告警邮件密码',
72+
desc: '用于发送告警邮件的密码认证',
73+
},
74+
from: {
75+
label: '告警邮件发送者',
76+
desc: '发送告警的邮箱',
77+
},
78+
ssl: {
79+
label: '告警邮件SSL',
80+
desc: '是否在发送告警邮箱中启用 SSL',
81+
},
82+
},
3983
};

Diff for: ‎streampark-console/streampark-console-webapp/src/views/setting/System/SettingForm.vue

+24-49
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
import { SettingTwoTone } from '@ant-design/icons-vue';
2020
import { BasicForm, FormSchema, useForm } from '/@/components/Form';
2121
import { BasicModal, useModalInner } from '/@/components/Modal';
22-
import { SystemSetting } from '/@/api/flink/setting/types/setting.type';
2322
import {
2423
fetchEmailConfig,
2524
fetchEmailUpdate,
@@ -29,13 +28,14 @@
2928
import { useMessage } from '/@/hooks/web/useMessage';
3029
import { useI18n } from '/@/hooks/web/useI18n';
3130
import { isNullOrUnDef } from '/@/utils/is';
31+
import { settingFormSchema } from './config';
3232

3333
const emit = defineEmits(['success', 'register']);
3434
const { createMessage } = useMessage();
3535
const { t } = useI18n();
3636
defineOptions({ name: 'DockerSetting' });
3737

38-
const settings = ref<SystemSetting[]>();
38+
const settingConfig = ref<Recordable>({});
3939
const type = ref('docker');
4040
const title = computed(() => {
4141
if (type.value == 'docker') return t('setting.system.systemSettingItems.dockerSetting.name');
@@ -46,21 +46,17 @@
4646
try {
4747
changeLoading(true);
4848
await resetFields();
49-
let res: any;
5049
type.value = data.type;
5150

5251
if (data.type === 'docker') {
53-
res = await fetchDockerConfig();
52+
settingConfig.value = await fetchDockerConfig();
5453
} else if (data.type === 'email') {
55-
res = await fetchEmailConfig();
54+
settingConfig.value = await fetchEmailConfig();
5655
}
57-
settings.value = res
58-
?.filter((i) => i.settingKey.startsWith(data.type))
59-
?.sort((a, b) => a.orderNum - b.orderNum);
6056

6157
await setFieldsValue(
62-
data.settings.reduce((pre, cur) => {
63-
if (!isNullOrUnDef(cur.settingValue)) pre[cur.settingKey] = cur.settingValue;
58+
Object.keys(settingConfig.value).reduce((pre, cur) => {
59+
if (!isNullOrUnDef(settingConfig.value[cur])) pre[cur] = settingConfig.value[cur];
6460
return pre;
6561
}, {}),
6662
);
@@ -80,43 +76,16 @@
8076
showActionButtonGroup: false,
8177
});
8278
const formSchemas = computed((): FormSchema[] => {
83-
return (
84-
settings.value?.map((item) => {
85-
const component =
86-
item.type === 1
87-
? item.settingKey.endsWith('password')
88-
? 'InputPassword'
89-
: 'Input'
90-
: 'Switch';
91-
92-
const getField = () => {
93-
if (type.value == 'docker') {
94-
return item.settingKey.replaceAll('docker.register.', '');
95-
}
96-
if (type.value == 'email') {
97-
return item.settingKey.replaceAll('alert.email.', '');
98-
}
99-
return item.settingKey;
100-
};
101-
return {
102-
field: getField(),
103-
label: item.settingName,
104-
helpMessage: item.description,
105-
component,
106-
componentProps:
107-
component == 'Switch'
108-
? {
109-
checkedChildren: 'ON',
110-
unCheckedChildren: 'OFF',
111-
}
112-
: {
113-
autocomplete: 'new-password',
114-
},
115-
//TODO Required or not according to the back-end interface
116-
required: item.type == 1,
117-
};
118-
}) ?? []
119-
);
79+
if (Reflect.has(settingFormSchema, type.value)) {
80+
return settingFormSchema[type.value];
81+
}
82+
return Object.keys(settingConfig.value).map((key) => {
83+
return {
84+
field: key,
85+
label: key,
86+
component: 'Input',
87+
};
88+
});
12089
});
12190
async function handleOk() {
12291
try {
@@ -131,12 +100,18 @@
131100
}
132101
}
133102
async function afterClose() {
134-
settings.value = [];
103+
settingConfig.value = [];
135104
}
136105
</script>
137106

138107
<template>
139-
<BasicModal @register="registerModal" :width="750" @ok="handleOk" :after-close="afterClose">
108+
<BasicModal
109+
@register="registerModal"
110+
:width="750"
111+
@ok="handleOk"
112+
:after-close="afterClose"
113+
centered
114+
>
140115
<template #title>
141116
<SettingTwoTone class="ml-10px" theme="twoTone" two-tone-color="#4a9ff5" />
142117
{{ title }}

Diff for: ‎streampark-console/streampark-console-webapp/src/views/setting/System/config.ts

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one or more
3+
* contributor license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright ownership.
5+
* The ASF licenses this file to You under the Apache License, Version 2.0
6+
* (the "License"); you may not use this file except in compliance with
7+
* the License. You may obtain a copy of the License at
8+
*
9+
* https://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
import { FormSchema } from '/@/components/Form';
18+
import { useI18n } from '/@/hooks/web/useI18n';
19+
20+
export type SettingType = 'docker' | 'email';
21+
22+
type SettingForm = {
23+
[P in SettingType]: FormSchema[];
24+
};
25+
26+
const { t } = useI18n();
27+
export const settingFormSchema: SettingForm = {
28+
docker: [
29+
{
30+
field: 'address',
31+
label: t('setting.system.docker.address.label'),
32+
helpMessage: t('setting.system.docker.address.desc'),
33+
component: 'Input',
34+
componentProps: {
35+
placeholder: t('setting.system.docker.address.label'),
36+
},
37+
required: true,
38+
},
39+
{
40+
field: 'namespace',
41+
label: t('setting.system.docker.namespace.label'),
42+
helpMessage: t('setting.system.docker.namespace.desc'),
43+
component: 'Input',
44+
componentProps: {
45+
placeholder: t('setting.system.docker.address.label'),
46+
},
47+
required: true,
48+
},
49+
{
50+
field: 'userName',
51+
label: t('setting.system.docker.userName.label'),
52+
helpMessage: t('setting.system.docker.userName.desc'),
53+
component: 'Input',
54+
componentProps: {
55+
placeholder: t('setting.system.docker.address.label'),
56+
},
57+
required: true,
58+
},
59+
{
60+
field: 'password',
61+
label: t('setting.system.docker.password.label'),
62+
helpMessage: t('setting.system.docker.password.desc'),
63+
component: 'InputPassword',
64+
componentProps: {
65+
autocomplete: 'new-password',
66+
placeholder: t('setting.system.docker.password.label'),
67+
},
68+
required: true,
69+
},
70+
],
71+
email: [
72+
{
73+
field: 'host',
74+
label: t('setting.system.email.host.label'),
75+
helpMessage: t('setting.system.email.host.desc'),
76+
component: 'Input',
77+
componentProps: {
78+
placeholder: t('setting.system.email.host.label'),
79+
},
80+
required: true,
81+
},
82+
{
83+
field: 'port',
84+
label: t('setting.system.email.port.label'),
85+
helpMessage: t('setting.system.email.port.desc'),
86+
component: 'InputNumber',
87+
componentProps: {
88+
class: '!w-full',
89+
controls: false,
90+
min: 0,
91+
max: 65535,
92+
placeholder: t('setting.system.email.port.label'),
93+
},
94+
required: true,
95+
},
96+
{
97+
field: 'from',
98+
label: t('setting.system.email.from.label'),
99+
helpMessage: t('setting.system.email.from.desc'),
100+
component: 'Input',
101+
componentProps: {
102+
placeholder: t('setting.system.email.from.label'),
103+
},
104+
required: true,
105+
},
106+
{
107+
field: 'userName',
108+
label: t('setting.system.email.userName.label'),
109+
helpMessage: t('setting.system.email.userName.desc'),
110+
component: 'Input',
111+
componentProps: {
112+
placeholder: t('setting.system.email.userName.label'),
113+
},
114+
required: true,
115+
},
116+
{
117+
field: 'password',
118+
label: t('setting.system.email.password.label'),
119+
helpMessage: t('setting.system.email.password.label'),
120+
component: 'InputPassword',
121+
componentProps: {
122+
autocomplete: 'new-password',
123+
placeholder: t('setting.system.email.password.label'),
124+
},
125+
required: true,
126+
},
127+
{
128+
field: 'ssl',
129+
label: t('setting.system.email.ssl.label'),
130+
helpMessage: t('setting.system.email.ssl.label'),
131+
component: 'Switch',
132+
componentProps: {
133+
checkedChildren: 'ON',
134+
unCheckedChildren: 'OFF',
135+
},
136+
},
137+
],
138+
};

0 commit comments

Comments
 (0)