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

JustaCattt · Nov 13, 2024 · 4be1456 · 4be1456
1 parent 145d4db
commit 4be1456
Show file tree

Hide file tree

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

diff --git a/dbm-ui/frontend/src/components/cluster-selector/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/Index.vue
@@ -322,7 +322,7 @@
     },
     [ClusterTypes.MONGO_REPLICA_SET]: {
       id: ClusterTypes.MONGO_REPLICA_SET,
-      name: t('集群选择'),
+      name: t('副本集'),
       disabledRowConfig: [
         {
           handler: (data: T) => data.isOffline,
@@ -336,7 +336,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,
@@ -63,7 +65,7 @@
     manualTableData?: DataRow[];
     isRemotePagination?: TableConfigType['isRemotePagination'],
     firsrColumn?: TableConfigType['firsrColumn'],
-    roleFilterList?: TableConfigType['roleFilterList'],
+    // roleFilterList?: TableConfigType['roleFilterList'],
     disabledRowConfig?: TableConfigType['disabledRowConfig'],
     multiple: boolean,
     getTableList: NonNullable<TableConfigType['getTableList']>,
@@ -94,6 +96,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
@@ -109,7 +112,7 @@
     fetchResources,
     handleChangePage,
     handeChangeLimit,
-  } = useTableData<DataRow>(selectClusterId);
+  } = useTableData<DataRow>(selectClusterId, initRole);
 
   const renderManualData = computed(() => {
     if (searchValue.value === '') {
@@ -192,11 +195,31 @@
       label: props.firsrColumn?.label ? 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
@@ -3633,5 +3633,31 @@
   "账号下已存在该规则": "账号下已存在该规则",
   "访问DB变更前后对比": "访问DB变更前后对比",
   "DB名称支持通配符_如Data_区分大小写_多个使用英文逗号_分号或换行分隔": "DB名称支持通配符_如Data_区分大小写_多个使用英文逗号_分号或换行分隔",
+  "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.ts b/dbm-ui/frontend/src/services/model/mongodb/mongodb.ts
@@ -142,6 +142,7 @@ export default class Mongodb {
     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 || {};
     this.cluster_time_zone = payload.cluster_time_zone;
@@ -165,7 +166,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.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;
@@ -368,8 +369,4 @@ export default class Mongodb {
       return prevList;
     }, []);
   }
-
-  get disasterToleranceLevelName() {
-    return ClusterAffinityMap[this.disaster_tolerance_level];
-  }
 }
diff --git a/dbm-ui/frontend/src/services/source/mongodb.ts b/dbm-ui/frontend/src/services/source/mongodb.ts
@@ -24,7 +24,7 @@ import http from '../http';
 
 const { currentBizId } = useGlobalBizs();
 
-const path = `/apis/mongodb/bizs/${currentBizId}/mongodb_resources`;
+const getRootPath = () => `/apis/mongodb/bizs/${window.PROJECT_CONFIG.BIZ_ID}/mongodb_resources`;
 
 interface RelatedCluster {
   cluster_id: number;
@@ -72,7 +72,7 @@ export function getMongoList(params: {
   limit?: number;
   offset?: number;
 }) {
-  return http.get<ListBase<MongodbModel[]>>(`${path}/`, params).then((data) => ({
+  return http.get<ListBase<MongodbModel[]>>(`${getRootPath()}/`, params).then((data) => ({
     ...data,
     results: data.results.map((item) => new MongodbModel(item)),
   }));
@@ -97,29 +97,31 @@ export function getMongoTopoList(params: {
   offset?: number;
 }) {
   return http
-    .get<ListBase<MongodbModel[]>>(`${path}/`, params)
+    .get<ListBase<MongodbModel[]>>(`${getRootPath()}/`, params)
     .then((data) => data.results.map((item) => new MongodbModel(item)));
 }
 
 /**
  * 查询Mongo集群详情
  */
 export function getMongoClusterDetails(params: { cluster_id: number }) {
-  return http.get<MongodbDetailModel>(`${path}/${params.cluster_id}/`).then((data) => new MongodbDetailModel(data));
+  return http
+    .get<MongodbDetailModel>(`${getRootPath()}/${params.cluster_id}/`)
+    .then((data) => new MongodbDetailModel(data));
 }
 
 /**
  * 查询Mongo拓扑图
  */
 export function getMongoClustersTopoGraph(params: { cluster_id: number }) {
-  return http.get(`${path}/${params.cluster_id}/get_topo_graph/`);
+  return http.get(`${getRootPath()}/${params.cluster_id}/get_topo_graph/`);
 }
 
 /**
  * 获取Mongo集群 table 信息
  */
 export function getMongoTableFields(params: { limit?: number; offset?: number }) {
-  return http.get(`${path}/get_table_fields/`, params);
+  return http.get(`${getRootPath()}/get_table_fields/`, params);
 }
 
 /**
@@ -138,7 +140,7 @@ export function getMongoInstancesList(params: {
   offset?: number;
   extra?: number;
 }) {
-  return http.get<ListBase<MongodbInstanceModel[]>>(`${path}/list_instances/`, params).then((data) => ({
+  return http.get<ListBase<MongodbInstanceModel[]>>(`${getRootPath()}/list_instances/`, params).then((data) => ({
     ...data,
     results: data.results.map((item) => new MongodbInstanceModel(item)),
   }));
@@ -147,7 +149,7 @@ export function getMongoInstancesList(params: {
 /**
  * 查询Mongo集群实例详情
  */
-export function getMongoInstanceDetail(params: {
+export function retrieveMongoInstanceDetail(params: {
   instance_address: string;
   cluster_id?: number;
   ip?: string;
@@ -156,15 +158,15 @@ export function getMongoInstanceDetail(params: {
   offset?: number;
 }) {
   return http
-    .get<MongodbInstanceDetailModel>(`${path}/retrieve_instance/`, params)
+    .get<MongodbInstanceDetailModel>(`${getRootPath()}/retrieve_instance/`, params)
     .then((data) => new MongodbInstanceDetailModel(data));
 }
 
 /**
  * 获取Mongo角色列表
  */
 export function getMongoRoleList(params: { limit?: number; offset?: number }) {
-  return http.get<string[]>(`${path}/get_instance_role/`, params);
+  return http.get<string[]>(`${getRootPath()}/get_instance_role/`, params);
 }
 
 /**
@@ -174,6 +176,7 @@ export function getMongodbMachineList(params: {
   bk_host_id?: number;
   ip?: string;
   machine_type?: string;
+  cluster_type?: string;
   bk_os_name?: string;
   bk_cloud_id?: number;
   bk_agent_id?: string;
@@ -182,21 +185,21 @@ export function getMongodbMachineList(params: {
   limit?: number;
   offset?: number;
 }) {
-  return http.get<string[]>(`${path}/list_machines/`, params);
+  return http.get<string[]>(`${getRootPath()}/list_machines/`, params);
 }
 
 /**
  * 导出Mongo集群数据为 excel 文件
  */
 export function exportMongodbClusterToExcel(params: { cluster_ids?: number[] }) {
-  return http.post<string>(`${path}/export_cluster/`, params, { responseType: 'blob' });
+  return http.post<string>(`${getRootPath()}/export_cluster/`, params, { responseType: 'blob' });
 }
 
 /**
  * 导出Mongo实例数据为 excel 文件
  */
 export function exportMongodbInstanceToExcel(params: { bk_host_ids?: number[] }) {
-  return http.post<string>(`${path}/export_instance/`, params, { responseType: 'blob' });
+  return http.post<string>(`${getRootPath()}/export_instance/`, params, { responseType: 'blob' });
 }
 
 /**