feat:control file migration and template sharing link

Signed-off-by: jingyang <3161362058@qq.com>
labring · Dec 16, 2023 · b06bd04 · b06bd04
1 parent 37709ce
commit b06bd04
Show file tree

Hide file tree

Showing 17 changed files with 221 additions and 177 deletions.
diff --git a/frontend/desktop/src/components/desktop_content/index.tsx b/frontend/desktop/src/components/desktop_content/index.tsx
@@ -30,7 +30,20 @@ export default function DesktopContent(props: any) {
   };
 
   /**
-   * open app
+   * Open Desktop Application
+   *
+   * @param {object} options - Options for opening the application
+   * @param {string} options.appKey - Unique identifier key for the application
+   * @param {object} [options.query={}] - Query parameter object
+   * @param {object} [options.messageData={}] - Message data to be sent to the application
+   * @param {string} options.pathname - Path when the application opens
+   *
+   * Logic:
+   * - Find information about the application and its running state
+   * - If the application does not exist, exit
+   * - If the application is not open (not running), call the openApp method to open it
+   * - If the application is already open (running), bring it to the highest layer
+   * - Send a postMessage to the application window to handle the message data
    */
   const openDesktopApp = useCallback(
     ({

diff --git a/frontend/providers/cronjob/src/api/platform.ts b/frontend/providers/cronjob/src/api/platform.ts
@@ -1,4 +1,4 @@
 import { GET } from '@/services/request';
-import { Response as EnvResponse } from '@/pages/api/platform/getEnv';
+import { EnvResponse } from '@/pages/api/platform/getEnv';
 
 export const getPlatformEnv = () => GET<EnvResponse>('/api/platform/getEnv');
diff --git a/frontend/providers/cronjob/src/pages/_app.tsx b/frontend/providers/cronjob/src/pages/_app.tsx
@@ -1,6 +1,6 @@
-import { getPlatformEnv } from '@/api/platform';
 import { theme } from '@/constants/theme';
 import { useConfirm } from '@/hooks/useConfirm';
+import useEnvStore from '@/store/env';
 import { useGlobalStore } from '@/store/global';
 import '@/styles/reset.scss';
 import { getLangStore, setLangStore } from '@/utils/cookieUtils';
@@ -11,7 +11,7 @@ import { appWithTranslation, useTranslation } from 'next-i18next';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import Router, { useRouter } from 'next/router';
-import NProgress from 'nprogress'; //nprogress module
+import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 import { useEffect, useState } from 'react';
 import 'react-day-picker/dist/style.css';
@@ -36,6 +36,7 @@ const queryClient = new QueryClient({
 
 function App({ Component, pageProps }: AppProps) {
   const router = useRouter();
+  const { SystemEnv, initSystemEnv } = useEnvStore();
   const { i18n } = useTranslation();
   const { setScreenWidth, loading, setLastRoute, lastRoute } = useGlobalStore();
   const [refresh, setRefresh] = useState(false);
@@ -45,6 +46,10 @@ function App({ Component, pageProps }: AppProps) {
     content: '该应用不允许单独使用，点击确认前往 Sealos Desktop 使用。'
   });
 
+  useEffect(() => {
+    initSystemEnv();
+  }, [initSystemEnv]);
+
   useEffect(() => {
     NProgress.start();
     const response = createSealosApp();
@@ -56,19 +61,18 @@ function App({ Component, pageProps }: AppProps) {
         console.log('app init success');
       } catch (err) {
         console.log('App is not running in desktop');
-        const envs = await getPlatformEnv();
         if (!process.env.NEXT_PUBLIC_MOCK_USER) {
           localStorage.removeItem('session');
           openConfirm(() => {
-            window.open(`https://${envs.domain}`, '_self');
+            window.open(`https://${SystemEnv.domain}`, '_self');
           })();
         }
       }
     })();
     NProgress.done();
 
     return response;
-  }, [openConfirm]);
+  }, [SystemEnv.domain, openConfirm]);
 
   // add resize event
   useEffect(() => {
@@ -125,36 +129,35 @@ function App({ Component, pageProps }: AppProps) {
     i18n?.changeLanguage?.(lang);
   }, [refresh, router.asPath]);
 
-  // InternalAppCall
-  const setupInternalAppCallListener = async () => {
-    try {
-      const envs = await getPlatformEnv();
-      const event = async (e: MessageEvent) => {
-        const whitelist = [`https://${envs?.domain}`];
-        if (!whitelist.includes(e.origin)) {
-          return;
-        }
-        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);
-    } catch (error) {}
-  };
   useEffect(() => {
+    // InternalAppCall
+    const setupInternalAppCallListener = async () => {
+      try {
+        const event = async (e: MessageEvent) => {
+          const whitelist = [`https://${SystemEnv.domain}`];
+          if (!whitelist.includes(e.origin)) {
+            return;
+          }
+          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);
+      } catch (error) {}
+    };
+
     setupInternalAppCallListener();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [SystemEnv.domain, router]);
 
   return (
     <>

diff --git a/frontend/providers/cronjob/src/pages/api/platform/getEnv.ts b/frontend/providers/cronjob/src/pages/api/platform/getEnv.ts
@@ -2,16 +2,14 @@ import { jsonRes } from '@/services/backend/response';
 import { ApiResp } from '@/services/kubernet';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-export type Response = {
+export type EnvResponse = {
   domain?: string;
-  env_storage_className?: string;
 };
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
-  jsonRes<Response>(res, {
+  jsonRes<EnvResponse>(res, {
     data: {
-      domain: process.env.SEALOS_DOMAIN || 'cloud.sealos.io',
-      env_storage_className: process.env.STORAGE_CLASSNAME || ''
+      domain: process.env.SEALOS_DOMAIN || 'cloud.sealos.io'
     }
   });
 }
diff --git a/frontend/providers/cronjob/src/store/env.ts b/frontend/providers/cronjob/src/store/env.ts
@@ -0,0 +1,30 @@
+import { getPlatformEnv } from '@/api/platform';
+import { EnvResponse } from '@/pages/api/platform/getEnv';
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+
+type EnvState = {
+  SystemEnv: EnvResponse;
+  initSystemEnv: () => void;
+};
+
+const useEnvStore = create<EnvState>()(
+  immer((set, get) => ({
+    SystemEnv: {
+      domain: ''
+    },
+    initSystemEnv: async () => {
+      try {
+        const data = await getPlatformEnv();
+
+        set((state) => {
+          state.SystemEnv = data;
+        });
+      } catch (error) {
+        console.log(error, 'get system env');
+      }
+    }
+  }))
+);
+
+export default useEnvStore;
diff --git a/frontend/providers/dbprovider/src/api/platform.ts b/frontend/providers/dbprovider/src/api/platform.ts
@@ -1,4 +1,4 @@
-import { Response as EnvResponse } from '@/pages/api/getEnv';
+import { SystemEnvResponse } from '@/pages/api/getEnv';
 import type { Response as DBVersionMapType } from '@/pages/api/platform/getVersion';
 import type { Response as resourcePriceResponse } from '@/pages/api/platform/resourcePrice';
 import { GET, POST } from '@/services/request';
@@ -7,7 +7,7 @@ import { AxiosProgressEvent } from 'axios';
 
 export const getResourcePrice = () => GET<resourcePriceResponse>('/api/platform/resourcePrice');
 
-export const getAppEnv = () => GET<EnvResponse>('/api/getEnv');
+export const getAppEnv = () => GET<SystemEnvResponse>('/api/getEnv');
 
 export const getDBVersionMap = () => GET<DBVersionMapType>('/api/platform/getVersion');
 

diff --git a/frontend/providers/dbprovider/src/pages/_app.tsx b/frontend/providers/dbprovider/src/pages/_app.tsx
@@ -1,26 +1,25 @@
-import { useEffect, useState } from 'react';
-import Head from 'next/head';
-import type { AppProps } from 'next/app';
-import { ChakraProvider } from '@chakra-ui/react';
 import { theme } from '@/constants/theme';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import Router from 'next/router';
-import NProgress from 'nprogress'; //nprogress module
-import { sealosApp, createSealosApp } from 'sealos-desktop-sdk/app';
-import { EVENT_NAME } from 'sealos-desktop-sdk';
 import { useConfirm } from '@/hooks/useConfirm';
-import throttle from 'lodash/throttle';
-import { useGlobalStore } from '@/store/global';
 import { useLoading } from '@/hooks/useLoading';
-import { useRouter } from 'next/router';
-import { appWithTranslation, useTranslation } from 'next-i18next';
+import { useGlobalStore } from '@/store/global';
+import { getDBVersion, getUserPrice } from '@/store/static';
 import { getLangStore, setLangStore } from '@/utils/cookieUtils';
-import { getUserPrice, getDBVersion, StorageClassName, Domain, getEnv } from '@/store/static';
+import { ChakraProvider } from '@chakra-ui/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import throttle from 'lodash/throttle';
+import { appWithTranslation, useTranslation } from 'next-i18next';
+import type { AppProps } from 'next/app';
+import Head from 'next/head';
+import Router, { useRouter } from 'next/router';
+import NProgress from 'nprogress'; //nprogress module
+import { useEffect, useState } from 'react';
+import { EVENT_NAME } from 'sealos-desktop-sdk';
+import { createSealosApp, sealosApp } from 'sealos-desktop-sdk/app';
+import useEnvStore from '@/store/env';
 
+import '@/styles/reset.scss';
 import 'nprogress/nprogress.css';
 import 'react-day-picker/dist/style.css';
-import '@/styles/reset.scss';
-import { getAppEnv } from '@/api/platform';
 
 //Binding events.
 Router.events.on('routeChangeStart', () => NProgress.start());
@@ -41,6 +40,7 @@ const queryClient = new QueryClient({
 function App({ Component, pageProps }: AppProps) {
   const router = useRouter();
   const { i18n } = useTranslation();
+  const { SystemEnv, initSystemEnv } = useEnvStore();
   const { setScreenWidth, loading, setLastRoute } = useGlobalStore();
   const { Loading } = useLoading();
   const [refresh, setRefresh] = useState(false);
@@ -49,6 +49,10 @@ function App({ Component, pageProps }: AppProps) {
     content: '该应用不允许单独使用，点击确认前往 Sealos Desktop 使用。'
   });
 
+  useEffect(() => {
+    initSystemEnv();
+  }, [initSystemEnv]);
+
   useEffect(() => {
     NProgress.start();
     const response = createSealosApp();
@@ -63,15 +67,14 @@ function App({ Component, pageProps }: AppProps) {
         if (!process.env.NEXT_PUBLIC_MOCK_USER) {
           localStorage.removeItem('session');
           openConfirm(() => {
-            window.open(`https://${Domain}`, '_self');
+            window.open(`https://${SystemEnv.domain}`, '_self');
           })();
         }
       }
     })();
     NProgress.done();
-
     return response;
-  }, [openConfirm]);
+  }, [SystemEnv.domain, openConfirm]);
 
   // add resize event
   useEffect(() => {
@@ -102,7 +105,7 @@ function App({ Component, pageProps }: AppProps) {
 
     getUserPrice();
     getDBVersion();
-    getEnv();
+
     (async () => {
       try {
         const lang = await sealosApp.getLanguage();
@@ -134,36 +137,34 @@ function App({ Component, pageProps }: AppProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [refresh, router.asPath]);
 
-  // InternalAppCall
-  const setupInternalAppCallListener = async () => {
-    try {
-      const envs = await getAppEnv();
-      const event = async (e: MessageEvent) => {
-        const whitelist = [`https://${envs?.domain}`];
-        if (!whitelist.includes(e.origin)) {
-          return;
-        }
-        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);
-    } catch (error) {}
-  };
   useEffect(() => {
+    // InternalAppCall
+    const setupInternalAppCallListener = async () => {
+      try {
+        const event = async (e: MessageEvent) => {
+          const whitelist = [`https://${SystemEnv.domain}`];
+          if (!whitelist.includes(e.origin)) {
+            return;
+          }
+          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);
+      } catch (error) {}
+    };
     setupInternalAppCallListener();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [SystemEnv, router]);
 
   return (
     <>

diff --git a/frontend/providers/dbprovider/src/pages/api/getEnv.ts b/frontend/providers/dbprovider/src/pages/api/getEnv.ts
@@ -2,15 +2,15 @@ import { jsonRes } from '@/services/backend/response';
 import { ApiResp } from '@/services/kubernet';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-export type Response = {
+export type SystemEnvResponse = {
   domain: string;
   env_storage_className: string;
   migrate_file_image: string;
   minio_url: string;
 };
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
-  jsonRes<Response>(res, {
+  jsonRes<SystemEnvResponse>(res, {
     data: {
       domain: process.env.SEALOS_DOMAIN || 'cloud.sealos.io',
       env_storage_className: process.env.STORAGE_CLASSNAME || 'openebs-backup',