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

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

@@ -54,6 +54,7 @@
             :disabled="disabled"
             has-delete-icon
             :model-value="localValue as string[]"
+            :paste-fn="tagInputPasteFn"
             @change="handleChange" />
           <BkDatePicker
             v-else-if="type === 'datetime'"
@@ -74,6 +75,8 @@
   import type { UnwrapRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
+  import { batchSplitRegex } from '@common/regex';
+
   interface Props {
     title: string;
     dataList?: {
@@ -117,6 +120,8 @@
     },
   );
 
+  const tagInputPasteFn = (value: string) => value.split(batchSplitRegex).map((item) => ({ id: item }));
+
   const handleChange = (value: UnwrapRef<typeof localValue>) => {
     localValue.value = value;
   };

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

@@ -60,5 +60,5 @@ export async function generateMysqlVersionLocalUpgradeCloneData(ticketData: Tick
     };
   });
 
-  return Promise.resolve({ tableList });
+  return Promise.resolve({ tableList, remark: ticketData.remark });
 }

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

@@ -58,5 +58,6 @@ export async function generateMysqlVersionMigrateUpgradeCloneData(ticketData: Ti
   return Promise.resolve({
     tableList,
     backupSource,
+    remark: ticketData.remark,
   });
 }

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

@@ -34,5 +34,5 @@ export function generateMysqlVersionProxyUpgradeCloneData(ticketData: TicketMode
     };
   });
 
-  return Promise.resolve({ tableList });
+  return Promise.resolve({ tableList, remark: ticketData.remark });
 }

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/scaleUpdown.ts

@@ -33,7 +33,7 @@ export async function generateRedisScaleUpdownCloneData(ticketData: TicketModel<
     {} as Record<number, RedisModel>,
   );
 
-  return infos.map((item) => ({
+  const tableDataList = infos.map((item) => ({
     rowKey: random(),
     isLoading: false,
     targetCluster: clusters[item.cluster_id].immute_domain,
@@ -53,4 +53,9 @@ export async function generateRedisScaleUpdownCloneData(ticketData: TicketModel<
     switchMode: item.online_switch_type,
     spec: clusterListMap[item.cluster_id].cluster_spec,
   }));
+
+  return {
+    tableDataList,
+    remark: ticketData.remark,
+  };
 }

dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/spider/sqlExecute.ts

@@ -14,21 +14,17 @@
 import type { MySQLImportSQLFileDetails } from '@services/model/ticket/details/mysql';
 import TicketModel from '@services/model/ticket/ticket';
 
-import { random } from '@utils';
-
 // spider SQL变更执行
 export function generateSpiderSqlExecuteCloneData(ticketData: TicketModel<MySQLImportSQLFileDetails>) {
   const { details } = ticketData;
   return Promise.resolve({
     backup: details.backup,
     charset: details.charset,
-    ticket_mode: details.ticket_mode,
-    import_mode: details.import_mode,
     cluster_ids: details.cluster_ids,
-    execute_db_infos: details.execute_objects.map((item) => ({
-      ...item,
-      rowKey: random(),
-    })),
+    execute_objects: details.execute_objects,
+    ticket_mode: details.ticket_mode,
+    execute_sql_files: details.execute_sql_files as string[],
+    path: details.path,
     remark: ticketData.remark,
   });
 }

dbm-ui/frontend/src/views/db-manage/mysql/sql-execute/steps/step1/Index.vue

@@ -23,7 +23,7 @@
           :model="formData">
           <ClusterIds
             v-model="formData.cluster_ids"
-            v-model:clusterVersionList="clusterVersionList"
+            v-model:cluster-version-list="clusterVersionList"
             :cluster-type-list="[ClusterTypes.TENDBHA, ClusterTypes.TENDBSINGLE]" />
           <ExecuteObjects
             v-model="formData.execute_objects"
@@ -35,6 +35,7 @@
           <RenderCharset v-model="formData.charset" />
           <Backup v-model="formData.backup" />
           <TicketMode v-model="formData.ticket_mode" />
+          <TicketRemark v-model="formData.remark" />
         </DbForm>
       </div>
       <template #action>
@@ -71,6 +72,8 @@
 
   import { ClusterTypes, DBTypes, TicketTypes } from '@common/const';
 
+  import TicketRemark from '@components/ticket-remark/Index.vue';
+
   import Backup from '@views/db-manage/common/sql-execute/backup/Index.vue';
   import RenderCharset from '@views/db-manage/common/sql-execute/charset/Index.vue';
   import ClusterIds from '@views/db-manage/common/sql-execute/cluster-ids/Index.vue';
@@ -97,6 +100,7 @@
     },
     ticket_type: 'MYSQL_SEMANTIC_CHECK',
     cluster_type: DBTypes.MYSQL,
+    remark: '',
   });
 
   const formRef = ref();
@@ -117,6 +121,7 @@
         cluster_ids: cloneData.cluster_ids,
         execute_objects: cloneData.execute_objects,
         ticket_mode: cloneData.ticket_mode,
+        remark: cloneData.remark,
       });
       window.changeConfirm = true;
       uploadFilePath.value = cloneData.path;

dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/Index.vue

@@ -66,6 +66,7 @@
     <Component
       :is="currentTable"
       :backup-source="backupSource"
+      :remark="remark"
       :table-list="tableList" />
   </div>
 </template>
@@ -96,6 +97,7 @@
     type: TicketTypes.MYSQL_PROXY_UPGRADE,
     onSuccess(cloneData) {
       tableList.value = cloneData.tableList;
+      remark.value = cloneData.remark;
       window.changeConfirm = true;
       formData.roleType = 'haAccessLayer';
     },
@@ -106,6 +108,7 @@
     type: TicketTypes.MYSQL_LOCAL_UPGRADE,
     onSuccess(cloneData) {
       tableList.value = cloneData.tableList;
+      remark.value = cloneData.remark;
       window.changeConfirm = true;
 
       const isSingle = cloneData.tableList[0].clusterData.clusterType === ClusterTypes.TENDBSINGLE;
@@ -119,6 +122,7 @@
     type: TicketTypes.MYSQL_MIGRATE_UPGRADE,
     onSuccess(cloneData) {
       backupSource.value = cloneData.backupSource;
+      remark.value = cloneData.remark;
       window.changeConfirm = true;
 
       formData.roleType = 'haStorageLayer';
@@ -152,6 +156,7 @@
   ];
 
   const backupSource = ref('');
+  const remark = ref('');
 
   const tableList = shallowRef<
     HaAccessLayerRow[] | HaStorageLayerLocalRow[] | HaStorageLayerRemoteRow[] | SingleStorageRow[]
@@ -184,13 +189,15 @@
     () => formData.updateType,
     () => {
       tableList.value = [];
+      remark.value = '';
       if (formData.updateType === '') {
         formData.updateType = 'local';
       }
     },
   );
 
   const handleRoleTypeChange = () => {
+    remark.value = '';
     tableList.value = [];
   };
 </script>

dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Index.vue

@@ -56,6 +56,7 @@
             @remove="handleRemove(index)" />
         </template>
       </RenderTable>
+      <TicketRemark v-model="localRemark" />
       <ClusterSelector
         v-model:is-show="isShowClusterSelector"
         :cluster-types="[ClusterTypes.TENDBHA]"
@@ -90,7 +91,6 @@
   import { findRelatedClustersByClusterIds } from '@services/source/mysqlCluster';
   import { createTicket } from '@services/source/ticket';
 
-  // import { useTicketCloneInfo } from '@hooks';
   import { useGlobalBizs } from '@stores';
 
   import { ClusterTypes, TicketTypes } from '@common/const';
@@ -99,13 +99,15 @@
   import ClusterSelector from '@components/cluster-selector/Index.vue';
   import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
   import RenderTable from '@components/render-table/Index.vue';
+  import TicketRemark from '@components/ticket-remark/Index.vue';
 
   import type { InfoItem } from '@views/db-manage/redis/db-data-copy/pages/page1/Index.vue';
 
   import RenderDataRow, { createRowData, type IDataRow } from './Row.vue';
 
   interface Props {
     tableList: IDataRow[];
+    remark: string;
   }
 
   interface Exposes {
@@ -122,6 +124,7 @@
   const isShowClusterSelector = ref(false);
   const rowRefs = ref();
   const isSubmitting = ref(false);
+  const localRemark = ref('');
 
   const selectedClusters = shallowRef<{ [key: string]: Array<TendbhaModel> }>({ [ClusterTypes.TENDBHA]: [] });
 
@@ -138,6 +141,16 @@
     },
   );
 
+  watch(
+    () => props.remark,
+    () => {
+      localRemark.value = props.remark;
+    },
+    {
+      immediate: true,
+    },
+  );
+
   const handleShowMasterBatchSelector = () => {
     isShowClusterSelector.value = true;
   };
@@ -237,7 +250,7 @@
       const infos = await Promise.all(rowRefs.value.map((item: { getValue: () => Promise<any> }) => item.getValue()));
       await createTicket({
         ticket_type: TicketTypes.MYSQL_PROXY_UPGRADE,
-        remark: '',
+        remark: localRemark.value,
         details: {
           infos,
         },
@@ -262,6 +275,7 @@
 
   const handleReset = () => {
     tableData.value = [createRowData()];
+    localRemark.value = '';
     domainMemo = {};
     selectedClusters.value[ClusterTypes.TENDBHA] = [];
     window.changeConfirm = false;

dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Index.vue

@@ -52,6 +52,7 @@
             @remove="handleRemove(index)" />
         </template>
       </RenderTable>
+      <TicketRemark v-model="localRemark" />
       <ClusterSelector
         v-model:is-show="isShowClusterSelector"
         :cluster-types="[ClusterTypes.TENDBHA]"
@@ -94,13 +95,15 @@
   import ClusterSelector from '@components/cluster-selector/Index.vue';
   import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
   import RenderTable from '@components/render-table/Index.vue';
+  import TicketRemark from '@components/ticket-remark/Index.vue';
 
   import type { InfoItem } from '@views/db-manage/redis/db-data-copy/pages/page1/Index.vue';
 
   import RenderDataRow, { createRowData, type IDataRow } from './Row.vue';
 
   interface Props {
     tableList: IDataRow[];
+    remark: string;
   }
 
   interface Exposes {
@@ -117,6 +120,7 @@
   const isShowClusterSelector = ref(false);
   const rowRefs = ref();
   const isSubmitting = ref(false);
+  const localRemark = ref('');
 
   const selectedClusters = shallowRef<{ [key: string]: Array<TendbhaModel> }>({ [ClusterTypes.TENDBHA]: [] });
 
@@ -130,6 +134,16 @@
     },
   );
 
+  watch(
+    () => props.remark,
+    () => {
+      localRemark.value = props.remark;
+    },
+    {
+      immediate: true,
+    },
+  );
+
   // 集群域名是否已存在表格的映射表
   let domainMemo: Record<string, boolean> = {};
 
@@ -234,7 +248,7 @@
       const infos = await Promise.all(rowRefs.value.map((item: { getValue: () => Promise<any> }) => item.getValue()));
       await createTicket({
         ticket_type: TicketTypes.MYSQL_LOCAL_UPGRADE,
-        remark: '',
+        remark: localRemark.value,
         details: {
           infos,
         },
@@ -259,6 +273,7 @@
 
   const handleReset = () => {
     tableData.value = [createRowData()];
+    localRemark.value = '';
     domainMemo = {};
     selectedClusters.value[ClusterTypes.TENDBHA] = [];
     window.changeConfirm = false;

dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Index.vue

@@ -73,6 +73,7 @@
           </BkRadioGroup>
         </BkFormItem>
       </BkForm>
+      <TicketRemark v-model="localRemark" />
       <ClusterSelector
         v-model:is-show="isShowClusterSelector"
         :cluster-types="[ClusterTypes.TENDBHA]"
@@ -115,6 +116,7 @@
   import ClusterSelector from '@components/cluster-selector/Index.vue';
   import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
   import RenderTable from '@components/render-table/Index.vue';
+  import TicketRemark from '@components/ticket-remark/Index.vue';
 
   import type { InfoItem } from '@views/db-manage/redis/db-data-copy/pages/page1/Index.vue';
 
@@ -123,6 +125,7 @@
   interface Props {
     tableList: IDataRow[];
     backupSource: string;
+    remark: string;
   }
 
   interface Exposes {
@@ -140,6 +143,7 @@
   const rowRefs = ref();
   const isSubmitting = ref(false);
   const localBackupSource = ref('local');
+  const localRemark = ref('');
 
   const selectedClusters = shallowRef<{ [key: string]: Array<TendbhaModel> }>({ [ClusterTypes.TENDBHA]: [] });
 
@@ -163,6 +167,16 @@
     },
   );
 
+  watch(
+    () => props.remark,
+    () => {
+      localRemark.value = props.remark;
+    },
+    {
+      immediate: true,
+    },
+  );
+
   // 集群域名是否已存在表格的映射表
   let domainMemo: Record<string, boolean> = {};
 
@@ -267,7 +281,7 @@
       const infos = await Promise.all(rowRefs.value.map((item: { getValue: () => Promise<any> }) => item.getValue()));
       await createTicket({
         ticket_type: TicketTypes.MYSQL_MIGRATE_UPGRADE,
-        remark: '',
+        remark: localRemark.value,
         details: {
           ip_source: 'manual_input',
           backup_source: localBackupSource.value,
@@ -294,6 +308,7 @@
 
   const handleReset = () => {
     tableData.value = [createRowData()];
+    localRemark.value = '';
     domainMemo = {};
     selectedClusters.value[ClusterTypes.TENDBHA] = [];
     window.changeConfirm = false;