fix: version refresh bug (labring#5284)

* fix: version refresh bug * perf: success and failed all can stop interval refetch * fix: devboxList errror svg * fix: deal refetch bug * fix: error image * fix: next build bug
HUAHUAI23 · Dec 12, 2024 · 35fff27 · 35fff27
1 parent 150f1e1
commit 35fff27
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 4 deletions.
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxList.tsx b/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxList.tsx
@@ -145,6 +145,9 @@ const DevboxList = ({
               height={'20px'}
               alt={item.id}
               src={`/images/${item.runtimeType}.svg`}
+              onError={(e) => {
+                e.currentTarget.src = '/images/custom.svg'
+              }}
             />
             <Box color={'grayModern.900'} fontSize={'md'}>
               {item.name}
@@ -376,6 +379,7 @@ const DevboxList = ({
           devbox={delDevbox}
           onClose={() => setDelDevbox(null)}
           onSuccess={refetchDevboxList}
+          refetchDevboxList={refetchDevboxList}
         />
       )}
       {!!onOpenRelease && !!currentDevboxListItem && (

diff --git a/...tend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/BasicInfo.tsx b/...tend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/BasicInfo.tsx
@@ -77,6 +77,9 @@ const BasicInfo = () => {
               height={'20px'}
               alt={devboxDetail?.runtimeType}
               src={`/images/${devboxDetail?.runtimeType}.svg`}
+              onError={(e) => {
+                e.currentTarget.src = '/images/custom.svg'
+              }}
             />
           </Flex>
         </Flex>

diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Header.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Header.tsx
@@ -15,6 +15,7 @@ import IDEButton from '@/components/IDEButton'
 import DelModal from '@/components/modals/DelModal'
 import DevboxStatusTag from '@/components/DevboxStatusTag'
 import { sealosApp } from 'sealos-desktop-sdk/app'
+import { useQuery } from '@tanstack/react-query'
 
 const Header = ({
   refetchDevboxDetail,
@@ -29,12 +30,18 @@ const Header = ({
   const t = useTranslations()
   const { message: toast } = useMessage()
 
-  const { devboxDetail } = useDevboxStore()
+  const { devboxDetail, setDevboxList } = useDevboxStore()
   const { screenWidth, setLoading } = useGlobalStore()
 
   const [delDevbox, setDelDevbox] = useState<DevboxDetailType | null>(null)
   const isBigButton = useMemo(() => screenWidth > 1000, [screenWidth])
 
+  const { refetch: refetchDevboxList } = useQuery(['devboxListQuery'], setDevboxList, {
+    onSettled(res) {
+      if (!res) return
+    }
+  })
+
   const handlePauseDevbox = useCallback(
     async (devbox: DevboxDetailType) => {
       try {
@@ -276,6 +283,7 @@ const Header = ({
             setDelDevbox(null)
             router.push('/')
           }}
+          refetchDevboxList={refetchDevboxList}
         />
       )}
     </Flex>

diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx
@@ -49,7 +49,7 @@ const Version = () => {
     {
       refetchInterval:
         devboxVersionList.length > 0 &&
-        devboxVersionList[0].status.value !== DevboxReleaseStatusEnum.Success
+        devboxVersionList[0].status.value === DevboxReleaseStatusEnum.Pending
           ? 3000
           : false,
       onSettled() {
@@ -131,6 +131,18 @@ const Version = () => {
           title: t('delete_successful'),
           status: 'success'
         })
+        let retryCount = 0
+        const maxRetries = 3
+        const retryInterval = 3000
+
+        const retry = async () => {
+          if (retryCount < maxRetries) {
+            await new Promise((resolve) => setTimeout(resolve, retryInterval))
+            await refetch()
+            retryCount++
+          }
+        }
+        retry()
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('delete_failed'),
@@ -140,8 +152,9 @@ const Version = () => {
       }
       setIsLoading(false)
     },
-    [setIsLoading, toast, t]
+    [setIsLoading, toast, t, refetch]
   )
+
   const columns: {
     title: string
     dataIndex?: keyof DevboxVersionListItemType

diff --git a/frontend/providers/devbox/components/modals/DelModal.tsx b/frontend/providers/devbox/components/modals/DelModal.tsx
@@ -24,11 +24,13 @@ import { DevboxDetailType, DevboxListItemType } from '@/types/devbox'
 const DelModal = ({
   devbox,
   onClose,
+  refetchDevboxList,
   onSuccess
 }: {
   devbox: DevboxListItemType | DevboxDetailType
   onClose: () => void
   onSuccess: () => void
+  refetchDevboxList: () => void
 }) => {
   const t = useTranslations()
   const { message: toast } = useMessage()
@@ -48,6 +50,19 @@ const DelModal = ({
       })
       onSuccess()
       onClose()
+
+      let retryCount = 0
+      const maxRetries = 3
+      const retryInterval = 3000
+
+      const retry = async () => {
+        if (retryCount < maxRetries) {
+          await new Promise((resolve) => setTimeout(resolve, retryInterval))
+          await refetchDevboxList()
+          retryCount++
+        }
+      }
+      retry()
     } catch (error: any) {
       toast({
         title: typeof error === 'string' ? error : error.message || t('delete_failed'),
@@ -56,7 +71,7 @@ const DelModal = ({
       console.error(error)
     }
     setLoading(false)
-  }, [devbox.name, removeDevboxIDE, toast, t, onSuccess, onClose])
+  }, [devbox.name, removeDevboxIDE, toast, t, onSuccess, onClose, refetchDevboxList])
 
   return (
     <Modal isOpen onClose={onClose} lockFocusAcrossFrames={false} size={'lg'}>