fix(frontend): 修复mysql开区单据详情、单据克隆、手输域名 TencentBlueKing#7779

# Reviewed, transaction id: 24312

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

@@ -10,10 +10,61 @@
  * 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 { MysqlOpenAreaDetails } from '@services/model/ticket/details/mysql';
 import TicketModel from '@services/model/ticket/ticket';
+import { getDetail } from '@services/source/openarea';
+
+import { random } from '@utils';
+
+// 解析器，根据范式提取变量映射关系
+const parser = (pattern: string, input: string) => {
+  const regexPattern = new RegExp(pattern.replace(/{(.+?)}/g, '(?<$1>.+)'));
+  return input.match(regexPattern)?.groups || {};
+};
 
 // MySQL 开区
-export function generateMysqlOpenAreaCloneData(ticketData: TicketModel<MysqlOpenAreaDetails>) {
-  return Promise.resolve({ id: ticketData.details.config_id });
+export async function generateMysqlOpenAreaCloneData(ticketData: TicketModel<MysqlOpenAreaDetails>) {
+  const { details } = ticketData;
+  // 获取模板详情
+  const templateDetail = await getDetail({ id: details.config_id });
+
+  const data = details.config_data.map((cur, index) => {
+    // 集群信息
+    const clusterInfo = details.clusters[cur.cluster_id];
+
+    // 变量
+    const vars = cur.execute_objects.reduce<Record<string, string>>((varAcc, varCur) => {
+      const varItem = templateDetail.config_rules.reduce(
+        (acc, cur) => ({
+          ...acc,
+          ...parser(cur.target_db_pattern, varCur.target_db),
+        }),
+        {},
+      );
+      return { ...varAcc, ...varItem };
+    }, {});
+
+    // 授权IP
+    const authorizeIps: string[] = _.get(details, `rules_set[${index}].source_ips`, []);
+
+    return {
+      rowKey: random(),
+      clusterData: {
+        id: clusterInfo.id,
+        master_domain: clusterInfo.immute_domain,
+        bk_biz_id: clusterInfo.bk_biz_id,
+        bk_cloud_id: clusterInfo.bk_cloud_id,
+        bk_cloud_name: clusterInfo.bk_cloud_name,
+      },
+      vars,
+      authorizeIps,
+    };
+  });
+
+  return Promise.resolve({
+    id: details.config_id,
+    data,
+  });
 }

dbm-ui/frontend/src/services/model/ticket/details/mysql.ts

@@ -377,6 +377,11 @@ export interface MysqlOpenAreaDetails extends DetailBase {
     source_ips: string[];
     target_instances: string[];
     user: string;
+    privileges: {
+      priv: string;
+      user: string;
+      access_db: string;
+    }[];
   }[];
 }
 

dbm-ui/frontend/src/services/source/openarea.ts

@@ -1,12 +1,8 @@
 import OpenareaTemplateModel from '@services/model/openarea/openareaTemplate';
 import type { ListBase } from '@services/types';
 
-import { useGlobalBizs } from '@stores';
-
 import http from '../http';
 
-const { currentBizId } = useGlobalBizs();
-
 const path = '/apis/mysql/bizs';
 
 // 开区模板列表
@@ -18,10 +14,12 @@ export const getList = function (params: {
   limit?: number;
   offset?: number;
 }) {
-  return http.get<ListBase<OpenareaTemplateModel[]>>(`${path}/${currentBizId}/openarea/`, params).then((data) => ({
-    ...data,
-    results: data.results.map((item: OpenareaTemplateModel) => new OpenareaTemplateModel(item)),
-  }));
+  return http
+    .get<ListBase<OpenareaTemplateModel[]>>(`${path}/${window.PROJECT_CONFIG.BIZ_ID}/openarea/`, params)
+    .then((data) => ({
+      ...data,
+      results: data.results.map((item: OpenareaTemplateModel) => new OpenareaTemplateModel(item)),
+    }));
 };
 
 // 新建开区
@@ -38,12 +36,12 @@ export const create = function (params: {
   source_cluster_id: number;
   cluster_type?: string;
 }) {
-  return http.post(`${path}/${currentBizId}/openarea/`, params);
+  return http.post(`${path}/${window.PROJECT_CONFIG.BIZ_ID}/openarea/`, params);
 };
 
 // 删除开区模板
 export const remove = function (params: { id: number }) {
-  return http.delete(`${path}/${currentBizId}/openarea/${params.id}/`);
+  return http.delete(`${path}/${window.PROJECT_CONFIG.BIZ_ID}/openarea/${params.id}/`);
 };
 
 // 获取开区结果预览
@@ -81,13 +79,13 @@ export const getPreview = function (params: {
       target_instances: string[];
       user: string;
     }[];
-  }>(`${path}/${currentBizId}/openarea/preview/`, params);
+  }>(`${path}/${window.PROJECT_CONFIG.BIZ_ID}/openarea/preview/`, params);
 };
 
 // 开区模板详情
 export const getDetail = function (params: { id: number }) {
   return http
-    .get<OpenareaTemplateModel>(`${path}/${currentBizId}/openarea/${params.id}/`)
+    .get<OpenareaTemplateModel>(`${path}/${window.PROJECT_CONFIG.BIZ_ID}/openarea/${params.id}/`)
     .then((data) => new OpenareaTemplateModel(data));
 };
 
@@ -109,7 +107,7 @@ export const update = function (params: {
   const realParams = { ...params } as { id?: number };
   delete realParams.id;
 
-  return http.put(`${path}/${currentBizId}/openarea/${params.id}/`, realParams);
+  return http.put(`${path}/${window.PROJECT_CONFIG.BIZ_ID}/openarea/${params.id}/`, realParams);
 };
 
 export const updateVariable = function <T extends 'add' | 'update' | 'delete'>(params: {
@@ -129,5 +127,5 @@ export const updateVariable = function <T extends 'add' | 'update' | 'delete'>(p
       }
     : undefined;
 }) {
-  return http.post(`${path}/${currentBizId}/openarea/alter_var/`, params);
+  return http.post(`${path}/${window.PROJECT_CONFIG.BIZ_ID}/openarea/alter_var/`, params);
 };

dbm-ui/frontend/src/views/db-manage/mysql/openarea/create/components/target-cluster/Index.vue

@@ -55,7 +55,9 @@
   import TendbhaModel from '@services/model/mysql/tendbha';
   import type { HostInfo } from '@services/types/ip';
 
-  import { ClusterTypes } from '@common/const';
+  import { useTicketCloneInfo } from '@hooks';
+
+  import { ClusterTypes, TicketTypes } from '@common/const';
 
   import ClusterSelector from '@components/cluster-selector/Index.vue';
   import IpSelector, { type IPSelectorResult } from '@components/ip-selector/IpSelector.vue';
@@ -75,6 +77,18 @@
 
   const props = defineProps<Props>();
 
+  // 单据克隆
+  useTicketCloneInfo({
+    type: TicketTypes.MYSQL_OPEN_AREA,
+    onSuccess({ data }) {
+      data.forEach((item) => {
+        domainMemo[item.clusterData.master_domain] = true;
+        selectedClusters.value[props.clusterType].push(item.clusterData);
+      });
+      tableData.value = data;
+    },
+  });
+
   const { t } = useI18n();
 
   // 检测列表是否为空
@@ -156,6 +170,9 @@
 
   // 输入集群后查询集群信息并填充到table
   const handleInputCluster = async (index: number, item: TendbhaModel) => {
+    if (domainMemo[item.master_domain]) {
+      return;
+    }
     const row = createRowData({
       clusterData: {
         id: item.id,
@@ -215,6 +232,7 @@
       // delete domainMemo[domain];
       const clustersArr = selectedClusters.value[props.clusterType];
       selectedClusters.value[props.clusterType] = clustersArr.filter((item) => item.master_domain !== domain);
+      delete domainMemo[domain];
     }
     dataList.splice(index, 1);
     tableData.value = dataList;

dbm-ui/frontend/src/views/db-manage/mysql/openarea/template/Index.vue

@@ -58,7 +58,8 @@
           id: cloneData.id,
         },
         query: {
-          from: route.name as string
+          from: route.name as string,
+          ticketId: route.query.ticketId,
         }
       })
     },

dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/openarea/Index.vue

@@ -72,8 +72,8 @@
         </span>
       </template>
       <PermissionRule
-        :cluster-type="templateDetail?.cluster_type"
-        :rule-ids="templateDetail?.related_authorize" />
+        :template-detail="templateDetail"
+        :ticket-details="ticketDetails" />
     </DbCard>
   </BkLoading>
 </template>

dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/openarea/components/PermissionRule.vue

@@ -24,39 +24,42 @@
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
-  import MysqlPermissionAccountModel from '@services/model/mysql/mysql-permission-account';
+  import type OpenareaTemplateModel from '@services/model/openarea/openareaTemplate';
+  import type { MysqlOpenAreaDetails } from '@services/model/ticket/details/mysql';
+  import TicketModel from '@services/model/ticket/ticket';
   import { getPermissionRules } from '@services/source/mysqlPermissionAccount'
 
-  import { useGlobalBizs } from '@stores';
-
-  import { ClusterTypes } from '@common/const';
+  import { AccountTypes, ClusterTypes } from '@common/const';
 
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
+  interface IDataRow {
+    user: string;
+    rules: {
+      priv: string;
+      access_db: string;
+    }[];
+  }
 
   interface Props {
-    clusterType: ClusterTypes.TENDBHA | ClusterTypes.TENDBSINGLE | ClusterTypes.TENDBCLUSTER;
-    ruleIds?: number[];
+    ticketDetails: TicketModel<MysqlOpenAreaDetails>;
+    templateDetail: OpenareaTemplateModel;
   }
 
-  const props = withDefaults(defineProps<Props>(), {
-    clusterType: ClusterTypes.TENDBHA,
-    ruleIds: () => [] as number[]
-  });
+  const props = defineProps<Props>();
 
-  const { currentBizId } = useGlobalBizs();
   const { t } = useI18n();
 
   const rowFlodMap = ref<Record<string, boolean>>({});
-  const tableData = shallowRef<MysqlPermissionAccountModel[]>([]);
+  const tableData = shallowRef<IDataRow[]>([]);
 
   const columns = computed(() => [
     {
       label: t('账号名称'),
       field: 'user',
       width: 220,
       showOverflowTooltip: false,
-      render: ({ data }: { data: MysqlPermissionAccountModel }) => (
+      render: ({ data }: { data: IDataRow }) => (
         <div class="account-box">
           {
             data.rules.length > 1
@@ -65,12 +68,12 @@
               type="down-shape"
               class={{
                 'flod-flag': true,
-                'is-flod': rowFlodMap.value[data.account.user],
+                'is-flod': rowFlodMap.value[data.user],
               }}
-              onClick={() => handleToogleExpand(data.account.user)}/>
+              onClick={() => handleToogleExpand(data.user)}/>
             )
           }
-          { data.account.user }
+          { data.user }
         </div>
       ),
     },
@@ -79,8 +82,8 @@
       width: 300,
       field: 'access_db',
       showOverflowTooltip: true,
-      render: ({ data }: { data: MysqlPermissionAccountModel }) => {
-        const renderRules = rowFlodMap.value[data.account.user] ? data.rules.slice(0, 1) : data.rules;
+      render: ({ data }: { data: IDataRow }) => {
+        const renderRules = rowFlodMap.value[data.user] ? data.rules.slice(0, 1) : data.rules;
         return renderRules.map(item => (
           <div class="inner-row">
             <bk-tag>
@@ -92,18 +95,18 @@
     },
     {
       label: t('权限'),
-      field: 'privilege',
+      field: 'priv',
       showOverflowTooltip: false,
-      render: ({ data }: { data: MysqlPermissionAccountModel }) => {
+      render: ({ data }: { data: IDataRow }) => {
         if (data.rules.length === 0) {
           return <div class="inner-row">--</div>;
         }
-        const renderRules = rowFlodMap.value[data.account.user] ? data.rules.slice(0, 1) : data.rules;
+        const renderRules = rowFlodMap.value[data.user] ? data.rules.slice(0, 1) : data.rules;
         return renderRules.map(item => (
           <div class="inner-row cell-privilege">
             <TextOverflowLayout>
               {{
-                default: () => item.privilege
+                default: () => item.priv.replace(/,/g, '，'),
               }}
             </TextOverflowLayout>
           </div>
@@ -113,14 +116,42 @@
   ]);
 
   watch(
-    () => props.ruleIds,
+    () => props.ticketDetails,
     () => {
-      if (props.ruleIds.length > 0) {
-        const accountType = props.clusterType === ClusterTypes.TENDBCLUSTER ? 'tendbcluster' : 'mysql';
+      // 有权限快照返回直接渲染
+      if (props.ticketDetails.details.rules_set?.[0].privileges?.length) {
+        const rulesMemo: Record<string, boolean> = {}
+        tableData.value = props.ticketDetails.details.rules_set.reduce<IDataRow[]>((acc, cur) => {
+          if (!rulesMemo[cur.user]) {
+            rulesMemo[cur.user] = true;
+            acc.push({
+              user: cur.user,
+              rules: cur.privileges,
+            });
+          }
+          return acc;
+        }, []);
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  watch(
+    () => props.templateDetail,
+    () => {
+      // 无权限返回则现查
+      if (props.templateDetail && tableData.value.length === 0) {
+        const accountTypeMap = {
+          [ClusterTypes.TENDBHA]: AccountTypes.MYSQL,
+          [ClusterTypes.TENDBSINGLE]: AccountTypes.MYSQL,
+          [ClusterTypes.TENDBCLUSTER]: AccountTypes.TENDBCLUSTER,
+        }
         getPermissionRulesRun({
-          bk_biz_id: currentBizId,
-          rule_ids: props.ruleIds.join(','),
-          account_type: accountType,
+          bk_biz_id: props.ticketDetails.bk_biz_id,
+          rule_ids: props.templateDetail.related_authorize.join(','),
+          account_type: accountTypeMap[props.templateDetail.cluster_type as keyof typeof accountTypeMap],
           offset: 0,
           limit: -1,
         });
@@ -130,8 +161,14 @@
 
   const { run: getPermissionRulesRun, loading: isLoading } = useRequest(getPermissionRules, {
     manual: true,
-    onSuccess({ results: permissionRulesResults }) {
-      tableData.value = permissionRulesResults;
+    onSuccess({ results }) {
+      tableData.value = results.map((item) => ({
+        user: item.account.user,
+        rules: item.rules.map((rule) => ({
+          priv: rule.privilege,
+          access_db: rule.access_db,
+        })),
+      }));
     },
   });