feat(frontend): 工具箱支持资源池协议变更_tendbcluster迁移主从 TencentBlueKing#8076

# Reviewed, transaction id: 27526
JustaCattt · Dec 23, 2024 · 8ebef76 · 8ebef76
1 parent 5d465b2
commit 8ebef76
Show file tree

Hide file tree

Showing 17 changed files with 820 additions and 47 deletions.
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -782,7 +782,7 @@
   "输入主库后自动生成": "输入主库后自动生成",
   "目标主库重复": "目标主库重复",
   "目标主库不存在": "目标主库不存在",
-  "请输入IP": "请输入IP",
+  "请输入IP": "请输入 IP",
   "目标从库不能为空": "目标从库不能为空",
   "请输入选择从库": "请输入选择从库",
   "Slave提升成主库_断开同步_切换后集成成单点状态_一般用于紧急切换": "Slave 提升成主库，断开同步，切换后集群成单节点状态，一般用于紧急切换",
@@ -3929,6 +3929,7 @@
   "含n个同机关联集群": "含 {n} 个同机关联集群",
   "目标集群是集群target的关联集群_请勿重复添加": "目标集群是集群 {target} 的关联集群，请勿重复添加",
   "目标实例不存在": "目标实例不存在",
+  "新Master": "新 Master",
   "新Slave": "新 Slave",
   "xx不符合IPv4标准": "{0} 不符合IPv4标准",
   "目标主机xx不存在": "目标主机 {0} 不存在",

diff --git a/dbm-ui/frontend/src/services/model/mysql/remote-pair-instance.ts b/dbm-ui/frontend/src/services/model/mysql/remote-pair-instance.ts
@@ -1,3 +1,5 @@
+import type { MachineRelatedCluster, MachineRelatedInstance } from '@services/types';
+
 export default class RemotePaisInstance {
   bk_biz_id: number;
   bk_cloud_id: number;
@@ -8,6 +10,9 @@ export default class RemotePaisInstance {
   name: string;
   port: number;
   phase: string;
+  related_clusters: MachineRelatedCluster[];
+  related_instances: MachineRelatedInstance[];
+  related_pair_instances: MachineRelatedInstance[];
   spec_config: {
     id: number;
   };
@@ -23,6 +28,9 @@ export default class RemotePaisInstance {
     this.name = payload.name;
     this.port = payload.port;
     this.phase = payload.phase;
+    this.related_clusters = payload.related_clusters;
+    this.related_instances = payload.related_instances;
+    this.related_pair_instances = payload.related_pair_instances;
     this.spec_config = payload.spec_config;
     this.status = payload.status;
   }

diff --git a/dbm-ui/frontend/src/services/types/common.ts b/dbm-ui/frontend/src/services/types/common.ts
@@ -33,3 +33,8 @@ export enum RepairModes {
   AUTO_REPAIR = 'auto_repair',
   MANUAL_CONFIRM = 'manual_confirm',
 }
+
+export enum BackupSourceType {
+  LOCAL = 'local',
+  REMOTE = 'remote',
+}
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/backup-source/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/backup-source/Index.vue
@@ -0,0 +1,28 @@
+<template>
+  <BkFormItem
+    :label="t('备份源')"
+    property="backupSource"
+    required>
+    <BkRadioGroup v-model="modelValue">
+      <BkRadio :label="BackupSourceType.LOCAL">
+        {{ t('本地备份') }}
+      </BkRadio>
+      <BkRadio :label="BackupSourceType.REMOTE">
+        {{ t('远程备份') }}
+      </BkRadio>
+    </BkRadioGroup>
+  </BkFormItem>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { BackupSourceType } from '@services/types';
+
+  const { t } = useI18n();
+
+  const modelValue = defineModel<BackupSourceType>({
+    required: true,
+    default: BackupSourceType.LOCAL,
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/host-column/SingleHost.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/host-column/SingleHost.vue
@@ -17,7 +17,7 @@
     :field="field"
     :label="label"
     :loading="loading"
-    :min-width="300"
+    :min-width="minWidth"
     required>
     <Input
       v-if="editable"
@@ -64,6 +64,7 @@
   interface Props {
     field: string;
     label: string;
+    minWidth?: number;
     editable?: boolean;
     params?: {
       for_biz?: number;
@@ -74,6 +75,7 @@
   }
 
   withDefaults(defineProps<Props>(), {
+    minWidth: 300,
     editable: false,
     params: () => ({}),
   });

diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/ticket-remark/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/ticket-remark/Index.vue
@@ -0,0 +1,18 @@
+<template>
+  <BkFormItem :label="t('备注')">
+    <BkInput
+      v-model="modelValue"
+      :maxlength="500"
+      :placeholder="t('请提供更多有用信息申请信息_以获得更快审批')"
+      style="width: 700px"
+      type="textarea" />
+  </BkFormItem>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+
+  const modelValue = defineModel<string>();
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Create.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Create.vue
@@ -42,19 +42,7 @@
             :create-row-method="createTableRow" />
         </EditableTableRow>
       </EditableTable>
-      <BkFormItem
-        :label="t('备份源')"
-        property="backupSource"
-        required>
-        <BkRadioGroup v-model="formData.backupSource">
-          <BkRadio label="local">
-            {{ t('本地备份') }}
-          </BkRadio>
-          <BkRadio label="remote">
-            {{ t('远程备份') }}
-          </BkRadio>
-        </BkRadioGroup>
-      </BkFormItem>
+      <BackupSource v-model="formData.backupSource" />
       <TicketRemark v-model="formData.remark" />
     </BkForm>
     <template #action>
@@ -83,16 +71,18 @@
   import { useI18n } from 'vue-i18n';
 
   import TendbhaModel from '@services/model/mysql/tendbha';
+  import { BackupSourceType } from '@services/types';
 
   import { useCreateTicket } from '@hooks';
 
   import { TicketTypes } from '@common/const';
 
   import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
-  import TicketRemark from '@components/ticket-remark/TicketRemark.vue';
 
+  import BackupSource from '@views/db-manage/common/toolbox-field/backup-source/Index.vue';
   import SingleHost from '@views/db-manage/common/toolbox-field/host-column/SingleHost.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/ticket-remark/Index.vue';
   import WithRelatedClusters from '@views/db-manage/mysql/common/edit-table-column/WithRelatedClusters.vue';
 
   interface RowData {
@@ -121,8 +111,8 @@
   });
 
   const defaultData = () => ({
-    backupSource: 'local' as 'local' | 'remote',
     tableData: [createTableRow()],
+    backupSource: BackupSourceType.LOCAL,
     remark: '',
   });
 
@@ -170,7 +160,7 @@
   };
 
   const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
-    backup_source: 'local' | 'remote';
+    backup_source: BackupSourceType;
     infos: {
       cluster_ids: number[];
       new_slave: {

diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Create.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Create.vue
@@ -48,19 +48,7 @@
             :create-row-method="createTableRow" />
         </EditableTableRow>
       </EditableTable>
-      <BkFormItem
-        :label="t('备份源')"
-        property="backupSource"
-        required>
-        <BkRadioGroup v-model="formData.backupSource">
-          <BkRadio label="local">
-            {{ t('本地备份') }}
-          </BkRadio>
-          <BkRadio label="remote">
-            {{ t('远程备份') }}
-          </BkRadio>
-        </BkRadioGroup>
-      </BkFormItem>
+      <BackupSource v-model="formData.backupSource" />
       <TicketRemark v-model="formData.remark" />
     </BkForm>
     <template #action>
@@ -89,16 +77,18 @@
   import { useI18n } from 'vue-i18n';
 
   import TendbhaModel from '@services/model/mysql/tendbha';
+  import { BackupSourceType } from '@services/types';
 
   import { useCreateTicket } from '@hooks';
 
   import { TicketTypes } from '@common/const';
 
   import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
-  import TicketRemark from '@components/ticket-remark/TicketRemark.vue';
 
+  import BackupSource from '@views/db-manage/common/toolbox-field/backup-source/Index.vue';
   import SingleHost from '@views/db-manage/common/toolbox-field/host-column/SingleHost.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/ticket-remark/Index.vue';
   import WithRelatedClusters from '@views/db-manage/mysql/common/edit-table-column/WithRelatedClusters.vue';
 
   interface RowData {
@@ -134,8 +124,8 @@
   });
 
   const defaultData = () => ({
-    backupSource: 'local' as 'local' | 'remote',
     tableData: [createTableRow()],
+    backupSource: BackupSourceType.LOCAL,
     remark: '',
   });
 
@@ -183,7 +173,7 @@
   };
 
   const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
-    backup_source: 'local' | 'remote';
+    backup_source: BackupSourceType;
     infos: {
       cluster_ids: number[];
       new_master: {

diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Create.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Create.vue
@@ -76,10 +76,10 @@
   import { TicketTypes } from '@common/const';
 
   import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
-  import TicketRemark from '@components/ticket-remark/TicketRemark.vue';
 
   import SingleHost from '@views/db-manage/common/toolbox-field/host-column/SingleHost.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/ticket-remark/Index.vue';
   import WithRelatedClusters from '@views/db-manage/mysql/common/edit-table-column/WithRelatedClusters.vue';
 
   interface RowData {