feat(frontend): 全站搜索优化 TencentBlueKing#7951

JustaCattt · Nov 27, 2024 · 9961242 · 9961242
1 parent b336267
commit 9961242
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 185 deletions.
diff --git a/dbm-ui/frontend/src/components/system-search/Index.vue b/dbm-ui/frontend/src/components/system-search/Index.vue
@@ -76,6 +76,8 @@
 
   import { batchSplitRegex } from '@common/regex';
 
+  import { buildURLParams } from '@utils';
+
   import FilterTypeSelect, { FilterType } from './components/FilterTypeSelect.vue';
   import SearchResult from './components/search-result/Index.vue';
   import SearchHistory from './components/SearchHistory.vue';
@@ -149,8 +151,10 @@
   };
 
   const handleSearch = () => {
-    const getQuery = (options: UnwrapRef<typeof formData> & { short_code?: string }) =>
-      Object.keys(options).reduce((prevQuery, optionKey) => {
+    // 页面跳转参数处理
+    const { formData, keyword } = searchResultRef.value!.getFilterOptions();
+    const getURLParams = (options: UnwrapRef<typeof formData> & { from: string; short_code?: string }) => {
+      const query = Object.keys(options).reduce((prevQuery, optionKey) => {
         const optionItem = options[optionKey as keyof typeof options];
 
         if (optionItem !== '' && !(Array.isArray(optionItem) && optionItem.length === 0)) {
@@ -163,8 +167,9 @@
         return prevQuery;
       }, {});
 
-    // 页面跳转参数处理
-    const { formData, keyword } = searchResultRef.value!.getFilterOptions();
+      return buildURLParams(query);
+    };
+
     if (keyword) {
       quickSearch({
         ...formData,
@@ -173,23 +178,25 @@
         const options = {
           ...formData,
           short_code: quickSearchResult.short_code,
+          from: route.name as string,
         };
-        handleRedirect(getQuery(options));
+        handleRedirect(getURLParams(options));
       });
     } else {
-      handleRedirect(getQuery(formData));
+      handleRedirect(
+        getURLParams({
+          ...formData,
+          from: route.name as string,
+        }),
+      );
     }
   };
 
-  const handleRedirect = (query = {}) => {
+  const handleRedirect = (query: string) => {
     const url = router.resolve({
       name: 'QuickSearch',
-      query: {
-        ...query,
-        from: route.name as string,
-      },
     });
-    window.open(url.href, '_blank');
+    window.open(`${url.href}?${query}`, '_blank');
   };
 
   const handleEnter = () => {

diff --git a/dbm-ui/frontend/src/components/system-search/components/search-result/FilterOptions.vue b/dbm-ui/frontend/src/components/system-search/components/search-result/FilterOptions.vue
@@ -147,8 +147,8 @@
       name: t('单据'),
     },
     {
-      id: 'machine',
-      name: t('主机'),
+      id: 'resource_pool',
+      name: t('资源池主机'),
     },
   ];
 
@@ -190,6 +190,18 @@
       id: 'tendbcluster',
       name: 'Tendb Cluster',
     },
+    {
+      id: 'sqlserver',
+      name: 'SqlServer',
+    },
+    {
+      id: 'mongodb',
+      name: 'MongoDB',
+    },
+    {
+      id: 'doris',
+      name: 'Doris',
+    },
   ];
 
   const isAllDbTypes = computed(() => modelValue.value.db_types.length === 0);

diff --git a/dbm-ui/frontend/src/components/system-search/components/search-result/Index.vue b/dbm-ui/frontend/src/components/system-search/components/search-result/Index.vue
@@ -107,7 +107,6 @@
     cluster_domain: t('域名'),
     cluster_name: t('集群名'),
     instance: t('实例'),
-    machine: t('主机'),
     task: t('任务ID'),
     ticket: t('单据'),
     resource_pool: t('资源池主机'),

diff --git a/...ui/frontend/src/components/system-search/components/search-result/render-result/Index.vue b/...ui/frontend/src/components/system-search/components/search-result/render-result/Index.vue
@@ -9,7 +9,6 @@
   import RenderClusterDomain from './ClusterDomain.vue';
   import RenderClusterName from './ClusterName.vue';
   import RenderInstance from './Instance.vue';
-  import RenderMachine from './Machine.vue';
   import ResourcePool from './ResourcePool.vue';
   import RenderTask from './Task.vue';
   import RenderTicket from './Ticket.vue';
@@ -26,7 +25,6 @@
     cluster_domain: RenderClusterDomain,
     cluster_name: RenderClusterName,
     instance: RenderInstance,
-    machine: RenderMachine,
     task: RenderTask,
     ticket: RenderTicket,
     resource_pool: ResourcePool,

diff --git a/.../frontend/src/components/system-search/components/search-result/render-result/Machine.vue b/.../frontend/src/components/system-search/components/search-result/render-result/Machine.vue
diff --git a/...tend/src/components/system-search/components/search-result/render-result/ResourcePool.vue b/...tend/src/components/system-search/components/search-result/render-result/ResourcePool.vue
@@ -42,6 +42,9 @@
 
     location({
       name: 'resourcePool',
+      params: {
+        page: 'host-list',
+      },
       query: {
         hosts: data.ip,
       },

diff --git a/dbm-ui/frontend/src/services/model/quiker-search/quick-search-machine.ts b/dbm-ui/frontend/src/services/model/quiker-search/quick-search-machine.ts
diff --git a/dbm-ui/frontend/src/services/source/quickSearch.ts b/dbm-ui/frontend/src/services/source/quickSearch.ts
@@ -15,7 +15,6 @@ import DbResourceModel from '@services/model/db-resource/DbResource';
 import QuickSearchClusterDomainModel from '@services/model/quiker-search/quick-search-cluster-domain';
 import QuickSearchClusterNameModel from '@services/model/quiker-search/quick-search-cluster-name';
 import QuickSearchInstanceModel from '@services/model/quiker-search/quick-search-instance';
-import QuickSearchMachineModel from '@services/model/quiker-search/quick-search-machine';
 import TaskFlowModel from '@services/model/taskflow/taskflow';
 import TicketModel from '@services/model/ticket/ticket';
 
@@ -40,7 +39,6 @@ export function quickSearch(params: {
       cluster_domain: QuickSearchClusterDomainModel[];
       cluster_name: QuickSearchClusterNameModel[];
       instance: QuickSearchInstanceModel[];
-      machine: QuickSearchMachineModel[];
       resource_pool: DbResourceModel[];
       task: TaskFlowModel[];
       ticket: TicketModel<unknown>[];
@@ -52,7 +50,6 @@ export function quickSearch(params: {
       cluster_domain: (res.cluster_domain || []).map((item) => new QuickSearchClusterDomainModel(item)),
       cluster_name: (res.cluster_name || []).map((item) => new QuickSearchClusterNameModel(item)),
       instance: (res.instance || []).map((item) => new QuickSearchInstanceModel(item)),
-      machine: (res.machine || []).map((item) => new QuickSearchMachineModel(item)),
       resource_pool: (res.resource_pool || []).map((item) => new DbResourceModel(item)),
       task: (res.task || []).map((item) => new TaskFlowModel(item)),
       ticket: (res.ticket || []).map((item) => new TicketModel(item)),

diff --git a/dbm-ui/frontend/src/views/quick-search/Index.vue b/dbm-ui/frontend/src/views/quick-search/Index.vue
@@ -88,6 +88,8 @@
 
   import { quickSearch } from '@services/source/quickSearch';
 
+  import { useUrlSearch } from '@hooks';
+
   import { useGlobalBizs } from '@stores';
 
   import { batchSplitRegex } from '@common/regex';
@@ -103,33 +105,18 @@
   import Task from './components/Task.vue';
   import Ticket from './components/Ticket.vue';
 
-  const formatRouteQuery = () => {
-    const {
-      filter_type: filterType,
-      bk_biz_ids: bkBizIds,
-      db_types: dbTypes,
-      resource_types: resourceTypes,
-    } = route.query as unknown as {
-      filter_type: string;
-      bk_biz_ids?: string;
-      db_types?: string;
-      resource_types?: string;
-    };
-
-    return {
-      bk_biz_ids: bkBizIds ? bkBizIds.split(',').map((bizId) => Number(bizId)) : [],
-      db_types: dbTypes ? dbTypes.split(',') : [],
-      resource_types: resourceTypes ? resourceTypes.split(',') : [],
-      filter_type: filterType || FilterType.EXACT,
-    };
+  type MapArrayToString<T> = {
+    [K in keyof T]: T[K] extends Array<string | number> ? string : T[K];
   };
 
   const route = useRoute();
   const router = useRouter();
   const { t } = useI18n();
   const { bizs: bizList } = useGlobalBizs();
+  const { getSearchParams, replaceSearchParams } = useUrlSearch();
 
   let isRedirectSearch = true;
+  let routeParamsMemo = {};
 
   const comMap = {
     cluster_domain: ClusterDomain,
@@ -147,7 +134,7 @@
 
   // const keyword = ref((route.query.keyword as string) || '');
   const keyword = ref('');
-  const dataMap = ref<Omit<ServiceReturnType<typeof quickSearch>, 'machine' | 'keyword' | 'short_code'>>({
+  const dataMap = ref<Omit<ServiceReturnType<typeof quickSearch>, 'keyword' | 'short_code'>>({
     cluster_name: [],
     cluster_domain: [],
     instance: [],
@@ -156,7 +143,12 @@
     ticket: [],
   });
 
-  const formData = ref(formatRouteQuery());
+  const formData = ref({
+    bk_biz_ids: [] as number[],
+    db_types: [] as string[],
+    resource_types: [] as string[],
+    filter_type: FilterType.EXACT,
+  });
   const activeTab = ref('cluster_domain');
   const panelList = reactive([
     {
@@ -221,9 +213,9 @@
     run: quickSearchRun,
   } = useRequest(quickSearch, {
     manual: true,
-    onSuccess(data) {
+    onSuccess(data, params) {
       if (isRedirectSearch) {
-        keyword.value = data.keyword;
+        keyword.value = data.keyword.replace(batchSplitRegex, '|');
         handleSearch();
       }
       Object.assign(dataMap.value, {
@@ -245,6 +237,26 @@
       if (panelItem) {
         activeTab.value = panelItem.name;
       }
+
+      const serachParams = Object.entries(params[0]).reduce<Record<string, MapArrayToString<(typeof params)[0]>>>(
+        (prev, [key, value]) => {
+          if (Array.isArray(value)) {
+            return Object.assign(prev, { [key]: value.join(',') });
+          }
+          return Object.assign(prev, { [key]: value });
+        },
+        {},
+      );
+      Object.assign(serachParams, {
+        short_code: data.short_code,
+      });
+      delete serachParams.keyword;
+      routeParamsMemo = {
+        ...routeParamsMemo,
+        ...serachParams,
+      };
+
+      replaceSearchParams(routeParamsMemo);
     },
     onAfter() {
       isRedirectSearch = false;
@@ -340,13 +352,35 @@
   };
 
   // 初始化查询
-  if (route.query.short_code) {
-    quickSearchRun({
-      ...formData.value,
-      short_code: route.query.short_code as string,
-      limit: 1000,
-    });
-  }
+  const initRetrieve = () => {
+    const formatRouteQuery = (initParams: Record<string, string>) => {
+      const {
+        filter_type: filterType,
+        bk_biz_ids: bkBizIds,
+        db_types: dbTypes,
+        resource_types: resourceTypes,
+      } = initParams;
+
+      return {
+        bk_biz_ids: bkBizIds ? bkBizIds.split(',').map((bizId) => Number(bizId)) : [],
+        db_types: dbTypes ? dbTypes.split(',') : [],
+        resource_types: resourceTypes ? resourceTypes.split(',') : [],
+        filter_type: (filterType as FilterType) || FilterType.EXACT,
+      };
+    };
+    const initParams = getSearchParams();
+    routeParamsMemo = initParams;
+    formData.value = formatRouteQuery(initParams);
+    const shortCode = initParams?.short_code || initParams?.keyword;
+    if (shortCode) {
+      quickSearchRun({
+        ...formData.value,
+        short_code: shortCode,
+        limit: 1000,
+      });
+    }
+  };
+  initRetrieve();
 
   defineExpose({
     routerBack() {