feat(frontend): 添加全局及业务下的资源标签管理功能 TencentBlueKing#7285

# Reviewed, transaction id: 22743
royalpioneer · Nov 4, 2024 · bcd54a8 · bcd54a8
1 parent 2ef1f79
commit bcd54a8
Show file tree

Hide file tree

Showing 30 changed files with 3,970 additions and 3,921 deletions.
diff --git a/dbm-ui/frontend/src/layout/components/ResourceManage.vue b/dbm-ui/frontend/src/layout/components/ResourceManage.vue
@@ -45,9 +45,7 @@
         key="resourceTagsManagement"
         v-db-console="'resourceManage.resourceTagsManagement'">
         <template #icon>
-          <DbIcon
-            svg
-            type="tag-3" />
+          <DbIcon type="tag-3" />
         </template>
         <span
           v-overflow-tips.right

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
diff --git a/dbm-ui/frontend/src/services/model/db-resource/DbResource.ts b/dbm-ui/frontend/src/services/model/db-resource/DbResource.ts
@@ -38,7 +38,10 @@ export default class DbResource {
     bk_biz_name: string;
   };
   ip: string;
-  label: string;
+  labels: {
+    name: string;
+    id: number;
+  }[];
   net_device_id: string;
   os_bit: string;
   os_type: string;
@@ -81,7 +84,7 @@ export default class DbResource {
     this.device_class = payload.device_class;
     this.for_biz = payload.for_biz;
     this.ip = payload.ip;
-    this.label = payload.label;
+    this.labels = payload.labels;
     this.net_device_id = payload.net_device_id;
     this.os_bit = payload.os_bit;
     this.os_type = payload.os_type;

diff --git a/dbm-ui/frontend/src/services/source/dbresourceResource.ts b/dbm-ui/frontend/src/services/source/dbresourceResource.ts
@@ -166,7 +166,7 @@ export function getSpecResourceCount(params: {
  */
 export function updateResource(params: {
   bk_host_ids: number[];
-  labels?: string[];
+  labels?: number[];
   for_biz: number;
   rack_id: string;
   resource_type: string;

diff --git a/dbm-ui/frontend/src/services/source/tag.ts b/dbm-ui/frontend/src/services/source/tag.ts
@@ -69,10 +69,7 @@ export function getTagRelatedResource(params: { bk_biz_id: number; ids: number[]
   return http.post<
     {
       id: number;
-      related_resources: {
-        resource_type: string;
-        count: number;
-      }[];
+      ip_count: number;
     }[]
   >(`${path}related_resources/`, params);
 }
diff --git a/dbm-ui/frontend/src/stores/globalBizs.ts b/dbm-ui/frontend/src/stores/globalBizs.ts
@@ -29,11 +29,11 @@ export const useGlobalBizs = defineStore('GlobalBizs', {
   }),
   getters: {
     currentBizInfo: (state): BizItem | undefined => state.bizs.find((item) => item.bk_biz_id === state.currentBizId),
-    bizIdMap: (state): Map<number, BizItem> => {
-      const map = new Map<number, BizItem>();
-      state.bizs.forEach((biz) => map.set(biz.bk_biz_id, biz));
-      return map;
-    },
+    bizIdMap: (state): Map<number, BizItem> =>
+      state.bizs.reduce((map, biz) => {
+        map.set(biz.bk_biz_id, biz);
+        return map;
+      }, new Map<number, BizItem>()),
   },
   actions: {
     /**

diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/Index.vue b/dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/Index.vue
@@ -13,14 +13,18 @@
 
 <template>
   <div class="resource-pool-list-page">
+    <SearchBox
+      ref="searchBoxRef"
+      class="mb-25"
+      @change="handleSearch" />
     <div class="action-box mb-16">
-      <template v-if="props.type === ResourcePool.public">
+      <template v-if="type === ResourcePool.public">
         <BkButton
           :disabled="selectionHostIdList.length < 1"
           theme="primary"
           @click="handleShowBatchConvertToBusiness">
-          {{ t('转入业务资源池') }}</BkButton
-        >
+          {{ t('转入业务资源池') }}
+        </BkButton>
       </template>
       <template v-else>
         <ImportHostBtn
@@ -77,18 +81,13 @@
           </BkDropdownMenu>
         </template>
       </BkDropdown>
-      <ResourceSearchSelector v-model="searchValue" />
-      <TagResearchSelector v-model="researchTags" />
       <AuthButton
         action-id="resource_operation_view"
         class="quick-search-btn"
         @click="handleGoOperationRecord">
         <DbIcon type="history-2" />
       </AuthButton>
     </div>
-    <TagResearchPanel
-      v-if="researchTags.length"
-      v-model="researchTags" />
     <RenderTable
       ref="tableRef"
       :columns="tableColumn"
@@ -111,32 +110,32 @@
     <BatchCovertToPublic
       v-model:is-show="isShowBatchCovertToPublic"
       :selected="selectionListWholeDataMemo"
-      @refresh="fetchData" />
+      @refresh="handleRefresh" />
     <BatchMoveToRecyclePool
       v-model:is-show="isShowBatchMoveToRecyclePool"
       :selected="selectionListWholeDataMemo"
-      @refresh="fetchData" />
+      @refresh="handleRefresh" />
     <BatchMoveToFaultPool
       v-model:is-show="isShowBatchMoveToFaultPool"
       :selected="selectionListWholeDataMemo"
-      @refresh="fetchData" />
+      @refresh="handleRefresh" />
     <BatchUndoImport
       v-model:is-show="isShowBatchUndoImport"
       :selected="selectionListWholeDataMemo"
-      @refresh="fetchData" />
+      @refresh="handleRefresh" />
     <BatchConvertToBusiness
       v-model:is-show="isShowBatchConvertToBusiness"
       :biz-id="(currentBizId as number)"
       :selected="selectionListWholeDataMemo"
-      @refresh="fetchData" />
+      @refresh="handleRefresh" />
     <BatchAssign
       v-model:is-show="isShowBatchAssign"
       :selected="selectionListWholeDataMemo"
-      @refresh="fetchData" />
+      @refresh="handleRefresh" />
     <UpdateAssign
       v-model:is-show="isShowUpdateAssign"
       :edit-data="(curEditData as DbResourceModel)"
-      @refresh="fetchData" />
+      @refresh="handleRefresh" />
   </div>
 </template>
 <script setup lang="tsx">
@@ -147,7 +146,6 @@
   import { useRouter } from 'vue-router';
 
   import DbResourceModel from '@services/model/db-resource/DbResource';
-  import type ResourceTagModel from '@services/model/db-resource/ResourceTag';
   import { fetchList } from '@services/source/dbresourceResource';
 
   import { useGlobalBizs } from '@stores';
@@ -156,7 +154,7 @@
   import DiskPopInfo from '@components/disk-pop-info/DiskPopInfo.vue';
   import HostAgentStatus from '@components/host-agent-status/Index.vue';
 
-  import { execCopy, getSearchSelectorParams } from '@utils';
+  import { execCopy } from '@utils';
 
   import { ResourcePool } from '../../type';
 
@@ -171,9 +169,7 @@
   import ImportHost from './components/import-host/Index.vue';
   import ImportHostBtn from './components/ImportHostBtn.vue';
   import RenderTable from './components/RenderTable.vue';
-  import ResourceSearchSelector from './components/resource-search-selector/Index.vue';
-  import TagResearchPanel from './components/tag-research/panel/Index.vue';
-  import TagResearchSelector from './components/tag-research/selector/Index.vue';
+  import SearchBox from './components/search-box/Index.vue';
   import UpdateAssign from './components/update-assign/Index.vue';
   import useTableSetting from './hooks/useTableSetting';
 
@@ -196,7 +192,6 @@
 
   const searchBoxRef = ref();
   const tableRef = ref();
-  const searchValue = ref([]);
   const selectionHostIdList = ref<number[]>([]);
   const isShowBatchSetting = ref(false);
   const isShowImportHost = ref(false);
@@ -208,19 +203,9 @@
   const isShowBatchAssign = ref(false);
   const isShowUpdateAssign = ref(false);
   const curEditData = ref<DbResourceModel>();
-  const researchTags = ref<ResourceTagModel[]>([]);
   const isSelectedSameBiz = ref(false);
   const isBatchOperationShow = ref(false);
 
-  watch(researchTags, () => {
-    if (researchTags.value.length) {
-      searchParams.labels = researchTags.value.map((item) => item.id).join(',');
-    } else {
-      delete searchParams.labels;
-    }
-    fetchData();
-  });
-
   const curBizId = computed(() => {
     let bizId = undefined;
     switch (props.type) {
@@ -234,6 +219,11 @@
     return bizId;
   });
 
+  const dataSource = (params: ServiceParameters<typeof fetchList>) => fetchList({
+    for_biz: curBizId.value,
+    ...params,
+  });
+
   const searchParams: Record<string, any> = {};
   let selectionListWholeDataMemo: DbResourceModel[] = [];
   const tableColumn = [
@@ -259,21 +249,23 @@
       field: 'resourceOwner',
       width: 320,
       render: ({ data }: { data: DbResourceModel }) => (
-        <div class={'resource-owner'}>
-          <Tag
-            theme={(data.for_biz.bk_biz_id === 0 || !data.for_biz.bk_biz_name) ? 'success' : undefined}>{t('所属业务')} : {data.for_biz_display}
-          </Tag>
-          <Tag
-            theme={(!data.resource_type || data.resource_type === 'PUBLIC') ? 'success' : undefined}>{t('所属DB')} : {data.resource_type_display}
-          </Tag>
-          {
-            data.label && Array.isArray(data.label) && (
-              data.label.map(item => (
-                <Tag>
-                  {item}
-                </Tag>
-              ))
-            )}
+        <div class='resource-owner-wrapper'>
+          <div class='resource-owner'>
+            <Tag
+              theme={(data.for_biz.bk_biz_id === 0 || !data.for_biz.bk_biz_name) ? 'success' : undefined}>{t('所属业务')} : {data.for_biz_display}
+            </Tag>
+            <Tag
+              theme={(!data.resource_type || data.resource_type === 'PUBLIC') ? 'success' : undefined}>{t('所属DB')} : {data.resource_type_display}
+            </Tag>
+            {
+              data.labels && Array.isArray(data.labels) && (
+                data.labels.map(item => (
+                  <Tag>
+                    {item.name}
+                  </Tag>
+                ))
+              )}
+          </div>
           <DbIcon
             type="edit"
             class='operation-icon'
@@ -396,18 +388,12 @@
     },
   ];
 
-  watch(
-    searchValue,
-    () => {
-      fetchData();
-    }
-  );
-
   const fetchData = () => {
-    tableRef.value.fetchData({
-      ...searchParams,
-      ...getSearchSelectorParams(searchValue.value)
-    });
+    tableRef.value.fetchData(searchParams);
+  };
+
+  const handleSearch = (params: Record<string, any>) => {
+    tableRef.value.fetchData(params);
   };
 
   // 导入主机
@@ -511,7 +497,9 @@
   }
 
   const handleShowBatchAssign = () => {
-    if (isSelectedSameBiz.value) isShowBatchAssign.value = true;
+    if (isSelectedSameBiz.value) {
+      isShowBatchAssign.value = true;
+    }
     handleBatchOperationShow(false);
   }
 
@@ -520,18 +508,21 @@
     curEditData.value = data;
   }
 
-  const handleBatchOperationShow = (val: boolean) => {
-    isBatchOperationShow.value = val;
+  const handleRefresh = () => {
+    fetchData();
+    Object.values(selectionHostIdList.value).forEach((hostId) => {
+      tableRef.value.removeSelectByKey(hostId);
+    });
+    selectionHostIdList.value = [];
   }
 
-  const dataSource = async (params: ServiceParameters<typeof fetchList>) => await fetchList({
-    for_biz: curBizId.value,
-    ...params,
-  })
+  const handleBatchOperationShow = (val: boolean) => {
+      isBatchOperationShow.value = val;
+    }
 
-  onMounted(() => {
-    fetchData();
-  });
+    onMounted(() => {
+      fetchData();
+    });
 </script>
 <style lang="less">
   .resource-pool-list-page {
@@ -541,7 +532,7 @@
 
       .quick-search-btn {
         width: 32px;
-        margin-left: 8px;
+        margin-left: auto;
       }
 
       .search-selector {
@@ -552,12 +543,16 @@
     }
 
     .my-row-cls {
-      background-color: #3a84ff;
-
-      .resource-owner {
+      .resource-owner-wrapper {
         display: flex;
         align-items: center;
 
+        .resource-owner {
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+        }
+
         .operation-icon {
           color: #3a84ff;
           cursor: pointer;

diff --git a/...ntend/src/views/resource-manage/pool/components/host-list/components/HostOperationTip.vue b/...ntend/src/views/resource-manage/pool/components/host-list/components/HostOperationTip.vue
@@ -58,15 +58,15 @@
 
   const { run: runRemove } = useRequest(removeResource, {
     manual: true,
-    onSuccess: () => {
+    onSuccess() {
       messageSuccess(t('操作成功'));
       emits('refresh');
     },
   });
 
   const { run: convertToPublic } = useRequest(updateResource, {
     manual: true,
-    onSuccess: () => {
+    onSuccess() {
       messageSuccess(t('操作成功'));
       emits('refresh');
     },