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

TencentBlueKing · Nov 27, 2024 · 5bc7744 · 5bc7744
1 parent dce1049
commit 5bc7744
Show file tree

Hide file tree

Showing 89 changed files with 4,301 additions and 676 deletions.
diff --git a/dbm-ui/frontend/lib/bk-icon/demo.html b/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>

diff --git a/dbm-ui/frontend/lib/bk-icon/fonts/iconcool.eot b/dbm-ui/frontend/lib/bk-icon/fonts/iconcool.eot
diff --git a/dbm-ui/frontend/lib/bk-icon/fonts/iconcool.svg b/dbm-ui/frontend/lib/bk-icon/fonts/iconcool.svg
diff --git a/dbm-ui/frontend/lib/bk-icon/fonts/iconcool.ttf b/dbm-ui/frontend/lib/bk-icon/fonts/iconcool.ttf
diff --git a/dbm-ui/frontend/lib/bk-icon/fonts/iconcool.woff b/dbm-ui/frontend/lib/bk-icon/fonts/iconcool.woff
diff --git a/dbm-ui/frontend/lib/bk-icon/iconcool.js b/dbm-ui/frontend/lib/bk-icon/iconcool.js
diff --git a/dbm-ui/frontend/lib/bk-icon/iconcool.json b/dbm-ui/frontend/lib/bk-icon/iconcool.json
diff --git a/dbm-ui/frontend/lib/bk-icon/style.css b/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";
 }

diff --git a/dbm-ui/frontend/src/components/db-table/index.vue b/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>();
@@ -517,9 +519,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();
   };
 

diff --git a/dbm-ui/frontend/src/components/disk-pop-info/DiskPopInfo.vue b/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();
 

diff --git a/dbm-ui/frontend/src/layout/Index.vue b/dbm-ui/frontend/src/layout/Index.vue
@@ -138,6 +138,8 @@
     ],
     [menuEnum.observableManage]: ['DBHASwitchEvents', 'inspectionManage'],
     [menuEnum.configManage]: [
+      'BizResourcePool',
+      'BizResourceTag',
       'DbConfigure',
       'DBMonitorStrategy',
       'DBMonitorAlarmGroup',

diff --git a/dbm-ui/frontend/src/layout/components/ConfigManage.vue b/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>
diff --git a/dbm-ui/frontend/src/layout/components/ResourceManage.vue b/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'">

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -351,6 +351,7 @@
   "访问DB": "访问 DB",
   "访问源预览": "访问源预览",
   "旧从库主机": "旧从库主机",
+  "新从库主机": "新从库主机",
   "备份源": "备份源",
   "目标从库实例": "目标从库实例",
   "请输入域名_集群名称_所属DB模块": "请输入域名，集群名称，所属DB模块",
@@ -1201,7 +1202,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}】集群？",
@@ -1337,6 +1338,8 @@
   "Client节点规格": "Client 节点规格",
   "冷_热节点": "冷/热节点",
   "NameNode_Zookeeper_JournalNode节点": "NameNode/Zookeeper/JournalNode 节点",
+  "冷_热节点规格": "冷/热节点规格",
+  "NameNode_Zookeeper_JournalNode节点规格": "NameNode/Zookeeper/JournalNode 节点规格",
   "确认删除以下规格": "确认删除以下规格？",
   "Pulsar集群管理": "【Pulsar】集群管理",
   "InfluxDB实例详情": "InfluxDB 实例详情",
@@ -1433,6 +1436,7 @@
   "请先返回列表选择要替换的节点 IP": "请先返回列表选择要替换的节点 IP",
   "xx节点规格": "{name}节点规格",
   "替换后原节点 IP 将不在可用，资源将会被释放": "替换后原节点 IP 将不在可用，资源将会被释放",
+  "已选n台_共nG_(目标容量:nG)": "已选{0}台，共{1}G(目标容量:{1}G)",
   "Client 节点": "Client 节点",
   "冷热节点至少扩容一种类型": "冷热节点至少扩容一种类型",
   "每台主机实例数量": "每台主机实例数量",
@@ -2595,8 +2599,10 @@
   "预计容量nG": "预计容量 {0} G",
   "所需主机数量": "所需主机数量",
   "Shard 节点数": "Shard 节点数",
-  "部署副本集数量": "部署副本集数量",
   "每组主机部署副本集数量": "每组主机部署副本集数量",
+  "主从节点数": "主从节点数",
+  "部署副本集数量": "部署副本集数量",
+  "每台主机部署副本集数量": "每台主机部署副本集数量",
   "共需n台": "共需 {0} 台",
   "计算规则": "计算规则",
   "集群ID重复": "集群ID重复",
@@ -2687,6 +2693,7 @@
   "保留索引": "保留索引",
   "删除索引": "删除索引",
   "索引处理": "索引处理",
+  "备份文件保存时间": "备份文件保存时间",
   "备份方式": "备份方式",
   "当前Shard节点规格": "当前 Shard 节点规格",
   "当前Shard节点数": "当前 Shard 节点数",
@@ -2714,6 +2721,7 @@
   "目标集群与构造设置": "目标集群与构造设置",
   "备份文件": "备份文件",
   "该操作将会修改对应DB的数据，请谨慎操作": "该操作将会修改对应 DB 的数据，请谨慎操作！",
+  "是否开启 Oplog": "是否开启 Oplog",
   "确认清档n个副本集集群": "确认清档 {n} 个副本集集群？",
   "确认执行变更脚本任务": "确认执行变更脚本任务？",
   "集群上的数据将会全部构造至指定的新机器": "集群上的数据将会全部构造至指定的新机器",
@@ -3559,16 +3567,6 @@
   "匹配的规则": "匹配的规则",
   "域名不能为空": "域名不能为空",
   "请选择或直接输入账号，Enter完成输入": "请选择或直接输入账号，Enter完成输入",
-  "后端存储": "后端存储",
-  "TendisCache后端存储": "TendisCache 后端存储",
-  "TendisSSD后端存储": "TendisSSD 后端存储",
-  "TendisPlus后端存储": "TendisPlus 后端存储",
-  "DataNode节点": "DataNode 节点",
-  "副本集/ShardSvr": "副本集/ShardSvr",
-  "必须要能除尽总分片数": "必须要能除尽总分片数",
-  "变更机器组数": "变更机器组数",
-  "CPU/内存": "CPU/内存",
-  "添加机型": "添加机型",
   "TendisCache/RedisCluster/Redis主从 后端存储": "TendisCache/RedisCluster/Redis主从 后端存储",
   "扩容数量（当前n台）": "扩容数量（当前 {0} 台）",
   "当前容量：nG": "当前容量：{0} G",
@@ -3609,9 +3607,6 @@
   "变更类型": "变更类型",
   "删除规则": "删除规则",
   "账户名称": "账户名称",
-  "编辑中": "编辑中",
-  "权限规则_t_任务正在进行中": "权限规则{t}任务正在进行中",
-  "修改": "修改",
   "变更规则": "变更规则",
   "修改成功后，不会影响已授权的实例，新增的授权将会按照最新的配置生效": "修改成功后，不会影响已授权的实例，新增的授权将会按照最新的配置生效",
   "差异确认": "差异确认",
@@ -3654,5 +3649,61 @@
   "每个分类最多显示 10 条记录，点击搜索可查看全部记录。": "每个分类最多显示 10 条记录，点击搜索可查看全部记录。",
   "全站搜索，支持多对象，Shift + Enter 换行，Enter键开启搜索": "全站搜索，支持多对象，Shift + Enter 换行，Enter键开启搜索",
   "全站搜索，支持多对象，Enter开启搜索": "全站搜索，支持多对象，Enter开启搜索",
+  "后端存储": "后端存储",
+  "TendisCache后端存储": "TendisCache 后端存储",
+  "TendisSSD后端存储": "TendisSSD 后端存储",
+  "TendisPlus后端存储": "TendisPlus 后端存储",
+  "DataNode节点": "DataNode 节点",
+  "副本集/ShardSvr": "副本集/ShardSvr",
+  "必须要能除尽总分片数": "必须要能除尽总分片数",
+  "变更机器组数": "变更机器组数",
+  "CPU/内存": "CPU/内存",
+  "添加机型": "添加机型",
+  "已选n台_共nGB": "已选{0}台，共{1}GB",
+  "编辑中": "编辑中",
+  "权限规则_t_任务正在进行中": "权限规则{t}任务正在进行中",
+  "删除操作将发起单据，单据获得审批后才会执行删除": "删除操作将发起单据，单据获得审批后才会执行删除",
+  "修改": "修改",
+  "确认将 {n} 台主机转为公共资源?": "确认将 {n} 台主机转为公共资源?",
+  "已选择以下n台主机": "已选择以下 {0} 台主机",
+  "资源监控": "资源监控",
+  "系统管理": "系统管理",
+  "撤销导入": "撤销导入",
+  "确认后，主机将从资源池移回原有模块": "确认后，主机将从资源池移回原有模块",
+  "所属DB": "所属DB",
+  "移入故障池": "移入故障池",
+  "移入待回收池": "移入待回收池",
+  "资源归属": "资源归属",
+  "确认批量将 {n} 台主机转入回收池？": "确认批量将 {n} 台主机转入回收池？",
+  "确认批量将 {n} 台主机转入故障池?": "确认批量将 {n} 台主机转入故障池？",
+  "确认批量撤销 {n} 台主机的导入？": "确认批量撤销 {n} 台主机的导入？",
+  "确认批量撤销 {n} 台主机的导入?": "确认批量撤销 {n} 台主机的导入?",
+  "资源标签": "资源标签",
+  "标签": "标签",
+  "仅支持同业务的主机": "仅支持同业务的主机",
+  "设置属性": "设置属性",
+  "添加资源归属": "添加资源归属",
+  "转为公共资源": "转为公共资源",
+  "共n台": "共{0}台",
+  "批量添加资源归属": "批量添加资源归属",
+  "为主机添加或更新所属 DB、标签设置，若设置不存在则添加，已存在则覆盖更新": "为主机添加或更新所属 DB、标签设置，若设置不存在则添加，已存在则覆盖更新",
+  "我的已办": "我的已办",
+  "操作系统": "操作系统",
+  "确认后，将主机标记为待回收，等待处理": "确认后，将主机标记为待回收，等待处理",
+  "确认后，将主机标记为故障，等待处理": "确认后，将主机标记为故障，等待处理",
+  "编辑资源归属": "编辑资源归属",
+  "资源标签管理": "资源标签管理",
+  "确认后，将主机清空已存在的资源归属设置，并设置为公共资源": "确认后，将主机清空已存在的资源归属设置，并设置为公共资源",
+  "确认后，主机将标记为待回收，等待处理": "确认后，主机将标记为待回收，等待处理",
+  "确认后，主机将标记为故障，等待处理": "确认后，主机将标记为故障，等待处理",
+  "确认后，主机将标记为业务专属": "确认后，主机将标记为业务专属",
+  "确认转入待回收池？": "确认转入待回收池？",
+  "确认批量将 {n} 台主机转入待回收池": "确认批量将 {n} 台主机转入待回收池",
+  "确认批量将 {n} 台主机转入业务资源池": "确认批量将 {n} 台主机转入业务资源池",
+  "确认撤销导入？": "确认撤销导入？",
+  "确认后，将主机将清空已存在的资源归属设置，并设置为公共资源": "确认后，将主机将清空已存在的资源归属设置，并设置为公共资源",
+  "确认批量将 {n} 台主机转入业务资源池？": "确认批量将 {n} 台主机转入业务资源池？",
+  "确认转入待故障池？": "确认转入待故障池？",
+  "跳转管理页": "跳转管理页",
   "这行勿动！新增翻译请在上一行添加！": ""
 }