feat(frontend): mysql版本升级优化 TencentBlueKing#7711

hLinx · Nov 7, 2024 · b3b7a63 · b3b7a63
1 parent 93bfe66
commit b3b7a63
Show file tree

Hide file tree

Showing 21 changed files with 247 additions and 100 deletions.
diff --git a/dbm-ui/frontend/src/common/regex.ts b/dbm-ui/frontend/src/common/regex.ts
@@ -64,6 +64,11 @@ export const dbRegex = /^[a-zA-Z0-9][-_a-zA-Z0-9]*([a-zA-Z0-9]|%)$/;
  */
 export const batchSplitRegex = /\s*[｜|，,；;、\t\n/\s]\s*/g;
 
+/**
+ * 批量录入分隔符，支持 中英竖线、中英逗号、中英分号、顿号、制表符、斜线
+ */
+export const batchInputSplitRegex = /\s*[｜|，,；;、\t/\s]\s*/g;
+
 /**
  * 版本号正则，格式为 x.x.x 或 x.x
  */

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -2596,9 +2596,9 @@
   "每台主机oplog容量占比": "每台主机oplog容量占比",
   "预计容量nG": "预计容量 {0} G",
   "所需主机数量": "所需主机数量",
-  "主从节点数": "主从节点数",
+  "Shard 节点数": "Shard 节点数",
   "部署副本集数量": "部署副本集数量",
-  "每台主机部署副本集数量": "每台主机部署副本集数量",
+  "每组主机部署副本集数量": "每组主机部署副本集数量",
   "共需n台": "共需 {0} 台",
   "计算规则": "计算规则",
   "集群ID重复": "集群ID重复",
@@ -2689,7 +2689,6 @@
   "保留索引": "保留索引",
   "删除索引": "删除索引",
   "索引处理": "索引处理",
-  "备份文件保存时间": "备份文件保存时间",
   "备份方式": "备份方式",
   "当前Shard节点规格": "当前 Shard 节点规格",
   "当前Shard节点数": "当前 Shard 节点数",
@@ -2717,7 +2716,6 @@
   "目标集群与构造设置": "目标集群与构造设置",
   "备份文件": "备份文件",
   "该操作将会修改对应DB的数据，请谨慎操作": "该操作将会修改对应 DB 的数据，请谨慎操作！",
-  "是否开启 Oplog": "是否开启 Oplog",
   "确认清档n个副本集集群": "确认清档 {n} 个副本集集群？",
   "确认执行变更脚本任务": "确认执行变更脚本任务？",
   "集群上的数据将会全部构造至指定的新机器": "集群上的数据将会全部构造至指定的新机器",
@@ -3599,5 +3597,10 @@
   "CPU/内存": "CPU/内存",
   "添加机型": "添加机型",
   "TendisCache/RedisCluster/Redis主从 后端存储": "TendisCache/RedisCluster/Redis主从 后端存储",
+  "存储层（Nodes）": "存储层（Nodes）",
+  "存储层（Nodes）域名": "存储层（Nodes）域名",
+  "请按行输入IP，每行代表一个单元格的值。多个IP用逗号、空格、｜分隔": "请按行输入IP，每行代表一个单元格的值。多个IP用逗号、空格、｜分隔",
+  "无只读主机": "无只读主机",
+  "批量录入：按行录入，快速批量输入多个单元格的值": "批量录入：按行录入，快速批量输入多个单元格的值",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/common/batch-edit-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/batch-edit-column/Index.vue
@@ -9,7 +9,7 @@
     <slot />
     <template #content>
       <div class="batch-edit-column-select">
-        <div class="main-title">{{ t('统一设置') }}{{ title }}</div>
+        <div class="main-title">{{ titlePrefixTypeMap[titlePrefixType] }}{{ title }}</div>
         <slot
           v-if="slots.content"
           name="content" />
@@ -85,6 +85,7 @@
     type?: 'select' | 'textarea' | 'input' | 'taginput' | 'datetime' | 'number-input';
     placeholder?: string;
     disableFn?: (date?: Date | number) => boolean;
+    titlePrefixType?: 'edit' | 'entry';
   }
 
   interface Emits {
@@ -96,6 +97,7 @@
     type: 'select',
     placeholder: '',
     disableFn: () => false,
+    titlePrefixType: 'edit',
   });
 
   const emits = defineEmits<Emits>();
@@ -107,6 +109,11 @@
 
   const { t } = useI18n();
 
+  const titlePrefixTypeMap = {
+    edit: t('统一设置'),
+    entry: t('批量录入'),
+  };
+
   const inputRef = ref();
   const localValue = ref<string | string[]>(props.type === 'taginput' ? [] : '');
 

diff --git a/dbm-ui/frontend/src/views/db-manage/common/batch-operate-icon/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/batch-operate-icon/Index.vue
@@ -37,7 +37,7 @@
       icon: 'bulk-edit',
     },
     entry: {
-      tooltip: t('批量编辑：通过换行分隔，快速批量录入多个值'),
+      tooltip: t('批量录入：按行录入，快速批量输入多个单元格的值'),
       icon: 'piliangluru',
     },
     select: {

diff --git a/...iews/db-manage/mysql/openarea/create/components/target-cluster/components/RenderTable.vue b/...iews/db-manage/mysql/openarea/create/components/target-cluster/components/RenderTable.vue
@@ -35,6 +35,7 @@
             v-model="showBatchEdit[variableName]"
             :placeholder="t('只能包含英文字母、数字，多个换行分隔')"
             :title="variableName"
+            title-prefix-type="entry"
             type="textarea"
             @change="(value: string) => handleBatchEdit(value, variableName)">
             <BatchOperateIcon

diff --git a/...age/mysql/openarea/template-create/components/config-rule/components/RenderData/Index.vue b/...age/mysql/openarea/template-create/components/config-rule/components/RenderData/Index.vue
@@ -48,7 +48,7 @@
               type="textarea"
               @change="(value: string) => handleBatchEdit(value)">
               <span
-                v-bk-tooltips="t('批量编辑：通过换行分隔，快速批量录入多个值')"
+                v-bk-tooltips="t('批量录入：按行录入，快速批量输入多个单元格的值')"
                 class="batch-edit-btn"
                 @click="handleShowBatchEdit">
                 <DbIcon type="piliangluru" />

diff --git a/...db-manage/mysql/version-upgrade/pages/page1/components/RenderClusterWithRelateCluster.vue b/...db-manage/mysql/version-upgrade/pages/page1/components/RenderClusterWithRelateCluster.vue
@@ -24,6 +24,7 @@
       :placeholder="t('请输入集群域名或从表头批量选择')"
       :rules="rules"
       @error="handleErrorMessageChange"
+      @focus="handleFocus"
       @submit="handleEditSubmit" />
     <div
       v-show="!isShowEdit"
@@ -46,13 +47,27 @@
 
 <script lang="ts">
   const clusterIdMemo: { [key: string]: Record<string, boolean> } = {};
+
+  interface Props {
+    modelValue?: {
+      id: number;
+      domain: string;
+    };
+  }
+
+  interface Emits {
+    (e: 'idChange', value: number): void;
+  }
+
+  interface Exposes {
+    getValue: (isSubmit?: boolean) => Array<number>;
+  }
 </script>
 
 <script setup lang="ts">
   import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
-  import TendbhaModel from '@services/model/mysql/tendbha';
   import { findRelatedClustersByClusterIds, queryClusters } from '@services/source/mysqlCluster';
 
   import { useGlobalBizs } from '@stores';
@@ -63,21 +78,6 @@
 
   import { random } from '@utils';
 
-  interface Props {
-    modelValue?: {
-      id: number;
-      domain: string;
-    };
-  }
-
-  interface Emits {
-    (e: 'idChange', value: TendbhaModel | null): void;
-  }
-
-  interface Exposes {
-    getValue: () => Array<number>;
-  }
-
   const props = defineProps<Props>();
   const emits = defineEmits<Emits>();
 
@@ -100,13 +100,14 @@
     }>
   >([]);
 
+  let isSkipInputFinish = false;
+
   const rules = [
     {
       validator: (value: string) => {
         if (value) {
           return true;
         }
-        emits('idChange', null);
         return false;
       },
       message: '目标集群不能为空',
@@ -124,10 +125,11 @@
         }).then((data) => {
           if (data.length > 0) {
             localClusterId.value = data[0].id;
-            emits('idChange', data[0]);
+            if (!isSkipInputFinish) {
+              emits('idChange', data[0].id);
+            }
             return true;
           }
-          emits('idChange', null);
           return false;
         }),
       message: '目标集群不存在',
@@ -227,12 +229,17 @@
     isShowEdit.value = isError;
   };
 
+  const handleFocus = () => {
+    isSkipInputFinish = false;
+  };
+
   onBeforeUnmount(() => {
     clusterIdMemo[instanceKey] = {};
   });
 
   defineExpose<Exposes>({
-    getValue() {
+    getValue(isSubmit = false) {
+      isSkipInputFinish = isSubmit;
       const result = {
         cluster_ids: _.uniq([localClusterId.value, ...relatedClusterList.value.map((listItem) => listItem.id)]),
       };

diff --git a/.../src/views/db-manage/mysql/version-upgrade/pages/page1/components/RenderTargetVersion.vue b/.../src/views/db-manage/mysql/version-upgrade/pages/page1/components/RenderTargetVersion.vue
@@ -149,6 +149,9 @@
         id: packageItem.pkg_id,
         name: packageItem.pkg_name,
       }));
+      if (versions.length) {
+        localPackage.value = versions[0].pkg_id;
+      }
     },
   });
 

diff --git a/...rc/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Index.vue b/...rc/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Index.vue
@@ -52,7 +52,7 @@
             :data="item"
             :removeable="tableData.length < 2"
             @add="(payload: Array<IDataRow>) => handleAppend(index, payload)"
-            @cluster-input-finish="(domainObj: TendbhaModel | null) => handleChangeCluster(index, domainObj)"
+            @cluster-input-finish="(clusterId) => handleChangeCluster(index, clusterId)"
             @remove="handleRemove(index)" />
         </template>
       </RenderTable>
@@ -90,6 +90,7 @@
 
   import TendbhaModel from '@services/model/mysql/tendbha';
   import { findRelatedClustersByClusterIds } from '@services/source/mysqlCluster';
+  import { getTendbhaList } from '@services/source/tendbha';
   import { createTicket } from '@services/source/ticket';
 
   import { useGlobalBizs } from '@stores';
@@ -235,8 +236,13 @@
   };
 
   // 输入集群后查询集群信息并填充到table
-  const handleChangeCluster = async (index: number, domainObj: TendbhaModel | null) => {
-    if (domainObj) {
+  const handleChangeCluster = async (index: number, id: number) => {
+    tableData.value[index].isLoading = true;
+    const result = await getTendbhaList({ cluster_ids: [id] }).finally(() => {
+      tableData.value[index].isLoading = false;
+    });
+    if (result.results.length > 0) {
+      const domainObj = result.results[0];
       const row = generateTableRow(domainObj);
       tableData.value[index] = row;
       domainMemo[domainObj.master_domain] = true;

diff --git a/...nage/mysql/version-upgrade/pages/page1/components/ha-access-layer/RenderTargetVersion.vue b/...nage/mysql/version-upgrade/pages/page1/components/ha-access-layer/RenderTargetVersion.vue
@@ -90,6 +90,10 @@
         }
         return prevList;
       }, [] as IListItem[]);
+
+      if (versionList.value.length) {
+        localValue.value = versionList.value[0].value as string;
+      }
     },
   });
 

diff --git a/.../src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Row.vue b/.../src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Row.vue
@@ -39,8 +39,6 @@
 <script lang="ts">
   import { useI18n } from 'vue-i18n';
 
-  import TendbhaModel from '@services/model/mysql/tendbha';
-
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
   import RenderText from '@components/render-table/columns/text-plain/index.vue';
@@ -69,9 +67,7 @@
     isLoading: false,
     ...data,
   });
-</script>
 
-<script setup lang="ts">
   interface Props {
     data: IDataRow;
     removeable: boolean;
@@ -80,13 +76,15 @@
   interface Emits {
     (e: 'add', params: Array<IDataRow>): void;
     (e: 'remove'): void;
-    (e: 'clusterInputFinish', value: TendbhaModel | null): void;
+    (e: 'clusterInputFinish', value: number): void;
   }
 
   interface Exposes {
     getValue: () => Promise<any>;
   }
+</script>
 
+<script setup lang="ts">
   const props = defineProps<Props>();
 
   const emits = defineEmits<Emits>();
@@ -106,8 +104,8 @@
     return undefined;
   });
 
-  const handleClusterIdChange = (value: TendbhaModel | null) => {
-    emits('clusterInputFinish', value);
+  const handleClusterIdChange = (clusterId: number) => {
+    emits('clusterInputFinish', clusterId);
   };
 
   const handleAppend = () => {
@@ -123,7 +121,7 @@
 
   defineExpose<Exposes>({
     getValue() {
-      return Promise.all([clusterRef.value!.getValue(), targetVersionRef.value!.getValue()]).then((data) => {
+      return Promise.all([clusterRef.value!.getValue(true), targetVersionRef.value!.getValue()]).then((data) => {
         const [clusterData, targetVersionData] = data;
         return {
           ...clusterData,

diff --git a/...s/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Index.vue b/...s/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Index.vue
@@ -48,7 +48,7 @@
             :data="item"
             :removeable="tableData.length < 2"
             @add="(payload: Array<IDataRow>) => handleAppend(index, payload)"
-            @cluster-input-finish="(domainObj: TendbhaModel | null) => handleChangeCluster(index, domainObj)"
+            @cluster-input-finish="(clusterId) => handleChangeCluster(index, clusterId)"
             @remove="handleRemove(index)" />
         </template>
       </RenderTable>
@@ -86,6 +86,7 @@
 
   import TendbhaModel from '@services/model/mysql/tendbha';
   import { findRelatedClustersByClusterIds } from '@services/source/mysqlCluster';
+  import { getTendbhaList } from '@services/source/tendbha';
   import { createTicket } from '@services/source/ticket';
 
   import { useGlobalBizs } from '@stores';
@@ -233,8 +234,13 @@
   };
 
   // 输入集群后查询集群信息并填充到table
-  const handleChangeCluster = async (index: number, domainObj: TendbhaModel | null) => {
-    if (domainObj) {
+  const handleChangeCluster = async (index: number, id: number) => {
+    tableData.value[index].isLoading = true;
+    const result = await getTendbhaList({ cluster_ids: [id] }).finally(() => {
+      tableData.value[index].isLoading = false;
+    });
+    if (result.results.length > 0) {
+      const domainObj = result.results[0];
       const row = generateTableRow(domainObj);
       tableData.value[index] = row;
       domainMemo[domainObj.master_domain] = true;