fix(frontend): 监控告警自测bug修复 #1531 (#1559)

TencentBlueKing · Oct 30, 2023 · 40b5b8f · 40b5b8f
1 parent ba74c28
commit 40b5b8f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/dbm-ui/frontend/src/services/monitor.ts b/dbm-ui/frontend/src/services/monitor.ts
@@ -203,3 +203,6 @@ export const getDutyNoticeConfig = () => http.get<DutyNoticeConfig>('/apis/conf/
 
 // 更新轮值通知配置
 export const updateDutyNoticeConfig = (params: DutyNoticeConfig) => http.post<DutyNoticeConfig>('/apis/conf/system_settings/update_duty_notice_config/', params);
+
+// 查询轮值优先级列表
+export const getPriorityDistinct = () => http.get<number[]>('/apis/monitor/duty_rule/priority_distinct/');
diff --git a/dbm-ui/frontend/src/types/auto-imports.d.ts b/dbm-ui/frontend/src/types/auto-imports.d.ts
@@ -65,5 +65,5 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
 }
diff --git a/dbm-ui/frontend/src/views/monitor-alarm-plat/rotation-setting/components/content/Index.vue b/dbm-ui/frontend/src/views/monitor-alarm-plat/rotation-setting/components/content/Index.vue
@@ -40,9 +40,11 @@
 <script setup lang="tsx">
   import { InfoBox } from 'bkui-vue';
   import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
 
   import {
     deleteDutyRule,
+    getPriorityDistinct,
     queryDutyRuleList,
     updatePartialDutyRule,
   } from '@services/monitor';
@@ -77,6 +79,7 @@
   const isShowEditRuleSideSilder = ref(false);
   const currentRowData = ref<RowData>();
   const isTableLoading = ref(false);
+  const sortedPriority = ref<number[]>([]);
 
   const statusMap = {
     [RuleStatus.ACTIVE]: {
@@ -97,7 +100,7 @@
     },
   };
 
-  const columns = [
+  const columns = computed(() => [
     {
       label: t('规则名称'),
       field: 'name',
@@ -134,16 +137,18 @@
       width: 120,
       render: ({ row }: {row: RowData}) => {
         const level = row.priority;
-        let theme = 'success';
-        if (level >= 10) {
-          theme = 'danger';
-        } else if (level === 9) {
-          theme = 'warning';
-        } else if (level === 8) {
-          theme = 'success';
-        } else {
-          theme = '';
+        let theme = '';
+        if (sortedPriority.value.length === 3) {
+          const [largest, medium, least] = sortedPriority.value;
+          if (level === largest) {
+            theme = 'danger';
+          } else if (level === medium) {
+            theme = 'warning';
+          } else if (level === least) {
+            theme = 'success';
+          }
         }
+
         return (
           <div class="priority-box">
             {
@@ -264,7 +269,7 @@
         </bk-button>}
       </div>),
     },
-  ];
+  ]);
 
   const settings = {
     fields: [
@@ -304,6 +309,16 @@
     checked: ['name', 'status', 'priority', 'duty_arranges', 'effective_time', 'update_at', 'updater', 'is_enabled'],
   };
 
+  useRequest(getPriorityDistinct, {
+    onSuccess: (list) => {
+      if (list.length > 3) {
+        sortedPriority.value = list.slice(0, 3);
+        return;
+      }
+      sortedPriority.value = list;
+    },
+  });
+
   watch(() => props.activeDbType, (type) => {
     if (type) {
       setTimeout(() => {