feat(frontend): 支持告警事件和告警屏蔽 #9404

# Reviewed, transaction id: 34240

Author: jinquantianxia

dbm-ui/frontend/src/App.vue

@@ -55,7 +55,9 @@
     <template #content-header>
       <RouterBack />
     </template>
-    <DbRouterView style="height: 100%" />
+    <DbRouterView
+      :key="route.name"
+      style="height: 100%" />
   </Layout>
   <SystemVersionLog v-model:is-show="isShowSystemVersionLog" />
 </template>
@@ -88,6 +90,7 @@
   const userProfileStore = useUserProfile();
   const { locale, t } = useI18n();
   const systemEnvironStore = useSystemEnviron();
+  const route = useRoute();
 
   const documentTitles: Record<string, string> = {
     en: 'DBM | Tencent BlueKing',

dbm-ui/frontend/src/locales/en.json

@@ -1760,5 +1760,14 @@
   "备份 DB 名": "",
   "暂不支持，请去监控平台操作": "",
   "跳转监控": "",
+  "1小时": "",
+  "1天": "",
+  "近n分钟": "",
+  "近n小时": "",
+  "近n天": "",
+  "近n个月": "",
+  "近1小时": "",
+  "近1天": "",
+  "近1个月": "",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/locales/zh-cn.json

@@ -4058,13 +4058,22 @@
   "n小时": "{n}小时",
   "n天": "{n}天",
   "n个月": "{n}个月",
+  "近n分钟": "近{n}分钟",
+  "近n小时": "近{n}小时",
+  "近n天": "近{n}天",
+  "近n个月": "近{n}个月",
   "n年": "{n}年",
   "备份 DB 名": "备份 DB 名",
   "暂不支持，请去监控平台操作": "暂不支持，请去监控平台操作",
   "15天": "15天",
   "6个月": "6个月",
   "1个月": "1个月",
   "1年": "1年",
+  "1小时": "1小时",
+  "1天": "1天",
+  "近1小时": "近1小时",
+  "近1天": "近1天",
+  "近1个月": "近1个月",
   "跳转监控": "跳转监控",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/views/monitor-alarm/alarm-events/Index.vue

@@ -246,7 +246,6 @@
   export type RowData = ServiceReturnType<typeof getAlarmEventsList>['results'][number];
 
   const { t } = useI18n();
-  const router = useRouter();
   const route = useRoute();
   const globalBizStore = useGlobalBizs();
   const { urls } = useSystemEnviron();
@@ -257,6 +256,32 @@
   const activeLevel = ref(0);
   const searchOperationRef = ref<InstanceType<typeof SearchOperation>>();
   const createShieldAlarmsRef = ref<InstanceType<typeof ShieldAlarms>>();
+  const severityList = ref([
+    {
+      count: 0,
+      iconColor: '',
+      name: t('全部'),
+      value: 0,
+    },
+    {
+      count: 0,
+      iconColor: '#3A84FF',
+      name: t('提醒'),
+      value: 3,
+    },
+    {
+      count: 0,
+      iconColor: '#F59500',
+      name: t('预警'),
+      value: 2,
+    },
+    {
+      count: 0,
+      iconColor: '#EA3636',
+      name: t('致命'),
+      value: 1,
+    },
+  ]);
 
   const selectionList = shallowRef<RowData[]>([]);
   const currentEvent = shallowRef<RowData>();
@@ -307,33 +332,6 @@
     },
   ];
 
-  const severityList = ref([
-    {
-      count: 0,
-      iconColor: '',
-      name: t('全部'),
-      value: 0,
-    },
-    {
-      count: 0,
-      iconColor: '#3A84FF',
-      name: t('提醒'),
-      value: 3,
-    },
-    {
-      count: 0,
-      iconColor: '#F59500',
-      name: t('预警'),
-      value: 2,
-    },
-    {
-      count: 0,
-      iconColor: '#EA3636',
-      name: t('致命'),
-      value: 1,
-    },
-  ]);
-
   const tableSetting = {
     checked: [
       'alert_name',
@@ -363,58 +361,47 @@
     'severity',
   ];
 
+  const searchValue: Record<string, string> = {};
   const columnFilterParams: Record<string, string> = {};
 
-  watch(
-    () => route.query,
-    () => {
-      if (!Object.keys(route.query).length) {
-        return;
-      }
-
-      updateTableData();
-    },
-    {
-      deep: true,
-    },
-  );
+  const triggerSearch = () => {
+    tableRef.value?.fetchData({
+      bk_biz_id: undefined,
+      ...searchValue,
+    });
+  };
 
-  const updateTableData = () => {
-    const params = route.query;
+  const initURLParmasToSearchValue = () => {
     if (!isTodoPage.value && !isGlobalPage.value) {
-      Object.assign(params, {
+      Object.assign(searchValue, {
         bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
       });
     }
     // 平台管理页鉴权标记
     if (isGlobalPage.value) {
-      Object.assign(params, {
+      Object.assign(searchValue, {
         platform: true,
       });
     }
     if (route.query.self_assist) {
-      Object.assign(params, {
+      Object.assign(searchValue, {
         self_assist: true,
       });
     }
     if (route.query.self_manage || (!route.query.self_manage && !route.query.self_assist && isTodoPage.value)) {
-      Object.assign(params, {
+      Object.assign(searchValue, {
         self_manage: true,
       });
     }
     if (route.query.bk_biz_id) {
-      Object.assign(params, {
+      Object.assign(searchValue, {
         bk_biz_id: Number(route.query.bk_biz_id),
       });
     }
-    setTimeout(() => {
-      tableRef.value?.fetchData({
-        bk_biz_id: undefined,
-        ...params,
-      });
-    });
   };
 
+  initURLParmasToSearchValue();
+
   const handleRequestSuccess = (data: ServiceReturnType<typeof getAlarmEventsList>) => {
     const severityInfo = data.aggs.find((item) => item.id === 'severity');
     if (!severityInfo) {
@@ -445,13 +432,11 @@
 
   const handleSelectLevel = (level: number) => {
     activeLevel.value = level;
-    router.push({
-      name: route.name,
-      query: {
-        ...route.query,
-        severity: level ? level : undefined,
-      },
+    Object.assign(searchValue, {
+      severity: level ? level : undefined,
     });
+
+    triggerSearch();
   };
 
   const handleOpenShieldAlarms = (isEnable = true, data: RowData) => {
@@ -479,30 +464,32 @@
     } else {
       delete columnFilterParams[data.field];
     }
-    tableRef.value?.fetchData({
-      bk_biz_id: undefined,
-      ...route.query,
-      ...columnFilterParams,
+    const filterKeys = ['stage', 'status'];
+    filterKeys.forEach((key) => {
+      if (!columnFilterParams[key]) {
+        delete searchValue[key];
+        return;
+      }
+
+      searchValue[key] = columnFilterParams[key];
     });
+
+    triggerSearch();
   };
 
   const handleSearchChange = (data: Record<string, string>) => {
     const searchData = _.cloneDeep(data);
-    const query = _.cloneDeep(route.query);
-    Object.keys(route.query).forEach((key) => {
+    Object.keys(searchValue).forEach((key) => {
       if (!searchData[key] && searchDataKeys.includes(key)) {
         // searchselect 删除的项
-        delete query[key];
+        delete searchValue[key];
       } else if (searchData[key]) {
-        query[key] = searchData[key];
+        searchValue[key] = searchData[key];
         delete searchData[key];
       }
     });
-    Object.assign(query, searchData);
-    router.push({
-      name: route.name,
-      query,
-    });
+    Object.assign(searchValue, searchData);
+    triggerSearch();
   };
 
   const handleClosed = () => {
@@ -538,7 +525,6 @@
 
   const handleShieldSuccess = () => {
     currentEvent.value!.is_shielded = true;
-    // updateTableData();
   };
 </script>
 <style lang="less" scoped>

dbm-ui/frontend/src/views/monitor-alarm/alarm-events/components/SearchOperation.vue

@@ -17,6 +17,7 @@
     </BkSelect>
     <ShieldDateTimePicker
       class="shield-date-picker"
+      mode="previous"
       :model-value="filterDateRange"
       @change="handleDateTimeChange"
       @finish="handleDateTimePick" />
@@ -152,6 +153,11 @@
     },
   ];
 
+  const dbList = Object.values(DBTypeInfos);
+  const dateFormatStr = 'YYYY-MM-DD HH:mm:ss';
+  const startTime = dayjs().subtract(7, 'day').format(dateFormatStr);
+  const endTime = dayjs().format(dateFormatStr);
+
   const defaultStatus = {
     id: 'status',
     name: t('状态'),
@@ -180,31 +186,41 @@
           ...item,
           values: [
             {
-              id,
+              id: item.id === 'bk_biz_id' ? Number(id) : id,
               name,
             },
           ],
         });
       }
       return results;
     }, []);
-    if (!route.query.status) {
+    if (!route.query.limit && !route.query.status) {
       baseValue.push(defaultStatus);
     }
     return baseValue;
   };
 
-  const dbList = Object.values(DBTypeInfos);
-  const dateFormatStr = 'YYYY-MM-DD HH:mm:ss';
-  const startTime = dayjs().subtract(6, 'day').format(dateFormatStr);
-  const endTime = dayjs().format(dateFormatStr);
+  const initDatetime = () => {
+    const start = route.query.start_time as string;
+    const end = route.query.end_time as string;
+    if (start && end) {
+      return {
+        end_time: dayjs(end).format(dateFormatStr),
+        start_time: dayjs(start).format(dateFormatStr),
+      };
+    }
 
-  const filterData = ref<Record<string, any>>({
-    end_time: endTime,
-    start_time: startTime,
-  });
+    return {
+      end_time: endTime,
+      start_time: startTime,
+    };
+  };
+
+  const initDateRange = initDatetime();
+
+  const filterData = ref<Record<string, any>>(initDateRange);
   const dbValue = ref<string[]>([]);
-  const filterDateRange = ref<[string, string]>([startTime, endTime]);
+  const filterDateRange = ref<[string, string]>([initDateRange.start_time, initDateRange.end_time]);
   const searchValue = ref<ISearchValue[]>(initSearchValue());
 
   const searchSelectData = computed(() => {
@@ -271,8 +287,7 @@
     if (!handledValueList.length) {
       filterData.value = {
         db_types: filterData.value.db,
-        end_time: endTime,
-        start_time: startTime,
+        ...initDatetime(),
       };
       return;
     }