feat(frontend): 权限规则db校验规则 TencentBlueKing#8407

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

@@ -641,11 +641,9 @@
   "即将删除账号xx_删除后将不能恢复": "即将删除账号\"{name}\", 删除后将不能恢复",
   "成功删除账号": "成功删除账号",
   "成功添加授权规则": "成功添加授权规则",
-  "访问DB不能为空": "访问 DB 不能为空",
   "请设置权限": "请设置权限",
   "全选": "全选",
   "权限设置": "权限设置",
-  "请输入DB名称_可以使用通配符_如Data_区分大小写_多个使用英文逗号_分号或换行分隔": "请输入 DB 名称，可以使用通配符 %，如 Data%，区分大小写，多个使用英文逗号、分号或换行分隔",
   "该账号下已存在xx规则": "该账号下已存在 {0} 规则",
   "收藏成功": "收藏成功",
   "取消收藏成功": "取消收藏成功",
@@ -3698,7 +3696,7 @@
   "请先选择主机": "请先选择主机",
   "集群或实例状态异常，不可选择": "集群或实例状态异常，不可选择",
   "非 admin": "非 admin",
-  "请输入访问DB名_以字母开头_支持字母_数字_下划线": "请输入访问DB名，以字母开头，支持字母，数字，下划线",
+  "账户名不能为空": "账户名不能为空",
   "访问 DB 不能为空": "访问 DB 不能为空",
   "访问 DB 名不允许为 admin": "访问 DB 名不允许为 admin",
   "删除规则后将不能恢复，请谨慎操作": "删除规则后将不能恢复，请谨慎操作",
@@ -3707,5 +3705,15 @@
   "主域名，从域名，单节点必须分开查询": "主域名，从域名，单节点必须分开查询",
   "实际内存分配比率": "实际内存分配比率",
   "错误日志": "错误日志",
+  "非 admin": "非 admin",
+  "请输入访问DB名_以字母开头_支持字母_数字_下划线": "请输入访问DB名，以字母开头，支持字母，数字，下划线",
+  "访问 DB 不能为空": "访问 DB 不能为空",
+  "访问 DB 名不允许为 admin": "访问 DB 名不允许为 admin",
+  "删除规则后将不能恢复，请谨慎操作": "删除规则后将不能恢复，请谨慎操作",
+  "请输入访问DB名_以字母开头_支持字母_数字_下划线_多个使用英文逗号_分号或换行分隔": "请输入访问DB名，以字母开头，支持字母，数字，下划线。多个使用英文逗号、分号或换行分隔",
+  "请输入访问DB名_支持 % 通配符_多个使用英文逗号_分号或换行分隔": "请输入访问DB名，支持 % 通配符。多个使用英文逗号、分号或换行分隔",
+  "% 不能单独使用": "% 不能单独使用",
+  "访问 DB 名必须合法": "访问 DB 名必须合法",
+  "请输入访问DB名_以字母开头_支持 % 通配符 或 % 单独使用代表ALL_多个使用英文逗号_分号或换行分隔": "请输入访问DB名，以字母开头，支持 % 通配符 或 % 单独使用代表ALL。多个使用英文逗号、分号或换行分隔",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

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

@@ -32,21 +32,21 @@ export function addAccountRule(params: {
   account_id: number | null;
   account_type: AccountTypesValues;
 }) {
-  return http.post<null>(`${getRootPath()}/add_account_rule/`, params);
+  return http.post(`${getRootPath()}/add_account_rule/`, params);
 }
 
 /**
  * 创建账号
  */
 export function createAccount(params: { user: string; password: string; account_type?: AccountTypesValues }) {
-  return http.post<null>(`${getRootPath()}/create_account/`, params);
+  return http.post(`${getRootPath()}/create_account/`, params);
 }
 
 /**
  * 删除账号
  */
 export function deleteAccount(params: { bizId: number; account_id: number; account_type?: AccountTypesValues }) {
-  return http.delete<null>(`${getRootPath()}/delete_account/`, params);
+  return http.delete(`${getRootPath()}/delete_account/`, params);
 }
 
 /**
@@ -82,3 +82,10 @@ export function queryAccountRules(params: { user: string; access_dbs: string[];
       results: res.results.map((item) => new MongodbPermissonAccountModel(item)),
     }));
 }
+
+/**
+ * 删除规则
+ */
+export function deleteAccountRule(params: { account_id: number; account_type: AccountTypesValues; rule_id: number }) {
+  return http.delete(`${getRootPath()}/delete_account_rule/`, params);
+}

dbm-ui/frontend/src/services/types/permission.ts

@@ -117,16 +117,6 @@ export interface PasswordPolicyIncludeRule {
   uppercase: boolean;
 }
 
-/**
- * 新增账号规则
- */
-export interface AccountRule {
-  access_db: string;
-  privilege: AccountRulePrivilege | string;
-  account_id: number | null;
-  account_type?: AccountTypesValues;
-}
-
 /**
  * 新增账号规则 - 权限信息
  */
@@ -138,6 +128,16 @@ export interface AccountRulePrivilege {
 
 export type AccountRulePrivilegeKey = keyof AccountRulePrivilege;
 
+/**
+ * 新增账号规则
+ */
+export interface AccountRule {
+  access_db: string;
+  privilege: AccountRulePrivilege;
+  account_id: number | null;
+  account_type?: AccountTypesValues;
+}
+
 /**
  * 规则授权前置检查信息
  */

dbm-ui/frontend/src/views/db-manage/common/password-input/Index.vue

@@ -261,7 +261,6 @@
       security_type: passwordParam.value,
       password: getEncyptPassword(),
     });
-    tippyInstance.show();
     emits('verifyResult', isStrength);
     return isStrength;
   };
@@ -291,7 +290,7 @@
    * 密码框获取焦点
    */
   const handlePasswordFocus = () => {
-    debounceVerifyPassword();
+    tippyInstance.show();
   };
 
   /**

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

@@ -90,7 +90,7 @@
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
-  import { deleteAccount as deleteMongodbAccount, getPermissionRules as getMongodbPermissionRules } from '@services/source/mongodbPermissionAccount';
+  import { deleteAccount as deleteMongodbAccount, deleteAccountRule as deleteMongodbAccountRule, getPermissionRules as getMongodbPermissionRules } from '@services/source/mongodbPermissionAccount';
   import { deleteAccount as deleteMysqlAccount, getPermissionRules as getMysqlPermissionRules } from '@services/source/mysqlPermissionAccount';
   import { deleteAccount as deleteSqlserverAccount, getPermissionRules as getSqlserverPermissionRules } from '@services/source/sqlserverPermissionAccount';
   import { createTicket } from '@services/source/ticket';
@@ -141,7 +141,6 @@
    * dbOperations 权限配置
    * ddlSensitiveWords 敏感词
    * dataSource 数据源
-   * deleteAccount 删除账号api
    * createRuleComponent 创建规则组件
    */
   const configMap = {
@@ -151,7 +150,6 @@
       dbOperations: mysqlDbOperations[AccountTypes.MYSQL].dbOperations,
       ddlSensitiveWords: mysqlDbOperations[AccountTypes.MYSQL].ddlSensitiveWords,
       dataSource: getMysqlPermissionRules,
-      deleteAccount: deleteMysqlAccount,
       createRuleComponent: MysqlCreateRule,
       buttonController: {
         [ButtonTypes.EDIT_RULE]: true,
@@ -164,7 +162,6 @@
       dbOperations: mysqlDbOperations[AccountTypes.TENDBCLUSTER].dbOperations,
       ddlSensitiveWords: mysqlDbOperations[AccountTypes.TENDBCLUSTER].ddlSensitiveWords,
       dataSource: getMysqlPermissionRules,
-      deleteAccount: deleteMysqlAccount,
       createRuleComponent: MysqlCreateRule,
       buttonController: {
         [ButtonTypes.EDIT_RULE]: true,
@@ -177,7 +174,6 @@
       dbOperations: sqlserverDbOperations,
       ddlSensitiveWords: [],
       dataSource: getSqlserverPermissionRules,
-      deleteAccount: deleteSqlserverAccount,
       createRuleComponent: SqlserverCreateRule,
       buttonController: {
         [ButtonTypes.EDIT_RULE]: false,
@@ -190,11 +186,10 @@
       dbOperations: mongoDbOperations,
       ddlSensitiveWords: [],
       dataSource: getMongodbPermissionRules,
-      deleteAccount: deleteMongodbAccount,
       createRuleComponent: MongoCreateRule,
       buttonController: {
         [ButtonTypes.EDIT_RULE]: false,
-        [ButtonTypes.DELETE_RULE]: false,
+        [ButtonTypes.DELETE_RULE]: true,
       }
     },
   };
@@ -263,6 +258,8 @@
       return acc;
     }, {}));
 
+  const skipApproval = computed(() => props.accountType === AccountTypes.MONGODB);
+
   /**
    * search select 过滤参数
    */
@@ -482,10 +479,10 @@
                     configMap[props.accountType].buttonController[ButtonTypes.DELETE_RULE] &&
                     <bk-pop-confirm
                       width="288"
-                      content={t('删除规则会创建单据，需此规则所有过往调用方审批后才执行删除。')}
+                      content={skipApproval.value ? t('删除规则后将不能恢复，请谨慎操作') : t('删除规则会创建单据，需此规则所有过往调用方审批后才执行删除。')}
                       title={t('确认删除该规则？')}
                       trigger="click"
-                      onConfirm={() => handleShowDeleteRule(data, index)}
+                      onConfirm={() => handleDeleteRule(data, index)}
                     >
                       <bk-button
                         theme="primary"
@@ -508,14 +505,28 @@
   /**
    * 规则变更走单据
    */
-   const { run: createTicketRun } = useRequest(createTicket, {
+  const { run: createTicketRun } = useRequest(createTicket, {
     manual: true,
     onSuccess(data) {
       ticketMessage(data.id);
       fetchData();
     },
   })
 
+  /**
+   * 删除规则（不走审批）
+   */
+  const { run: deleteAccountRuleRun } = useRequest(deleteMongodbAccountRule, {
+    manual: true,
+    onSuccess() {
+      Message({
+        message: t('删除成功'),
+        theme: 'success',
+      });
+      fetchData();
+    },
+  })
+
   // 设置行样式
   const setRowClass = (row: PermissionRule) => (isNewUser(row) ? 'is-new' : '');
 
@@ -577,13 +588,19 @@
    * 删除账号
    */
   const handleDeleteAccount = (row: PermissionRule) => {
+    const apiMap = {
+      [AccountTypes.MYSQL]: deleteMysqlAccount,
+      [AccountTypes.TENDBCLUSTER]: deleteMysqlAccount,
+      [AccountTypes.SQLSERVER]: deleteSqlserverAccount,
+      [AccountTypes.MONGODB]: deleteMongodbAccount,
+    }
     InfoBox({
       type: 'warning',
       title: t('确认删除该账号'),
       content: t('即将删除账号xx_删除后将不能恢复', { name: row.account.user }),
       onConfirm: async () => {
         try {
-          await configMap[props.accountType].deleteAccount({
+          await apiMap[props.accountType]({
             bizId: window.PROJECT_CONFIG.BIZ_ID,
             account_id: row.account.account_id,
             account_type: props.accountType,
@@ -636,7 +653,15 @@
   /**
    * 删除规则
    */
-  const handleShowDeleteRule = (row: PermissionRule, index: number) => {
+  const handleDeleteRule = (row: PermissionRule, index: number) => {
+    if (skipApproval.value) {
+      deleteAccountRuleRun({
+        account_id: row.account.account_id,
+        account_type: props.accountType,
+        rule_id: row.rules[index].rule_id,
+      });
+      return;
+    }
     const ticketTypeMap = {
       [AccountTypes.MYSQL]: TicketTypes.MYSQL_ACCOUNT_RULE_CHANGE,
       [AccountTypes.TENDBCLUSTER]: TicketTypes.TENDBCLUSTER_ACCOUNT_RULE_CHANGE,

dbm-ui/frontend/src/views/db-manage/common/permission/components/common/AccountCreate.vue

@@ -24,7 +24,6 @@
     <BkForm
       v-if="isShow"
       ref="accountRef"
-      class="mb-36"
       form-type="vertical"
       :model="state.formdata"
       :rules="rules">
@@ -43,10 +42,10 @@
           :maxlength="32"
           :placeholder="userPlaceholder"
           show-word-limit />
-        <p style="color: #ff9c01">
-          {{ t('账号创建后，不支持修改。') }}
-        </p>
       </BkFormItem>
+      <div class="account-dialog-explain">
+        {{ t('账号创建后，不支持修改。') }}
+      </div>
       <BkFormItem
         :label="t('密码')"
         property="password"
@@ -56,22 +55,22 @@
           v-model="state.formdata.password"
           :db-type="dbTypeMap[accountType]"
           @verify-result="verifyResult" />
-        <p style="color: #ff9c01">
-          {{ t('平台不会保存密码，请自行保管好。') }}
-          <BkButton
-            v-bk-tooltips="{
-              content: t('请设置密码'),
-              disabled: state.formdata.password,
-            }"
-            class="copy-password-button"
-            :disabled="!state.formdata.password"
-            text
-            theme="primary"
-            @click="handleCopyPassword">
-            {{ t('复制密码') }}
-          </BkButton>
-        </p>
       </BkFormItem>
+      <div class="account-dialog-explain">
+        {{ t('平台不会保存密码，请自行保管好。') }}
+        <BkButton
+          v-bk-tooltips="{
+            content: t('请设置密码'),
+            disabled: state.formdata.password,
+          }"
+          class="copy-password-button"
+          :disabled="!state.formdata.password"
+          text
+          theme="primary"
+          @click="handleCopyPassword">
+          {{ t('复制密码') }}
+        </BkButton>
+      </div>
     </BkForm>
     <template #footer>
       <BkButton
@@ -165,19 +164,24 @@
   const rules = computed(() => ({
     user: [
       {
-        trigger: 'change',
+        trigger: 'blur',
+        message: t('账户名不能为空'),
+        validator: (value: string) => !!value,
+      },
+      {
+        trigger: 'blur',
         message: defaultUserPlaceholder,
         validator: (value: string) => /^[a-zA-Z0-9][a-zA-Z0-9_.-]{0,31}$/g.test(value),
       },
       props.accountType === AccountTypes.MONGODB
         ? {
-            trigger: 'change',
+            trigger: 'blur',
             message: userPlaceholder.value,
             validator: (value: string) => /^([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+)$/g.test(value),
           }
         : {},
       {
-        trigger: 'change',
+        trigger: 'blur',
         validator: (value: string) => {
           const specialAccountMap = {
             [AccountTypes.MYSQL]: MysqlConfig[AccountTypes.MYSQL].special_account,
@@ -257,3 +261,22 @@
     state.formdata.user = '';
   };
 </script>
+
+<style lang="less" scoped>
+  .account-dialog {
+    :deep(.bk-form-item) {
+      margin-bottom: 0;
+    }
+
+    :deep(.is-error) {
+      margin-bottom: 18px;
+    }
+
+    .account-dialog-explain {
+      padding-top: 4px;
+      margin-bottom: 16px;
+      font-size: 12px;
+      color: #ff9c01;
+    }
+  }
+</style>