fix(frontend): mongo验收问题修复 TencentBlueKing#6052

hLinx · Nov 4, 2024 · d8aec74 · d8aec74
1 parent ab513ed
commit d8aec74
Show file tree

Hide file tree

Showing 72 changed files with 2,257 additions and 878 deletions.
diff --git a/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts b/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts
@@ -254,7 +254,7 @@ const mongodb: InfoType = {
   },
   [ClusterTypes.MONGO_SHARED_CLUSTER]: {
     id: ClusterTypes.MONGO_SHARED_CLUSTER,
-    name: t('Mongo分片集'),
+    name: t('Mongo 分片集群'),
     dbType: DBTypes.MONGODB,
     moduleId: 'mongodb',
     machineList: [

diff --git a/dbm-ui/frontend/src/components/cluster-selector/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/Index.vue
@@ -315,7 +315,7 @@
     },
     [ClusterTypes.MONGO_REPLICA_SET]: {
       id: ClusterTypes.MONGO_REPLICA_SET,
-      name: t('集群选择'),
+      name: t('副本集'),
       disabledRowConfig: [
         {
           handler: (data: T) => data.isOffline,
@@ -329,7 +329,7 @@
     },
     [ClusterTypes.MONGO_SHARED_CLUSTER]: {
       id: ClusterTypes.MONGO_SHARED_CLUSTER,
-      name: t('集群选择'),
+      name: t('分片集群'),
       disabledRowConfig: [
         {
           handler: (data: T) => data.isOffline,

diff --git a/dbm-ui/frontend/src/components/instance-selector/Index.vue b/dbm-ui/frontend/src/components/instance-selector/Index.vue
@@ -50,6 +50,7 @@
           :is-remote-pagination="activePanelObj?.tableConfig?.isRemotePagination"
           :last-values="lastValues"
           :manual-config="activePanelObj?.manualConfig"
+          :multiple="activePanelObj?.tableConfig?.multiple"
           :role-filter-list="activePanelObj?.tableConfig?.roleFilterList"
           :status-filter="activePanelObj?.tableConfig?.statusFilter"
           :table-setting="tableSettings"
@@ -146,6 +147,7 @@
     spec_config?: TendbclusterMachineModel['spec_config'];
     spec_id?: number;
     role: string;
+    shard?: string;
   }
 
   export type InstanceSelectorValues<T> = Record<string, T[]>;

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/mongo/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/mongo/table/Index.vue
@@ -39,6 +39,8 @@
   import type { Ref } from 'vue';
   import { useI18n } from 'vue-i18n';
 
+  import { ClusterTypes } from '@common/const';
+
   import DbStatus from '@components/db-status/index.vue';
   import type {
     InstanceSelectorValues,
@@ -65,7 +67,7 @@
     manualTableData?: DataRow[];
     isRemotePagination?: TableConfigType['isRemotePagination'],
     firsrColumn?: TableConfigType['firsrColumn'],
-    roleFilterList?: TableConfigType['roleFilterList'],
+    // roleFilterList?: TableConfigType['roleFilterList'],
     disabledRowConfig?: TableConfigType['disabledRowConfig'],
     multiple: boolean,
     getTableList: NonNullable<TableConfigType['getTableList']>,
@@ -96,6 +98,7 @@
 
   const checkedMap = shallowRef({} as DataRow);
 
+  const initRole = computed(() => props.firsrColumn?.role);
   const selectClusterId = computed(() => props.clusterId);
   const firstColumnFieldId = computed(() => (props.firsrColumn?.field || 'instance_address') as keyof IValue);
   const mainSelectDisable = computed(() => (props.disabledRowConfig
@@ -111,7 +114,7 @@
     fetchResources,
     handleChangePage,
     handeChangeLimit,
-  } = useTableData<DataRow>(selectClusterId);
+  } = useTableData<DataRow>(selectClusterId, initRole);
 
   const renderManualData = computed(() => {
     if (searchValue.value === '') {
@@ -194,11 +197,31 @@
       label: props.firsrColumn?.label ? firstLetterToUpper(props.firsrColumn.label) : t('实例'),
       field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
     },
+    // {
+    //   label: t('角色'),
+    //   field: 'role',
+    //   showOverflowTooltip: true,
+    //   filter: props.roleFilterList,
+    // },
     {
       label: t('角色'),
       field: 'role',
+      minWidth: 160,
       showOverflowTooltip: true,
-      filter: props.roleFilterList,
+      rowspan: ({ row }: { row: DataRow }) => {
+        if (row.machine_type === 'mongodb') {
+          const rowSpan = tableData.value.filter((item) => item.master_domain === row.master_domain && item.machine_type === row.machine_type && item.shard === row.shard).length;
+          return rowSpan > 1 ? rowSpan : 1;
+        }
+        const rowSpan = tableData.value.filter((item) => item.master_domain === row.master_domain && item.machine_type === row.machine_type).length;
+        return rowSpan > 1 ? rowSpan : 1;
+      },
+      render: ({ row }: { row: DataRow }) => {
+        if (row.cluster_type === ClusterTypes.MONGO_SHARED_CLUSTER && row.machine_type === 'mongodb') {
+          return row.shard
+        }
+        return row.machine_type
+      }
     },
     {
       label: t('实例状态'),

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/mongo/table/useTableData.ts b/dbm-ui/frontend/src/components/instance-selector/components/mongo/table/useTableData.ts
@@ -19,7 +19,7 @@ import { useGlobalBizs } from '@stores';
 /**
  * 处理集群列表数据
  */
-export function useTableData<T>(clusterId?: Ref<number | undefined>) {
+export function useTableData<T>(clusterId?: Ref<number | undefined>, role?: Ref<string | undefined>) {
   const { currentBizId } = useGlobalBizs();
   const currentInstance = getCurrentInstance() as ComponentInternalInstance & {
     proxy: {
@@ -72,6 +72,11 @@ export function useTableData<T>(clusterId?: Ref<number | undefined>) {
         cluster_id: clusterId.value,
       });
     }
+    if (role?.value) {
+      Object.assign(params, {
+        role: role.value,
+      });
+    }
     return params;
   };
 

diff --git a/dbm-ui/frontend/src/components/render-table/columns/role-host-select/Index.vue b/dbm-ui/frontend/src/components/render-table/columns/role-host-select/Index.vue
@@ -79,7 +79,7 @@
       clusterId: number;
       hostSelectType?: string;
     };
-    clusterType: ClusterTypes | 'TendbClusterHost';
+    clusterType: ClusterTypes | 'TendbClusterHost' | 'mongoCluster';
     tabListConfig: ComponentProps<typeof InstanceSelector>['tabListConfig'];
     selectedNodeList?: IValue[];
     count?: number;

diff --git a/dbm-ui/frontend/src/components/render-table/columns/tag-input/index.vue b/dbm-ui/frontend/src/components/render-table/columns/tag-input/index.vue
@@ -30,6 +30,7 @@
         :max-data="single ? 1 : -1"
         :paste-fn="tagInputPasteFn"
         :placeholder="placeholder"
+        @blur="handleBlur"
         @change="handleChange"
         @focus="handleFocus" />
       <div
@@ -67,6 +68,8 @@
   interface Emits {
     (e: 'change', value: string[]): void;
     (e: 'update:modelValue', value: string[]): void;
+    (e: 'focus'): void;
+    (e: 'blur'): void;
   }
 
   interface Exposes {
@@ -130,6 +133,11 @@
 
   const handleFocus = () => {
     isFocus.value = true;
+    emits('focus');
+  };
+
+  const handleBlur = () => {
+    emits('blur');
   };
 
   onMounted(() => {

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -2597,9 +2597,9 @@
     "每台主机oplog容量占比": "每台主机oplog容量占比",
     "预计容量nG": "预计容量 {0} G",
     "所需主机数量": "所需主机数量",
-    "主从节点数": "主从节点数",
+    "Shard 节点数": "Shard 节点数",
     "部署副本集数量": "部署副本集数量",
-    "每台主机部署副本集数量": "每台主机部署副本集数量",
+    "每组主机部署副本集数量": "每组主机部署副本集数量",
     "共需n台": "共需 {0} 台",
     "计算规则": "计算规则",
     "集群ID重复": "集群ID重复",
@@ -2690,7 +2690,7 @@
     "保留索引": "保留索引",
     "删除索引": "删除索引",
     "索引处理": "索引处理",
-    "备份文件保存时间": "备份文件保存时间",
+    "备份保存时间": "备份保存时间",
     "备份方式": "备份方式",
     "当前Shard节点规格": "当前 Shard 节点规格",
     "当前Shard节点数": "当前 Shard 节点数",
@@ -2718,7 +2718,6 @@
     "目标集群与构造设置": "目标集群与构造设置",
     "备份文件": "备份文件",
     "该操作将会修改对应DB的数据，请谨慎操作": "该操作将会修改对应 DB 的数据，请谨慎操作！",
-    "是否开启 Oplog": "是否开启 Oplog",
     "确认清档n个副本集集群": "确认清档 {n} 个副本集集群？",
     "确认执行变更脚本任务": "确认执行变更脚本任务？",
     "集群上的数据将会全部构造至指定的新机器": "集群上的数据将会全部构造至指定的新机器",
@@ -3567,5 +3566,31 @@
     "匹配的规则": "匹配的规则",
     "域名不能为空": "域名不能为空",
     "请选择或直接输入账号，Enter完成输入": "请选择或直接输入账号，Enter完成输入",
+    "Mongo 分片集群": "Mongo 分片集群",
+    "不允许输入系统库和特殊库，如admin、config、local": "不允许输入系统库和特殊库，如admin、config、local",
+    "DB名、表名不允许为空，忽略DB名、忽略表名要么同时为空, 要么同时不为空": "DB名、表名不允许为空，忽略DB名、忽略表名要么同时为空, 要么同时不为空",
+    "支持通配符 *（指代任意长度字符串）": "支持通配符 *（指代任意长度字符串）",
+    "库表名支持数字、字母、中划线、下划线，最大64字符": "库表名支持数字、字母、中划线、下划线，最大64字符",
+    "请输入表名称，支持通配符“*”": "请输入表名称，支持通配符“*”",
+    "请输入DB 名称，支持通配符“*”": "请输入DB 名称，支持通配符“*”",
+    "连接字符串": "连接字符串",
+    "连接字符串（CLB）": "连接字符串（CLB）",
+    "复制xxx": "复制{0}",
+    "是否备份 Oplog": "是否备份 Oplog",
+    "缩容接入层：减加集群的Proxy数量，但集群Proxy数量不能少于2": "缩容接入层：减加集群的Proxy数量，但集群Proxy数量不能少于2",
+    "Mongo 主机": "Mongo 主机",
+    "机器类型": "机器类型",
+    "Proxy数量不足，至少 2 台": "Proxy数量不足，至少 2 台",
+    "忽略DB名、忽略表名要么同时为空, 要么同时不为空": "忽略DB名、忽略表名要么同时为空, 要么同时不为空",
+    "至多n台": "至多n台",
+    "同一个副本集，一次只能替换一个节点": "同一个副本集，一次只能替换一个节点",
+    "同一个分片集群，config一次只能替换一个节点": "同一个分片集群，config一次只能替换一个节点",
+    "config一次只能替换一个节点": "config一次只能替换一个节点",
+    "同一个shard，同时只能替换一个节点": "同一个shard，同时只能替换一个节点",
+    "扩容数量（台）": "扩容数量（台）",
+    "缩容数量（台）": "缩容数量（台）",
+    "ShardSvr 名称": "ShardSvr 名称",
+    "回档至指定时间": "回档至指定时间",
+    "待替换的主机 ": "待替换的主机",
     "这行勿动！新增翻译请在上一行添加！": ""
   }
diff --git a/dbm-ui/frontend/src/services/model/mongodb/mongodb-detail.ts b/dbm-ui/frontend/src/services/model/mongodb/mongodb-detail.ts
@@ -11,6 +11,8 @@
  * the specific language governing permissions and limitations under the License.
  */
 
+import type { ClusterListEntry } from '@services/types';
+
 import { TicketTypes } from '@common/const';
 
 import { utcDisplayTime } from '@utils';
@@ -73,6 +75,7 @@ export default class MongodbDetail {
   bk_cloud_name: string;
   cluster_access_port: number;
   cluster_alias: string;
+  cluster_entry: ClusterListEntry[];
   cluster_entry_details: {
     cluster_entry_type: string;
     role: string;
@@ -217,6 +220,7 @@ export default class MongodbDetail {
     this.bk_cloud_name = payload.bk_cloud_name;
     this.cluster_alias = payload.cluster_alias;
     this.cluster_access_port = payload.cluster_access_port;
+    this.cluster_entry = payload.cluster_entry || [];
     this.cluster_entry_details = payload.cluster_entry_details;
     this.cluster_id = payload.cluster_id;
     this.cluster_name = payload.cluster_name;
@@ -338,4 +342,38 @@ export default class MongodbDetail {
   get createAtDisplay() {
     return utcDisplayTime(this.create_at);
   }
+
+  get isMongoReplicaSet() {
+    return this.cluster_type === 'MongoReplicaSet';
+  }
+
+  get entryDomain() {
+    if (this.isMongoReplicaSet) {
+      const domainList = this.cluster_entry.reduce<string[]>((prevDomainList, entryItem) => {
+        if (!entryItem.entry.includes('backup')) {
+          return prevDomainList.concat(`${entryItem.entry}:${this.cluster_access_port}`);
+        }
+        return prevDomainList;
+      }, []);
+      return domainList.join(',');
+    }
+    return `${this.master_domain}:${this.cluster_access_port}`;
+  }
+
+  get entryAccess() {
+    if (this.isMongoReplicaSet) {
+      return `mongodb://{username}:{password}@${this.entryDomain}/?replicaSet=${this.cluster_name}&authSource=admin`;
+    }
+    return `mongodb://{username}:{password}@${this.entryDomain}/?authSource=admin`;
+  }
+
+  get entryAccessClb() {
+    if (!this.isMongoReplicaSet) {
+      const clbItem = this.cluster_entry.find((entryItem) => entryItem.cluster_entry_type === 'clbDns');
+      if (clbItem) {
+        return `mongodb://{username}:{password}@${clbItem.entry}:${this.cluster_access_port}/?authSource=admin`;
+      }
+    }
+    return '';
+  }
 }
diff --git a/dbm-ui/frontend/src/services/model/mongodb/mongodb.ts b/dbm-ui/frontend/src/services/model/mongodb/mongodb.ts
@@ -14,6 +14,8 @@
 import dayjs from 'dayjs';
 import { uniq } from 'lodash';
 
+import type { ClusterListEntry } from '@services/types';
+
 import { PipelineStatus, TicketTypes } from '@common/const';
 
 import { utcDisplayTime } from '@utils';
@@ -81,6 +83,7 @@ export default class Mongodb {
   bk_cloud_name: string;
   cluster_access_port: number;
   cluster_alias: string;
+  cluster_entry: ClusterListEntry[];
   cluster_name: string;
   cluster_stats: Record<'used' | 'total' | 'in_use', number>;
   cluster_time_zone: string;
@@ -114,6 +117,7 @@ export default class Mongodb {
   phase_name: string;
   region: string;
   replicaset_machine_num: number;
+  seg_range: Record<string, string[]>;
   slave_domain: string;
   shard_node_count: number; // 分片节点数
   shard_num: number; // 分片数
@@ -135,6 +139,7 @@ export default class Mongodb {
     this.db_module_name = payload.db_module_name;
     this.cluster_access_port = payload.cluster_access_port;
     this.cluster_alias = payload.cluster_alias;
+    this.cluster_entry = payload.cluster_entry || [];
     this.disaster_tolerance_level = payload.disaster_tolerance_level;
     this.cluster_name = payload.cluster_name;
     this.cluster_stats = payload.cluster_stats || {};
@@ -158,6 +163,7 @@ export default class Mongodb {
     this.phase_name = payload.phase_name;
     this.region = payload.region;
     this.replicaset_machine_num = payload.replicaset_machine_num;
+    this.seg_range = payload.seg_range;
     this.slave_domain = payload.slave_domain;
     this.shard_node_count = payload.shard_node_count;
     this.shard_num = payload.shard_num;
@@ -313,4 +319,51 @@ export default class Mongodb {
   get updateAtDisplay() {
     return utcDisplayTime(this.update_at);
   }
+
+  get entryDomain() {
+    if (this.isMongoReplicaSet) {
+      const domainList = this.cluster_entry.reduce<string[]>((prevDomainList, entryItem) => {
+        if (!entryItem.entry.includes('backup')) {
+          return prevDomainList.concat(`${entryItem.entry}:${this.cluster_access_port}`);
+        }
+        return prevDomainList;
+      }, []);
+      return domainList.join(',');
+    }
+    return `${this.master_domain}:${this.cluster_access_port}`;
+  }
+
+  get entryAccess() {
+    if (this.isMongoReplicaSet) {
+      return `mongodb://{username}:{password}@${this.entryDomain}/?replicaSet=${this.cluster_name}&authSource=admin`;
+    }
+    return `mongodb://{username}:{password}@${this.entryDomain}/?authSource=admin`;
+  }
+
+  get entryAccessClb() {
+    if (!this.isMongoReplicaSet) {
+      const clbItem = this.cluster_entry.find((entryItem) => entryItem.cluster_entry_type === 'clbDns');
+      if (clbItem) {
+        return `mongodb://{username}:{password}@${clbItem.entry}:${this.cluster_access_port}/?authSource=admin`;
+      }
+    }
+    return '';
+  }
+
+  get shardList() {
+    return Object.entries(this.seg_range).reduce<
+      {
+        shardName: string;
+        instanceList: string[];
+      }[]
+    >((prevList, [shardName, instanceList]) => {
+      if (!shardName.endsWith('conf')) {
+        return prevList.concat({
+          shardName,
+          instanceList,
+        });
+      }
+      return prevList;
+    }, []);
+  }
 }