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

# Reviewed, transaction id: 23488

dbm-ui/frontend/lib/bk-icon/demo.html

@@ -117,6 +117,10 @@ <h2 class="page-title">
     </div>
     <section class="tab-content single-color active" data-type="singleColor">
       <ul class="icon-list">
+        <li class="icon-item" title="tags">
+          <span class="icon bk-dbm-icon db-icon-tags"></span>
+          <p class="icon-text">tags</p>
+        </li>
         <li class="icon-item" title="check-circle-fill">
           <span class="icon bk-dbm-icon db-icon-check-circle-fill"></span>
           <p class="icon-text">check-circle-fill</p>
@@ -749,6 +753,10 @@ <h2 class="page-title">
           <span class="icon bk-dbm-icon db-icon-backup-2"></span>
           <p class="icon-text">backup-2</p>
         </li>
+        <li class="icon-item" title="loading-tubiao">
+          <span class="icon bk-dbm-icon db-icon-loading-tubiao"></span>
+          <p class="icon-text">loading-tubiao</p>
+        </li>
         <li class="icon-item" title="host-select">
           <span class="icon bk-dbm-icon db-icon-host-select"></span>
           <p class="icon-text">host-select</p>
@@ -829,6 +837,10 @@ <h2 class="page-title">
           <span class="icon bk-dbm-icon db-icon-dirty-host"></span>
           <p class="icon-text">dirty-host</p>
         </li>
+        <li class="icon-item" title="tag-3">
+          <span class="icon bk-dbm-icon db-icon-tag-3"></span>
+          <p class="icon-text">tag-3</p>
+        </li>
         <li class="icon-item" title="saoba">
           <span class="icon bk-dbm-icon db-icon-saoba"></span>
           <p class="icon-text">saoba</p>
@@ -990,6 +1002,12 @@ <h3 class="describe-title">如何使用</h3>
     </section>
     <section class="tab-content multiple-color"  data-type="multipleColor">
       <ul class="icon-list">
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-tags"></use>
+          </svg>
+          <p class="icon-text">tags</p>
+        </li>
         <li class="colorful-icon">
           <svg class="icon svg-icon">
             <use xlink:href="#db-icon-check-circle-fill"></use>
@@ -1938,6 +1956,12 @@ <h3 class="describe-title">如何使用</h3>
           </svg>
           <p class="icon-text">backup-2</p>
         </li>
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-loading-tubiao"></use>
+          </svg>
+          <p class="icon-text">loading-tubiao</p>
+        </li>
         <li class="colorful-icon">
           <svg class="icon svg-icon">
             <use xlink:href="#db-icon-host-select"></use>
@@ -2058,6 +2082,12 @@ <h3 class="describe-title">如何使用</h3>
           </svg>
           <p class="icon-text">dirty-host</p>
         </li>
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-tag-3"></use>
+          </svg>
+          <p class="icon-text">tag-3</p>
+        </li>
         <li class="colorful-icon">
           <svg class="icon svg-icon">
             <use xlink:href="#db-icon-saoba"></use>

dbm-ui/frontend/lib/bk-icon/style.css

@@ -23,6 +23,9 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
   -moz-osx-font-smoothing: grayscale;
 }
 
+.db-icon-tags:before {
+	content: "\e206";
+}
 .db-icon-check-circle-fill:before {
 	content: "\e1a7";
 }
@@ -497,6 +500,9 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .db-icon-backup-2:before {
 	content: "\e1af";
 }
+.db-icon-loading-tubiao:before {
+	content: "\e208";
+}
 .db-icon-host-select:before {
 	content: "\e1b0";
 }
@@ -557,6 +563,9 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .db-icon-dirty-host:before {
 	content: "\e1ca";
 }
+.db-icon-tag-3:before {
+	content: "\e207";
+}
 .db-icon-saoba:before {
 	content: "\e1f4";
 }

dbm-ui/frontend/src/components/db-table/index.vue

@@ -111,6 +111,7 @@
     // 是否允许行点击选中
     allowRowClickSelect?: boolean,
     remoteSort?: boolean,
+    sortType?: 'ordering' | 'default';
   }
 
   interface Emits {
@@ -145,6 +146,7 @@
     remotePagination: true,
     allowRowClickSelect: false,
     remoteSort: false,
+    sortType: 'default',
   });
 
   const emits = defineEmits<Emits>();
@@ -516,9 +518,16 @@
       desc: 0,
       asc: 1,
     };
-    sortParams = {
-      [sortPayload.column.field]: valueMap[sortPayload.type as keyof typeof valueMap],
-    };
+    if (props.sortType === 'ordering') {
+      sortParams = {
+        ordering: `${valueMap[sortPayload.type as keyof typeof valueMap] === 0 ? '-' : ''}${sortPayload.column.field}`
+      };
+    }
+    else {
+      sortParams = {
+        [sortPayload.column.field]: valueMap[sortPayload.type as keyof typeof valueMap],
+      };
+    }
     fetchListData();
   };
 

dbm-ui/frontend/src/components/disk-pop-info/DiskPopInfo.vue

@@ -2,7 +2,7 @@
   <BkPopover
     :popover-delay="[0, 300]"
     theme="light"
-    trigger="hover"
+    :trigger="trigger"
     :width="430">
     <span style="padding: 0 10px">
       <slot />
@@ -26,9 +26,12 @@
 
   interface Props {
     data: DbResourceModel['storage_device'];
+    trigger?: 'hover' | 'click' | 'manual';
   }
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    trigger: 'hover',
+  });
 
   const { t } = useI18n();
 

dbm-ui/frontend/src/layout/Index.vue

@@ -137,6 +137,8 @@
     ],
     [menuEnum.observableManage]: ['DBHASwitchEvents', 'inspectionManage'],
     [menuEnum.configManage]: [
+      'BizResourcePool',
+      'BizResourceTag',
       'DbConfigure',
       'DBMonitorStrategy',
       'DBMonitorAlarmGroup',

dbm-ui/frontend/src/layout/components/ConfigManage.vue

@@ -9,6 +9,36 @@
         :active-key="currentActiveKey"
         :opened-keys="[parentKey]"
         @click="handleMenuChange">
+        <BkMenuGroup :name="t('资源管理')">
+          <BkMenuItem
+            key="BizResourcePool"
+            v-db-console="'bizConfigManage.businessResourcePool'">
+            <template #icon>
+              <DbIcon
+                svg
+                type="list" />
+            </template>
+            <span
+              v-overflow-tips.right
+              class="text-overflow">
+              {{ t('资源池') }}
+            </span>
+          </BkMenuItem>
+          <BkMenuItem
+            key="BizResourceTag"
+            v-db-console="'bizConfigManage.businessResourceTag'">
+            <template #icon>
+              <DbIcon
+                svg
+                type="tag-3" />
+            </template>
+            <span
+              v-overflow-tips.right
+              class="text-overflow">
+              {{ t('资源标签') }}
+            </span>
+          </BkMenuItem>
+        </BkMenuGroup>
         <BkMenuGroup :name="t('业务配置')">
           <BkMenuItem
             key="DbConfigure"
@@ -99,7 +129,7 @@
     parentKey,
     key: currentActiveKey,
     routeLocation: handleMenuChange,
-  } = useActiveKey(menuRef as Ref<InstanceType<typeof Menu>>, 'DbConfigure');
+  } = useActiveKey(menuRef as Ref<InstanceType<typeof Menu>>, 'BizResourcePool');
 
   const styles = useMenuStyles(menuBoxRef);
 </script>

dbm-ui/frontend/src/layout/components/ResourceManage.vue

@@ -41,6 +41,18 @@
           {{ t('污点主机处理') }}
         </span>
       </BkMenuItem>
+      <BkMenuItem
+        key="resourceTagsManagement"
+        v-db-console="'resourceManage.resourceTagsManagement'">
+        <template #icon>
+          <DbIcon type="tag-3" />
+        </template>
+        <span
+          v-overflow-tips.right
+          class="text-overflow">
+          {{ t('资源标签管理') }}
+        </span>
+      </BkMenuItem>
       <BkMenuItem
         key="resourcePoolOperationRecord"
         v-db-console="'resourceManage.resourceOperationRecord'">

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

@@ -351,6 +351,7 @@
   "访问DB": "访问 DB",
   "访问源预览": "访问源预览",
   "旧从库主机": "旧从库主机",
+  "新从库主机": "新从库主机",
   "备份源": "备份源",
   "目标从库实例": "目标从库实例",
   "请输入域名_集群名称_所属DB模块": "请输入域名，集群名称，所属DB模块",
@@ -1202,7 +1203,7 @@
   "Bookkeeper节点数至少为2台": "Bookkeeper 节点数至少为 2 台",
   "Zookeeper节点数需3台": "Zookeeper 节点数需 3 台",
   "Broker节点数至少为1台": "Broker节点数至少为 1 台",
-  "已选n台_共nGB": "已选{0}台，共{1}GB",
+  "已选n台_共nGB(目标容量:nG)": "已选{0}台，共{1}GB(目标容量:{2}G)",
   "(共n台_磁盘容量nG)": "(共{0}台，磁盘容量{1}G)",
   "(需n台_已选n台_少n台_共nG)": "(需{0}台，已选{1}台，少{2}台_共{3}G)",
   "确认扩容【name】集群": "确认扩容【{name}】集群？",
@@ -1338,6 +1339,8 @@
   "Client节点规格": "Client 节点规格",
   "冷_热节点": "冷/热节点",
   "NameNode_Zookeeper_JournalNode节点": "NameNode/Zookeeper/JournalNode 节点",
+  "冷_热节点规格": "冷/热节点规格",
+  "NameNode_Zookeeper_JournalNode节点规格": "NameNode/Zookeeper/JournalNode 节点规格",
   "确认删除以下规格": "确认删除以下规格？",
   "Pulsar集群管理": "【Pulsar】集群管理",
   "InfluxDB实例详情": "InfluxDB 实例详情",
@@ -1434,6 +1437,7 @@
   "请先返回列表选择要替换的节点 IP": "请先返回列表选择要替换的节点 IP",
   "xx节点规格": "{name}节点规格",
   "替换后原节点 IP 将不在可用，资源将会被释放": "替换后原节点 IP 将不在可用，资源将会被释放",
+  "已选n台_共nG_(目标容量:nG)": "已选{0}台，共{1}G(目标容量:{1}G)",
   "Client 节点": "Client 节点",
   "冷热节点至少扩容一种类型": "冷热节点至少扩容一种类型",
   "每台主机实例数量": "每台主机实例数量",
@@ -2596,8 +2600,10 @@
   "预计容量nG": "预计容量 {0} G",
   "所需主机数量": "所需主机数量",
   "Shard 节点数": "Shard 节点数",
-  "部署副本集数量": "部署副本集数量",
   "每组主机部署副本集数量": "每组主机部署副本集数量",
+  "主从节点数": "主从节点数",
+  "部署副本集数量": "部署副本集数量",
+  "每台主机部署副本集数量": "每台主机部署副本集数量",
   "共需n台": "共需 {0} 台",
   "计算规则": "计算规则",
   "集群ID重复": "集群ID重复",
@@ -2688,6 +2694,7 @@
   "保留索引": "保留索引",
   "删除索引": "删除索引",
   "索引处理": "索引处理",
+  "备份文件保存时间": "备份文件保存时间",
   "备份方式": "备份方式",
   "当前Shard节点规格": "当前 Shard 节点规格",
   "当前Shard节点数": "当前 Shard 节点数",
@@ -2715,6 +2722,7 @@
   "目标集群与构造设置": "目标集群与构造设置",
   "备份文件": "备份文件",
   "该操作将会修改对应DB的数据，请谨慎操作": "该操作将会修改对应 DB 的数据，请谨慎操作！",
+  "是否开启 Oplog": "是否开启 Oplog",
   "确认清档n个副本集集群": "确认清档 {n} 个副本集集群？",
   "确认执行变更脚本任务": "确认执行变更脚本任务？",
   "集群上的数据将会全部构造至指定的新机器": "集群上的数据将会全部构造至指定的新机器",
@@ -3600,11 +3608,57 @@
   "当前容量：nG": "当前容量：{0} G",
   "扩容后预估：nG": "扩容后预估：{0} G",
   "缩容后预估：nG": "缩容后预估：{0} G",
-  "存储层（Nodes）": "存储层（Nodes）",
-  "存储层（Nodes）域名": "存储层（Nodes）域名",
   "请按行输入IP，每行代表一个单元格的值。多个IP用逗号、空格、｜分隔": "请按行输入IP，每行代表一个单元格的值。多个IP用逗号、空格、｜分隔",
   "无只读主机": "无只读主机",
   "批量录入：按行录入，快速批量输入多个单元格的值": "批量录入：按行录入，快速批量输入多个单元格的值",
   "高可用": "高可用",
+  "已选n台_共nGB": "已选{0}台，共{1}GB",
+  "编辑中": "编辑中",
+  "权限规则_t_任务正在进行中": "权限规则{t}任务正在进行中",
+  "删除操作将发起单据，单据获得审批后才会执行删除": "删除操作将发起单据，单据获得审批后才会执行删除",
+  "修改": "修改",
+  "存储层（Nodes）": "存储层（Nodes）",
+  "存储层（Nodes）域名": "存储层（Nodes）域名",
+  "确认将 {n} 台主机转为公共资源?": "确认将 {n} 台主机转为公共资源?",
+  "已选择以下n台主机": "已选择以下 {0} 台主机",
+  "资源监控": "资源监控",
+  "系统管理": "系统管理",
+  "撤销导入": "撤销导入",
+  "确认后，主机将从资源池移回原有模块": "确认后，主机将从资源池移回原有模块",
+  "所属DB": "所属DB",
+  "移入故障池": "移入故障池",
+  "移入待回收池": "移入待回收池",
+  "资源归属": "资源归属",
+  "确认批量将 {n} 台主机转入回收池？": "确认批量将 {n} 台主机转入回收池？",
+  "确认批量将 {n} 台主机转入故障池?": "确认批量将 {n} 台主机转入故障池？",
+  "确认批量撤销 {n} 台主机的导入？": "确认批量撤销 {n} 台主机的导入？",
+  "确认批量撤销 {n} 台主机的导入?": "确认批量撤销 {n} 台主机的导入?",
+  "资源标签": "资源标签",
+  "标签": "标签",
+  "仅支持同业务的主机": "仅支持同业务的主机",
+  "设置属性": "设置属性",
+  "添加资源归属": "添加资源归属",
+  "转为公共资源": "转为公共资源",
+  "共n台": "共{0}台",
+  "批量添加资源归属": "批量添加资源归属",
+  "为主机添加或更新所属 DB、标签设置，若设置不存在则添加，已存在则覆盖更新": "为主机添加或更新所属 DB、标签设置，若设置不存在则添加，已存在则覆盖更新",
+  "我的已办": "我的已办",
+  "操作系统": "操作系统",
+  "确认后，将主机标记为待回收，等待处理": "确认后，将主机标记为待回收，等待处理",
+  "确认后，将主机标记为故障，等待处理": "确认后，将主机标记为故障，等待处理",
+  "编辑资源归属": "编辑资源归属",
+  "资源标签管理": "资源标签管理",
+  "确认后，将主机清空已存在的资源归属设置，并设置为公共资源": "确认后，将主机清空已存在的资源归属设置，并设置为公共资源",
+  "确认后，主机将标记为待回收，等待处理": "确认后，主机将标记为待回收，等待处理",
+  "确认后，主机将标记为故障，等待处理": "确认后，主机将标记为故障，等待处理",
+  "确认后，主机将标记为业务专属": "确认后，主机将标记为业务专属",
+  "确认转入待回收池？": "确认转入待回收池？",
+  "确认批量将 {n} 台主机转入待回收池": "确认批量将 {n} 台主机转入待回收池",
+  "确认批量将 {n} 台主机转入业务资源池": "确认批量将 {n} 台主机转入业务资源池",
+  "确认撤销导入？": "确认撤销导入？",
+  "确认后，将主机将清空已存在的资源归属设置，并设置为公共资源": "确认后，将主机将清空已存在的资源归属设置，并设置为公共资源",
+  "确认批量将 {n} 台主机转入业务资源池？": "确认批量将 {n} 台主机转入业务资源池？",
+  "确认转入待故障池？": "确认转入待故障池？",
+  "跳转管理页": "跳转管理页",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/router/index.ts

@@ -30,6 +30,7 @@ import getQuickSearchRoutes from '@views/quick-search/routes';
 import getResourceManageRoutes from '@views/resource-manage/routes';
 import getServiceApplyRoutes from '@views/service-apply/routes';
 import getStaffManageRoutes from '@views/staff-manage/routes';
+import getResourceTagRoutes from '@views/tag-manage/routes';
 import getTaskHistoryRoutes from '@views/task-history/routes';
 import getTemporaryPasswordModify from '@views/temporary-paassword-modify/routes';
 import getTicketFlowSettingBizRoutes from '@views/ticket-flow-setting-biz/routes';
@@ -113,6 +114,7 @@ export default () => {
     {
       path: `${rootPath}${currentBiz}`,
       children: [
+        ...getResourceTagRoutes(),
         ...getDbManageRoutes(),
         ...getDbConfRoutes(),
         ...getDbhaSwitchEventsRouters(),

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;