feat:launchpad support multiple containers (labring#4380)

* feat:launchpad support multiple containers Signed-off-by: jingyang <[email protected]> * fix db Signed-off-by: jingyang <[email protected]> --------- Signed-off-by: jingyang <[email protected]>
lingdie · Dec 6, 2023 · 2255850 · 2255850
1 parent b6654c4
commit 2255850
Show file tree

Hide file tree

Showing 15 changed files with 292 additions and 103 deletions.
diff --git a/frontend/providers/applaunchpad/public/locales/en/common.json b/frontend/providers/applaunchpad/public/locales/en/common.json
@@ -159,5 +159,7 @@
   "common": {
     "Used": "Used",
     "Surplus": "Surplus"
-  }
+  },
+  "Store At Least One": "Store At Least One",
+  "Network port conflict": "Network port conflict"
 }
diff --git a/frontend/providers/applaunchpad/public/locales/zh/common.json b/frontend/providers/applaunchpad/public/locales/zh/common.json
@@ -202,5 +202,6 @@
   },
   "user": {
     "Insufficient account balance": "账号余额不足~"
-  }
+  },
+  "Store At Least One": "存储最少保留一个"
 }
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/detail.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/detail.svg
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/log.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/log.svg
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/restart.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/restart.svg
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/terminal.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/terminal.svg
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/Header.tsx b/frontend/providers/applaunchpad/src/pages/app/detail/components/Header.tsx
@@ -117,7 +117,7 @@ const Header = ({
             flex={1}
             h={'40px'}
             borderColor={'myGray.200'}
-            leftIcon={<MyIcon name="detail" w={'14px'} h={'14px'} transform={'translateY(3px)'} />}
+            leftIcon={<MyIcon name="detail" w="16px" h="16px" />}
             variant={'base'}
             bg={'white'}
             onClick={() => setShowSlider(true)}
@@ -180,7 +180,7 @@ const Header = ({
           borderColor={'myGray.200'}
           variant={'base'}
           bg={'white'}
-          leftIcon={<MyIcon name="restart" w={'14px'} h={'14px'} />}
+          leftIcon={<MyIcon name="restart" w={'16px'} h={'16px'} />}
           onClick={openRestartConfirm(handleRestartApp)}
           isLoading={loading}
         >

diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/PodDetailModal.tsx b/frontend/providers/applaunchpad/src/pages/app/detail/components/PodDetailModal.tsx
@@ -99,7 +99,7 @@ const Logs = ({
     );
   }, []);
 
-  const { isLoading } = useQuery(['init'], () => getPodEvents(pod.podName), {
+  const { isLoading } = useQuery(['initPodEvents'], () => getPodEvents(pod.podName), {
     refetchInterval: 3000,
     onSuccess(res) {
       setEvents(res);

diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/Pods.tsx b/frontend/providers/applaunchpad/src/pages/app/detail/components/Pods.tsx
@@ -10,7 +10,9 @@ import {
   Td,
   TableContainer,
   Flex,
-  MenuButton
+  MenuButton,
+  Tooltip,
+  Center
 } from '@chakra-ui/react';
 import { sealosApp } from 'sealos-desktop-sdk/app';
 import { restartPodByName } from '@/api/app';
@@ -135,70 +137,68 @@ const Pods = ({
       title: 'Operation',
       key: 'control',
       render: (item: PodDetailType, i: number) => (
-        <Flex>
-          <Button
-            mr={3}
-            leftIcon={<MyIcon name="log" />}
-            variant={'base'}
-            px={3}
-            onClick={() => setLogsPodIndex(i)}
-          >
-            {t('Log')}
-          </Button>
-          <MyMenu
-            width={100}
-            Button={
-              <MenuButton
-                w={'32px'}
-                h={'32px'}
-                borderRadius={'sm'}
-                _hover={{
-                  bg: 'myWhite.400',
-                  color: 'hover.iconBlue'
-                }}
-              >
-                <MyIcon name={'more'} px={3} />
-              </MenuButton>
-            }
-            menuList={[
-              {
-                child: (
-                  <>
-                    <MyIcon name={'terminal'} w={'14px'} />
-                    <Box ml={2}>{t('Terminal')}</Box>
-                  </>
-                ),
-                onClick: () => {
-                  const defaultCommand = `kubectl exec -it ${item.podName} -c ${appName} -- sh -c "clear; (bash || ash || sh)"`;
-                  sealosApp.runEvents('openDesktopApp', {
-                    appKey: 'system-terminal',
-                    query: {
-                      defaultCommand
-                    },
-                    messageData: { type: 'new terminal', command: defaultCommand }
-                  });
-                }
-              },
-              {
-                child: (
-                  <>
-                    <MyIcon name={'detail'} w={'14px'} />
-                    <Box ml={2}>{t('Details')}</Box>
-                  </>
-                ),
-                onClick: () => setDetailPodIndex(i)
-              },
-              {
-                child: (
-                  <>
-                    <MyIcon name={'restart'} />
-                    <Box ml={2}>{t('Restart')} </Box>
-                  </>
-                ),
-                onClick: openConfirmRestart(() => handleRestartPod(item.podName))
-              }
-            ]}
-          />
+        <Flex alignItems={'center'}>
+          <MyTooltip label={t('Log')} offset={[0, 10]}>
+            <Center
+              p="6px"
+              _hover={{
+                bg: '#F4F6F8'
+              }}
+              cursor={'pointer'}
+              borderRadius={'4px'}
+              onClick={() => setLogsPodIndex(i)}
+            >
+              <MyIcon name="log" w="20px" h="20px" />
+            </Center>
+          </MyTooltip>
+          <MyTooltip offset={[0, 10]} label={t('Terminal')}>
+            <Center
+              p="6px"
+              _hover={{
+                bg: '#F4F6F8'
+              }}
+              cursor={'pointer'}
+              borderRadius={'4px'}
+              onClick={() => {
+                const defaultCommand = `kubectl exec -it ${item.podName} -c ${appName} -- sh -c "clear; (bash || ash || sh)"`;
+                sealosApp.runEvents('openDesktopApp', {
+                  appKey: 'system-terminal',
+                  query: {
+                    defaultCommand
+                  },
+                  messageData: { type: 'new terminal', command: defaultCommand }
+                });
+              }}
+            >
+              <MyIcon name={'terminal'} w="20px" h="20px" />
+            </Center>
+          </MyTooltip>
+          <MyTooltip offset={[0, 10]} label={t('Details')}>
+            <Center
+              p="6px"
+              _hover={{
+                bg: '#F4F6F8'
+              }}
+              cursor={'pointer'}
+              borderRadius={'4px'}
+              onClick={() => setDetailPodIndex(i)}
+            >
+              <MyIcon name={'detail'} w="20px" h="20px" />
+            </Center>
+          </MyTooltip>
+          <MyTooltip offset={[0, 10]} label={t('Restart')}>
+            <Center
+              p="6px"
+              _hover={{
+                bg: '#F4F6F8'
+              }}
+              cursor={'pointer'}
+              borderRadius={'4px'}
+              onClick={openConfirmRestart(() => handleRestartPod(item.podName))}
+            >
+              <MyIcon name={'restart'} w="20px" h="20px" />
+            </Center>
+          </MyTooltip>
         </Flex>
       )
     }

diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx
@@ -56,6 +56,7 @@ import { obj2Query } from '@/api/tools';
 import { throttle } from 'lodash';
 import { ProtocolList, noGpuSliderKey } from '@/constants/app';
 import { sliderNumber2MarkList } from '@/utils/adapt';
+import { useToast } from '@/hooks/useToast';
 
 const labelWidth = 120;
 
@@ -79,6 +80,7 @@ const Form = ({
   const { formSliderListConfig } = useGlobalStore();
   const { userSourcePrice } = useUserStore();
   const router = useRouter();
+  const { toast } = useToast();
   const { name } = router.query as QueryType;
   const theme = useTheme();
   const isEdit = useMemo(() => !!name, [name]);
@@ -1101,7 +1103,16 @@ const Form = ({
                             className={styles.deleteIcon}
                             ml={3}
                             cursor={'pointer'}
-                            onClick={() => removeStoreList(index)}
+                            onClick={() => {
+                              if (storeList.length === 1) {
+                                toast({
+                                  title: t('Store At Least One'),
+                                  status: 'error'
+                                });
+                              } else {
+                                removeStoreList(index);
+                              }
+                            }}
                           >
                             <MyIcon name="delete" w={'16px'} h={'16px'} />
                           </Box>