From ec7898deea79f0fd63cdb5e37552fcbb5c935c1a Mon Sep 17 00:00:00 2001
From: songjianet <1778651752@qq.com>
Date: Sun, 16 Jan 2022 19:17:55 +0800
Subject: [PATCH] [Feature][UI Next] Security alarm group manage (#8069)
* [Feature][UI Next] Add security alarm group manage.
* [Feature][UI Next] Add security alarm group manage license.
---
dolphinscheduler-ui-next/pnpm-lock.yaml | 8 +-
.../src/locales/modules/en_US.ts | 18 ++
.../src/locales/modules/zh_CN.ts | 19 ++
.../src/router/modules/security.ts | 8 +
.../src/service/modules/alert-group/index.ts | 7 +-
.../src/service/modules/alert-group/types.ts | 21 +-
.../src/service/modules/alert-plugin/types.ts | 13 +-
.../datasource-list/json-highlight.tsx | 4 +-
.../datasource/datasource-list/use-columns.ts | 3 +-
.../components/alert-group-modal.tsx | 166 ++++++++++++++++
.../components/use-modal.ts | 130 +++++++++++++
.../alarm-group-manage/index.module.scss | 43 +++++
.../security/alarm-group-manage/index.tsx | 158 +++++++++++++++
.../security/alarm-group-manage/use-table.ts | 182 ++++++++++++++++++
14 files changed, 771 insertions(+), 9 deletions(-)
create mode 100644 dolphinscheduler-ui-next/src/views/security/alarm-group-manage/components/alert-group-modal.tsx
create mode 100644 dolphinscheduler-ui-next/src/views/security/alarm-group-manage/components/use-modal.ts
create mode 100644 dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.module.scss
create mode 100644 dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.tsx
create mode 100644 dolphinscheduler-ui-next/src/views/security/alarm-group-manage/use-table.ts
diff --git a/dolphinscheduler-ui-next/pnpm-lock.yaml b/dolphinscheduler-ui-next/pnpm-lock.yaml
index a20adb76cd..d25d5ecc55 100644
--- a/dolphinscheduler-ui-next/pnpm-lock.yaml
+++ b/dolphinscheduler-ui-next/pnpm-lock.yaml
@@ -29,13 +29,14 @@ specifiers:
'@vueuse/core': ^7.5.3
axios: ^0.24.0
dart-sass: ^1.25.0
- date-fns: ^2.28.0
+ date-fns: ^2.27.0
echarts: ^5.2.2
eslint: ^8.6.0
eslint-config-prettier: ^8.3.0
eslint-plugin-prettier: ^4.0.0
eslint-plugin-vue: ^8.2.0
lodash: ^4.17.21
+ monaco-editor: ^0.31.1
naive-ui: 2.23.2
nprogress: ^0.2.0
pinia: ^2.0.9
@@ -60,6 +61,7 @@ dependencies:
date-fns: 2.28.0
echarts: 5.2.2
lodash: 4.17.21
+ monaco-editor: 0.31.1
naive-ui: 2.23.2_vue@3.2.26
nprogress: 0.2.0
pinia: 2.0.9_typescript@4.5.4+vue@3.2.26
@@ -2263,6 +2265,10 @@ packages:
hasBin: true
dev: true
+ /monaco-editor/0.31.1:
+ resolution: {integrity: sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q==}
+ dev: false
+
/ms/2.0.0:
resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=}
dev: true
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index 92d74e2e03..8216a03ea9 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
@@ -281,6 +281,23 @@ const security = {
edit: 'Edit',
delete: 'Delete'
},
+ alarm_group: {
+ create_alarm_group: 'Create Alarm Group',
+ edit_alarm_group: 'Edit Alarm Group',
+ search_tips: 'Please enter keywords',
+ alert_group_name_tips: 'Please enter your alert group name',
+ alarm_plugin_instance: 'Alarm Plugin Instance',
+ alarm_plugin_instance_tips: 'Please select alert plugin instance',
+ alarm_group_description_tips: 'Please enter your alarm group description',
+ alert_group_name: 'Alert Group Name',
+ alarm_group_description: 'Alarm Group Description',
+ create_time: 'Create Time',
+ update_time: 'Update Time',
+ operation: 'Operation',
+ delete_confirm: 'Delete?',
+ edit: 'Edit',
+ delete: 'Delete'
+ },
yarn_queue: {
create_queue: 'Create Queue',
edit_queue: 'Edit Queue',
@@ -314,6 +331,7 @@ const security = {
worker_group_tips: 'Please select worker group'
}
}
+
const datasource = {
datasource: 'DataSource',
create_datasource: 'Create DataSource',
diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
index f15d13dbad..2fc5a885bf 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
@@ -281,6 +281,24 @@ const security = {
edit: '编辑',
delete: '删除'
},
+ alarm_group: {
+ create_alarm_group: '创建告警组',
+ edit_alarm_group: '编辑告警组',
+ search_tips: '请输入关键词',
+ alert_group_name_tips: '请输入告警组名称',
+ alarm_plugin_instance: '告警组实例',
+ alarm_plugin_instance_tips: '请选择告警组实例',
+ alarm_group_description_tips: '请输入告警组描述',
+ alert_group_name: '告警组名称',
+ alarm_group_description: '告警组描述',
+ create_time: '创建时间',
+ update_time: '更新时间',
+ actions: '操作',
+ operation: '操作',
+ delete_confirm: '确定删除吗?',
+ edit: '编辑',
+ delete: '删除'
+ },
yarn_queue: {
create_queue: '创建队列',
edit_queue: '编辑队列',
@@ -314,6 +332,7 @@ const security = {
worker_group_tips: '请选择Worker分组'
}
}
+
const datasource = {
datasource: '数据源',
create_datasource: '创建数据源',
diff --git a/dolphinscheduler-ui-next/src/router/modules/security.ts b/dolphinscheduler-ui-next/src/router/modules/security.ts
index b830448498..6677a7cae3 100644
--- a/dolphinscheduler-ui-next/src/router/modules/security.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/security.ts
@@ -45,6 +45,14 @@ export default {
title: '用户管理'
}
},
+ {
+ path: '/security/alarm-group-manage',
+ name: 'alarm-group-manage',
+ component: components['alarm-group-manage'],
+ meta: {
+ title: '告警组管理'
+ }
+ },
{
path: '/security/yarn-queue-manage',
name: 'yarn-queue-manage',
diff --git a/dolphinscheduler-ui-next/src/service/modules/alert-group/index.ts b/dolphinscheduler-ui-next/src/service/modules/alert-group/index.ts
index 437bc28b65..b9da6292de 100644
--- a/dolphinscheduler-ui-next/src/service/modules/alert-group/index.ts
+++ b/dolphinscheduler-ui-next/src/service/modules/alert-group/index.ts
@@ -59,7 +59,7 @@ export function verifyGroupName(params: GroupNameReq): any {
export function updateAlertGroup(data: GroupReq, id: IdReq): any {
return axios({
- url: `/alert-groups/${id}`,
+ url: `/alert-groups/${id.id}`,
method: 'put',
data
})
@@ -67,7 +67,8 @@ export function updateAlertGroup(data: GroupReq, id: IdReq): any {
export function delAlertGroupById(id: IdReq): any {
return axios({
- url: `/alert-groups/${id}`,
- method: 'delete'
+ url: `/alert-groups/${id.id}`,
+ method: 'delete',
+ params: id
})
}
diff --git a/dolphinscheduler-ui-next/src/service/modules/alert-group/types.ts b/dolphinscheduler-ui-next/src/service/modules/alert-group/types.ts
index 640ecd3578..e840c7b95b 100644
--- a/dolphinscheduler-ui-next/src/service/modules/alert-group/types.ts
+++ b/dolphinscheduler-ui-next/src/service/modules/alert-group/types.ts
@@ -34,4 +34,23 @@ interface GroupReq extends GroupNameReq {
description?: string
}
-export { ListReq, GroupNameReq, IdReq, GroupReq }
+interface AlarmGroupItem {
+ id: number
+ groupName: string
+ alertInstanceIds: string
+ description: string
+ createTime: string
+ updateTime: string
+ createUserId: number
+}
+
+interface AlarmGroupRes {
+ totalList: AlarmGroupItem[]
+ total: number
+ totalPage: number
+ pageSize: number
+ currentPage: number
+ start: number
+}
+
+export { ListReq, GroupNameReq, IdReq, GroupReq, AlarmGroupItem, AlarmGroupRes }
diff --git a/dolphinscheduler-ui-next/src/service/modules/alert-plugin/types.ts b/dolphinscheduler-ui-next/src/service/modules/alert-plugin/types.ts
index 664ddaa6e3..74d890519d 100644
--- a/dolphinscheduler-ui-next/src/service/modules/alert-plugin/types.ts
+++ b/dolphinscheduler-ui-next/src/service/modules/alert-plugin/types.ts
@@ -41,10 +41,21 @@ interface UpdatePluginInstanceReq {
pluginInstanceParams: string
}
+interface AlertPluginItem {
+ id: number
+ pluginDefineId: number
+ instanceName: string
+ pluginInstanceParams: string
+ createTime: string
+ updateTime: string
+ alertPluginName: string
+}
+
export {
ListReq,
PluginInstanceReq,
InstanceNameReq,
IdReq,
- UpdatePluginInstanceReq
+ UpdatePluginInstanceReq,
+ AlertPluginItem
}
diff --git a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/json-highlight.tsx b/dolphinscheduler-ui-next/src/views/datasource/datasource-list/json-highlight.tsx
index 0dbf5fc465..162bcd67ff 100644
--- a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/json-highlight.tsx
+++ b/dolphinscheduler-ui-next/src/views/datasource/datasource-list/json-highlight.tsx
@@ -32,7 +32,9 @@ const JsonHighlight = defineComponent({
props,
render(props: { rowData: { connectionParams: string } }) {
return (
- {syntaxHighlight(props.rowData.connectionParams)}
+
+ {syntaxHighlight(props.rowData.connectionParams)}
+
)
}
})
diff --git a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-columns.ts b/dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-columns.ts
index a78c038300..7ff3afd157 100644
--- a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-columns.ts
+++ b/dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-columns.ts
@@ -63,8 +63,7 @@ export function useColumns(onCallback: Function) {
default: () => t('datasource.click_to_view')
}
),
- default: () =>
- h(JsonHighlight, { rowData })
+ default: () => h(JsonHighlight, { rowData })
}
)
}
diff --git a/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/components/alert-group-modal.tsx b/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/components/alert-group-modal.tsx
new file mode 100644
index 0000000000..ffe457afb7
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/components/alert-group-modal.tsx
@@ -0,0 +1,166 @@
+/*
+ * 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 { defineComponent, PropType, toRefs, watch } from 'vue'
+import Modal from '@/components/modal'
+import { NForm, NFormItem, NInput, NSelect } from 'naive-ui'
+import { useModal } from './use-modal'
+import { useI18n } from 'vue-i18n'
+
+const AlertGroupModal = defineComponent({
+ name: 'YarnQueueModal',
+ props: {
+ showModalRef: {
+ type: Boolean as PropType,
+ default: false
+ },
+ statusRef: {
+ type: Number as PropType,
+ default: 0
+ },
+ row: {
+ type: Object as PropType,
+ default: {}
+ }
+ },
+ emits: ['cancelModal', 'confirmModal'],
+ setup(props, ctx) {
+ const { variables, handleValidate, getListData } = useModal(props, ctx)
+ const { t } = useI18n()
+
+ const cancelModal = () => {
+ if (props.statusRef === 0) {
+ variables.model.groupName = ''
+ variables.model.alertInstanceIds = []
+ variables.model.description = ''
+ }
+ ctx.emit('cancelModal', props.showModalRef)
+ }
+
+ const confirmModal = () => {
+ handleValidate(props.statusRef)
+ }
+
+ watch(
+ () => props.showModalRef,
+ () => {
+ props.showModalRef && getListData()
+ }
+ )
+
+ watch(
+ () => props.statusRef,
+ () => {
+ if (props.statusRef === 0) {
+ variables.model.groupName = ''
+ variables.model.alertInstanceIds = []
+ variables.model.description = ''
+ } else {
+ variables.model.id = props.row.id
+ variables.model.groupName = props.row.groupName
+ variables.model.alertInstanceIds = props.row.alertInstanceIds
+ .split(',')
+ .map((item: string) => Number(item))
+ variables.model.description = props.row.description
+ }
+ }
+ )
+
+ watch(
+ () => props.row,
+ () => {
+ variables.model.id = props.row.id
+ variables.model.groupName = props.row.groupName
+ variables.model.alertInstanceIds = props.row.alertInstanceIds
+ .split(',')
+ .map((item: string) => Number(item))
+ variables.model.description = props.row.description
+ }
+ )
+
+ return { t, ...toRefs(variables), cancelModal, confirmModal }
+ },
+ render() {
+ const { t } = this
+ return (
+
+
+ {{
+ default: () => (
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }}
+
+
+ )
+ }
+})
+
+export default AlertGroupModal
diff --git a/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/components/use-modal.ts b/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/components/use-modal.ts
new file mode 100644
index 0000000000..5cbadf0fab
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/components/use-modal.ts
@@ -0,0 +1,130 @@
+/*
+ * 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 { reactive, ref, SetupContext } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAsyncState } from '@vueuse/core'
+import { queryAlertPluginInstanceList } from '@/service/modules/alert-plugin'
+import {
+ verifyGroupName,
+ createAlertGroup,
+ updateAlertGroup
+} from '@/service/modules/alert-group'
+import type { AlertPluginItem } from '@/service/modules/alert-plugin/types'
+
+export function useModal(
+ props: any,
+ ctx: SetupContext<('cancelModal' | 'confirmModal')[]>
+) {
+ const { t } = useI18n()
+
+ const variables = reactive({
+ alertGroupFormRef: ref(),
+ model: {
+ id: ref(-1),
+ groupName: ref(''),
+ alertInstanceIds: ref>([]),
+ description: ref(''),
+ generalOptions: []
+ },
+ rules: {
+ groupName: {
+ required: true,
+ trigger: ['input', 'blur'],
+ validator() {
+ if (variables.model.groupName === '') {
+ return new Error(t('security.alarm_group.alert_group_name_tips'))
+ }
+ }
+ },
+ alertInstanceIds: {
+ required: true,
+ trigger: ['input', 'blur'],
+ validator() {
+ if (variables.model.alertInstanceIds.length < 1) {
+ return new Error(
+ t('security.alarm_group.alarm_plugin_instance_tips')
+ )
+ }
+ }
+ }
+ }
+ })
+
+ const getListData = () => {
+ const { state } = useAsyncState(
+ queryAlertPluginInstanceList().then((res: Array) => {
+ variables.model.generalOptions = res.map(
+ (item): { label: string; value: number } => {
+ return {
+ label: item.instanceName,
+ value: item.id
+ }
+ }
+ ) as any
+ }),
+ {}
+ )
+
+ return state
+ }
+
+ const handleValidate = (statusRef: number) => {
+ variables.alertGroupFormRef.validate((errors: any) => {
+ if (!errors) {
+ statusRef === 0 ? submitAlertGroupModal() : updateAlertGroupModal()
+ } else {
+ return
+ }
+ })
+ }
+
+ const submitAlertGroupModal = () => {
+ verifyGroupName({ groupName: variables.model.groupName }).then(() => {
+ const data = {
+ groupName: variables.model.groupName,
+ alertInstanceIds: variables.model.alertInstanceIds.toString(),
+ description: variables.model.description
+ }
+
+ createAlertGroup(data).then(() => {
+ variables.model.groupName = ''
+ variables.model.alertInstanceIds = []
+ variables.model.description = ''
+ ctx.emit('confirmModal', props.showModalRef)
+ })
+ })
+ }
+
+ const updateAlertGroupModal = () => {
+ const data = {
+ groupName: variables.model.groupName,
+ alertInstanceIds: variables.model.alertInstanceIds.toString(),
+ description: variables.model.description
+ }
+
+ updateAlertGroup(data, { id: variables.model.id }).then(() => {
+ ctx.emit('confirmModal', props.showModalRef)
+ })
+ }
+
+ return {
+ variables,
+ handleValidate,
+ getListData
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.module.scss b/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.module.scss
new file mode 100644
index 0000000000..de6cf70c65
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.module.scss
@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+.search-card {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .box {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ width: 300px;
+
+ button {
+ margin-left: 10px;
+ }
+ }
+}
+
+.table-card {
+ margin-top: 8px;
+
+ .pagination {
+ margin-top: 20px;
+ display: flex;
+ justify-content: center;
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.tsx
new file mode 100644
index 0000000000..4ee81d6a78
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.tsx
@@ -0,0 +1,158 @@
+/*
+ * 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 { defineComponent, onMounted, toRefs, watch } from 'vue'
+import {
+ NButton,
+ NCard,
+ NDataTable,
+ NIcon,
+ NInput,
+ NPagination
+} from 'naive-ui'
+import { SearchOutlined } from '@vicons/antd'
+import { useI18n } from 'vue-i18n'
+import { useTable } from './use-table'
+import Card from '@/components/card'
+import AlertGroupModal from './components/alert-group-modal'
+import styles from './index.module.scss'
+
+const alarmGroupManage = defineComponent({
+ name: 'alarm-group-manage',
+ setup() {
+ const { t } = useI18n()
+ const { variables, getTableData, createColumns } = useTable()
+
+ const requestData = () => {
+ getTableData({
+ pageSize: variables.pageSize,
+ pageNo: variables.page,
+ searchVal: variables.searchVal
+ })
+ }
+
+ const onUpdatePageSize = () => {
+ variables.page = 1
+ requestData()
+ }
+
+ const onSearch = () => {
+ variables.page = 1
+ requestData()
+ }
+
+ const handleModalChange = () => {
+ variables.showModalRef = true
+ variables.statusRef = 0
+ }
+
+ const onCancelModal = () => {
+ variables.showModalRef = false
+ }
+
+ const onConfirmModal = () => {
+ variables.showModalRef = false
+ requestData()
+ }
+
+ onMounted(() => {
+ createColumns(variables)
+ requestData()
+ })
+
+ watch(useI18n().locale, () => {
+ createColumns(variables)
+ })
+
+ return {
+ t,
+ ...toRefs(variables),
+ requestData,
+ onCancelModal,
+ onConfirmModal,
+ onUpdatePageSize,
+ handleModalChange,
+ onSearch
+ }
+ },
+ render() {
+ const {
+ t,
+ requestData,
+ onUpdatePageSize,
+ onCancelModal,
+ onConfirmModal,
+ handleModalChange,
+ onSearch
+ } = this
+
+ return (
+
+
+
+
+
+ {t('security.alarm_group.create_alarm_group')}
+
+
+
+
+
+ {{
+ icon: () => (
+
+
+
+ )
+ }}
+
+
+
+
+
+
+
+
+