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

# Reviewed, transaction id: 23353

Author: JustaCattt

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

@@ -40,37 +40,38 @@ interface AdminPasswordResultItem {
   }[];
 }
 
+const path = '/apis/conf/password_policy';
+
 /**
  * 查询密码安全策略
  */
 export const getPasswordPolicy = (params: { name: string }) =>
-  http.get<PasswordPolicy>('/apis/conf/password_policy/get_password_policy/', params);
+  http.get<PasswordPolicy>(`${path}/get_password_policy/`, params);
 
 /**
  * 更新密码安全策略
  */
 export const updatePasswordPolicy = (params: PasswordPolicy & { reset: boolean }) =>
-  http.post('/apis/conf/password_policy/update_password_policy/', params);
+  http.post(`${path}/update_password_policy/`, params);
 
 /**
  * 查询随机化周期
  */
 export const queryRandomCycle = (params = {}, payload = {} as IRequestPayload) =>
-  http.get<RamdomCycle>('/apis/conf/password_policy/query_random_cycle/', params, payload);
+  http.get<RamdomCycle>(`${path}/query_random_cycle/`, params, payload);
 
 /**
  * 更新随机化周期
  */
-export const modifyRandomCycle = (params: RamdomCycle) =>
-  http.post('/apis/conf/password_policy/modify_random_cycle/', params);
+export const modifyRandomCycle = (params: RamdomCycle) => http.post(`${path}/modify_random_cycle/`, params);
 
 /**
  * 获取符合密码强度的字符串
  */
 export const getRandomPassword = (params?: { security_type: string }) =>
   http.get<{
     password: string;
-  }>('/apis/conf/password_policy/get_random_password/', params);
+  }>(`${path}/get_random_password/`, params);
 
 /**
  * 修改实例密码(admin)
@@ -85,11 +86,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
+  >(`${path}/modify_admin_password/`, params);
 
 /**
  * 查询生效实例密码(admin)
@@ -102,11 +108,23 @@ export const queryAdminPassword = (params: {
   instances?: string;
   db_type?: DBTypes;
 }) =>
-  http.post<ListBase<AdminPasswordModel[]>>('/apis/conf/password_policy/query_admin_password/', params).then((res) => ({
+  http.post<ListBase<AdminPasswordModel[]>>(`${path}/query_admin_password/`, params).then((res) => ({
     ...res,
     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;
+  }>(`${path}/query_async_modify_result/`, params);
+
 /**
  * 获取公钥列表
  */
@@ -123,4 +141,4 @@ export const getRSAPublicKeys = (params: { names: string[] }) =>
  * 校验密码强度
  */
 export const verifyPasswordStrength = (params: { security_type: string; password: string }) =>
-  http.post<PasswordStrength>('/apis/conf/password_policy/verify_password_strength/', params);
+  http.post<PasswordStrength>(`${path}/verify_password_strength/`, params);

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();
   });

dbm-ui/frontend/src/views/temporary-paassword-modify/index/Index.vue

@@ -14,25 +14,50 @@
 <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="isActive"
+          class="submitting-mask">
+          <DbIcon
+            class="submitting-icon"
+            svg
+            type="sync-pending" />
+          <p class="submitting-text mt16">
+            {{ t('密码正在修改中，请稍等') }}
+          </p>
+          <RouterLink
+            class="mt16 mb16"
+            target="_blank"
+            :to="{
+              name: 'taskHistoryDetail',
+              params: {
+                root_id: rootId,
+              },
+            }">
+            {{ t('查看详情') }}
+          </RouterLink>
+        </div>
+        <UpdateResult
+          v-else
+          :password="formData.password"
+          :submit-length="submitLength"
+          :submit-res="modifyResult"
+          :submit-role-map="submitRoleMap"
+          @refresh="handleRefresh"
+          @retry="handleSubmit">
+          <RouterLink
+            class="mt16 mb16"
+            target="_blank"
+            :to="{
+              name: 'taskHistoryDetail',
+              params: {
+                root_id: rootId,
+              },
+            }">
+            {{ t('查看详情') }}
+          </RouterLink>
+        </UpdateResult>
+      </template>
       <DbForm
         v-else
         ref="formRef"
@@ -81,17 +106,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 +159,48 @@
     },
   );
 
-  const {
-    loading: submitting,
-    run: modifyAdminPasswordRun,
-    data: submitRes,
-  } = useRequest(modifyAdminPassword, {
+  const rootId = ref('');
+  const modifyResult = ref<ModifyAdminPassword>('');
+
+  // 轮询
+  const { isActive, resume, pause } = useTimeoutPoll(() => {
+    queryAsyncModifyResultRun({
+      root_id: rootId.value,
+    });
+  }, 2000);
+
+  const { run: queryAsyncModifyResultRun } = useRequest(queryAsyncModifyResult, {
     manual: true,
-    onSuccess() {
+    onSuccess({ data, status }) {
+      /**
+       * 设置轮询
+       * FINISHED: 完成态
+       * FAILED: 失败态
+       * REVOKED: 取消态
+       */
+      if (['FINISHED', 'FAILED', 'REVOKED'].includes(status)) {
+        modifyResult.value = data;
+        pause();
+      } else if (!isActive.value) {
+        resume();
+      }
+    },
+  });
+
+  const { run: modifyAdminPasswordRun, loading: submitting } = useRequest(modifyAdminPassword, {
+    manual: true,
+    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 +237,7 @@
       lock_hour: lockHour,
       password: formData.password,
       instance_list: instanceListParam,
+      is_async: true,
     };
 
     submitLength.value = instanceListParam.length;
@@ -198,6 +253,10 @@
     handleReset();
     submitted.value = false;
   };
+
+  onBeforeUnmount(() => {
+    pause();
+  });
 </script>
 
 <style lang="less" scoped>
@@ -207,8 +266,10 @@
     border-radius: 2px;
 
     .submitting-mask {
+      display: flex;
       padding: 90px 0 138px;
-      text-align: center;
+      flex-direction: column;
+      align-items: center;
 
       .submitting-icon {
         font-size: 64px;
@@ -217,7 +278,6 @@
       }
 
       .submitting-text {
-        margin-top: 36px;
         font-size: 24px;
         color: #313238;
       }

dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/UpdateResult.vue

@@ -23,6 +23,7 @@
         <span class="title-error">{{ errorListLength }}</span>
       </I18nT>
     </template>
+    <slot />
     <div class="password-display">
       {{ t('当前密码') }} : {{ passwordDisplay }}
       <BkButton