[master] refactor: the WebSocket logic in the details page of the exp…

…ansion center (#4429) * feat: enhance ExtensionsManagementDetail with improved install plan handling and state management Signed-off-by: donniean <[email protected]> * refactor: optimize install plan handling and reduce debounce wait time Signed-off-by: donniean <[email protected]> * refactor: remove unused resourceVersion from onSuccess callback in ExtensionsManagementDetail Signed-off-by: donniean <[email protected]> * feat: add console log for formattedInstallPlan statusState in ExtensionsManagementDetail Signed-off-by: donniean <[email protected]> * refactor: use useRef for formattedInstallPlan to maintain current statusState in ExtensionsManagementDetail Signed-off-by: donniean <[email protected]> * refactor: remove unused FormattedInstallPlan type import in ExtensionsManagementDetail Signed-off-by: donniean <[email protected]> * refactor: update debounce wait time to 1000ms and enhance status state handling in ExtensionsManagementDetail Signed-off-by: donniean <[email protected]> * refactor: remove unused ExtensionStatusState import and simplify status state check in ExtensionsManagementDetail Signed-off-by: donniean <[email protected]> * refactor: remove useless useWatchExtension Signed-off-by: donniean <[email protected]> * refactor: remove unnecessary blank lines in ExtensionsManagementDetail Signed-off-by: donniean <[email protected]> --------- Signed-off-by: donniean <[email protected]> Co-authored-by: donniean <[email protected]>
kubesphere · Jan 14, 2025 · 80b1af0 · 80b1af0
1 parent 35c2590
commit 80b1af0
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 30 deletions.
diff --git a/packages/core/src/containers/Extensions/Management/Detail/index.tsx b/packages/core/src/containers/Extensions/Management/Detail/index.tsx
@@ -3,20 +3,20 @@
  * https://github.com/kubesphere/console/blob/master/LICENSE
  */
 
-import React from 'react';
+import React, { useRef, useMemo } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { debounce } from 'lodash';
 import { Success } from '@kubed/icons';
 import type { DescriptionsProps } from '@kubed/components';
 import { StatusDot } from '@kubed/components';
 
 import { EXTENSIONS_PAGE_PATHS } from '../../../../constants/extension';
+import type { UseWatchInstallPlanOptions } from '../../../../stores/extension';
 import {
   useExtensionQuery,
   useExtensionVersionQuery,
   useInstallPlanQuery,
   useWatchInstallPlan,
-  useWatchExtension,
 } from '../../../../stores/extension';
 import { getExtensionBasicInfo } from '../../utils/extension';
 import { ExtensionDetail } from '../../components/ExtensionDetail';
@@ -30,9 +30,16 @@ import { DetailActionButtons } from '../components/DetailActionButtons';
 import { InstalledVersionWrapper } from './styles';
 import { useMarketplaceConfigQuery } from '../../../../stores/marketplace';
 
+type PartialUseWatchInstallPlanOptions = Pick<UseWatchInstallPlanOptions, 'enabled' | 'params'>;
+
 export function ExtensionsManagementDetail() {
   const navigate = useNavigate();
   const { name: extensionName = '', version: pathVersion } = useParams();
+
+  const currentUseWatchInstallPlanOptionsRef = useRef<PartialUseWatchInstallPlanOptions | null>(
+    null,
+  );
+
   const {
     getLocalExtensionStatusItem,
     setLocalExtensionStatusItem,
@@ -62,6 +69,7 @@ export function ExtensionsManagementDetail() {
   };
 
   const {
+    isFetched: isExtensionQueryFetched,
     isLoading: isExtensionQueryLoading,
     formattedExtension,
     refetch: refetchExtension,
@@ -77,14 +85,14 @@ export function ExtensionsManagementDetail() {
       }
     },
   });
+
   const displayVersion = formattedExtension?.displayVersion ?? '';
   const plannedInstallVersion = formattedExtension?.plannedInstallVersion;
   const installedVersion = formattedExtension?.installedVersion ?? '';
   const isInstalled = formattedExtension?.isInstalled;
   const isUpgrading = formattedExtension?.isUpgrading;
   const isUninstalling = formattedExtension?.isUninstalling;
   const isEnabled = formattedExtension?.isEnabled;
-  const extensionResourceVersion = formattedExtension?.resourceVersion;
 
   const enabledInstalledExtensionVersionQuery = Boolean(
     extensionName && installedVersion && (isUpgrading || isUninstalling || isInstalled),
@@ -99,7 +107,11 @@ export function ExtensionsManagementDetail() {
     !!formattedInstalledExtensionVersion?.isMultiClusterInstallation;
 
   const enabledInstallPlanQuery = Boolean(extensionName && plannedInstallVersion);
-  const { formattedInstallPlan, refetch: refetchInstallPlan } = useInstallPlanQuery({
+  const {
+    isFetched: isInstallPlanQueryFetched,
+    formattedInstallPlan,
+    refetch: refetchInstallPlan,
+  } = useInstallPlanQuery({
     enabled: enabledInstallPlanQuery,
     extensionName,
     isIgnoreErrorNotify: true,
@@ -113,40 +125,56 @@ export function ExtensionsManagementDetail() {
       }
     },
   });
-  const installPlanResourceVersion = formattedInstallPlan?.resourceVersion;
+  const formattedInstallPlanRef = useRef(formattedInstallPlan);
+  formattedInstallPlanRef.current = formattedInstallPlan;
 
   const debouncedRefetchExtension = debounce(refetchExtension, DEBOUNCE_WAIT);
-  useWatchExtension({
-    enabled: !!extensionResourceVersion,
+  const debouncedRefetchInstallPlan = debounce(refetchInstallPlan, DEBOUNCE_WAIT);
+  const partialUseWatchInstallPlanOptions: PartialUseWatchInstallPlanOptions = useMemo(() => {
+    if (currentUseWatchInstallPlanOptionsRef.current?.enabled) {
+      return currentUseWatchInstallPlanOptionsRef.current;
+    }
+
+    if (!isExtensionQueryFetched) {
+      return { enabled: false };
+    }
+
+    if (!enabledInstallPlanQuery) {
+      return { enabled: true };
+    }
+
+    if (!isInstallPlanQueryFetched) {
+      return { enabled: false };
+    }
+
+    return { enabled: true, params: { resourceVersion: formattedInstallPlan?.resourceVersion } };
+  }, [
+    isExtensionQueryFetched,
+    enabledInstallPlanQuery,
+    isInstallPlanQueryFetched,
+    formattedInstallPlan?.resourceVersion,
+  ]);
+  currentUseWatchInstallPlanOptionsRef.current = partialUseWatchInstallPlanOptions;
+  useWatchInstallPlan({
+    ...partialUseWatchInstallPlanOptions,
     extensionName,
-    params: {
-      resourceVersion: extensionResourceVersion,
-    },
     onMessage: data => {
       debouncedRefetchExtension();
+      debouncedRefetchInstallPlan();
+
       const { formattedItem } = data.message;
-      if (formattedItem) {
-        if (formattedItem.statusState !== formattedExtension?.statusState) {
-          handleInstalled(formattedItem);
-        }
-        handleUninstalled(formattedItem);
+
+      if (!formattedItem) {
+        return;
       }
-    },
-  });
 
-  const debouncedRefetchInstallPlan = debounce(refetchInstallPlan, DEBOUNCE_WAIT);
-  useWatchInstallPlan({
-    enabled: enabledInstallPlanQuery,
-    extensionName,
-    params: installPlanResourceVersion
-      ? {
-          resourceVersion: installPlanResourceVersion,
-        }
-      : null,
-    onMessage: data => {
-      const { formattedItem } = data.message;
-      if (formattedItem) {
-        debouncedRefetchInstallPlan();
+      const currentStatusState = formattedItem.statusState;
+      if (currentStatusState !== formattedInstallPlanRef.current?.statusState) {
+        const localeDisplayName = formattedExtension?.localeDisplayName ?? t('EXTENSION');
+        const statusState = formattedItem.statusState;
+        const options = { localeDisplayName, statusState };
+        handleInstalled(options);
+        handleUninstalled(options);
       }
     },
   });

diff --git a/packages/core/src/stores/extension.ts b/packages/core/src/stores/extension.ts
@@ -1094,6 +1094,7 @@ export type {
   FormattedExtensionVersion,
   FormattedExtensionVersionFile,
   FormattedInstallPlan,
+  UseWatchInstallPlanOptions,
 };
 export {
   formatStatusState,