From ae54a5d90c9b338711f933eed56ce9d23cda4c15 Mon Sep 17 00:00:00 2001 From: zjy <3161362058@qq.com> Date: Fri, 13 Sep 2024 19:23:51 +0800 Subject: [PATCH 1/4] feat: launchpad implement URL query to form data conversion --- .../providers/applaunchpad/src/pages/_app.tsx | 8 ++-- .../applaunchpad/src/pages/app/edit/index.tsx | 48 ++++++++++++++----- .../providers/applaunchpad/src/types/app.d.ts | 5 +- 3 files changed, 46 insertions(+), 15 deletions(-) diff --git a/frontend/providers/applaunchpad/src/pages/_app.tsx b/frontend/providers/applaunchpad/src/pages/_app.tsx index 4cbc0b9d9e8..662af6ca5ed 100644 --- a/frontend/providers/applaunchpad/src/pages/_app.tsx +++ b/frontend/providers/applaunchpad/src/pages/_app.tsx @@ -137,7 +137,7 @@ const App = ({ Component, pageProps }: AppProps) => { e: MessageEvent<{ type?: string; name?: string; - formData?: AppEditSyncedFields; + formData?: string; }> ) => { const whitelist = [`https://${SEALOS_DOMAIN}`]; @@ -154,10 +154,12 @@ const App = ({ Component, pageProps }: AppProps) => { name: name } }); - } else if (formData?.imageName) { + } else if (formData) { router.push({ pathname: '/app/edit', - query: formData + query: { + formData: formData + } }); } } diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx index 8a38c8a63f4..87690e3d110 100644 --- a/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx +++ b/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx @@ -32,6 +32,8 @@ import Form from './components/Form'; import Header from './components/Header'; import Yaml from './components/Yaml'; import { useMessage } from '@sealos/ui'; +import { customAlphabet } from 'nanoid'; +const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 12); const ErrorModal = dynamic(() => import('./components/ErrorModal')); @@ -289,19 +291,43 @@ const EditApp = ({ appName, tabType }: { appName?: string; tabType: string }) => }, [router.query.name, tabType]); useEffect(() => { - const query = router.query; - const updates: Partial = { - imageName: query.imageName as string, - replicas: query.replicas ? Number(query.replicas) : undefined, - cpu: query.cpu ? Number(query.cpu) : undefined, - memory: query.memory ? Number(query.memory) : undefined - }; + try { + const query = router.query as { formData?: string }; + if (!query.formData) return; + const parsedData: Partial = JSON.parse( + decodeURIComponent(query.formData) + ); + + // 处理基本字段 + const basicFields: (keyof AppEditSyncedFields)[] = [ + 'imageName', + 'replicas', + 'cpu', + 'memory', + 'cmdParam', + 'runCMD' + ]; - Object.entries(updates).forEach(([key, value]) => { - if (value !== undefined) { - formHook.setValue(key as keyof AppEditSyncedFields, value); + basicFields.forEach((field) => { + if (parsedData[field] !== undefined) { + formHook.setValue(field, parsedData[field] as any); + } + }); + + if (Array.isArray(parsedData.networks)) { + const completeNetworks = parsedData.networks.map((network) => ({ + networkName: network.networkName || `network-${nanoid()}`, + portName: network.portName || nanoid(), + port: network.port || 80, + protocol: network.protocol || 'HTTP', + openPublicDomain: network.openPublicDomain || false, + publicDomain: network.publicDomain || nanoid(), + customDomain: network.customDomain || '', + domain: network.domain || 'gzg.sealos.run' + })); + formHook.setValue('networks', completeNetworks); } - }); + } catch (error) {} }, []); return ( diff --git a/frontend/providers/applaunchpad/src/types/app.d.ts b/frontend/providers/applaunchpad/src/types/app.d.ts index 5b1cca0a953..c54a4ce4a45 100644 --- a/frontend/providers/applaunchpad/src/types/app.d.ts +++ b/frontend/providers/applaunchpad/src/types/app.d.ts @@ -109,7 +109,10 @@ export interface AppEditType { }[]; } -export type AppEditSyncedFields = Pick; +export type AppEditSyncedFields = Pick< + AppEditType, + 'imageName' | 'replicas' | 'cpu' | 'memory' | 'networks' | 'cmdParam' | 'runCMD' +>; export type TAppSourceType = 'app_store' | 'sealaf'; From 514813f303c2216a00d1546ddf65c71f4a50802d Mon Sep 17 00:00:00 2001 From: zjy <3161362058@qq.com> Date: Sat, 14 Sep 2024 10:13:52 +0800 Subject: [PATCH 2/4] add appName --- .../providers/applaunchpad/src/mock/apps.ts | 24 ++++++++++++++++++- .../applaunchpad/src/pages/app/edit/index.tsx | 4 +++- .../providers/applaunchpad/src/types/app.d.ts | 2 +- 3 files changed, 27 insertions(+), 3 deletions(-) diff --git a/frontend/providers/applaunchpad/src/mock/apps.ts b/frontend/providers/applaunchpad/src/mock/apps.ts index 34d9e06e7de..658c10dfef0 100644 --- a/frontend/providers/applaunchpad/src/mock/apps.ts +++ b/frontend/providers/applaunchpad/src/mock/apps.ts @@ -1,4 +1,4 @@ -import { AppListItemType, AppDetailType, PodDetailType } from '@/types/app'; +import { AppListItemType, AppDetailType, PodDetailType, AppEditSyncedFields } from '@/types/app'; import { appStatusMap, podStatusMap } from '@/constants/app'; import { customAlphabet } from 'nanoid'; const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 12); @@ -295,3 +295,25 @@ export const MOCK_APP_DETAIL: AppDetailType = { sourceType: 'app_store' } }; + +export const MockAppEditSyncedFields: AppEditSyncedFields = { + imageName: 'nginx', + appName: 'hello-world-test', + replicas: 1, + cpu: 1000, + memory: 512, + networks: [ + { + networkName: 'network-atyjahgvtzqm', + portName: 'vsjrpjzjptex', + port: 80, + protocol: 'HTTP', + openPublicDomain: true, + publicDomain: 'tkywzlpibxdl', + customDomain: '', + domain: 'gzg.sealos.run' + } + ], + cmdParam: 'sleep 10', + runCMD: '/bin/bash -c' +}; diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx index 87690e3d110..2ffdaf95acc 100644 --- a/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx +++ b/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx @@ -33,6 +33,7 @@ import Header from './components/Header'; import Yaml from './components/Yaml'; import { useMessage } from '@sealos/ui'; import { customAlphabet } from 'nanoid'; + const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 12); const ErrorModal = dynamic(() => import('./components/ErrorModal')); @@ -305,7 +306,8 @@ const EditApp = ({ appName, tabType }: { appName?: string; tabType: string }) => 'cpu', 'memory', 'cmdParam', - 'runCMD' + 'runCMD', + 'appName' ]; basicFields.forEach((field) => { diff --git a/frontend/providers/applaunchpad/src/types/app.d.ts b/frontend/providers/applaunchpad/src/types/app.d.ts index c54a4ce4a45..952ea06bcb9 100644 --- a/frontend/providers/applaunchpad/src/types/app.d.ts +++ b/frontend/providers/applaunchpad/src/types/app.d.ts @@ -111,7 +111,7 @@ export interface AppEditType { export type AppEditSyncedFields = Pick< AppEditType, - 'imageName' | 'replicas' | 'cpu' | 'memory' | 'networks' | 'cmdParam' | 'runCMD' + 'imageName' | 'replicas' | 'cpu' | 'memory' | 'networks' | 'cmdParam' | 'runCMD' | 'appName' >; export type TAppSourceType = 'app_store' | 'sealaf'; From 767fe0474e3b19af66e3f8832dfc952807a2fbce Mon Sep 17 00:00:00 2001 From: zjy <3161362058@qq.com> Date: Wed, 18 Sep 2024 12:02:49 +0800 Subject: [PATCH 3/4] update --- .../applaunchpad/src/constants/editApp.ts | 2 +- .../providers/applaunchpad/src/mock/apps.ts | 4 ++-- .../src/pages/app/edit/components/Form.tsx | 23 ++++++++++++++++--- .../applaunchpad/src/pages/app/edit/index.tsx | 2 +- 4 files changed, 24 insertions(+), 7 deletions(-) diff --git a/frontend/providers/applaunchpad/src/constants/editApp.ts b/frontend/providers/applaunchpad/src/constants/editApp.ts index c0ef9fa66bb..171cae03527 100644 --- a/frontend/providers/applaunchpad/src/constants/editApp.ts +++ b/frontend/providers/applaunchpad/src/constants/editApp.ts @@ -30,7 +30,7 @@ export const defaultEditVal: AppEditType = { cmdParam: '', replicas: 1, cpu: 100, - memory: 64, + memory: 128, networks: [ { networkName: '', diff --git a/frontend/providers/applaunchpad/src/mock/apps.ts b/frontend/providers/applaunchpad/src/mock/apps.ts index 658c10dfef0..66b02e00f69 100644 --- a/frontend/providers/applaunchpad/src/mock/apps.ts +++ b/frontend/providers/applaunchpad/src/mock/apps.ts @@ -300,8 +300,8 @@ export const MockAppEditSyncedFields: AppEditSyncedFields = { imageName: 'nginx', appName: 'hello-world-test', replicas: 1, - cpu: 1000, - memory: 512, + cpu: 4000, + memory: 64, networks: [ { networkName: 'network-atyjahgvtzqm', diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx index 030e75b25a9..ecf65c89678 100644 --- a/frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx +++ b/frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx @@ -267,25 +267,42 @@ const Form = ({ inventory: countGpuInventory(selected.type) }; }, [userSourcePrice?.gpu, countGpuInventory, getValues, refresh]); + // cpu, memory have different sliderValue const countSliderList = useCallback(() => { const gpuType = getValues('gpu.type'); const key = gpuType && formSliderListConfig[gpuType] ? gpuType : defaultSliderKey; + const cpu = getValues('cpu'); + const memory = getValues('memory'); + + const cpuList = formSliderListConfig[key].cpu; + const memoryList = formSliderListConfig[key].memory; + + const sortedCpuList = + cpu !== undefined ? [...new Set([...cpuList, cpu])].sort((a, b) => a - b) : cpuList; + + const sortedMemoryList = + memory !== undefined + ? [...new Set([...memoryList, memory])].sort((a, b) => a - b) + : memoryList; + return { cpu: sliderNumber2MarkList({ - val: formSliderListConfig[key].cpu, + val: sortedCpuList, type: 'cpu', gpuAmount: getValues('gpu.amount') }), memory: sliderNumber2MarkList({ - val: formSliderListConfig[key].memory, + val: sortedMemoryList, type: 'memory', gpuAmount: getValues('gpu.amount') }) }; }, [formSliderListConfig, getValues]); - const SliderList = useMemo(() => countSliderList(), [countSliderList, refresh]); + + // eslint-disable-next-line react-hooks/exhaustive-deps + const SliderList = useMemo(() => countSliderList(), [already]); return ( <> diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx index 2ffdaf95acc..b18cbc7cc5b 100644 --- a/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx +++ b/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx @@ -213,6 +213,7 @@ const EditApp = ({ appName, tabType }: { appName?: string; tabType: string }) => isGuided ] ); + const submitError = useCallback(() => { // deep search message const deepSearch = (obj: any): string => { @@ -299,7 +300,6 @@ const EditApp = ({ appName, tabType }: { appName?: string; tabType: string }) => decodeURIComponent(query.formData) ); - // 处理基本字段 const basicFields: (keyof AppEditSyncedFields)[] = [ 'imageName', 'replicas', From 77ef182f3be6ef3af9cbe4022c14cbeb3fc6eb71 Mon Sep 17 00:00:00 2001 From: zjy <3161362058@qq.com> Date: Wed, 18 Sep 2024 12:07:40 +0800 Subject: [PATCH 4/4] fix dockerfile --- frontend/Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 3fd2cfa279e..3d4809f1f90 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -11,7 +11,7 @@ # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. -FROM node:20.4.0-alpine As base +FROM node:20.4.0-alpine AS base ENV PNPM_HOME="/pnpm" ENV PATH="$PNPM_HOME:$PATH" WORKDIR /app