fix: devboxList monitor show bug (#5374)

* fix: bug

* style: z-index bug

* fix: retry monitor data

frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxListContainer.tsx

@@ -5,31 +5,38 @@ import { useTemplateStore } from '@/stores/template';
 import { DevboxListItemTypeV2 } from '@/types/devbox';
 import { isElementInViewport } from '@/utils/tools';
 import { Flex, FlexProps } from '@chakra-ui/react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useRouter } from '@/i18n';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import DevboxHeader from './DevboxHeader';
 import DevboxList from './DevboxList';
 import Empty from './Empty';
 import useListDriver from '@/hooks/useListDriver';
 
 function useDevboxList() {
-  const queryClient = useQueryClient();
   const router = useRouter();
-  const { devboxList, setDevboxList, loadAvgMonitorData, intervalLoadPods } = useDevboxStore();
+  const [refresh, setFresh] = useState(false);
   const { isOpen: templateIsOpen } = useTemplateStore();
+  const { devboxList, setDevboxList, loadAvgMonitorData, intervalLoadPods } = useDevboxStore();
   const list = useRef<DevboxListItemTypeV2[]>(devboxList);
 
   const { isLoading, refetch: refetchDevboxList } = useQuery(['devboxListQuery'], setDevboxList, {
     onSettled(res) {
       if (!res) return;
-      // refreshList(res)
-      list.current = res;
+      refreshList(res);
     },
-    refetchInterval: !templateIsOpen ? 3000 : false,
-    staleTime: 3000,
     enabled: !templateIsOpen
   });
+
+  const refreshList = useCallback(
+    (res = devboxList) => {
+      list.current = res;
+      setFresh((state) => !state);
+      return null;
+    },
+    [devboxList]
+  );
+
   const getViewportDevboxes = (minCount = 3) => {
     const doms = document.querySelectorAll('.devboxListItem');
     const viewportDomIds = Array.from(doms)
@@ -40,6 +47,7 @@ function useDevboxList() {
       ? devboxList
       : devboxList.filter((devbox) => viewportDomIds.includes(devbox.id));
   };
+
   useQuery(
     ['intervalLoadPods', devboxList.length],
     () => {
@@ -51,12 +59,25 @@ function useDevboxList() {
     {
       refetchOnMount: true,
       refetchInterval: !templateIsOpen ? 3000 : false,
-      staleTime: 3000,
-      enabled: !isLoading && !templateIsOpen
+      enabled: !isLoading && !templateIsOpen,
+      onSettled() {
+        refreshList();
+      }
     }
   );
 
   useQuery(
+    ['refresh'],
+    () => {
+      refreshList();
+      return null;
+    },
+    {
+      refetchInterval: 3000
+    }
+  );
+
+  const { refetch: refetchAvgMonitorData } = useQuery(
     ['loadAvgMonitorData', devboxList.length],
     () => {
       const viewportDevboxList = getViewportDevboxes();
@@ -65,11 +86,15 @@ function useDevboxList() {
         .map((devbox) => loadAvgMonitorData(devbox.name));
     },
     {
+      refetchOnMount: true,
       refetchInterval: !templateIsOpen ? 2 * 60 * 1000 : false,
-      staleTime: 2 * 60 * 1000,
-      enabled: !isLoading && !templateIsOpen
+      enabled: !isLoading && !templateIsOpen,
+      onSettled() {
+        refreshList();
+      }
     }
   );
+
   // 路由预加载
   useEffect(() => {
     router.prefetch('/devbox/detail');
@@ -79,9 +104,23 @@ function useDevboxList() {
   return {
     list: list.current,
     isLoading,
-    refetchList: useCallback(() => {
-      queryClient.invalidateQueries(['devboxListQuery']);
-    }, [queryClient])
+    refetchList: () => {
+      refetchDevboxList();
+
+      // retry 3 times to fetch monitor data,because refetchDevboxList and then refetchAvgMonitorData immediately will cause monitor data be covered (devboxList refetch 3s once).
+      // And monitor 2min to refetch normally,but there we retry 3 times once.
+      const retryFetch = async (retryCount = 3, delay = 10 * 1000) => {
+        console.log('retry');
+        await refetchAvgMonitorData();
+
+        if (retryCount > 0) {
+          await new Promise((resolve) => setTimeout(resolve, delay));
+          await retryFetch(retryCount - 1, delay);
+        }
+      };
+
+      retryFetch();
+    }
   };
 }
 

frontend/providers/devbox/components/PodLineChart.tsx

@@ -168,6 +168,7 @@ const PodLineChart = ({
       axisPointer: {
         type: 'line'
       },
+      appendToBody: true,
       formatter: (params: any[]) => {
         const axisValue = params[0]?.axisValue;
         return `${axisValue} ${params[0]?.value || 0}%`;