Merge pull request #442 from nanasikeai/feat_log_search

Feat log search
TencentBlueKing · Oct 8, 2024 · 8181238 · 8181238
2 parents 6002681 + a2f326e
commit 8181238
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 31 deletions.
diff --git a/src/frontend/src/views/analysis-manage/language/en.js b/src/frontend/src/views/analysis-manage/language/en.js
@@ -136,5 +136,6 @@ export default {
     管理空间ID: 'scope id',
     取消: 'Cancel',
     '取消(No)': 'No',
+    请输入原始日志: 'Please enter the Raw logs',
   },
 };
diff --git a/...views/analysis-manage/list/components/search-box/components/render-field-config/config.ts b/...views/analysis-manage/list/components/search-box/components/render-field-config/config.ts
@@ -170,6 +170,11 @@ export default {
     // },
     // message: '不允许出现特殊字符',
   },
+  log: {
+    label: '原始日志',
+    type: 'string',
+    required: false,
+  },
   query_string: {
     label: '查询语句',
     type: 'expr',

diff --git a/...src/views/analysis-manage/list/components/search-result-table/components/render-table.vue b/...src/views/analysis-manage/list/components/search-result-table/components/render-table.vue
@@ -97,8 +97,6 @@
     IRequestResponsePaginationData,
   } from '@utils/request';
 
-  import { getOffset } from '@/utils/assist';
-
   interface Props {
     columns: InstanceType<typeof Table>['$props']['columns'],
     dataSource: (params: any)=> Promise<IRequestResponsePaginationData<any>>,
@@ -125,7 +123,7 @@
   const pagination = reactive<IPagination>({
     count: 0,
     current: 1,
-    limit: 10,
+    limit: 50,
     limitList: [10, 20, 50, 100],
     align: 'right',
     layout: ['total', 'limit', 'list'],
@@ -211,38 +209,13 @@
     emits('clearSearch');
   };
 
-  const tableHeaderHeight = 42;
-  const tableRowHeight = 42;
-  const calcPageLimit = () => {
-    const windowInnerHeight = window.innerHeight;
-    const pageOffsetTop = 185;
-    const tableFooterHeight = 60;
-    const copyrightHeight = 72;
-
-    const tableRowTotalHeight = windowInnerHeight
-      - pageOffsetTop
-      - tableHeaderHeight
-      - tableFooterHeight
-      - copyrightHeight;
-
-    const rowNum = Math.floor(tableRowTotalHeight / tableRowHeight);
-    const pageLimit = new Set([
-      ...pagination.limitList,
-      rowNum,
-    ]);
-    pagination.limit = rowNum;
-    pagination.limitList = [...pageLimit].sort((a, b) => a - b);
-  };
-
   const calcTableHeight = _.throttle(() => {
     const windowInnerHeight = window.innerHeight;
-    const { top } = getOffset(rootRef.value);
-    tableMaxHeight.value = windowInnerHeight - top - 120;
+    tableMaxHeight.value = windowInnerHeight - 250;
   }, 100);
 
   onMounted(() => {
     parseURL();
-    calcPageLimit();
     calcTableHeight();
     window.addEventListener('resize', calcTableHeight);
     const observer = new MutationObserver(() => {

diff --git a/src/frontend/src/views/analysis-manage/list/components/search-result-table/index.vue b/src/frontend/src/views/analysis-manage/list/components/search-result-table/index.vue
@@ -23,6 +23,7 @@
       :columns="tableColumn"
       :data-source="dataSource"
       @clear-search="handleClearSearch"
+      @request-success="handleRequestSuccess"
       @row-click="handleRowClick">
       <template #expandRow="{ row }">
         <row-expand-content
@@ -81,7 +82,8 @@
   interface Exposes {
     loading: Ref<boolean>,
   }
-  const initColumn:InstanceType<typeof Table>['$props']['columns'] = [
+
+  const initColumn: InstanceType<typeof Table>['$props']['columns'] = [
     {
       label: () => '',
       type: 'expand',
@@ -98,24 +100,33 @@
     },
     {
       label: () => t('操作人'),
+      field: 'username',
       render: ({ data }: {data: SearchModel}) => (
         data.username
           ? <RenderUser key={data.bk_receive_time} data={data}/>
           : '--'
       ),
       width: '100px',
+      filter: {
+        list: [],
+      },
     },
     {
       label: () => t('来源系统(ID)'),
+      field: 'system_info.name',
       render: ({ data }: {data: SearchModel}) => (
         data.system_id
           ? <RenderSystem data={data}/>
           : '--'
       ),
       minWidth: 140,
+      filter: {
+        list: [],
+      },
     },
     {
       label: () => t('操作事件名(ID)'),
+      field: 'snapshot_action_info.name',
       render: ({ data }: {data: SearchModel}) => {
         if (data.action_id) {
           if (!_.isEmpty(data.snapshot_action_info)) {
@@ -126,9 +137,13 @@
         return '--';
       },
       minWidth: 160,
+      filter: {
+        list: [],
+      },
     },
     {
       label: () => t('资源类型(ID)'),
+      field: 'snapshot_resource_type_info.name',
       render: ({ data }: {data: SearchModel}) => {
         if (data.resource_type_id) {
           if (!_.isEmpty(data.snapshot_resource_type_info)) {
@@ -139,6 +154,9 @@
         return '--';
       },
       minWidth: 150,
+      filter: {
+        list: [],
+      },
     },
     {
       label: () => t('资源实例(ID)'),
@@ -165,21 +183,29 @@
     },
     {
       label: () => t('操作结果(Code)'),
+      field: 'result_code',
       minWidth: 160,
       render: ({ data }: {data: SearchModel}) => (
         data.result_code
           ? <RenderResult key={data.bk_receive_time} data={data}/>
           : '--'
       ),
+      filter: {
+        list: [],
+      },
     },
     {
       label: () => t('操作途径'),
+      field: 'access_type',
       render: ({ data }: {data: SearchModel}) => (
         <span>
           {data.access_type || '--'}
         </span>
       ),
       minWidth: 120,
+      filter: {
+        list: [],
+      },
     },
   ];
   // const fixedColum:InstanceType<typeof Table>['$props']['columns'] = [{
@@ -220,6 +246,41 @@
     manual: true,
   });
 
+  const getValueFromPath = (obj: any, path: string) => {
+    // 将路径按点拆分成数组
+    const keys = path.split('.');
+
+    // 遍历路径数组，逐层获取对象的值
+    return keys.reduce((acc, key) => {
+      // 如果acc为空或undefined，直接返回undefined
+      if (acc === undefined) {
+        return undefined;
+      }
+      // 获取当前层级的值
+      return acc[key];
+    }, obj);
+  };
+
+  // 根据返回内容生成列筛选项
+  const handleRequestSuccess = (data: Array<SearchModel>) => {
+    tableColumn.value = tableColumn.value?.map((item) => {
+      if (item.filter) {
+        const values = data.map(obj => getValueFromPath(obj, item.field as string));
+        const lists = [...new Set(values)].map(value => ({
+          text: value === undefined ? '--' : value,
+          value,
+        }));
+        // eslint-disable-next-line no-param-reassign
+        item.filter = {
+          list: lists,
+          height: lists.length * 32,
+          maxHeight: 192,
+        };
+      }
+      return item;
+    });
+  };
+
   const handleUpdateField = () => {
     fetchCustomFields({
       route_path: route.name,

diff --git a/src/frontend/src/views/analysis-manage/list/index.vue b/src/frontend/src/views/analysis-manage/list/index.vue
@@ -34,7 +34,9 @@
         ref="resultRef"
         :filter="searchModel"
         @clear-search="handleClearSearch" />
-      <search-page-footer />
+      <div style="height: 52px; margin-top: 24px;">
+        <search-page-footer />
+      </div>
     </div>
   </skeleton-loading>
 </template>