feat(frontend): 告警通知优化 TencentBlueKing#8366

3octaves · Dec 4, 2024 · c02ef0a · c02ef0a
1 parent 87923d1
commit c02ef0a
Show file tree

Hide file tree

Showing 9 changed files with 241 additions and 347 deletions.
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3673,5 +3673,8 @@
   "种类型": "种类型",
   "平台配置为各业务的初始化配置，如在业务下做了修改，则全局设置失效": "平台配置为各业务的初始化配置，如在业务下做了修改，则全局设置失效",
   "通知升级": "通知升级",
+  "主 DBA 通知方式": "主 DBA 通知方式",
+  "备 DBA 通知方式": "备 DBA 通知方式",
+  "二线 DBA 通知方式": "二线 DBA 通知方式",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/source/monitorNoticeGroup.ts b/dbm-ui/frontend/src/services/source/monitorNoticeGroup.ts
@@ -100,3 +100,29 @@ export function getSimpleList(params: { bk_biz_id: number; db_type: string }) {
     }[]
   >(`${path}/list_group_name/`, params);
 }
+
+// 通过业务 + db 类型获取告警组
+export function getGroupByDbType(params: { bk_biz_id: number; db_type: string }) {
+  return http.get<
+    {
+      id: string;
+      name: string;
+      receivers: NoticGroupModel['receivers'][];
+      details: NoticGroupModel['details'];
+    }[]
+  >(`${path}/get_group_by_db_type/`, params);
+}
+
+// 通过业务 + db 类型更新告警组
+export function updateGroupByDbType(params: {
+  bk_biz_id: number;
+  db_type: string;
+  details: {
+    id: string;
+    name: string;
+    receivers: NoticGroupModel['receivers'][];
+    details: NoticGroupModel['details'];
+  }[];
+}) {
+  return http.put(`${path}/update_group_by_db_type/`, params);
+}
diff --git a/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/DetailDialog.vue b/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/DetailDialog.vue
@@ -62,6 +62,8 @@
         ref="noticeMethodRef"
         :details="detailData.details"
         :disabled="editDisabled"
+        :label="t('通知方式')"
+        property="method"
         :type="type" />
     </DbForm>
     <template #footer>

diff --git a/...onitor-notice/components/NoticeMethod.vue → .../components/NoticeMethodFormItem copy.vue b/...onitor-notice/components/NoticeMethod.vue → .../components/NoticeMethodFormItem copy.vue
diff --git a/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/NoticeMethodFormItem.vue b/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/components/NoticeMethodFormItem.vue
@@ -14,8 +14,8 @@
 <template>
   <BkFormItem
     class="notice-mothod"
-    :label="t('通知方式')"
-    property="method"
+    :label="label"
+    :property="property"
     required
     :rules="methodRules">
     <BkTab
@@ -145,27 +145,17 @@
 <script setup lang="ts">
   import BkTimePicker from 'bkui-vue/lib/time-picker';
   import _ from 'lodash';
-  import type ComponentPublicInstance from 'vue';
+  import type { ComponentPublicInstance } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
-  import { getAlarmGroupList, getAlarmGroupNotifyList } from '@services/source/monitorNoticeGroup';
+  import NoticGroupModel from '@services/model/notice-group/notice-group';
+  import { getAlarmGroupNotifyList } from '@services/source/monitorNoticeGroup';
 
   import { messageWarn } from '@utils';
 
-  interface Props {
-    type: 'add' | 'edit' | 'copy' | '';
-    details: AlarmGroupDetail;
-    disabled: boolean;
-  }
-
-  interface Exposes {
-    getSubmitData: () => AlarmGroupNotice[];
-  }
-
   type TimePickerRef = ComponentPublicInstance<typeof BkTimePicker>;
-  type AlarmGroupDetail = ServiceReturnType<typeof getAlarmGroupList>['results'][number]['details'];
-  type AlarmGroupNotice = AlarmGroupDetail['alert_notice'][number];
+  type AlarmGroupDetail = NoticGroupModel['details'];
   type AlarmGroupNotifyDisplay = Omit<ServiceReturnType<typeof getAlarmGroupNotifyList>[number], 'is_active'>;
 
   interface LevelMapItem {
@@ -190,7 +180,21 @@
     input?: boolean;
   }
 
-  const props = defineProps<Props>();
+  interface Props {
+    type: 'add' | 'edit' | 'copy' | '';
+    details: AlarmGroupDetail;
+    disabled?: boolean;
+    label: string;
+    property: string;
+  }
+
+  interface Exposes {
+    getSubmitData: () => AlarmGroupDetail['alert_notice'];
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+  });
 
   const timeRangeFormatter = (timeRange: string[]) => {
     const [start, end] = timeRange;
@@ -205,7 +209,7 @@
 
   const { t } = useI18n();
 
-  const inputTypes = ['wxwork-bot', 'bkchat'];
+  const InputMessageTypes = ['wxwork-bot', 'bkchat'];
 
   let head: TableHead[] = [
     {
@@ -290,7 +294,7 @@
         const { type, label, is_active: isActive, icon } = item;
 
         if (isActive) {
-          if (inputTypes.includes(type)) {
+          if (InputMessageTypes.includes(type)) {
             panelInitData.inputArr.push({
               type,
               label,
@@ -456,7 +460,7 @@
             const inputArr = _.cloneDeep(panelInitData.inputArr);
 
             configItem.notice_ways.forEach((wayItem) => {
-              if (inputTypes.includes(wayItem.name)) {
+              if (InputMessageTypes.includes(wayItem.name)) {
                 const idx = inputArr.findIndex((inputItem) => inputItem.type === wayItem.name);
 
                 if (idx > -1) {

diff --git a/dbm-ui/frontend/src/views/monitor-alarm-plat/monitor-notice/Index.vue b/dbm-ui/frontend/src/views/monitor-alarm-plat/monitor-notice/Index.vue
@@ -20,24 +20,35 @@
     </BkTag>
   </Teleport>
   <SmartAction :offset-target="getSmartActionOffsetTarget">
-    <BkLoading :loading="isLoading">
+    <BkLoading :loading="reactiveLoading">
       <DbTab v-model:active="activeTab" />
       <BkAlert
         v-if="isPlatform"
         class="ml-24 mr-24 mt-20"
         closable
         theme="info"
         :title="t('平台配置为各业务的初始化配置，如在业务下做了修改，则全局设置失效')" />
-      <div class="password-policy-content">
-        <RenderContent :db-type="activeTab" />
-        <RenderContentTwo :db-type="activeTab" />
-      </div>
+      <DbForm
+        ref="formRef"
+        form-type="vertical"
+        :model="formData">
+        <div class="monitor-notice-content">
+          <DefaultNotice
+            v-model:notify-rules="formData.notifyRules"
+            :backup="formData.backup"
+            :primary="formData.primary" />
+          <UpgradeNotice
+            v-if="formData.secondarySupport"
+            class="mt-22"
+            :secondary-support="formData.secondarySupport" />
+        </div>
+      </DbForm>
     </BkLoading>
     <template #action>
       <AuthButton
         action-id="password_policy_set"
         class="mr-8"
-        :loading="isSubmitting"
+        :loading="updateLoading"
         theme="primary"
         @click="handleSubmit">
         {{ t('保存') }}
@@ -46,7 +57,7 @@
         :confirm-handler="handleReset"
         :content="t('重置将会恢复默认设置的内容')"
         :title="t('确认重置')">
-        <BkButton>
+        <BkButton :disabled="updateLoading">
           {{ t('重置') }}
         </BkButton>
       </DbPopconfirm>
@@ -55,87 +66,108 @@
 </template>
 
 <script setup lang="ts">
+  import { Form } from 'bkui-vue';
+  import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
-  import { updatePolicy } from '@services/source/monitor';
+  import { getGroupByDbType, updateGroupByDbType } from '@services/source/monitorNoticeGroup';
 
   import { DBTypes } from '@common/const';
 
   import DbTab from '@components/db-tab/Index.vue';
 
   import { messageSuccess } from '@utils';
 
-  import RenderContent from './components/Content.vue';
-  import RenderContentTwo from './components/Content2.vue';
+  import DefaultNotice from './components/DefaultNotice.vue';
+  import UpgradeNotice from './components/UpgradeNotice.vue';
 
   interface Props {
     isPlatform: boolean;
   }
 
-  defineProps<Props>();
+  const props = defineProps<Props>();
 
   const { t } = useI18n();
 
+  const formatGroup = (originGroup: ServiceReturnType<typeof getGroupByDbType>) => {
+    const [primary = undefined, backup = undefined, secondarySupport = undefined] = originGroup;
+    return {
+      primary,
+      backup,
+      secondarySupport,
+    };
+  };
+
+  const defaultFormData = () => ({
+    notifyRules: [] as string[],
+    ...formatGroup(_.cloneDeep(groupListMemo)),
+  });
+
+  let groupListMemo: ServiceReturnType<typeof getGroupByDbType> = [];
+
   const activeTab = ref(DBTypes.MYSQL);
 
-  const isSubmitting = ref(false);
+  const formRef = ref<InstanceType<typeof Form>>();
+
+  const formData = reactive(defaultFormData());
+
+  const { run: runGetGroupByDbType, loading: reactiveLoading } = useRequest(getGroupByDbType, {
+    manual: true,
+    onSuccess: (groupResult) => {
+      Object.assign(formData, formatGroup(groupResult));
+      groupListMemo = _.cloneDeep(groupResult);
+    },
+  });
 
-  const { run: runUpdatePolicy, loading: isLoading } = useRequest(updatePolicy, {
+  const { run: runUpdateGroupByDbType, loading: updateLoading } = useRequest(updateGroupByDbType, {
     manual: true,
     onSuccess: (updateResult) => {
       if (updateResult.bkm_id) {
         messageSuccess(t('保存成功'));
-        // emits('success');
-        // isShow.value = false;
       }
     },
   });
 
   const getSmartActionOffsetTarget = () => document.querySelector('.bk-form-content');
 
-  watch(activeTab, () => {
-    // 通过业务+ db 类型获取告警组
-    // getGroup({
-    //   bk_biz_id: props.isPlatform ? 0 : window.PROJECT_CONFIG.BIZ_ID,
-    //   db_type: activeTab.value
-    // })
-  });
+  watch(
+    activeTab,
+    () => {
+      runGetGroupByDbType({
+        bk_biz_id: props.isPlatform ? 0 : window.PROJECT_CONFIG.BIZ_ID,
+        db_type: activeTab.value,
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
 
   const handleSubmit = async () => {
-    // await formRef.value.validate();
-    // const testRules = [
-    //   infoRule.value ? infoValueRef.value.getValue() : undefined,
-    //   warnRule.value ? warnValueRef.value.getValue() : undefined,
-    //   dangerRule.value ? dangerValueRef.value.getValue() : undefined,
-    // ];
-    // const reqParams = {
-    //   targets: props.data.targets,
-    //   custom_conditions: props.data.custom_conditions,
-    //   test_rules: testRules.filter((item) => item && item.config.length !== 0),
-    //   notify_rules: formModel.notifyRules,
-    //   notify_groups: props.data.notify_groups,
-    // };
-    runUpdatePolicy();
+    await formRef.value!.validate();
+
+    const { primary, backup, secondarySupport } = formData;
+    const details = [primary, backup, secondarySupport].filter((item) => item);
+
+    runUpdateGroupByDbType({
+      bk_biz_id: props.isPlatform ? 0 : window.PROJECT_CONFIG.BIZ_ID,
+      db_type: activeTab.value,
+      details,
+    });
   };
 
   const handleReset = () => {
-    // updatePasswordPolicyRunAsync({
-    //   ...passwordPolicyData,
-    //   rule: {
-    //     ...formData,
-    //     symbols_allowed: _.uniq(formData.symbols_allowed.split('')).join(''),
-    //   },
-    //   reset: true,
-    // }).then(() => {
-    //   messageSuccess(t('重置成功'));
-    //   fetchData();
-    // });
+    Object.assign(formData, defaultFormData());
   };
 </script>
 
-<style lang="less">
-  .password-policy-content {
+<style lang="less" scoped>
+  .monitor-notice-content {
     padding: 16px 20px;
+
+    :deep(.db-card__content) {
+      padding-left: 76px;
+    }
   }
 </style>