From 978cad4e2d714a98ad4c20986782f8b4d0699296 Mon Sep 17 00:00:00 2001 From: jingyang <3161362058@qq.com> Date: Sat, 18 Nov 2023 09:58:35 +0800 Subject: [PATCH] fix:template app recall problem Signed-off-by: jingyang <3161362058@qq.com> --- .../providers/applaunchpad/src/pages/_app.tsx | 24 +++++++++-- frontend/providers/cronjob/src/pages/_app.tsx | 20 +++++++++ .../providers/dbprovider/src/pages/_app.tsx | 20 +++++++++ .../template/public/locales/en/common.json | 7 +++- .../template/public/locales/zh/common.json | 7 +++- frontend/providers/template/src/api/app.ts | 6 ++- .../develop/components/BreadCrumbHeader.tsx | 39 ++++++++++++------ .../template/src/pages/develop/index.tsx | 41 +++++++++++++------ .../src/pages/instance/components/appList.tsx | 11 ++--- .../pages/instance/components/cronjobList.tsx | 11 ++--- .../src/pages/instance/components/dbList.tsx | 11 ++--- .../pages/instance/components/otherList.tsx | 6 +-- 12 files changed, 145 insertions(+), 58 deletions(-) diff --git a/frontend/providers/applaunchpad/src/pages/_app.tsx b/frontend/providers/applaunchpad/src/pages/_app.tsx index 868eb7cfe56a..6b0428f93c64 100644 --- 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 ( <> diff --git a/frontend/providers/cronjob/src/pages/_app.tsx b/frontend/providers/cronjob/src/pages/_app.tsx index 7121035ab898..a6ee4c76abf5 100644 --- 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 ( <> diff --git a/frontend/providers/dbprovider/src/pages/_app.tsx b/frontend/providers/dbprovider/src/pages/_app.tsx index ffb2294bbf16..0afd07f5464c 100644 --- 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 ( <> diff --git a/frontend/providers/template/public/locales/en/common.json b/frontend/providers/template/public/locales/en/common.json index ca438e1dc32b..4f4f27a80177 100644 --- 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" } \ No newline at end of file diff --git a/frontend/providers/template/public/locales/zh/common.json b/frontend/providers/template/public/locales/zh/common.json index 767c141896c6..e8ee6a2f11b6 100644 --- 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": "类型" } \ No newline at end of file diff --git a/frontend/providers/template/src/api/app.ts b/frontend/providers/template/src/api/app.ts index 63ef85a9f586..8cb93d715dae 100644 --- 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('/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 index e186229b9ec5..4c5d4cb8b073 100644 --- 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'}> + cursor={'pointer'}> void }) => { fill: '#219BF4' } } - }} - > + }}> router.push('/')} - > + onClick={() => router.push('/')}> router.push('/')}> @@ -50,14 +54,25 @@ const BreadCrumbHeader = ({ applyCb }: { applyCb: () => void }) => { / + color={router.pathname === '/develop' ? '#262A32' : '#7B838B'}> {t('develop.YAML Detection Tool')} + + {isShowBtn && ( + + )} ); }; diff --git a/frontend/providers/template/src/pages/develop/index.tsx b/frontend/providers/template/src/pages/develop/index.tsx index d5b55f545b4a..cf5423856ef6 100644 --- 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 ( - formHook.handleSubmit(submitSuccess, submitError)()} /> + formHook.handleSubmit(submitSuccess, submitError)()} + isShowBtn={SuccessfulDryRun.current} + applyFormalCb={formalApply} + /> + flex={1}> {/* left */} + borderRadius={'8px 8px 0px 0px '}> {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 '}> {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'}> {t('develop.Configure Form')} @@ -260,8 +278,7 @@ export default function Develop() { minW={'100px'} h={'34px'} variant={'link'} - onClick={handleExportYaml} - > + onClick={handleExportYaml}> {t('Export')} Yaml diff --git a/frontend/providers/template/src/pages/instance/components/appList.tsx b/frontend/providers/template/src/pages/instance/components/appList.tsx index c1f80273f13a..923b1e1f2bf0 100644 --- 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={} px={3} - onClick={() => handleToDetailPage(item.name)} - > + onClick={() => handleToDetailPage(item.name)}> {t('Details')} @@ -142,16 +141,14 @@ export default function AppList({ instanceName }: { instanceName: string }) { justifyContent={'center'} alignItems={'center'} background={'white'} - p="32px" - > + p="32px"> + alignItems={'center'}> diff --git a/frontend/providers/template/src/pages/instance/components/cronjobList.tsx b/frontend/providers/template/src/pages/instance/components/cronjobList.tsx index a5b86f9cad4c..d4d2dab8c38d 100644 --- a/frontend/providers/template/src/pages/instance/components/cronjobList.tsx +++ b/frontend/providers/template/src/pages/instance/components/cronjobList.tsx @@ -35,7 +35,7 @@ export default function CronJobList({ instanceName }: { instanceName: string }) appKey: 'system-cronjob', pathname: '/job/detail', query: { name: name }, - messageData: {} + messageData: { type: 'InternalAppCall', name: name } }); }, []); @@ -100,8 +100,7 @@ export default function CronJobList({ instanceName }: { instanceName: string }) variant={'base'} leftIcon={} px={3} - onClick={() => handleToDetailPage(item.name)} - > + onClick={() => handleToDetailPage(item.name)}> {t('Details')} @@ -130,16 +129,14 @@ export default function CronJobList({ instanceName }: { instanceName: string }) justifyContent={'center'} alignItems={'center'} background={'white'} - p="32px" - > + p="32px"> + alignItems={'center'}> diff --git a/frontend/providers/template/src/pages/instance/components/dbList.tsx b/frontend/providers/template/src/pages/instance/components/dbList.tsx index 5d1a4ecd2fbb..5e23732c78eb 100644 --- a/frontend/providers/template/src/pages/instance/components/dbList.tsx +++ b/frontend/providers/template/src/pages/instance/components/dbList.tsx @@ -34,7 +34,7 @@ export default function AppList({ instanceName }: { instanceName: string }) { appKey: 'system-dbprovider', pathname: '/db/detail', query: { name: name }, - messageData: {} + messageData: { type: 'InternalAppCall', name: name } }); }; @@ -98,8 +98,7 @@ export default function AppList({ instanceName }: { instanceName: string }) { variant={'base'} leftIcon={} px={3} - onClick={() => handleToDetailPage(item.name)} - > + onClick={() => handleToDetailPage(item.name)}> {t('Details')} @@ -130,16 +129,14 @@ export default function AppList({ instanceName }: { instanceName: string }) { justifyContent={'center'} alignItems={'center'} background={'white'} - p="32px" - > + p="32px"> + alignItems={'center'}> diff --git a/frontend/providers/template/src/pages/instance/components/otherList.tsx b/frontend/providers/template/src/pages/instance/components/otherList.tsx index 0979a971383a..14b1a230521a 100644 --- a/frontend/providers/template/src/pages/instance/components/otherList.tsx +++ b/frontend/providers/template/src/pages/instance/components/otherList.tsx @@ -81,16 +81,14 @@ export default function OtherList({ instanceName }: { instanceName: string }) { justifyContent={'center'} alignItems={'center'} background={'white'} - p="32px" - > + p="32px"> + alignItems={'center'}>