fix:template app recall problem

Signed-off-by: jingyang <3161362058@qq.com>
labring · Nov 18, 2023 · 978cad4 · 978cad4
1 parent eb02e79
commit 978cad4
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 58 deletions.
diff --git a/frontend/providers/applaunchpad/src/pages/_app.tsx b/frontend/providers/applaunchpad/src/pages/_app.tsx
@@ -51,9 +51,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 
   useEffect(() => {
     NProgress.start();
-
     const response = createSealosApp();
-
     (async () => {
       const { SEALOS_DOMAIN, FORM_SLIDER_LIST_CONFIG } = await (() => loadInitData())();
       initFormSliderList(FORM_SLIDER_LIST_CONFIG);
@@ -79,7 +77,6 @@ const App = ({ Component, pageProps }: AppProps) => {
       }
     })();
     NProgress.done();
-
     return response;
   }, []);
 
@@ -136,6 +133,27 @@ const App = ({ Component, pageProps }: AppProps) => {
     i18n?.changeLanguage?.(lang);
   }, [refresh, router.pathname]);
 
+  // InternalAppCall
+  useEffect(() => {
+    const event = async (e: MessageEvent) => {
+      console.log(e, 'e InternalAppCall');
+      try {
+        if (e.data?.type === 'InternalAppCall' && e.data?.name) {
+          router.push({
+            pathname: '/app/detail',
+            query: {
+              name: e.data.name
+            }
+          });
+        }
+      } catch (error) {
+        console.log(error, 'error');
+      }
+    };
+    window.addEventListener('message', event);
+    return () => window.removeEventListener('message', event);
+  }, [router]);
+
   return (
     <>
       <Head>

diff --git a/frontend/providers/cronjob/src/pages/_app.tsx b/frontend/providers/cronjob/src/pages/_app.tsx
@@ -125,6 +125,26 @@ function App({ Component, pageProps }: AppProps) {
     i18n?.changeLanguage?.(lang);
   }, [refresh, router.asPath]);
 
+  // InternalAppCall
+  useEffect(() => {
+    const event = async (e: MessageEvent) => {
+      try {
+        if (e.data?.type === 'InternalAppCall' && e.data?.name) {
+          router.push({
+            pathname: '/job/detail',
+            query: {
+              name: e.data.name
+            }
+          });
+        }
+      } catch (error) {
+        console.log(error, 'error');
+      }
+    };
+    window.addEventListener('message', event);
+    return () => window.removeEventListener('message', event);
+  }, [router]);
+
   return (
     <>
       <Head>

diff --git a/frontend/providers/dbprovider/src/pages/_app.tsx b/frontend/providers/dbprovider/src/pages/_app.tsx
@@ -130,6 +130,26 @@ function App({ Component, pageProps }: AppProps) {
     i18n?.changeLanguage?.(lang);
   }, [refresh, router.asPath]);
 
+  // InternalAppCall
+  useEffect(() => {
+    const event = async (e: MessageEvent) => {
+      try {
+        if (e.data?.type === 'InternalAppCall' && e.data?.name) {
+          router.push({
+            pathname: '/db/detail',
+            query: {
+              name: e.data.name
+            }
+          });
+        }
+      } catch (error) {
+        console.log(error, 'error');
+      }
+    };
+    window.addEventListener('message', event);
+    return () => window.removeEventListener('message', event);
+  }, [router]);
+
   return (
     <>
       <Head>

diff --git a/frontend/providers/template/public/locales/en/common.json b/frontend/providers/template/public/locales/en/common.json
@@ -155,7 +155,8 @@
     "Configure Form": "Configure Form",
     "YAML File": "YAML File",
     "Template Development": "Template Development",
-    "Dryrun Deploy": "Dryrun Deploy"
+    "Dryrun Deploy": "Dryrun Deploy",
+    "Formal Deploy": "Formal Deploy"
   },
   "SideBar": {
     "Applications": "Applications",
@@ -180,5 +181,7 @@
   "One click deploy button": "One click deploy button",
   "Html Part": "Html Part",
   "Markdown Part": "Markdown Part",
-  "Button Effect": "Button Effect"
+  "Button Effect": "Button Effect",
+  "Type": "Type",
+  "Deployment successful, please go to My Application to view": "Deployment successful, please go to My Application to view"
 }
diff --git a/frontend/providers/template/public/locales/zh/common.json b/frontend/providers/template/public/locales/zh/common.json
@@ -161,7 +161,8 @@
     "Configure Form": "配置表单",
     "YAML File": "YAML 文件",
     "Template Development": "模板开发",
-    "Dryrun Deploy": "试运行部署"
+    "Dryrun Deploy": "试运行部署",
+    "Formal Deploy": "正式部署"
   },
   "SideBar": {
     "Applications": "所有应用",
@@ -186,5 +187,7 @@
   "One click deploy button": "一键部署按钮",
   "Html Part": "Html 片段",
   "Markdown Part": "Markdown 片段",
-  "Button Effect": "按钮效果"
+  "Button Effect": "按钮效果",
+  "Deployment successful, please go to My Application to view": "部署成功，请前往我的应用查看",
+  "Type": "类型"
 }
diff --git a/frontend/providers/template/src/api/app.ts b/frontend/providers/template/src/api/app.ts
@@ -1,8 +1,10 @@
 import { GET, POST } from '@/services/request';
 import { TemplateSourceType } from '@/types/app';
 
-export const postDeployApp = (yamlList: string[], type: 'create' | 'replace' | 'dryrun') =>
-  POST('/api/applyApp', { yamlList, type });
+export const postDeployApp = (
+  yamlList: string[],
+  type: 'create' | 'replace' | 'dryrun' = 'create'
+) => POST('/api/applyApp', { yamlList, type });
 
 export const getTemplateSource = (templateName: string) =>
   GET<TemplateSourceType>('/api/getTemplateSource', { templateName });
diff --git a/frontend/providers/template/src/pages/develop/components/BreadCrumbHeader.tsx b/frontend/providers/template/src/pages/develop/components/BreadCrumbHeader.tsx
@@ -1,8 +1,16 @@
-import { Button, Flex, Icon, Text } from '@chakra-ui/react';
+import { Box, Button, Flex, Icon, Text } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 
-const BreadCrumbHeader = ({ applyCb }: { applyCb: () => void }) => {
+const BreadCrumbHeader = ({
+  applyCb,
+  applyFormalCb,
+  isShowBtn = true
+}: {
+  applyFormalCb: () => void;
+  applyCb: () => void;
+  isShowBtn: boolean;
+}) => {
   const router = useRouter();
   const { t } = useTranslation();
 
@@ -13,15 +21,13 @@ const BreadCrumbHeader = ({ applyCb }: { applyCb: () => void }) => {
       justifyContent={'start'}
       alignItems={'center'}
       backgroundColor={'rgba(255, 255, 255)'}
-      backdropBlur={'100px'}
-    >
+      backdropBlur={'100px'}>
       <Flex
         alignItems={'center'}
         fontWeight={500}
         fontSize={16}
         color={'#7B838B'}
-        cursor={'pointer'}
-      >
+        cursor={'pointer'}>
         <Flex
           alignItems={'center'}
           css={{
@@ -32,15 +38,13 @@ const BreadCrumbHeader = ({ applyCb }: { applyCb: () => void }) => {
                 fill: '#219BF4'
               }
             }
-          }}
-        >
+          }}>
           <Icon
             viewBox="0 0 15 15"
             fill={'#24282C'}
             w={'15px'}
             h="15px"
-            onClick={() => router.push('/')}
-          >
+            onClick={() => router.push('/')}>
             <path d="M9.1875 13.1875L3.92187 7.9375C3.85937 7.875 3.81521 7.80729 3.78937 7.73438C3.76312 7.66146 3.75 7.58333 3.75 7.5C3.75 7.41667 3.76312 7.33854 3.78937 7.26562C3.81521 7.19271 3.85937 7.125 3.92187 7.0625L9.1875 1.79687C9.33333 1.65104 9.51562 1.57812 9.73438 1.57812C9.95312 1.57812 10.1406 1.65625 10.2969 1.8125C10.4531 1.96875 10.5312 2.15104 10.5312 2.35938C10.5312 2.56771 10.4531 2.75 10.2969 2.90625L5.70312 7.5L10.2969 12.0938C10.4427 12.2396 10.5156 12.4192 10.5156 12.6325C10.5156 12.8463 10.4375 13.0312 10.2812 13.1875C10.125 13.3438 9.94271 13.4219 9.73438 13.4219C9.52604 13.4219 9.34375 13.3438 9.1875 13.1875Z" />
           </Icon>
           <Text ml="4px" onClick={() => router.push('/')}>
@@ -50,14 +54,25 @@ const BreadCrumbHeader = ({ applyCb }: { applyCb: () => void }) => {
         <Text px="6px">/</Text>
         <Text
           _hover={{ fill: '#219BF4', color: '#219BF4' }}
-          color={router.pathname === '/develop' ? '#262A32' : '#7B838B'}
-        >
+          color={router.pathname === '/develop' ? '#262A32' : '#7B838B'}>
           {t('develop.YAML Detection Tool')}
         </Text>
       </Flex>
+
       <Button ml="auto" px={4} minW={'120px'} h={'34px'} variant={'primary'} onClick={applyCb}>
         {t('develop.Dryrun Deploy')}
       </Button>
+      {isShowBtn && (
+        <Button
+          ml="12px"
+          px={4}
+          minW={'120px'}
+          h={'34px'}
+          variant={'primary'}
+          onClick={applyFormalCb}>
+          {t('develop.Formal Deploy')}
+        </Button>
+      )}
     </Flex>
   );
 };

diff --git a/frontend/providers/template/src/pages/develop/index.tsx b/frontend/providers/template/src/pages/develop/index.tsx
@@ -25,7 +25,7 @@ import dayjs from 'dayjs';
 import JsYaml from 'js-yaml';
 import { debounce, has, isObject, mapValues } from 'lodash';
 import { useTranslation } from 'next-i18next';
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import ErrorModal from '../deploy/components/ErrorModal';
 import BreadCrumbHeader from './components/BreadCrumbHeader';
@@ -41,6 +41,7 @@ export default function Develop() {
   const { Loading, setIsLoading } = useLoading();
   const [errorMessage, setErrorMessage] = useState('');
   const { title, applyBtnText, applyMessage, applySuccess, applyError } = editModeMap(false);
+  const SuccessfulDryRun = useRef(false);
 
   const { data: platformEnvs } = useQuery(['getPlatformEnvs'], getPlatformEnv) as {
     data: EnvResponse;
@@ -133,6 +134,9 @@ export default function Develop() {
         yamlList.map((item) => item.value),
         'dryrun'
       );
+      if (result.length > 0) {
+        SuccessfulDryRun.current = true;
+      }
       toast({
         title: t(applySuccess),
         status: 'success',
@@ -182,16 +186,33 @@ export default function Develop() {
     );
   }, [yamlList]);
 
+  const formalApply = async () => {
+    try {
+      if (yamlList.length !== 0 && SuccessfulDryRun.current) {
+        const result: string[] = await postDeployApp(yamlList.map((item) => item.value));
+        toast({
+          title: t('Deployment successful, please go to My Application to view') || ' ',
+          status: 'success'
+        });
+      }
+    } catch (error) {
+      console.log(error, 'FormalApply');
+    }
+  };
+
   return (
     <Flex flexDirection={'column'} p={'0px 34px 20px 34px '} h="100vh" maxW={'1440px'} mx="auto">
-      <BreadCrumbHeader applyCb={() => formHook.handleSubmit(submitSuccess, submitError)()} />
+      <BreadCrumbHeader
+        applyCb={() => formHook.handleSubmit(submitSuccess, submitError)()}
+        isShowBtn={SuccessfulDryRun.current}
+        applyFormalCb={formalApply}
+      />
       <Flex
         border={'1px solid #DEE0E2'}
         borderRadius={'8px'}
         overflowY={'hidden'}
         overflowX={'scroll'}
-        flex={1}
-      >
+        flex={1}>
         {/* left */}
         <Flex flexDirection={'column'} w="50%" borderRight={'1px solid #EFF0F1'}>
           <Flex
@@ -201,8 +222,7 @@ export default function Develop() {
             alignItems={'center'}
             backgroundColor={'#F8FAFB'}
             px="36px"
-            borderRadius={'8px 8px 0px 0px '}
-          >
+            borderRadius={'8px 8px 0px 0px '}>
             <MyIcon name="dev" color={'#24282C'} w={'24px'} h={'24px'}></MyIcon>
             <Text fontWeight={'500'} fontSize={'16px'} color={'#24282C'} ml="8px">
               {t('develop.Development')}
@@ -230,8 +250,7 @@ export default function Develop() {
             alignItems={'center'}
             backgroundColor={'#F8FAFB'}
             pl="42px"
-            borderRadius={'8px 8px 0px 0px '}
-          >
+            borderRadius={'8px 8px 0px 0px '}>
             <MyIcon name="eyeShow" color={'#24282C'} w={'24px'} h={'24px'}></MyIcon>
             <Text fontWeight={'500'} fontSize={'16px'} color={'#24282C'} ml="8px">
               {t('develop.Preview')}
@@ -243,8 +262,7 @@ export default function Develop() {
               pt="26px"
               pr={{ sm: '20px', md: '60px' }}
               borderBottom={'1px solid #EFF0F1'}
-              flexDirection={'column'}
-            >
+              flexDirection={'column'}>
               <Text fontWeight={'500'} fontSize={'18px'} color={'#24282C'}>
                 {t('develop.Configure Form')}
               </Text>
@@ -260,8 +278,7 @@ export default function Develop() {
                   minW={'100px'}
                   h={'34px'}
                   variant={'link'}
-                  onClick={handleExportYaml}
-                >
+                  onClick={handleExportYaml}>
                   {t('Export')} Yaml
                 </Button>
               </Flex>

diff --git a/frontend/providers/template/src/pages/instance/components/appList.tsx b/frontend/providers/template/src/pages/instance/components/appList.tsx
@@ -35,7 +35,7 @@ export default function AppList({ instanceName }: { instanceName: string }) {
       appKey: 'system-applaunchpad',
       pathname: '/app/detail',
       query: { name: name },
-      messageData: {}
+      messageData: { type: 'InternalAppCall', name: name }
     });
   }, []);
 
@@ -112,8 +112,7 @@ export default function AppList({ instanceName }: { instanceName: string }) {
               variant={'base'}
               leftIcon={<MyIcon name={'detail'} transform={'translateY(-1px)'} />}
               px={3}
-              onClick={() => handleToDetailPage(item.name)}
-            >
+              onClick={() => handleToDetailPage(item.name)}>
               {t('Details')}
             </Button>
           </Flex>
@@ -142,16 +141,14 @@ export default function AppList({ instanceName }: { instanceName: string }) {
             justifyContent={'center'}
             alignItems={'center'}
             background={'white'}
-            p="32px"
-          >
+            p="32px">
             <Flex
               border={'1px dashed #9CA2A8'}
               borderRadius="50%"
               w={'48px'}
               h={'48px'}
               justifyContent="center"
-              alignItems={'center'}
-            >
+              alignItems={'center'}>
               <MyIcon color={'#7B838B'} name="empty"></MyIcon>
             </Flex>
             <Text mt={'12px'} fontSize={14} color={'#5A646E'}>