feat:launchpad update container status reason (#4947)

* update container status reason * update color * update uploadConvertData * fix mock app
labring · Aug 7, 2024 · eb83860 · eb83860
1 parent 1fe875a
commit eb83860
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 211 deletions.
diff --git a/docs/website/src/pages/self-hosting/product/index.tsx b/docs/website/src/pages/self-hosting/product/index.tsx
@@ -1,4 +1,3 @@
-import Link from '@docusaurus/Link';
 import useWindow from '@site/src/hooks/useWindow';
 import CheckIcon from '@site/static/price/check.svg';
 import StarIcon from '@site/static/price/star.svg';
@@ -43,7 +42,7 @@ export default function Product() {
       </div>
       <div className="flex justify-center mt-14">
         <div
-          onClick={() => window.open('https://license.sealos.io/')}
+          onClick={() => window.open(`https://license.sealos.io/signin?bd_vid=${bd_vid}`)}
           className="rounded-md cursor-pointer hover:no-underline text-[#FFFFFFCC] hover:text-[#FFFFFFCC] bg-[#B7D8FF26] flex justify-center items-center font-semibold text-lg gap-2 py-3 px-4  lg:text-sm"
         >
           <svg
@@ -90,9 +89,7 @@ export default function Product() {
               backgroundColor: '#8EBAEE',
               color: '#03080C'
             }}
-            onClick={() =>
-              window.open(`https://license.sealos.io/signin?external=true&bd_vid=${bd_vid}`)
-            }
+            onClick={() => window.open(`https://license.sealos.io/signin?bd_vid=${bd_vid}`)}
           >
             获取
           </div>

diff --git a/frontend/providers/applaunchpad/src/mock/apps.ts b/frontend/providers/applaunchpad/src/mock/apps.ts
@@ -196,7 +196,8 @@ export const MOCK_PODS: PodDetailType[] = [
       yData: new Array(30).fill('0')
     },
     cpu: 0,
-    memory: 0
+    memory: 0,
+    containerStatus: podStatusMap.running
   },
   {
     podName: '2',
@@ -216,177 +217,8 @@ export const MOCK_PODS: PodDetailType[] = [
       yData: new Array(30).fill('0')
     },
     cpu: 0,
-    memory: 0
-  },
-  {
-    podName: '3',
-    nodeName: 'dafda-fasd-fas',
-    ip: '311.241.41.41',
-    restarts: 10,
-    age: '22',
-    status: podStatusMap.running,
-    usedCpu: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    usedMemory: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    cpu: 0,
-    memory: 0
-  },
-
-  {
-    podName: '4',
-    nodeName: 'dafda-fasd-fas',
-    ip: '311.241.41.41',
-    restarts: 10,
-    age: '22',
-    status: podStatusMap.running,
-    usedCpu: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    usedMemory: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    cpu: 0,
-    memory: 0
-  },
-
-  {
-    podName: '5',
-
-    nodeName: 'dafda-fasd-fas',
-    ip: '311.241.41.41',
-    restarts: 10,
-    age: '22',
-    status: podStatusMap.running,
-    usedCpu: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    usedMemory: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    cpu: 0,
-    memory: 0
-  },
-  {
-    podName: '6',
-
-    nodeName: 'dafda-fasd-fas',
-    ip: '311.241.41.41',
-    restarts: 10,
-    age: '22',
-    status: podStatusMap.running,
-    usedCpu: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    usedMemory: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    cpu: 0,
-    memory: 0
-  },
-  {
-    podName: '7',
-
-    nodeName: 'dafda-fasd-fas',
-    ip: '311.241.41.41',
-    restarts: 10,
-    age: '22',
-    status: podStatusMap.running,
-    usedCpu: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    usedMemory: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    cpu: 0,
-    memory: 0
-  },
-  {
-    podName: '8',
-
-    nodeName: 'dafda-fasd-fas',
-    ip: '311.241.41.41',
-    restarts: 10,
-    age: '22',
-    status: podStatusMap.running,
-    usedCpu: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    usedMemory: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    cpu: 0,
-    memory: 0
-  },
-
-  {
-    podName: '9',
-
-    nodeName: 'dafda-fasd-fas',
-    ip: '311.241.41.41',
-    restarts: 10,
-    age: '22',
-    status: podStatusMap.running,
-    usedCpu: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    usedMemory: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    cpu: 0,
-    memory: 0
-  },
-
-  {
-    podName: 'dafsdd2sgsd6gsdg',
-
-    nodeName: 'dafda-fasd-fas',
-    ip: '311.241.41.41',
-    restarts: 10,
-    age: '22',
-    status: podStatusMap.running,
-    usedCpu: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    usedMemory: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    cpu: 0,
-    memory: 0
+    memory: 0,
+    containerStatus: podStatusMap.running
   }
 ];
 

diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/Pods.tsx b/frontend/providers/applaunchpad/src/pages/app/detail/components/Pods.tsx
@@ -98,14 +98,12 @@ const Pods = ({
           {item.status.label}
           {!!item.status.reason && (
             <MyTooltip
-              label={`${
-                item.status?.lastStateReason ? `LastReason: ${item.status?.lastStateReason}\n` : ''
-              }Reason: ${item.status.reason}${
+              label={`Reason: ${item.status.reason}${
                 item.status.message ? `\nMessage: ${item.status.message}` : ''
               }`}
               whiteSpace={'pre-wrap'}
               wordBreak={'break-all'}
-              maxW={'400px'}
+              maxW={'300px'}
             >
               <QuestionOutlineIcon ml={1} />
             </MyTooltip>
@@ -117,9 +115,14 @@ const Pods = ({
       title: 'Restarts Num',
       key: 'restarts',
       render: (item: PodDetailType) => (
-        <Box fontSize={'12px'} color={'grayModern.900'} fontWeight={500}>
+        <Flex alignItems={'center'} fontSize={'12px'} color={'grayModern.900'} fontWeight={500}>
           {item.restarts}
-        </Box>
+          {!!item.containerStatus.reason && (
+            <Flex alignItems={'center'} color={item.containerStatus?.color}>
+              (<Text>{item.containerStatus?.reason}</Text>)
+            </Flex>
+          )}
+        </Flex>
       )
     },
     {

diff --git a/frontend/providers/applaunchpad/src/types/app.d.ts b/frontend/providers/applaunchpad/src/types/app.d.ts
@@ -127,7 +127,6 @@ export interface PodStatusMapType {
   color: string;
   reason?: string;
   message?: string;
-  lastStateReason?: string;
 }
 export interface PodDetailType extends V1Pod {
   podName: string;
@@ -142,6 +141,7 @@ export interface PodDetailType extends V1Pod {
   memory: number;
   podReason?: string;
   podMessage?: string;
+  containerStatus: PodStatusMapType;
 }
 export interface PodMetrics {
   podName: string;

diff --git a/frontend/providers/applaunchpad/src/utils/adapt.ts b/frontend/providers/applaunchpad/src/utils/adapt.ts
@@ -90,23 +90,18 @@ export const adaptPod = (pod: V1Pod): PodDetailType => {
   return {
     ...pod,
     podName: pod.metadata?.name || 'pod name',
-    // @ts-ignore
     status: (() => {
       const container = pod.status?.containerStatuses || [];
       if (container.length > 0) {
         const stateObj = container[0].state;
-        const lasteStateObj = container[0].lastState;
         if (stateObj) {
           const stateKeys = Object.keys(stateObj);
-          const key = stateKeys?.[0] as `${PodStatusEnum}`;
+          const key = stateKeys[0] as `${PodStatusEnum}`;
           if (key === PodStatusEnum.running) {
             return podStatusMap[PodStatusEnum.running];
           }
           if (key && podStatusMap[key]) {
-            const lastStateReason =
-              lasteStateObj && lasteStateObj[key] ? lasteStateObj[key]?.reason : '';
             return {
-              lastStateReason,
               ...podStatusMap[key],
               ...stateObj[key]
             };
@@ -115,6 +110,23 @@ export const adaptPod = (pod: V1Pod): PodDetailType => {
       }
       return podStatusMap.waiting;
     })(),
+    containerStatus: (() => {
+      const container = pod.status?.containerStatuses || [];
+      if (container.length > 0) {
+        const lastStateObj = container[0].lastState;
+        if (lastStateObj) {
+          const lastStateKeys = Object.keys(lastStateObj);
+          const key = lastStateKeys[0] as `${PodStatusEnum}`;
+          if (key && podStatusMap[key]) {
+            return {
+              ...podStatusMap[key],
+              ...lastStateObj[key]
+            };
+          }
+        }
+      }
+      return podStatusMap.waiting;
+    })(),
     nodeName: pod.spec?.nodeName || 'node name',
     ip: pod.status?.podIP || 'pod ip',
     restarts: pod.status?.containerStatuses ? pod.status?.containerStatuses[0].restartCount : 0,

diff --git a/service/license/src/api/system.ts b/service/license/src/api/system.ts
@@ -14,9 +14,9 @@ export const getPriceBonus = () =>
 
 // handle baidu
 export const uploadConvertData = (newType: number[], url?: string) => {
-  const defaultUrl = 'https://sealos.run/';
+  const defaultUrl = 'https://sealos.run/self-hosting';
   const main_url = url || defaultUrl;
-  const bd_vid = sessionStorage.getItem('bd_vid');
+  const bd_vid = localStorage.getItem('bd_vid');
   if (!bd_vid) {
     return Promise.reject('upload convert data params error');
   }

diff --git a/service/license/src/components/login/index.tsx b/service/license/src/components/login/index.tsx
@@ -15,7 +15,6 @@ import {
   TabIndicator,
   TabList,
   Tabs,
-  Image,
   useDisclosure
 } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
@@ -106,22 +105,7 @@ export default function SigninComponent() {
   }, 500);
 
   return (
-    <Box
-      position={'relative'}
-      overflow={'hidden'}
-      w="100vw"
-      h="100vh"
-      // backgroundImage={'url(/images/bg.svg)'}
-      // backgroundRepeat={'no-repeat'}
-      // backgroundSize={'cover'}
-      // backgroundAttachment={'fixed'}
-      // min-width="100%"
-      // /min-height="100%"
-      // top={0}
-      // left={0}
-      // right={0}
-      // bottom={0}
-    >
+    <Box position={'relative'} overflow={'hidden'} w="100vw" h="100vh">
       <Background />
       <Head>
         <title>Sealos Cloud</title>

diff --git a/service/license/src/pages/signin.tsx b/service/license/src/pages/signin.tsx
@@ -22,9 +22,8 @@ export default function SigninPage() {
   useEffect(() => {
     const { bd_vid } = router.query;
     if (bd_vid) {
-      sessionStorage.setItem('bd_vid', bd_vid as string);
+      localStorage.setItem('bd_vid', bd_vid as string);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return <LoginComponent />;