feat(frontend): mysql和redis支持批量编辑、行复制、备注 #4591

dbm-ui/frontend/src/components/batch-edit-column/Index.vue

@@ -40,12 +40,20 @@
             :disabled="disabled"
             :model-value="localValue as string"
             @change="handleChange" />
+          <BkInput
+            v-else-if="type === 'number-input'"
+            :disabled="disabled"
+            :model-value="localValue as string"
+            type="number"
+            @change="handleChange" />
           <BkTagInput
             v-else-if="type === 'taginput'"
+            allow-auto-match
             allow-create
             :disabled="disabled"
             has-delete-icon
             :model-value="localValue as string[]"
+            :paste-fn="tagInputPasteFn"
             @change="handleChange" />
           <BkDatePicker
             v-else-if="type === 'datetime'"
@@ -62,22 +70,25 @@
   </BkPopConfirm>
 </template>
 
-<script setup lang="ts" generic="T extends string | number">
+<script setup lang="ts">
+  import type { UnwrapRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
+  import { batchSplitRegex } from '@common/regex';
+
   interface Props {
     title: string;
     dataList?: {
-      value: T;
+      value: string | number;
       label: string;
     }[];
-    type?: 'select' | 'textarea' | 'input' | 'taginput' | 'datetime';
+    type?: 'select' | 'textarea' | 'input' | 'taginput' | 'datetime' | 'number-input';
     placeholder?: string;
     disableFn?: (date?: Date | number) => boolean;
   }
 
   interface Emits {
-    (e: 'change', value: string | string[]): void;
+    (e: 'change', value: UnwrapRef<typeof localValue>): void;
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -101,11 +112,31 @@
 
   const disabled = computed(() => props.disableFn());
 
-  const handleChange = (value: string | string[]) => {
+  watch(
+    () => props.dataList,
+    () => {
+      localValue.value = '';
+    },
+  );
+
+  const tagInputPasteFn = (value: string) => value.split(batchSplitRegex).map((item) => ({ id: item }));
+
+  const handleChange = (value: UnwrapRef<typeof localValue>) => {
     localValue.value = value;
   };
 
   const handleConfirm = () => {
+    if (props.type === 'taginput') {
+      // 组件内为200ms后失焦处理失焦的回调，这里将任务添加至失焦回调后，以获取最新值
+      setTimeout(() => {
+        handleConfirmChange();
+      }, 210);
+    } else {
+      handleConfirmChange();
+    }
+  };
+
+  const handleConfirmChange = () => {
     emits('change', localValue.value);
     isShow.value = false;
   };

dbm-ui/frontend/src/components/mysql-toolbox/ToolboxTable.vue

@@ -33,6 +33,7 @@
   interface Emits {
     (e: 'add', value: number): void,
     (e: 'remove', value: number): void,
+    (e: 'clone', value: number): void,
   }
 
   interface Props {
@@ -69,6 +70,12 @@
             onClick={() => emits('remove', index)}>
             <db-icon type="minus-fill" />
           </bk-button>
+          <bk-button
+            text
+            v-bk-tooltips={t('克隆')}
+            onClick={() => emits('clone', index)}>
+            <db-icon type="copy-2" />
+          </bk-button>
         </div>
       ),
     },

dbm-ui/frontend/src/components/render-table/columns/DateTime.vue

@@ -82,10 +82,20 @@
   const attrs = useAttrs();
   const slots = useSlots();
 
-  const localValue = ref(props.modelValue);
+  const localValue = ref<Props['modelValue']>();
 
   const { message: errorMessage, validator } = useValidtor(props.rules);
 
+  watch(
+    () => props.modelValue,
+    () => {
+      localValue.value = props.modelValue;
+    },
+    {
+      immediate: true,
+    },
+  );
+
   const handleChange = (value: Required<Props>['modelValue']) => {
     localValue.value = value;
     console.log('handleChange', value);

dbm-ui/frontend/src/components/render-table/columns/input/index.vue

@@ -216,7 +216,9 @@
 
   defineExpose<Exposes>({
     getValue() {
-      return validator(modelValue.value).then(() => modelValue.value);
+      return validator(modelValue.value)
+        .then(() => modelValue.value)
+        .catch(() => Promise.reject(modelValue.value));
     },
     validator() {
       return validator(modelValue.value).then(

dbm-ui/frontend/src/components/render-table/columns/operate-column/index.vue

@@ -61,7 +61,7 @@
     showAdd: true,
     showRemove: true,
     removeable: true,
-    showClone: true,
+    showClone: false,
   });
 
   const emits = defineEmits<Emits>();

dbm-ui/frontend/src/components/ticket-remark/Index.vue

@@ -5,7 +5,7 @@
     <BkFormItem :label="t('备注')">
       <BkInput
         v-model="modelValue"
-        :maxlength="100"
+        :maxlength="500"
         :placeholder="t('请提供更多有用信息申请信息_以获得更快审批')"
         style="width: 700px"
         type="textarea" />

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/index.ts

@@ -133,7 +133,6 @@ export const generateCloneDataHandlerMap = {
   [TicketTypes.TENDBCLUSTER_DB_TABLE_BACKUP]: generateSpiderDbTableBackupCloneData, // Spider TenDBCluster 库表备份
   [TicketTypes.TENDBCLUSTER_FULL_BACKUP]: generateSpiderDbBackupCloneData, // Spider TenDBCluster 全备单据
   [TicketTypes.TENDBCLUSTER_NODE_REBALANCE]: generateSpiderCapacityChangeCloneData, // Spider 集群remote节点扩缩容
-  // [TicketTypes.TENDBCLUSTER_ROLLBACK_CLUSTER]: generateSpiderRollbackCloneData, // Spider 定点回档
   [TicketTypes.TENDBCLUSTER_FLASHBACK]: generateSpiderFlashbackCloneData, // Spider 闪回
   [TicketTypes.TENDBCLUSTER_TRUNCATE_DATABASE]: generateSpiderDbClearCloneData, // Spider tendbcluster 清档
   [TicketTypes.TENDBCLUSTER_CHECKSUM]: generateSpiderChecksumCloneData, // Spider checksum

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/checksum.ts

@@ -19,7 +19,7 @@ import { random } from '@utils';
 
 // Mysql SQL变更执行
 export async function generateMysqlChecksumCloneData(ticketData: TicketModel<MySQLChecksumDetails>) {
-  const { details } = ticketData;
+  const { details, remark } = ticketData;
   const clustersResult = await getTendbhaList({
     cluster_ids: details.infos.map((item) => item.cluster_id),
     limit: -1,
@@ -59,5 +59,6 @@ export async function generateMysqlChecksumCloneData(ticketData: TicketModel<MyS
     timing: new Date(details.timing),
     runtime_hour: details.runtime_hour,
     data_repair: details.data_repair,
+    remark,
   };
 }

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/clientClone.ts

@@ -27,5 +27,6 @@ export function generateMysqlClientCloneData(ticketData: TicketModel<MySQLCloneD
       },
       target: item.target,
     })),
+    remark: ticketData.remark,
   });
 }

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/dbRename.ts

@@ -31,5 +31,6 @@ export function generateMysqlDbRenameCloneData(ticketData: TicketModel<MySQLRena
   return Promise.resolve({
     tableDataList,
     force,
+    remark: ticketData.remark,
   });
 }

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/flashback.ts

@@ -17,19 +17,22 @@ import { random } from '@utils';
 
 // MySQL 闪回
 export function generateMysqlFlashbackCloneData(ticketData: TicketModel<MySQLFlashback>) {
-  const { clusters, infos} = ticketData.details;
-  const tableDataList = infos.map(item => ({
+  const { clusters, infos } = ticketData.details;
+  const tableDataList = infos.map((item) => ({
     rowKey: random(),
     clusterData: {
       id: item.cluster_id,
-      domain: clusters[item.cluster_id].immute_domain
+      domain: clusters[item.cluster_id].immute_domain,
     },
     startTime: item.start_time,
     endTime: item.end_time,
     databases: item.databases,
     tables: item.tables,
     databasesIgnore: item.databases_ignore,
     tablesIgnore: item.tables_ignore,
-  }))
-  return Promise.resolve({ tableDataList });
+  }));
+  return Promise.resolve({
+    tableDataList,
+    remark: ticketData.remark,
+  });
 }

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/haDbBackup.ts

@@ -17,18 +17,19 @@ import { random } from '@utils';
 
 // Mysql 全库备份
 export function generateMysqlDbBackupCloneData(ticketData: TicketModel<MySQLFullBackupDetails>) {
-  const { clusters, infos} = ticketData.details;
-  const tableDataList = infos.clusters.map(item => ({
+  const { clusters, infos } = ticketData.details;
+  const tableDataList = infos.clusters.map((item) => ({
     rowKey: random(),
     clusterData: {
       id: item.cluster_id,
       domain: clusters[item.cluster_id].immute_domain,
     },
-    backupLocal: item.backup_local
-  }))
+    backupLocal: item.backup_local,
+  }));
   return Promise.resolve({
     tableDataList,
     backupType: infos.backup_type,
     fileTag: infos.file_tag,
+    remark: ticketData.remark,
   });
 }

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/haDbClear.ts

@@ -34,5 +34,6 @@ export function generateMysqlDbClearCloneData(ticketData: TicketModel<MySQLHATru
   return Promise.resolve({
     tableDataList,
     isSafeStatus: !infos[0].force,
+    remark: ticketData.remark,
   });
 }

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/haDbTableBackup.ts

@@ -17,8 +17,8 @@ import { random } from '@utils';
 
 // Mysql 库表备份
 export function generateMysqlDbTableBackupCloneData(ticketData: TicketModel<MySQLTableBackupDetails>) {
-  const { clusters, infos} = ticketData.details;
-  const tableDataList = infos.map(item => ({
+  const { clusters, infos } = ticketData.details;
+  const tableDataList = infos.map((item) => ({
     rowKey: random(),
     clusterData: {
       id: item.cluster_id,
@@ -28,6 +28,9 @@ export function generateMysqlDbTableBackupCloneData(ticketData: TicketModel<MySQ
     tablePatterns: item.table_patterns,
     ignoreDbs: item.ignore_dbs,
     ignoreTables: item.ignore_tables,
-  }))
-  return Promise.resolve({ tableDataList });
+  }));
+  return Promise.resolve({
+    tableDataList,
+    remark: ticketData.remark,
+  });
 }

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/importSqlFile.ts

@@ -24,5 +24,6 @@ export function generateMysqlImportSqlFileCloneData(ticketData: TicketModel<MySQ
     ticket_mode: details.ticket_mode,
     execute_sql_files: details.execute_sql_files as string[],
     path: details.path,
+    remark: ticketData.remark,
   });
 }

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/instanceClone.ts

@@ -58,5 +58,8 @@ export async function generateMysqlInstanceCloneData(ticketData: TicketModel<MyS
       },
     };
   });
-  return Promise.resolve({ tableDataList });
+  return Promise.resolve({
+    tableDataList,
+    remark: ticketData.remark,
+  });
 }

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/masterFailover.ts

@@ -10,7 +10,6 @@
  * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
  * the specific language governing permissions and limitations under the License.
  */
-import _ from 'lodash';
 
 import type { MySQLMasterFailDetails } from '@services/model/ticket/details/mysql';
 import TicketModel from '@services/model/ticket/ticket';
@@ -26,20 +25,24 @@ export function generateMysqlMasterFailoverCloneData(ticketData: TicketModel<MyS
     is_check_process: isCheckProcess,
     is_verify_checksum: isVerifyChecksum,
   } = ticketData.details;
-  const tableDataList = _.flatMap(infos.map(item => item.cluster_ids.map(clusterId => ({
-    rowKey: random(),
-    clusterData: {
-      id: clusterId,
-      domain: clusters[clusterId].immute_domain,
-    },
-    masterData: item.master_ip,
-    slaveData: item.slave_ip,
-  }))));
-
+  const tableDataList = infos.map((item) => {
+    const clusterId = item.cluster_ids[0];
+    return {
+      rowKey: random(),
+      clusterData: {
+        id: clusterId,
+        domain: clusters[clusterId].immute_domain,
+      },
+      masterData: item.master_ip,
+      slaveData: item.slave_ip,
+    };
+  });
+
   return Promise.resolve({
     isCheckDelay,
     isCheckProcess,
     isVerifyChecksum,
     tableDataList,
+    remark: ticketData.remark,
   });
 }

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/masterSlaveSwitch.ts

@@ -10,7 +10,6 @@
  * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
  * the specific language governing permissions and limitations under the License.
  */
-import _ from 'lodash';
 
 import type { MySQLMasterSlaveDetails } from '@services/model/ticket/details/mysql';
 import TicketModel from '@services/model/ticket/ticket';
@@ -26,20 +25,24 @@ export function generateMysqlMasterSlaveSwicthCloneData(ticketData: TicketModel<
     is_check_process: isCheckProcess,
     is_verify_checksum: isVerifyChecksum,
   } = ticketData.details;
-  const tableDataList = _.flatMap(infos.map(item => item.cluster_ids.map(clusterId => ({
-    rowKey: random(),
-    clusterData: {
-      id: clusterId,
-      domain: clusters[clusterId].immute_domain,
-    },
-    masterData: item.master_ip,
-    slaveData: item.slave_ip,
-  }))));
-
+  const tableDataList = infos.map((item) => {
+    const clusterId = item.cluster_ids[0];
+    return {
+      rowKey: random(),
+      clusterData: {
+        id: clusterId,
+        domain: clusters[clusterId].immute_domain,
+      },
+      masterData: item.master_ip,
+      slaveData: item.slave_ip,
+    };
+  });
+
   return Promise.resolve({
     isCheckDelay,
     isCheckProcess,
     isVerifyChecksum,
     tableDataList,
+    remark: ticketData.remark,
   });
 }

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/migrateCluster.ts

@@ -33,5 +33,8 @@ export function generateMysqlMigrateClusterCloneData(ticketData: TicketModel<MyS
     };
   });
 
-  return Promise.resolve({ tableDataList });
+  return Promise.resolve({
+    tableDataList,
+    remark: ticketData.remark,
+  });
 }