feat: update devbox network status (#5452)

* feat: update launchpad network

* launchpad check

* update devbox network status

* delete log

* log

* fix default

* update time

* update message

Author: zjy365

frontend/providers/applaunchpad/src/api/platform.ts

@@ -38,3 +38,6 @@ export const getPriceBonus = () =>
 
 export const checkPermission = (payload: { appName: string }) =>
   GET('/api/platform/checkPermission', payload);
+
+export const checkReady = (appName: string) =>
+  GET<{ url: string; ready: boolean; error?: string }[]>(`/api/checkReady?appName=${appName}`);

frontend/providers/applaunchpad/src/components/app/detail/index/AppMainInfo.tsx

@@ -11,9 +11,10 @@ import { getUserNamespace } from '@/utils/user';
 import { Box, Button, Center, Flex, Grid, Text, useDisclosure } from '@chakra-ui/react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'next-i18next';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import MonitorModal from './MonitorModal';
-import { useNetworkStatus } from '@/hooks/useNetworkStatus';
+import { useQuery } from '@tanstack/react-query';
+import { checkReady } from '@/api/platform';
 
 const AppMainInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
   const { t } = useTranslation();
@@ -34,17 +35,42 @@ const AppMainInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
       })),
     [app]
   );
-  const networkStatuses = useNetworkStatus(networks);
+
+  const retryCount = useRef(0);
+  const { data: networkStatus, refetch } = useQuery({
+    queryKey: ['networkStatus', app.appName],
+    queryFn: () => checkReady(app.appName),
+    retry: 5,
+    retryDelay: (attemptIndex) => Math.min(1000 * Math.pow(2, attemptIndex), 30000),
+    onSuccess: (data) => {
+      const hasUnready = data.some((item) => !item.ready);
+      if (!hasUnready) {
+        retryCount.current = 0;
+        return;
+      }
+      if (retryCount.current < 14) {
+        const delay = Math.min(1000 * Math.pow(2, retryCount.current), 32000);
+        retryCount.current += 1;
+        setTimeout(() => {
+          refetch();
+        }, delay);
+      }
+    },
+    refetchIntervalInBackground: false,
+    staleTime: 1000 * 60 * 5
+  });
 
   const statusMap = useMemo(
     () =>
-      networkStatuses.reduce((acc, status) => {
-        if (status.data?.url) {
-          acc[status.data.url] = status.data;
-        }
-        return acc;
-      }, {} as Record<string, { isReady?: boolean; error?: string }>),
-    [networkStatuses]
+      networkStatus
+        ? networkStatus.reduce((acc, item) => {
+            if (item?.url) {
+              acc[item.url] = item;
+            }
+            return acc;
+          }, {} as Record<string, { ready: boolean; url: string }>)
+        : {},
+    [networkStatus]
   );
 
   return (
@@ -123,17 +149,17 @@ const AppMainInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
                       </Flex>
                     </th>
                     <th>
-                      <Flex alignItems={'center'} gap={'2px'} justifyContent={'space-between'}>
+                      <Flex alignItems={'center'} gap={'2px'}>
                         {network.public && (
                           <>
-                            {statusMap[network.public]?.isReady ? (
+                            {statusMap[network.public]?.ready ? (
                               <Center
                                 fontSize={'12px'}
                                 fontWeight={400}
                                 bg={'rgba(3, 152, 85, 0.05)'}
                                 color={'#039855'}
                                 borderRadius={'full'}
-                                p={'2px 4px'}
+                                p={'2px 8px 2px 4px'}
                                 gap={'2px'}
                                 minW={'63px'}
                               >
@@ -152,7 +178,7 @@ const AppMainInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
                                 bg={'rgba(17, 24, 36, 0.05)'}
                                 color={'#485264'}
                                 borderRadius={'full'}
-                                p={'2px 4px'}
+                                p={'2px 8px 2px 4px'}
                                 gap={'2px'}
                                 minW={'63px'}
                               >
@@ -200,6 +226,7 @@ const AppMainInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
 
                         {!!network.public && (
                           <Center
+                            ml={'auto'}
                             flexShrink={0}
                             w={'24px'}
                             h={'24px'}

frontend/providers/applaunchpad/src/hooks/useNetworkStatus.ts

@@ -0,0 +1,80 @@
+import { appDeployKey, ProtocolList } from '@/constants/app';
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+import { ProtocolType } from '@/types/app';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const { appName } = req.query as { appName: string };
+    const port = global.AppConfig.cloud.port;
+    if (!appName) {
+      throw new Error('appName is empty');
+    }
+
+    const { k8sNetworkingApp, namespace } = await getK8s({
+      kubeconfig: await authSession(req.headers)
+    });
+
+    const ingress = await k8sNetworkingApp.listNamespacedIngress(
+      namespace,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      `${appDeployKey}=${appName}`
+    );
+
+    if (!ingress.body.items || ingress.body.items.length === 0) {
+      throw new Error('No ingress found');
+    }
+
+    const checkResults = await Promise.all(
+      ingress.body.items.map(async (item) => {
+        if (!item.spec?.rules?.[0]) {
+          return { ready: false, url: '/', error: 'Invalid ingress configuration' };
+        }
+
+        const rule = item.spec.rules[0];
+        const host = rule.host;
+        const backendProtocol = item?.metadata?.annotations?.[
+          'nginx.ingress.kubernetes.io/backend-protocol'
+        ] as ProtocolType;
+
+        const fetchUrl = `http://${host}`;
+        const protocol =
+          ProtocolList.find((item) => item.value === backendProtocol)?.label || 'https://';
+        const url = `${protocol}${host}${port ? `${port}` : ''}`;
+
+        try {
+          const response = await fetch(fetchUrl);
+
+          if (response.status === 503) {
+            return { ready: false, url, error: 'Service Unavailable (503)' };
+          }
+
+          const text = await response.text();
+          if (text.includes('upstream not health')) {
+            return { ready: false, url, error: 'Upstream not healthy' };
+          }
+
+          return { ready: true, url };
+        } catch (error) {
+          return { ready: false, url, error: 'fetch error' };
+        }
+      })
+    );
+
+    return jsonRes(res, {
+      code: 200,
+      data: checkResults
+    });
+  } catch (error: any) {
+    console.error(error);
+    return jsonRes(res, {
+      code: 500,
+      error: error?.message
+    });
+  }
+}

frontend/providers/applaunchpad/src/pages/api/check-ready.ts

@@ -25,3 +25,8 @@ export const checkUserTask = () =>
   POST('/api/guide/checkTask', {
     desktopToAppToken: getDesktopSessionFromSessionStorage()?.token
   });
+
+export const checkReady = (devboxName: string) =>
+  GET<{ url: string; ready: boolean; error?: string }[]>(
+    `/api/checkReady?devboxName=${devboxName}`
+  );