feat(frontend): 临时密码异步修改 TencentBlueKing#7031

# Reviewed, transaction id: 22961
JustaCattt · Nov 6, 2024 · bd13ea2 · bd13ea2
1 parent 59806a4
commit bd13ea2
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 45 deletions.
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3630,5 +3630,6 @@
   "请按行输入IP，每行代表一个单元格的值。多个IP用逗号、空格、｜分隔": "请按行输入IP，每行代表一个单元格的值。多个IP用逗号、空格、｜分隔",
   "无只读主机": "无只读主机",
   "批量录入：按行录入，快速批量输入多个单元格的值": "批量录入：按行录入，快速批量输入多个单元格的值",
+  "指定特殊字符(s)": "指定特殊字符(s)",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/source/permission.ts b/dbm-ui/frontend/src/services/source/permission.ts
@@ -85,11 +85,16 @@ export const modifyAdminPassword = (params: {
     cluster_type: ClusterTypes;
     role: string;
   }[];
+  // 是否异步
+  is_async?: boolean;
 }) =>
-  http.post<{
-    success: AdminPasswordResultItem[] | null;
-    fail: AdminPasswordResultItem[] | null;
-  }>('/apis/conf/password_policy/modify_admin_password/', params);
+  http.post<
+    | {
+        success: AdminPasswordResultItem[] | null;
+        fail: AdminPasswordResultItem[] | null;
+      }
+    | string // 异步修改时返回root_id
+  >('/apis/conf/password_policy/modify_admin_password/', params);
 
 /**
  * 查询生效实例密码(admin)
@@ -107,6 +112,18 @@ export const queryAdminPassword = (params: {
     results: res.results.map((item) => new AdminPasswordModel(item)),
   }));
 
+/**
+ * 查询异步密码修改执行结果
+ */
+export const queryAsyncModifyResult = (params: { root_id: string }) =>
+  http.post<{
+    data: {
+      success: AdminPasswordResultItem[] | null;
+      fail: AdminPasswordResultItem[] | null;
+    };
+    status: string;
+  }>('/apis/conf/password_policy/query_async_modify_result/', params);
+
 /**
  * 获取公钥列表
  */

diff --git a/dbm-ui/frontend/src/views/db-manage/common/password-input/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/password-input/Index.vue
@@ -127,8 +127,8 @@
     },
   });
 
-  const { run: getPasswordPolicyRun } = useRequest(getPasswordPolicy, {
-    manual: true,
+  useRequest(getPasswordPolicy, {
+    defaultParams: [{ name: passwordParam.value }],
     onSuccess(data) {
       const {
         min_length: minLength,
@@ -198,6 +198,13 @@
     },
   });
 
+  watch(
+    () => props.dbType,
+    () => {
+      modelValue.value = '';
+    },
+  );
+
   /**
    * 获取加密密码
    */
@@ -287,18 +294,6 @@
     tippyInstance.hide();
   };
 
-  watch(modelValue, () => {
-    if (modelValue.value) {
-      debounceVerifyPassword();
-    }
-  });
-
-  onMounted(() => {
-    getPasswordPolicyRun({
-      name: passwordParam.value,
-    });
-  });
-
   onUnmounted(() => {
     tippyInstance.destroy();
   });

diff --git a/dbm-ui/frontend/src/views/temporary-paassword-modify/index/Index.vue b/dbm-ui/frontend/src/views/temporary-paassword-modify/index/Index.vue
@@ -14,25 +14,27 @@
 <template>
   <SmartAction :offset-target="getSmartActionOffsetTarget">
     <div class="password-temporary-modify">
-      <div
-        v-if="submitting"
-        class="submitting-mask">
-        <DbIcon
-          class="submitting-icon"
-          svg
-          type="sync-pending" />
-        <p class="submitting-text">
-          {{ t('密码正在修改中，请稍等') }}
-        </p>
-      </div>
-      <UpdateResult
-        v-else-if="submitted"
-        :password="formData.password"
-        :submit-length="submitLength"
-        :submit-res="submitRes"
-        :submit-role-map="submitRoleMap"
-        @refresh="handleRefresh"
-        @retry="handleSubmit" />
+      <template v-if="submitted">
+        <div
+          v-if="queryLoading"
+          class="submitting-mask">
+          <DbIcon
+            class="submitting-icon"
+            svg
+            type="sync-pending" />
+          <p class="submitting-text">
+            {{ t('密码正在修改中，请稍等') }}
+          </p>
+        </div>
+        <UpdateResult
+          v-else
+          :password="formData.password"
+          :submit-length="submitLength"
+          :submit-res="modifyResult"
+          :submit-role-map="submitRoleMap"
+          @refresh="handleRefresh"
+          @retry="handleSubmit" />
+      </template>
       <DbForm
         v-else
         ref="formRef"
@@ -81,17 +83,21 @@
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
-  import { modifyAdminPassword } from '@services/source/permission';
+  import { modifyAdminPassword, queryAsyncModifyResult } from '@services/source/permission';
 
   import { ClusterTypes, DBTypes } from '@common/const';
 
   import PasswordInput from '@views/db-manage/common/password-input/Index.vue';
 
+  import { useTimeoutPoll } from '@vueuse/core';
+
   import InstanceList from './components/form-item/InstanceList.vue';
   import ValidDuration from './components/form-item/ValidDuration.vue';
   import RenderPasswordInstance from './components/render-passwrod-instance/Index.vue';
   import UpdateResult from './components/UpdateResult.vue';
 
+  type ModifyAdminPassword = ServiceReturnType<typeof modifyAdminPassword>;
+
   const { t } = useI18n();
 
   const createDefaultData = () => ({
@@ -130,23 +136,47 @@
     },
   );
 
-  const {
-    loading: submitting,
-    run: modifyAdminPasswordRun,
-    data: submitRes,
-  } = useRequest(modifyAdminPassword, {
+  const currentScope = getCurrentScope();
+  const rootId = ref('');
+  const modifyResult = ref<ModifyAdminPassword>();
+
+  const { run: queryAsyncModifyResultRun, loading: queryLoading } = useRequest(queryAsyncModifyResult, {
+    manual: true,
+    onSuccess({ data, status }) {
+      modifyResult.value = data;
+      // 设置轮询
+      if (currentScope?.active) {
+        !isActive.value && ['PENDING', 'RUNNING', 'FINISHED'].includes(status) && resume();
+      } else {
+        pause();
+      }
+    },
+    onError() {
+      modifyResult.value = {} as ModifyAdminPassword;
+    },
+  });
+
+  // 轮询
+  const { isActive, resume, pause } = useTimeoutPoll(() => {
+    queryAsyncModifyResultRun({
+      root_id: rootId.value,
+    });
+  }, 10000);
+
+  const { run: modifyAdminPasswordRun, loading: submitting } = useRequest(modifyAdminPassword, {
     manual: true,
-    onSuccess() {
+    onSuccess(data) {
       submitted.value = true;
       window.changeConfirm = false;
+      rootId.value = data as string;
+      resume();
     },
   });
 
   const getSmartActionOffsetTarget = () => document.querySelector('.bk-form-content');
 
   const submitValidator = async () => {
     await formRef.value.validate();
-
     handleSubmit(formData.instanceList);
   };
 
@@ -183,6 +213,7 @@
       lock_hour: lockHour,
       password: formData.password,
       instance_list: instanceListParam,
+      is_async: true,
     };
 
     submitLength.value = instanceListParam.length;