fix:template multiple names (#4047)

Signed-off-by: jingyang <3161362058@qq.com>
labring · Oct 9, 2023 · 3686c3d · 3686c3d
1 parent 25e08fd
commit 3686c3d
Show file tree

Hide file tree

Showing 15 changed files with 120 additions and 101 deletions.
diff --git a/frontend/providers/template/src/api/delete.ts b/frontend/providers/template/src/api/delete.ts
@@ -19,6 +19,9 @@ export const delDBByName = (instanceName: string) =>
 export const delInstanceByName = (instanceName: string) =>
   DELETE('/api/instance/deleteByName', { instanceName });
 
+export const delJobByName = (instanceName: string) =>
+  DELETE('/api/resource/delJob', { instanceName });
+
 export const deleteResourceByKind = (instanceName: string, kind: ResourceKindType) => {
   switch (kind) {
     case 'CronJob':
@@ -33,6 +36,8 @@ export const deleteResourceByKind = (instanceName: string, kind: ResourceKindTyp
       return delDBByName(instanceName);
     case 'Instance':
       return delInstanceByName(instanceName);
+    case 'Job':
+      return delJobByName(instanceName);
     default:
       throw new Error(`Unsupported kind: ${kind}`);
   }

diff --git a/frontend/providers/template/src/api/platform.ts b/frontend/providers/template/src/api/platform.ts
@@ -1,3 +1,6 @@
+import { EnvResponse } from '@/pages/api/platform/getEnv';
 import { GET } from '@/services/request';
 
 export const updateRepo = () => GET('/api/updateRepo');
+
+export const getPlatformEnv = () => GET<EnvResponse>('/api/platform/getEnv');
diff --git a/frontend/providers/template/src/pages/api/platform/getEnv.ts b/frontend/providers/template/src/pages/api/platform/getEnv.ts
@@ -4,6 +4,13 @@ import { jsonRes } from '@/services/backend/response';
 import { ApiResp } from '@/services/kubernet';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
+export type EnvResponse = {
+  SEALOS_CLOUD_DOMAIN: string;
+  SEALOS_CERT_SECRET_NAME: string;
+  TEMPLATE_REPO_URL: string;
+  SEALOS_NAMESPACE: string;
+};
+
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
   let user_namespace = '';
 
@@ -16,7 +23,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
     console.log(error, 'errpr-');
   }
 
-  jsonRes(res, {
+  jsonRes<EnvResponse>(res, {
     data: {
       SEALOS_CLOUD_DOMAIN: process.env.SEALOS_CLOUD_DOMAIN || 'cloud.sealos.io',
       SEALOS_CERT_SECRET_NAME: process.env.SEALOS_CERT_SECRET_NAME || 'wildcard-cert',

diff --git a/frontend/providers/template/src/pages/api/resource/delJob.ts b/frontend/providers/template/src/pages/api/resource/delJob.ts
@@ -0,0 +1,28 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { ApiResp } from '@/services/kubernet';
+import { authSession } from '@/services/backend/auth';
+import { getK8s } from '@/services/backend/kubernetes';
+import { jsonRes } from '@/services/backend/response';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
+  try {
+    const { instanceName } = req.query as { instanceName: string };
+    if (!instanceName) {
+      throw new Error('Job name is empty');
+    }
+
+    const { namespace, k8sBatch } = await getK8s({
+      kubeconfig: await authSession(req.headers)
+    });
+
+    // 删除 Job
+    const result = await k8sBatch.deleteNamespacedJob(instanceName, namespace);
+
+    jsonRes(res, { data: result });
+  } catch (err: any) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}
diff --git a/frontend/providers/template/src/pages/deploy/components/Header.tsx b/frontend/providers/template/src/pages/deploy/components/Header.tsx
@@ -4,7 +4,6 @@ import type { YamlItemType } from '@/types/index';
 import { downLoadBold } from '@/utils/tools';
 import { Box, Button, Flex, Image, Text } from '@chakra-ui/react';
 import dayjs from 'dayjs';
-import JSZip from 'jszip';
 import { useTranslation } from 'next-i18next';
 import { MouseEvent, useCallback } from 'react';
 

diff --git a/frontend/providers/template/src/pages/deploy/index.tsx b/frontend/providers/template/src/pages/deploy/index.tsx
@@ -1,41 +1,41 @@
 import { getTemplateSource, postDeployApp } from '@/api/app';
+import { getPlatformEnv } from '@/api/platform';
 import { editModeMap } from '@/constants/editApp';
 import { useConfirm } from '@/hooks/useConfirm';
 import { useLoading } from '@/hooks/useLoading';
 import { useToast } from '@/hooks/useToast';
-import { GET } from '@/services/request';
 import { useCachedStore } from '@/store/cached';
 import { useGlobalStore } from '@/store/global';
 import type { QueryType, YamlItemType } from '@/types';
-import { TemplateInstanceType, TemplateSourceType } from '@/types/app';
+import { TemplateSourceType } from '@/types/app';
 import { serviceSideProps } from '@/utils/i18n';
 import { generateYamlList, parseTemplateString } from '@/utils/json-yaml';
-import { deepSearch } from '@/utils/tools';
+import { deepSearch, useCopyData } from '@/utils/tools';
 import { Box, Flex, Icon, Text } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import JSYAML from 'js-yaml';
-import { cloneDeep, isEmpty, mapValues, reduce } from 'lodash';
+import { mapValues, reduce } from 'lodash';
 import debounce from 'lodash/debounce';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import Form from './components/Form';
-import Yaml from './components/Yaml';
 import ReadMe from './components/ReadMe';
 
 const ErrorModal = dynamic(() => import('./components/ErrorModal'));
 const Header = dynamic(() => import('./components/Header'), { ssr: false });
 
-export default function EditApp({ appName, tabType }: { appName?: string; tabType: string }) {
+export default function EditApp({ appName }: { appName?: string }) {
   const { t, i18n } = useTranslation();
   const { toast } = useToast();
   const router = useRouter();
+  const { copyData } = useCopyData();
   const { templateName } = router.query as QueryType;
   const { Loading, setIsLoading } = useLoading();
   const [forceUpdate, setForceUpdate] = useState(false);
-  const { title, applyBtnText, applyMessage, applySuccess, applyError } = editModeMap(!!appName);
+  const { title, applyBtnText, applyMessage, applySuccess, applyError } = editModeMap(false);
   const [templateSource, setTemplateSource] = useState<TemplateSourceType>();
   const [yamlList, setYamlList] = useState<YamlItemType[]>([]);
   const [errorMessage, setErrorMessage] = useState('');
@@ -47,7 +47,7 @@ export default function EditApp({ appName, tabType }: { appName?: string; tabTyp
     [templateSource]
   );
 
-  const { data: platformEnvs } = useQuery(['getPlatformEnvs'], () => GET('/api/platform/getEnv'), {
+  const { data: platformEnvs } = useQuery(['getPlatformEnvs'], getPlatformEnv, {
     staleTime: 5 * 60 * 1000
   });
 
@@ -134,7 +134,7 @@ export default function EditApp({ appName, tabType }: { appName?: string; tabTyp
         setIsLoading(false);
         setCached(JSON.stringify({ ...formHook.getValues(), cachedKey: templateName }));
         const _name = encodeURIComponent(`?templateName=${templateName}&sealos_inside=true`);
-        const _domain = platformEnvs.SEALOS_CLOUD_DOMAIN;
+        const _domain = platformEnvs?.SEALOS_CLOUD_DOMAIN;
         const href = `https://${_domain}/?openapp=system-fastdeploy${_name}`;
         return window.open(href, '_self');
       }
@@ -149,14 +149,12 @@ export default function EditApp({ appName, tabType }: { appName?: string; tabTyp
 
       deleteCached();
 
-      openConfirm2(() => {
-        router.push({
-          pathname: '/instance',
-          query: {
-            instanceName: detailName
-          }
-        });
-      })();
+      router.push({
+        pathname: '/instance',
+        query: {
+          instanceName: detailName
+        }
+      });
     } catch (error) {
       setErrorMessage(JSON.stringify(error));
     }
@@ -231,6 +229,11 @@ export default function EditApp({ appName, tabType }: { appName?: string; tabTyp
     }
   );
 
+  const copyTemplateLink = () => {
+    const str = `https://${platformEnvs?.SEALOS_CLOUD_DOMAIN}/?openapp=system-fastdeploy%3FtemplateName%3D${appName}`;
+    copyData(str);
+  };
+
   useEffect(() => {
     setInsideCloud(!(window.top === window));
 
@@ -297,6 +300,7 @@ export default function EditApp({ appName, tabType }: { appName?: string; tabTyp
           </Flex>
           <Text px="6px">/</Text>
           <Text
+            onClick={copyTemplateLink}
             _hover={{ fill: '#219BF4', color: '#219BF4' }}
             color={router.pathname === '/deploy' ? '#262A32' : '#7B838B'}>
             {data?.templateYaml?.metadata?.name}
@@ -312,7 +316,7 @@ export default function EditApp({ appName, tabType }: { appName?: string; tabTyp
           backgroundColor={'rgba(255, 255, 255, 0.90)'}>
           <Header
             templateDetail={data?.templateYaml!}
-            appName={''}
+            appName={appName || ''}
             title={title}
             yamlList={yamlList}
             applyBtnText={insideCloud ? applyBtnText : 'Deploy on sealos'}
@@ -336,13 +340,11 @@ export default function EditApp({ appName, tabType }: { appName?: string; tabTyp
 }
 
 export async function getServerSideProps(content: any) {
-  const appName = content?.query?.name || '';
-  const tabType = content?.query?.type || 'form';
+  const appName = content?.query?.templateName || '';
 
   return {
     props: {
       appName,
-      tabType,
       ...(await serviceSideProps(content))
     }
   };

diff --git a/frontend/providers/template/src/pages/develop/index.tsx b/frontend/providers/template/src/pages/develop/index.tsx
@@ -1,35 +1,35 @@
+import { postDeployApp } from '@/api/app';
+import { getPlatformEnv } from '@/api/platform';
 import MyIcon from '@/components/Icon';
 import { editModeMap } from '@/constants/editApp';
 import { useLoading } from '@/hooks/useLoading';
 import { useToast } from '@/hooks/useToast';
-import { GET } from '@/services/request';
 import { YamlItemType } from '@/types';
-import { TemplateType, TemplateSourceType } from '@/types/app';
+import { TemplateSourceType, TemplateType } from '@/types/app';
 import { serviceSideProps } from '@/utils/i18n';
 import {
   developGenerateYamlList,
   getTemplateDataSource,
   parseTemplateString
 } from '@/utils/json-yaml';
 import { getTemplateDefaultValues } from '@/utils/template';
+import { downLoadBold } from '@/utils/tools';
 import { Box, Button, Flex, Text } from '@chakra-ui/react';
 import { StreamLanguage } from '@codemirror/language';
 import { yaml } from '@codemirror/legacy-modes/mode/yaml';
 import { useQuery } from '@tanstack/react-query';
 import CodeMirror from '@uiw/react-codemirror';
+import dayjs from 'dayjs';
 import JsYaml from 'js-yaml';
 import { debounce, has, isObject, mapValues } from 'lodash';
 import { useTranslation } from 'next-i18next';
 import { useCallback, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { EnvResponse } from '../api/platform/getEnv';
 import ErrorModal from '../deploy/components/ErrorModal';
 import BreadCrumbHeader from './components/BreadCrumbHeader';
 import Form from './components/Form';
 import YamlList from './components/YamlList';
-import { postDeployApp } from '@/api/app';
-import JSZip from 'jszip';
-import { downLoadBold } from '@/utils/tools';
-import dayjs from 'dayjs';
 
 export default function Develop() {
   const { t } = useTranslation();
@@ -46,7 +46,9 @@ export default function Develop() {
     [yamlSource?.source?.defaults?.app_name?.value]
   );
 
-  const { data: platformEnvs } = useQuery(['getPlatformEnvs'], () => GET('/api/platform/getEnv'));
+  const { data: platformEnvs } = useQuery(['getPlatformEnvs'], getPlatformEnv) as {
+    data: EnvResponse;
+  };
 
   const onYamlChange = (value: string) => {
     setYamlValue(value);

diff --git a/frontend/providers/template/src/pages/index.tsx b/frontend/providers/template/src/pages/index.tsx
@@ -16,7 +16,6 @@ export default function AppList() {
   const { searchValue } = useSearchStore();
   const { setInsideCloud, insideCloud } = useCachedStore();
 
-  const { data: PlatformEnvs } = useQuery(['getPlatForm'], () => GET('/api/platform/getEnv'));
   const { data: FastDeployTemplates } = useQuery(['listTemplte'], () => GET('/api/listTemplate'), {
     refetchInterval: 5 * 60 * 1000,
     staleTime: 5 * 60 * 1000
@@ -42,7 +41,6 @@ export default function AppList() {
     router.push({
       pathname: '/deploy',
       query: {
-        type: 'form',
         templateName: name
       }
     });
@@ -75,15 +73,13 @@ export default function AppList() {
       borderRadius={'12px'}
       background={'linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.70) 100%)'}
       py={'36px'}
-      px="42px"
-    >
+      px="42px">
       <Grid
         justifyContent={'center'}
         w={'100%'}
         gridTemplateColumns="repeat(auto-fill,minmax(300px,1fr))"
         gridGap={'24px'}
-        minW={'765px'}
-      >
+        minW={'765px'}>
         {filterData &&
           filterData?.map((item: TemplateType) => {
             return (
@@ -103,17 +99,15 @@ export default function AppList() {
                 borderRadius={'8px'}
                 backgroundColor={'#fff'}
                 boxShadow={'0px 2px 4px 0px rgba(187, 196, 206, 0.25)'}
-                border={'1px solid #EAEBF0'}
-              >
+                border={'1px solid #EAEBF0'}>
                 <Box
                   p={'6px'}
                   w={'48px'}
                   h={'48px'}
                   boxShadow={'0px 1px 2px 0.5px rgba(84, 96, 107, 0.20)'}
                   borderRadius={'4px'}
                   backgroundColor={'#fff'}
-                  border={' 1px solid rgba(255, 255, 255, 0.50)'}
-                >
+                  border={' 1px solid rgba(255, 255, 255, 0.50)'}>
                   <Image src={item?.spec?.icon} alt="" width={'36px'} height={'36px'} />
                 </Box>
                 <Flex mt={'12px'} alignItems={'center'} justifyContent="space-between">
@@ -129,8 +123,7 @@ export default function AppList() {
                     h={'28px'}
                     borderRadius={'4px'}
                     border={'1px solid #DEE0E2'}
-                    backgroundColor={'#F4F6F8'}
-                  >
+                    backgroundColor={'#F4F6F8'}>
                     Deploy
                   </Flex>
                 </Flex>
@@ -146,8 +139,7 @@ export default function AppList() {
                   mt={'8px'}
                   fontSize={'12px'}
                   color={'5A646E'}
-                  fontWeight={400}
-                >
+                  fontWeight={400}>
                   {item?.spec?.description}
                 </Text>
                 <Flex mt={'auto'} justifyContent={'space-between'} alignItems={'center'}>
@@ -163,8 +155,7 @@ export default function AppList() {
                       fill="#5A646E"
                       _hover={{
                         fill: '#0884DD'
-                      }}
-                    >
+                      }}>
                       <path d="M13.6667 9.00004C13.4 9.00004 13.1667 9.23337 13.1667 9.50004V13.5C13.1667 13.6 13.1 13.6667 13 13.6667H3C2.9 13.6667 2.83333 13.6 2.83333 13.5V3.50004C2.83333 3.40004 2.9 3.33337 3 3.33337H7C7.26667 3.33337 7.5 3.10004 7.5 2.83337C7.5 2.56671 7.26667 2.33337 7 2.33337H3C2.36667 2.33337 1.83333 2.86671 1.83333 3.50004V13.5C1.83333 14.1334 2.36667 14.6667 3 14.6667H13C13.6333 14.6667 14.1667 14.1334 14.1667 13.5V9.50004C14.1667 9.23337 13.9333 9.00004 13.6667 9.00004Z" />
                       <path d="M13.6667 2.33337H10C9.73333 2.33337 9.5 2.56671 9.5 2.83337C9.5 3.10004 9.73333 3.33337 10 3.33337H12.4667L7.96667 7.80004C7.76667 8.00004 7.76667 8.30004 7.96667 8.50004C8.06667 8.60004 8.2 8.63337 8.33333 8.63337C8.46667 8.63337 8.6 8.60004 8.7 8.50004L13.1667 4.03337V6.50004C13.1667 6.76671 13.4 7.00004 13.6667 7.00004C13.9333 7.00004 14.1667 6.76671 14.1667 6.50004V2.83337C14.1667 2.56671 13.9333 2.33337 13.6667 2.33337Z" />
                     </Icon>