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 cea3eaee8 improve: add setting modal form (#3584)
cea3eaee8 is described below
commit cea3eaee81c0009171a00ce072cdd356b62ff4a7
Author: Kriszu <[email protected]>
AuthorDate: Tue Feb 27 22:14:09 2024 +0800
improve: add setting modal form (#3584)
---
.../src/api/flink/setting/index.ts | 39 ++++++
.../src/views/setting/System/SettingForm.vue | 148 +++++++++++++++++++++
.../src/views/setting/System/SettingList.vue | 16 ++-
3 files changed, 199 insertions(+), 4 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 4cc0579c4..a463e738f 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
@@ -22,6 +22,8 @@ enum SETTING_APi {
ALL = '/flink/setting/all',
CHECK_HADOOP = '/flink/setting/checkHadoop',
UPDATE = '/flink/setting/update',
+ UPDATE_DOCKER = '/flink/setting/update/docker',
+ UPDATE_ALERT = '/flink/setting/update/alert/email',
}
/**
* Get system settings
@@ -57,3 +59,40 @@ export function fetchCheckHadoop(): Promise<boolean> {
url: SETTING_APi.CHECK_HADOOP,
});
}
+
+//TODO: Getting docker configuration through the backend interface
+/**
+ * get docker setting info
+ */
+export function fetchDockerConfig() {
+ return defHttp.post({ url: '/flink/setting/all' });
+}
+
+/**
+ * get alert setting info
+ */
+export function fetchAlertConfig() {
+ return defHttp.post({ url: '/flink/setting/all' });
+}
+
+/**
+ * Update docker setting
+ * @returns {Promise<Boolean>}
+ */
+export function fetchDockerUpdate(data: Recordable): Promise<boolean> {
+ return defHttp.post({
+ url: SETTING_APi.UPDATE_DOCKER,
+ data,
+ });
+}
+
+/**
+ * Update alert setting
+ * @returns {Promise<Boolean>}
+ */
+export function fetchAlertUpdate(data: Recordable): Promise<boolean> {
+ return defHttp.post({
+ url: SETTING_APi.UPDATE_ALERT,
+ data,
+ });
+}
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
new file mode 100644
index 000000000..ff2af114c
--- /dev/null
+++
b/streampark-console/streampark-console-webapp/src/views/setting/System/SettingForm.vue
@@ -0,0 +1,148 @@
+<!--
+ 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.
+-->
+<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 { SystemSetting } from '/@/api/flink/setting/types/setting.type';
+ import {
+ fetchAlertConfig,
+ fetchAlertUpdate,
+ fetchDockerConfig,
+ fetchDockerUpdate,
+ } from '/@/api/flink/setting';
+ import { useMessage } from '/@/hooks/web/useMessage';
+ import { useI18n } from '/@/hooks/web/useI18n';
+ import { isNullOrUnDef } from '/@/utils/is';
+
+ const emit = defineEmits(['success', 'register']);
+ const { createMessage } = useMessage();
+ const { t } = useI18n();
+ defineOptions({ name: 'DockerSetting' });
+
+ const settings = ref<SystemSetting[]>();
+ const type = ref('docker');
+ const title = computed(() => {
+ if (type.value == 'docker') return
t('setting.system.systemSettingItems.dockerSetting.name');
+ if (type.value == 'alert') return
t('setting.system.systemSettingItems.emailSetting.name');
+ return '';
+ });
+ const [registerModal, { closeModal, changeLoading }] = useModalInner(async
(data) => {
+ try {
+ changeLoading(true);
+ await resetFields();
+ let res: any;
+ type.value = data.type;
+
+ //TODO Separate requests for interfaces based on type
+ if (data.type === 'docker') {
+ res = await fetchDockerConfig();
+ } else if (data.type === 'docker') {
+ res = await fetchAlertConfig();
+ }
+ settings.value = res
+ ?.filter((i) => i.settingKey.startsWith(data.type))
+ ?.sort((a, b) => a.orderNum - b.orderNum);
+
+ setFieldsValue(
+ data.settings.reduce((pre, cur) => {
+ if (!isNullOrUnDef(cur.settingValue)) pre[cur.settingKey] =
cur.settingValue;
+ return pre;
+ }, {}),
+ );
+ } catch (error) {
+ console.error(error);
+ } finally {
+ changeLoading(false);
+ }
+ });
+ const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+ colon: true,
+ labelWidth: 180,
+ name: 'SettingForm',
+ labelCol: { span: 8 },
+ wrapperCol: { span: 15 },
+ baseColProps: { span: 23 },
+ showActionButtonGroup: false,
+ });
+ const formSchemas = computed((): FormSchema[] => {
+ return (
+ settings.value?.map((item) => {
+ const component =
+ item.type === 1
+ ? item.settingKey.endsWith('password')
+ ? 'InputPassword'
+ : 'Input'
+ : 'Switch';
+
+ //TODO Build the form schema data based on the data returned by the
interface.
+ const getField = () => {
+ if (type.value == 'docker') {
+ return item.settingKey.replaceAll('docker.register.', '');
+ }
+ if (type.value == 'alert') {
+ 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,
+ };
+ }) ?? []
+ );
+ });
+ async function handleOk() {
+ try {
+ const formData = await validate();
+ if (type.value === 'docker') await fetchDockerUpdate(formData);
+ if (type.value === 'alert') await fetchAlertUpdate(formData);
+ createMessage.success(t('setting.system.update.success'));
+ closeModal();
+ emit('success');
+ } catch (error) {
+ console.error(error);
+ }
+ }
+ async function afterClose() {
+ settings.value = [];
+ }
+</script>
+
+<template>
+ <BasicModal @register="registerModal" :width="750" @ok="handleOk"
:after-close="afterClose">
+ <template #title>
+ <SettingTwoTone class="ml-10px" theme="twoTone" two-tone-color="#4a9ff5"
/>
+ {{ title }}
+ </template>
+ <BasicForm @register="registerForm" :schemas="formSchemas" />
+ </BasicModal>
+</template>
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/System/SettingList.vue
b/streampark-console/streampark-console-webapp/src/views/setting/System/SettingList.vue
index 24b70f133..3a9775732 100644
---
a/streampark-console/streampark-console-webapp/src/views/setting/System/SettingList.vue
+++
b/streampark-console/streampark-console-webapp/src/views/setting/System/SettingList.vue
@@ -16,6 +16,7 @@
-->
<script lang="ts">
import { defineComponent } from 'vue';
+ import { useModal } from '/@/components/Modal';
export default defineComponent({
name: 'MavenSetting',
});
@@ -27,6 +28,7 @@
import { fetchSystemSettingUpdate } from '/@/api/flink/setting';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
+ import SettingForm from './SettingForm.vue';
const AvatarMap = {
'streampark.maven.settings': 'settings2',
@@ -55,15 +57,20 @@
});
const { createMessage } = useMessage();
+ const [registerModal, { openModal }] = useModal();
function handleSwitch(record: SystemSetting) {
emits('updateValue', record);
}
/* edit input */
function handleEdit(record: SystemSetting) {
if (record.settingKey.startsWith('docker.register')) {
- alert('docker...');
+ openModal(true, {
+ type: 'docker',
+ });
} else if (record.settingKey.startsWith('alert.email')) {
- alert('email...');
+ openModal(true, {
+ type: 'alert',
+ });
} else {
if (!record.editable) {
record.submitting = true;
@@ -86,8 +93,8 @@
<template>
<List>
- <template v-for="item in data" :key="item.settingKey">
- <ListItem v-if="AvatarMap[item.settingKey]">
+ <template v-for="item in data">
+ <ListItem v-if="AvatarMap[item.settingKey]" :key="item.settingKey">
<ListItemMeta :title="item.settingName"
:description="item.description" style="width: 50%">
<template #avatar>
<div class="avatar">
@@ -139,4 +146,5 @@
</ListItem>
</template>
</List>
+ <SettingForm @register="registerModal" @success="emits('reload')" />
</template>
