fix: 日志嵌入页面问题修复 (#4865)

Co-authored-by: xlc <[email protected]>
Co-authored-by: liang ling <[email protected]>

bklog/web/src/views/retrieve-v2/monitor/monitor.vue

@@ -25,7 +25,7 @@
 -->
 
 <script setup>
-import { computed, ref, watch, defineProps, onMounted, provide } from 'vue';
+import { computed, ref, watch, defineProps, provide } from 'vue';
 
 import * as authorityMap from '@/common/authority-map';
 import { handleTransformToTimestamp } from '@/components/time-range/utils';
@@ -59,86 +59,138 @@ const props = defineProps({
   },
   refleshImmediate: {
     type: String,
-    default: ''
+    default: '',
   },
   handleChartDataZoom: {
     type: Function,
-    default: null
-  }
+    default: null,
+  },
 });
 
-provide('handleChartDataZoom', props.handleChartDataZoom)
+provide('handleChartDataZoom', props.handleChartDataZoom);
 
 const store = useStore();
 const router = useRouter();
 const route = useRoute();
 
 const indexSetParams = computed(() => store.state.indexItem);
-const routeQueryParams = computed(() => {
-  const { ids, isUnionIndex, search_mode } = store.state.indexItem;
-  const {start_time, end_time, ...retrieveParams} = store.getters.retrieveParams ?? {};
-  const unionList = store.state.unionIndexList;
-  const clusterParams = store.state.clusterParams;
-  return {
-    ...retrieveParams,
-    search_mode,
-    ids,
-    isUnionIndex,
-    unionList,
-    clusterParams,
-  };
-});
+
+
+// 解析默认URL为前端参数
+// 这里逻辑不要动，不做解析会导致后续前端查询相关参数的混乱
+store.dispatch('updateIndexItemByRoute', { route, list: [] });
+
+const setDefaultIndexsetId = () => {
+  if (!route.query.indexId) {
+    const routeParams = store.getters.retrieveParams;
+    const resolver = new RetrieveUrlResolver({
+      ...routeParams,
+      datePickerValue: store.state.indexItem.datePickerValue,
+    });
+    if (store.getters.isUnionSearch) {
+      router.replace({ query: { ...route.query, ...resolver.resolveParamsToUrl() } });
+      return;
+    }
+    if (store.state.indexId) {
+      router.replace({
+        query: {
+          indexId: store.state.indexId,
+          ...route.query,
+          ...resolver.resolveParamsToUrl(),
+        },
+      });
+    }
+  }
+};
 
 const getApmIndexSetList = async () => {
   store.commit('retrieve/updateIndexSetLoading', true);
   store.commit('retrieve/updateIndexSetList', []);
-  return props.indexSetApi().then(res => {
-    let indexSetList = [];
-    if (res.length) {
-      // 有索引集
-      // 根据权限排序
-      const s1 = [];
-      const s2 = [];
-      for (const item of res) {
-        if (item.permission?.[authorityMap.SEARCH_LOG_AUTH]) {
-          s1.push(item);
-        } else {
-          s2.push(item);
+  return props
+    .indexSetApi()
+    .then(res => {
+      let indexSetList = [];
+      if (res.length) {
+        // 有索引集
+        // 根据权限排序
+        const s1 = [];
+        const s2 = [];
+        for (const item of res) {
+          if (item.permission?.[authorityMap.SEARCH_LOG_AUTH]) {
+            s1.push(item);
+          } else {
+            s2.push(item);
+          }
         }
+        indexSetList = s1.concat(s2);
+        // 索引集数据加工
+        indexSetList.forEach(item => {
+          item.index_set_id = `${item.index_set_id}`;
+          item.indexName = item.index_set_name;
+          item.lightenName = ` (${item.indices.map(item => item.result_table_id).join(';')})`;
+        });
+        store.commit('retrieve/updateIndexSetList', indexSetList);
+        return indexSetList;
       }
-      indexSetList = s1.concat(s2);
-      // 索引集数据加工
-      indexSetList.forEach(item => {
-        item.index_set_id = `${item.index_set_id}`;
-        item.indexName = item.index_set_name;
-        item.lightenName = ` (${item.indices.map(item => item.result_table_id).join(';')})`;
-      });
-      store.commit('retrieve/updateIndexSetList', indexSetList);
-      return indexSetList;
-    }
-  }).finally(() => {
-    store.commit('retrieve/updateIndexSetLoading', false);
-  });
-}
+    })
+    .finally(() => {
+      store.commit('retrieve/updateIndexSetLoading', false);
+    });
+};
 
 /**
  * 拉取索引集列表
  */
 const getIndexSetList = () => {
-  if(!props.indexSetApi) return
+  if (!props.indexSetApi) return;
   getApmIndexSetList().then(res => {
-    if(!res?.length) return
+    if (!res?.length) return;
     // 拉取完毕根据当前路由参数回填默认选中索引集
     store.dispatch('updateIndexItemByRoute', { route, list: res }).then(() => {
+      setDefaultIndexsetId();
       store.dispatch('requestIndexSetFieldInfo').then(() => {
         store.dispatch('requestIndexSetQuery');
       });
     });
-  })
+  });
+};
+
+
+const setRouteQuery = query => {
+  if (query) {
+    router.replace({
+      query,
+    });
+    return;
+  }
+  const routeQuery = { ...route.query };
+  const { keyword, addition, ip_chooser, search_mode, begin, size } = store.getters.retrieveParams;
+  const resolver = new RetrieveUrlResolver({
+    keyword,
+    addition,
+    ip_chooser,
+    search_mode,
+    begin,
+    size,
+  });
+  Object.assign(routeQuery, resolver.resolveParamsToUrl());
+  router.replace({
+    query: routeQuery,
+  });
 };
 
 const handleIndexSetSelected = payload => {
   if (!isEqual(indexSetParams.value.ids, payload.ids) || indexSetParams.value.isUnionIndex !== payload.isUnionIndex) {
+    if (payload.isUnionIndex) {
+      setRouteQuery({
+        ...route.query,
+        indexId: undefined,
+        unionList: JSON.stringify(ids),
+        clusterParams: undefined,
+      });
+      return;
+    }
+    setRouteQuery({ ...route.query, indexId: payload.ids[0], unionList: undefined, clusterParams: undefined });
     store.commit('updateUnionIndexList', payload.isUnionIndex ? payload.ids ?? [] : []);
     store.dispatch('requestIndexSetItemChanged', payload ?? {}).then(() => {
       store.commit('retrieve/updateChartKey');
@@ -158,6 +210,8 @@ const updateSearchParam = payload => {
     foramtAddition.unshift(getInputQueryIpSelectItem(ip_chooser));
   }
 
+  setRouteQuery();
+
   store.commit('updateIndexItemParams', {
     keyword,
     addition: foramtAddition,
@@ -171,57 +225,30 @@ const updateSearchParam = payload => {
   });
 };
 
-const setRouteParams = () => {
-  const { ids, isUnionIndex } = routeQueryParams.value;
-  const params = isUnionIndex
-  ? { indexId: undefined }
-  : { indexId: ids?.[0] ?? route.query?.indexId };
-  const query = { ...route.query, ...params };
-  const resolver = new RetrieveUrlResolver({
-    ...routeQueryParams.value,
-    indexId: params.indexId,
-    bizId: String(window.bk_biz_id),
-    datePickerValue: store.state.indexItem.datePickerValue,
-  });
-  Object.assign(query, resolver.resolveParamsToUrl());
-
-  if (!isEqual(query, route.query)) {
-    router.replace({
-      query,
-    });
-  }
-};
-
 const init = () => {
   const result = handleTransformToTimestamp(props.timeRange);
   const resolver = new RouteUrlResolver({ route });
-  store.commit('updateIndexItem', { ...resolver.convertQueryToStore(), start_time: result[0], end_time: result[1], datePickerValue: props.timeRange, });
-  store.commit('updateIndexId', '');
-  store.commit('updateUnionIndexList', []);
+  store.commit('updateIndexItem', {
+    ...resolver.convertQueryToStore(),
+    start_time: result[0],
+    end_time: result[1],
+    datePickerValue: props.timeRange,
+  });
   getIndexSetList();
 };
-
-
-watch(
-  routeQueryParams,
-  () => {
-    setRouteParams();
-  },
-  { deep: true },
-);
-
+init();
 
 watch(
   () => props.timeRange,
   async val => {
-    console.log('props.timeRange', props.timeRange);
     if (!val) return;
+    getIndexSetList();
     store.commit('updateIsSetDefaultTableColumn', false);
     const result = handleTransformToTimestamp(val);
     store.commit('updateIndexItemParams', { start_time: result[0], end_time: result[1], datePickerValue: val });
     await store.dispatch('requestIndexSetFieldInfo');
     store.dispatch('requestIndexSetQuery');
-  }
+  },
 );
 
 watch(
@@ -231,12 +258,15 @@ watch(
     store.commit('updateIndexItemParams', { timezone });
     updateTimezone(timezone);
     store.dispatch('requestIndexSetQuery');
-  }
+  },
 );
 
-watch(() => props.refleshImmediate, () => {
-  store.dispatch('requestIndexSetQuery');
-})
+watch(
+  () => props.refleshImmediate,
+  () => {
+    store.dispatch('requestIndexSetQuery');
+  },
+);
 
 const activeTab = ref('origin');
 const searchBarHeight = ref(0);
@@ -320,11 +350,11 @@ const isScrollY = computed(() => {
       ></SelectIndexSet>
       <QueryHistory @change="updateSearchParam"></QueryHistory>
     </div>
-    <div :class="['retrieve-v2-body']"
-      :style="contentStyle">
-      <div
-        class="retrieve-v2-content"
-      >
+    <div
+      :class="['retrieve-v2-body']"
+      :style="contentStyle"
+    >
+      <div class="retrieve-v2-content">
         <SearchBar @height-change="handleHeightChange"></SearchBar>
         <div
           ref="resultRow"