feat(frontend): 授权规则、密码安全规则增加校验 TencentBlueKing#7031

# Reviewed, transaction id: 21293

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3611,5 +3611,7 @@
     "【MongoDB】副本集集群管理": "【MongoDB】副本集集群管理",
     "【MongoDB】分片集群管理": "【MongoDB】分片集群管理",
     "如忽略，有连接的情况下也会执行强制升级": "如忽略，有连接的情况下也会执行强制升级",
+    "任意 N 种， N 必须 >= 1 。且 <= 密码组成的种类": "任意 N 种， N 必须 >= 1 。且 <= 密码组成的种类",
+    "密码组成至少要选 1 种": "密码组成至少要选 1 种",
     "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/Index.vue

@@ -20,7 +20,7 @@
         @click="handleSubmit">
         {{ t('提交') }}
       </BkButton>
-      <AccountRulesPreview
+      <RulesPreview
         v-if="isShowPreview"
         :account-type="accountType"
         :data="dbComRef?.formData" />
@@ -35,6 +35,7 @@
 </template>
 <script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
 
   import { preCheckAuthorizeRules as preCheckMongodbAuthorizeRules } from '@services/source/mongodbPermissionAuthorize';
   import { preCheckAuthorizeRules as preCheckMysqlAuthorizeRules } from '@services/source/mysqlPermissionAuthorize';
@@ -44,17 +45,14 @@
 
   import { useBeforeClose, useTicketMessage } from '@hooks';
 
-  import { AccountTypes, ClusterTypes, TicketTypes } from '@common/const';
+  import { AccountTypes, ClusterTypes } from '@common/const';
 
-  import AccountRulesPreview from './components/AccountRulesPreview.vue';
   import ErrorMessage from './components/ErrorMessage.vue';
-  import MongoContent from './db-form/Mongo.vue';
-  import MysqlContent from './db-form/Mysql.vue';
-  import SqlserverContent from './db-form/Sqlserver.vue';
-
-  type MysqlPreCheckResulst = ServiceReturnType<typeof preCheckMysqlAuthorizeRules>;
-  type MongoPreCheckResulst = ServiceReturnType<typeof preCheckMongodbAuthorizeRules>;
-  type SqlserverPreCheckResulst = ServiceReturnType<typeof preCheckSqlserverAuthorizeRules>;
+  import RulesPreview from './components/RulesPreview.vue';
+  import MongoForm from './db-form/Mongo.vue';
+  import MysqlForm from './db-form/Mysql.vue';
+  import SqlserverForm from './db-form/Sqlserver.vue';
+  import TendbclusterForm from './db-form/Tendbcluster.vue';
 
   interface Props {
     accountType: AccountTypes;
@@ -100,10 +98,10 @@
   const handleBeforeClose = useBeforeClose();
 
   const comMap = {
-    [AccountTypes.MYSQL]: MysqlContent,
-    [AccountTypes.TENDBCLUSTER]: MysqlContent,
-    [AccountTypes.MONGODB]: MongoContent,
-    [AccountTypes.SQLSERVER]: SqlserverContent,
+    [AccountTypes.MYSQL]: MysqlForm,
+    [AccountTypes.TENDBCLUSTER]: TendbclusterForm,
+    [AccountTypes.MONGODB]: MongoForm,
+    [AccountTypes.SQLSERVER]: SqlserverForm,
   };
 
   const state = reactive({
@@ -116,52 +114,23 @@
     () => props.accountType === AccountTypes.MYSQL || props.accountType === AccountTypes.TENDBCLUSTER,
   );
 
-  /**
-   * 创建授权单据
-   */
-  const createAuthorizeTicket = (
-    uid: string,
-    data:
-      | MysqlPreCheckResulst['authorize_data']
-      | MongoPreCheckResulst['authorize_data']
-      | SqlserverPreCheckResulst['authorize_data'],
-  ) => {
-    const ticketTypeMap = {
-      [AccountTypes.MYSQL]: TicketTypes.MYSQL_AUTHORIZE_RULES,
-      [AccountTypes.TENDBCLUSTER]: TicketTypes.TENDBCLUSTER_AUTHORIZE_RULES,
-      [AccountTypes.MONGODB]: TicketTypes.MONGODB_AUTHORIZE_RULES,
-      [AccountTypes.SQLSERVER]: TicketTypes.SQLSERVER_AUTHORIZE_RULES,
-    };
-
-    const params = {
-      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-      details: {
-        authorize_uid: uid,
-        authorize_data: data,
-      },
-      remark: '',
-      ticket_type: ticketTypeMap[props.accountType],
-    };
-
-    createTicket(params)
-      .then((res) => {
-        ticketMessage(res.id);
-        nextTick(() => {
-          emits('success');
-          window.changeConfirm = false;
-          handleClose();
-        });
-      })
-      .finally(() => {
-        state.isLoading = false;
+  const { run: createTicketRun } = useRequest(createTicket, {
+    manual: true,
+    onSuccess: (res) => {
+      ticketMessage(res.id);
+      nextTick(() => {
+        emits('success');
+        window.changeConfirm = false;
+        handleClose();
       });
-  };
+    },
+  });
 
   /**
    * 授权规则前置检测
    */
   const handleSubmit = async () => {
-    const params = await dbComRef.value.getValue();
+    const { ticketType, params } = await dbComRef.value.getValue();
 
     const apiMap = {
       [AccountTypes.MYSQL]: preCheckMysqlAuthorizeRules,
@@ -170,20 +139,31 @@
       [AccountTypes.SQLSERVER]: preCheckSqlserverAuthorizeRules,
     };
 
-    state.isLoading = true;
-    apiMap[props.accountType](params)
-      .then((res) => {
-        const { pre_check: preCheck, authorize_uid: uid, authorize_data: data, message } = res;
-        if (preCheck) {
-          createAuthorizeTicket(uid, data);
-          state.errorMessage = '';
-          return;
-        }
-        state.errorMessage = message;
-      })
-      .finally(() => {
-        state.isLoading = false;
-      });
+    try {
+      state.isLoading = true;
+      const {
+        pre_check: preCheck,
+        authorize_uid: uid,
+        authorize_data: data,
+        message,
+      } = await apiMap[props.accountType](params);
+      if (preCheck) {
+        createTicketRun({
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          details: {
+            authorize_uid: uid,
+            authorize_data: data,
+          },
+          remark: '',
+          ticket_type: ticketType,
+        });
+        state.errorMessage = '';
+        return;
+      }
+      state.errorMessage = message;
+    } finally {
+      state.isLoading = false;
+    }
   };
 
   /**

dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/SourceIps.vue

@@ -1,10 +1,10 @@
 <template>
   <DbFormItem
-    v-model="sourceIps"
     class="cluster-authorize-bold"
     :label="t('访问源')"
     property="source_ips"
-    required>
+    required
+    :rules="rules">
     <IpSelector
       :biz-id="bizId"
       button-text="添加 IP"
@@ -41,6 +41,13 @@
 
   const selected = ref<HostInfo[]>([]);
   const bizId = window.PROJECT_CONFIG.BIZ_ID;
+  const rules = [
+    {
+      trigger: 'change',
+      message: t('请添加访问源'),
+      validator: (value: string[]) => value.length > 0,
+    },
+  ];
 
   const handleChangeIP = (data: HostInfo[]) => {
     selected.value = data;

dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/TargetClusters.vue → dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/TargetInstances.vue

@@ -4,7 +4,8 @@
     class="cluster-authorize-bold"
     :label="t('目标集群')"
     property="target_instances"
-    required>
+    required
+    :rules="rules">
     <BkButton
       class="cluster-authorize-button"
       @click="handleShowTargetCluster">
@@ -74,6 +75,14 @@
   const { t } = useI18n();
   const copy = useCopy();
 
+  const rules = [
+    {
+      trigger: 'change',
+      message: t('请添加目标集群'),
+      validator: (value: string[]) => value.length > 0,
+    },
+  ]
+
   const tabListConfigMap = {
     tendbhaSlave: {
       name: t('MySQL主从-从域名'),

dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/select-permission-rules/selector-select/Index.vue → dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/mongo-permission-rules/Index.vue

@@ -53,8 +53,8 @@
 
   import { AccountTypes } from '@common/const';
 
+  import AccountRulesSelector from './components/accounter-rules-selector/Index.vue';
   import AccountRulesTable from './components/accout-rules-preview-table/Index.vue';
-  import AccountRulesSelector from './components/accouter-rules-selector/Index.vue';
 
   interface Props {
     accountType: AccountTypes;

dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/select-permission-rules/form-item-select/Index.vue → dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/mysql-permission-rules/Index.vue

@@ -5,12 +5,10 @@
   <UserSelect
     v-bind="props"
     v-model="user"
-    @success="handleSuccess" />
+    @change="handleChange" />
   <DbSelect
     v-bind="props"
-    v-model:access-dbs="accessDbs"
-    v-model:rules="rules"
-    v-model:user="user"
+    v-model="accessDbs"
     :account-rules="accountRules" />
   <RulesTable v-model="rules" />
 </template>
@@ -46,11 +44,18 @@
 
   const { t } = useI18n();
 
-  const accountRules = ref<PermissionRule[]>([]);
+  const accountRules = ref<PermissionRule['rules']>([]);
 
-  const handleSuccess = (data: PermissionRule[]) => {
+  const handleChange = (data: PermissionRule['rules']) => {
     accountRules.value = data;
+    const filterData = accountRules.value.filter((item) => accessDbs.value.includes(item.access_db));
+    accessDbs.value = filterData.length > 0 ? accessDbs.value : data.slice(0, 1).map((item) => item.access_db);
+    rules.value = filterData;
   };
+
+  watch(accessDbs, () => {
+    rules.value = accountRules.value.filter((item) => accessDbs.value.includes(item.access_db));
+  });
 </script>
 
 <style lang="less" scoped>

dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/select-permission-rules/form-item-select/components/DbSelect.vue → dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/mysql-permission-rules/components/DbSelect.vue

@@ -2,7 +2,8 @@
   <BkFormItem
     :label="t('访问DB')"
     property="access_dbs"
-    required>
+    required
+    :rules="rules">
     <BkSelect
       v-model="accessDbs"
       :clearable="false"
@@ -13,7 +14,7 @@
       multiple-mode="tag"
       show-select-all>
       <BkOption
-        v-for="item of curRules"
+        v-for="item of accountRules"
         :key="item.rule_id"
         :label="item.access_db"
         :value="item.access_db" />
@@ -41,48 +42,25 @@
 
   interface Props {
     accountType: AccountTypes;
-    accountRules: PermissionRule[];
+    accountRules: PermissionRule['rules'];
   }
 
   const props = defineProps<Props>();
 
-  const user = defineModel<string>('user', {
-    default: '',
-  });
-
-  const accessDbs = defineModel<string[]>('accessDbs', {
-    default: () => [],
-  });
-
-  const rules = defineModel<PermissionRule['rules']>('rules', {
+  const accessDbs = defineModel<string[]>('modelValue', {
     default: () => [],
   });
 
   const router = useRouter();
   const { t } = useI18n();
 
-  const curRules = computed(() => {
-    if (user.value === '') {
-      return [];
-    }
-
-    const item = props.accountRules.find((item) => item.account.user === user.value);
-    return item?.rules || [];
-  });
-
-  const updateRules = () => {
-    if (accessDbs.value.length === 0) {
-      rules.value = [];
-      return;
-    }
-    rules.value = curRules.value.filter((item) => accessDbs.value.includes(item.access_db));
-  };
-
-  watch(curRules, updateRules, {
-    immediate: true,
-  });
-
-  watch(accessDbs, updateRules);
+  const rules = [
+    {
+      trigger: 'blur',
+      message: t('请选择访问DB'),
+      validator: (value: string[]) => value.length > 0,
+    },
+  ];
 
   /**
    * 跳转新建规则界面

dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/select-permission-rules/form-item-select/components/RulesTable.vue → dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/mysql-permission-rules/components/RulesTable.vue

@@ -1,15 +1,18 @@
 <template>
   <BkFormItem
     v-model="modelValue"
-    :label="t('权限明细')">
+    :label="t('权限明细')"
+    property="rules"
+    :rules="rules">
     <BkAlert
       class="mb-16 mt-10"
       theme="warning"
       :title="t('注意_对从域名授权时仅会授予 select 权限')" />
     <DbOriginalTable
       :columns="columns"
       :data="modelValue"
-      :empty-text="t('请选择访问DB')" />
+      :empty-text="t('请选择访问DB')"
+      :height="300" />
   </BkFormItem>
 </template>
 
@@ -24,6 +27,14 @@
 
   const { t } = useI18n();
 
+  const rules = [
+    {
+      trigger: 'change',
+      message: t('请添加权限规则'),
+      validator: (value: PermissionRule['rules']) => value.length > 0,
+    },
+  ];
+
   const columns = [
     {
       label: 'DB',