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

TencentBlueKing · Jan 9, 2025 · 9a2d700 · 9a2d700
1 parent fffb234
commit 9a2d700
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 113 deletions.
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3926,5 +3926,7 @@
   "当前协助人": "当前协助人",
   "c实例预览r_n": "【{0}】实例预览 {1}（共{2}组）",
   "排除业务": "排除业务",
+  "1. 群聊添加群机器人: 蓝鲸监控(上云)": "1. 群聊添加群机器人: 蓝鲸监控(上云)",
+  "2. 手动蓝鲸监控(上云) 并输入关键字n": "2. 手动 {'@'}蓝鲸监控(上云) 并输入关键字 {n}",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/model/monitor/monitor-policy.ts b/dbm-ui/frontend/src/services/model/monitor/monitor-policy.ts
@@ -113,4 +113,8 @@ export default class MonitorPolicy {
   get updateAtDisplay() {
     return utcDisplayTime(this.update_at);
   }
+
+  get isInner() {
+    return this.bk_biz_id === 0;
+  }
 }
diff --git a/dbm-ui/frontend/src/services/model/notice-group/notice-group.ts b/dbm-ui/frontend/src/services/model/notice-group/notice-group.ts
@@ -1,4 +1,4 @@
-import { utcDisplayTime } from '@utils';
+import { isRecentDays, utcDisplayTime } from '@utils';
 
 export default class NoticGroup {
   bk_biz_id: number;
@@ -61,4 +61,8 @@ export default class NoticGroup {
   get updateAtDisplay() {
     return utcDisplayTime(this.update_at);
   }
+
+  get isNew() {
+    return isRecentDays(this.create_at, 24);
+  }
 }
diff --git a/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/Index.vue b/dbm-ui/frontend/src/views/monitor-alarm-db/alarm-group/Index.vue
@@ -50,7 +50,6 @@
 
 <script setup lang="tsx">
   import { InfoBox } from 'bkui-vue';
-  import dayjs from 'dayjs';
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
@@ -64,24 +63,13 @@
 
   import { useGlobalBizs } from '@stores';
 
-  import MiniTag from '@components/mini-tag/index.vue';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import { messageSuccess  } from '@utils';
 
   import DetailDialog from './components/DetailDialog.vue';
   import RenderRow from './components/RenderRow.vue';
 
-  const isNewUser = (createTime: string) => {
-    if (!createTime) {
-      return '';
-    }
-
-    const createDay = dayjs(createTime);
-    const today = dayjs();
-    return today.diff(createDay, 'hour') <= 24;
-  };
-
   interface TableRenderData {
     data: NoticGroupModel
   }
@@ -104,7 +92,6 @@
         <TextOverflowLayout>
           {{
             default: () => {
-
               if (data.is_built_in){
                 return (
                   <bk-button
@@ -131,17 +118,21 @@
               <>
                 {
                   data.is_built_in && (
-                    <MiniTag
-                      content={ t('内置') }
-                      class="ml-4" />
+                    <bk-tag
+                      size="small"
+                      class="ml-4">
+                      {t('内置')}
+                    </bk-tag>
                   )
                 }
                 {
-                  isNewUser(data.create_at) && (
-                    <MiniTag
-                      content='NEW'
+                  data.isNew && (
+                    <bk-tag
+                      size="small"
                       theme='success'
-                      class="ml-4" />
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
                   )
                 }
               </>
@@ -211,45 +202,45 @@
       fixed: 'right',
       showOverflow: false,
       render: ({ data }: TableRenderData) => (
-          <>
-            <auth-button
-              actionId="notify_group_create"
-              permission={data.permission.notify_group_create}
-              class="mr-24"
-              text
-              theme="primary"
-              onClick={ () => handleOpenDetail('copy', data) }>
-              { t('克隆') }
-            </auth-button>
-            {
-              !data.is_built_in && (
-                <auth-button
-                  actionId="notify_group_update"
-                  permission={data.permission.notify_group_update}
-                  resource={data.id}
-                  class="mr-24"
-                  text
-                  theme="primary"
-                  onClick={ () => handleOpenDetail('edit', data) }>
-                  { t('编辑') }
-                </auth-button>
-              )
-            }
-            {
-              !data.is_built_in && (
-                <auth-button
-                  action-id="notify_group_delete"
-                  resource={data.id}
-                  permission={data.permission.notify_group_delete}
-                  text
-                  theme="primary"
-                  onClick={ () => handleDelete(data.id) }>
-                  { t('删除') }
-                </auth-button>
-              )
-            }
-          </>
-        ),
+        <>
+          <auth-button
+            actionId="notify_group_create"
+            permission={data.permission.notify_group_create}
+            class="mr-24"
+            text
+            theme="primary"
+            onClick={ () => handleOpenDetail('copy', data) }>
+            { t('克隆') }
+          </auth-button>
+          {
+            !data.is_built_in && (
+              <auth-button
+                actionId="notify_group_update"
+                permission={data.permission.notify_group_update}
+                resource={data.id}
+                class="mr-24"
+                text
+                theme="primary"
+                onClick={ () => handleOpenDetail('edit', data) }>
+                { t('编辑') }
+              </auth-button>
+            )
+          }
+          {
+            !data.is_built_in && (
+              <auth-button
+                action-id="notify_group_delete"
+                resource={data.id}
+                permission={data.permission.notify_group_delete}
+                text
+                theme="primary"
+                onClick={ () => handleDelete(data.id) }>
+                { t('删除') }
+              </auth-button>
+            )
+          }
+        </>
+      ),
     },
   ];
 
@@ -279,7 +270,7 @@
     });
   };
 
-  const setRowClass = (data: NoticGroupModel) => (isNewUser(data.create_at) ? 'is-new' : '');
+  const setRowClass = (data: NoticGroupModel) => (data.isNew ? 'is-new' : '');
 
   const toRelatedPolicy = (notifyGroupId: number, dbType: string) => {
     const routerData = router.resolve({

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
@@ -73,6 +73,7 @@
         {{ t('提交') }}
       </BkButton>
       <BkButton
+        class="w-88"
         :disabled="loading"
         @click="handleClose">
         {{ t('取消') }}

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
@@ -86,7 +86,7 @@
                   :key="headItem.label"
                   class="table-row-item table-row-head-item"
                   :class="{
-                    'table-row-type': headItem.type,
+                    'table-row-type': !headItem.type,
                     'table-row-input': headItem.input,
                   }">
                   <img
@@ -99,6 +99,11 @@
                     :class="{ 'label-bold': headItem.bold }">
                     {{ headItem.label }}
                   </span>
+                  <DbIcon
+                    v-if="MessageTipMap[headItem.type]"
+                    v-bk-tooltips="MessageTipMap[headItem.type]"
+                    class="message-type-head-tip ml-4"
+                    type="attention" />
                 </div>
               </div>
               <div
@@ -145,12 +150,14 @@
 <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 { InputMessageTypes, MessageTypes } from '@common/const';
+
   import { messageWarn } from '@utils';
 
   interface Props {
@@ -183,9 +190,9 @@
   }
 
   interface TableHead {
+    type: string;
     label: string;
     bold?: boolean;
-    type?: boolean;
     icon?: string;
     input?: boolean;
   }
@@ -205,13 +212,20 @@
 
   const { t } = useI18n();
 
-  const inputTypes = ['wxwork-bot', 'bkchat'];
+  const MessageTipMap: Record<string, string> = {
+    [MessageTypes.WECOM_ROBOT]: [
+      t('获取会话ID方法:'),
+      t('1. 群聊添加群机器人: 蓝鲸监控(上云)'),
+      t('2. 手动蓝鲸监控(上云) 并输入关键字n', { n: "'会话ID'" }),
+      t('3. 将获取到的会话ID粘贴到输入框，多个会话ID使用逗号分隔'),
+    ].join('\n'),
+  };
 
   let head: TableHead[] = [
     {
       label: t('告警级别'),
       bold: true,
-      type: true,
+      type: '',
     },
   ];
 
@@ -290,7 +304,7 @@
         const { type, label, is_active: isActive, icon } = item;
 
         if (isActive) {
-          if (inputTypes.includes(type)) {
+          if (InputMessageTypes.includes(type)) {
             panelInitData.inputArr.push({
               type,
               label,
@@ -299,6 +313,7 @@
             });
 
             inputHead.push({
+              type,
               label,
               icon,
               input: true,
@@ -312,6 +327,7 @@
             });
 
             checkboxHead.push({
+              type,
               label,
               icon,
             });
@@ -456,11 +472,11 @@
             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) {
-                  inputArr[idx].value = wayItem.receivers?.join(',') as string;
+                  inputArr[idx].value = (wayItem.receivers || []).join(',');
                 }
               } else {
                 const idx = checkboxArr.findIndex((checkboxItem) => checkboxItem.type === wayItem.name);
@@ -733,6 +749,11 @@
         .label-bold {
           font-weight: bold;
         }
+
+        .message-type-head-tip {
+          font-size: 14px;
+          color: #63656e;
+        }
       }
 
       .tabel-head-row {