feat: templates support conditional rendering

frontend/providers/template/deploy/Kubefile

@@ -9,6 +9,7 @@ ENV cloudDomain="127.0.0.1.nip.io"
 ENV cloudPort=""
 ENV certSecretName="wildcard-cert"
 ENV templateRepoUrl="https://github.com/labring-actions/templates"
+ENV templateRepoBranch="main"
 ENV templateRepoPath="templates"
 
 CMD ["kubectl apply -f manifests"]

frontend/providers/template/deploy/manifests/deploy.yaml.tmpl

@@ -75,7 +75,7 @@ spec:
             - name: TEMPLATE_REPO_URL
               value: {{ .templateRepoUrl }}
             - name: TEMPLATE_REPO_BRANCH
-              value: "main"
+              value: {{ .templateRepoBranch }}
             - name: SHOW_AUTHOR
               value: "false"
           image: ghcr.io/labring/sealos-template-frontend:latest

frontend/providers/template/package.json

@@ -38,6 +38,7 @@
     "i18next": "^23.11.5",
     "immer": "^9.0.21",
     "js-cookie": "^3.0.5",
+    "js-interpreter": "^5.1.2",
     "js-yaml": "^4.1.0",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",

frontend/providers/template/src/components/Select/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, forwardRef, useMemo } from 'react';
+import React, { useRef, forwardRef, useMemo, useState } from 'react';
 import {
   Menu,
   Box,
@@ -14,6 +14,7 @@ import MyIcon, { type IconType } from '../Icon';
 
 interface Props extends ButtonProps {
   value?: string;
+  defaultValue?: string;
   placeholder?: string;
   list: {
     icon?: string;
@@ -24,7 +25,7 @@ interface Props extends ButtonProps {
 }
 
 const MySelect = (
-  { placeholder, value, width = 'auto', list, onchange, ...props }: Props,
+  { placeholder, value, defaultValue, width = 'auto', list, onchange, ...props }: Props,
   selectRef: any
 ) => {
   const ref = useRef<HTMLButtonElement>(null);
@@ -40,14 +41,19 @@ const MySelect = (
   };
   const { isOpen, onOpen, onClose } = useDisclosure();
 
+  const [selectedValue, setSelectedValue] = useState(defaultValue || value || '');
+
   useOutsideClick({
     ref: SelectRef,
     handler: () => {
       onClose();
     }
   });
 
-  const activeMenu = useMemo(() => list.find((item) => item.value === value), [list, value]);
+  const activeMenu = useMemo(
+    () => list.find((item) => item.value === (value !== undefined ? value : selectedValue)),
+    [list, value, selectedValue]
+  );
 
   return (
     <Menu autoSelect={false} isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
@@ -114,13 +120,14 @@ const MySelect = (
             <MenuItem
               key={item.value}
               {...menuItemStyles}
-              {...(value === item.value
+              {...((value !== undefined ? value : selectedValue) === item.value
                 ? {
                     color: 'myBlue.600'
                   }
                 : {})}
               onClick={() => {
-                if (onchange && value !== item.value) {
+                setSelectedValue(item.value);
+                if (onchange) {
                   onchange(item.value);
                 }
               }}

frontend/providers/template/src/pages/api/getTemplateSource.ts

@@ -3,13 +3,17 @@ import { getK8s } from '@/services/backend/kubernetes';
 import { jsonRes } from '@/services/backend/response';
 import { ApiResp } from '@/services/kubernet';
 import { TemplateType } from '@/types/app';
-import { getTemplateDataSource, handleTemplateToInstanceYaml } from '@/utils/json-yaml';
+import {
+  getTemplateDataSource,
+  handleTemplateToInstanceYaml,
+  getYamlTemplate,
+} from '@/utils/json-yaml';
 import fs from 'fs';
-import yaml from 'js-yaml';
+import JsYaml from 'js-yaml';
 import type { NextApiRequest, NextApiResponse } from 'next';
 import path from 'path';
 import { replaceRawWithCDN } from './listTemplate';
-import { EnvResponse } from '@/types';
+import { getTemplateEnvs } from '@/utils/tools';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
   try {
@@ -26,7 +30,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       console.log(error, 'Unauthorized allowed');
     }
 
-    const { code, message, dataSource, templateYaml, TemplateEnvs, yamlList } =
+    const { code, message, dataSource, templateYaml, TemplateEnvs, appYaml } =
       await GetTemplateByName({
         namespace: user_namespace,
         templateName: templateName
@@ -43,8 +47,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
           ...dataSource,
           ...TemplateEnvs
         },
-        yamlList: yamlList,
-        templateYaml: templateYaml
+        appYaml,
+        templateYaml
       }
     });
   } catch (err: any) {
@@ -66,15 +70,7 @@ export async function GetTemplateByName({
   const cdnUrl = process.env.CDN_URL;
   const targetFolder = process.env.TEMPLATE_REPO_FOLDER || 'template';
 
-  const TemplateEnvs: EnvResponse = {
-    SEALOS_CLOUD_DOMAIN: process.env.SEALOS_CLOUD_DOMAIN || 'cloud.sealos.io',
-    SEALOS_CERT_SECRET_NAME: process.env.SEALOS_CERT_SECRET_NAME || 'wildcard-cert',
-    TEMPLATE_REPO_URL:
-      process.env.TEMPLATE_REPO_URL || 'https://github.com/labring-actions/templates',
-    SEALOS_NAMESPACE: namespace || '',
-    SEALOS_SERVICE_ACCOUNT: namespace.replace('ns-', ''),
-    SHOW_AUTHOR: process.env.SHOW_AUTHOR || 'false'
-  };
+  const TemplateEnvs = getTemplateEnvs(namespace)
 
   const originalPath = process.cwd();
   const targetPath = path.resolve(originalPath, 'templates', targetFolder);
@@ -87,10 +83,7 @@ export async function GetTemplateByName({
     ? fs.readFileSync(_tempalte?.spec?.filePath, 'utf-8')
     : fs.readFileSync(`${targetPath}/${_tempalteName}`, 'utf-8');
 
-  const yamlData = yaml.loadAll(yamlString);
-  const templateYaml: TemplateType = yamlData.find(
-    (item: any) => item.kind === 'Template'
-  ) as TemplateType;
+  let { appYaml, templateYaml } = getYamlTemplate(yamlString, TemplateEnvs);
   if (!templateYaml) {
     return {
       code: 40000,
@@ -103,8 +96,7 @@ export async function GetTemplateByName({
     templateYaml.spec.icon = replaceRawWithCDN(templateYaml.spec.icon, cdnUrl);
   }
 
-  const yamlList = yamlData.filter((item: any) => item.kind !== 'Template');
-  const dataSource = getTemplateDataSource(templateYaml, TemplateEnvs);
+  const dataSource = getTemplateDataSource(templateYaml);
 
   // Convert template to instance
   const instanceName = dataSource?.defaults?.['app_name']?.value;
@@ -115,14 +107,14 @@ export async function GetTemplateByName({
     };
   }
   const instanceYaml = handleTemplateToInstanceYaml(templateYaml, instanceName);
-  yamlList.unshift(instanceYaml);
+  appYaml = `${JsYaml.dump(instanceYaml)}\n---\n${appYaml}`
 
   return {
     code: 20000,
     message: 'success',
     dataSource,
     TemplateEnvs,
-    yamlList,
+    appYaml,
     templateYaml
   };
 }

frontend/providers/template/src/pages/api/platform/getEnv.ts

@@ -3,6 +3,7 @@ import { getK8s } from '@/services/backend/kubernetes';
 import { jsonRes } from '@/services/backend/response';
 import { ApiResp } from '@/services/kubernet';
 import { EnvResponse } from '@/types/index';
+import { getTemplateEnvs } from '@/utils/tools';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
@@ -18,14 +19,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
   }
 
   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',
-      TEMPLATE_REPO_URL:
-        process.env.TEMPLATE_REPO_URL || 'https://github.com/labring-actions/templates',
-      SEALOS_NAMESPACE: user_namespace || '',
-      SEALOS_SERVICE_ACCOUNT: user_namespace.replace('ns-', ''),
-      SHOW_AUTHOR: process.env.SHOW_AUTHOR || 'false'
-    }
+    data: getTemplateEnvs(user_namespace)
   });
 }

frontend/providers/template/src/pages/api/updateRepo.ts

@@ -4,11 +4,12 @@ import { ApiResp } from '@/services/kubernet';
 import { TemplateType } from '@/types/app';
 import { exec } from 'child_process';
 import fs from 'fs';
-import JSYAML from 'js-yaml';
 import type { NextApiRequest, NextApiResponse } from 'next';
 import path from 'path';
 import util from 'util';
 import * as k8s from '@kubernetes/client-node';
+import { getYamlTemplate } from '@/utils/json-yaml';
+import { getTemplateEnvs } from '@/utils/tools';
 const execAsync = util.promisify(exec);
 
 const readFileList = (targetPath: string, fileList: unknown[] = []) => {
@@ -73,6 +74,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
     const jsonPath = path.resolve(originalPath, 'templates.json');
     const branch = process.env.TEMPLATE_REPO_BRANCH || 'main';
 
+    const TemplateEnvs = getTemplateEnvs()
+
     try {
       const gitConfigResult = await execAsync(
         'git config --global --add safe.directory /app/providers/template/templates',
@@ -105,13 +108,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
         if (!item) return;
         const fileName = path.basename(item);
         const content = fs.readFileSync(item, 'utf-8');
-        const yamlTemplate = JSYAML.loadAll(content)[0] as TemplateType;
-        if (!!yamlTemplate) {
-          const appTitle = yamlTemplate.spec.title.toUpperCase();
-          yamlTemplate.spec['deployCount'] = templateStaticMap[appTitle];
-          yamlTemplate.spec['filePath'] = item;
-          yamlTemplate.spec['fileName'] = fileName;
-          jsonObjArr.push(yamlTemplate);
+        const { templateYaml } = getYamlTemplate(content, TemplateEnvs)
+        if (!!templateYaml) {
+          const appTitle = templateYaml.spec.title.toUpperCase();
+          templateYaml.spec['deployCount'] = templateStaticMap[appTitle];
+          templateYaml.spec['filePath'] = item;
+          templateYaml.spec['fileName'] = fileName;
+          jsonObjArr.push(templateYaml);
         }
       } catch (error) {
         console.log(error, 'yaml parse error');

frontend/providers/template/src/pages/api/v1alpha/createInstance.ts

@@ -3,7 +3,6 @@ import { getK8s } from '@/services/backend/kubernetes';
 import { jsonRes } from '@/services/backend/response';
 import { ApiResp } from '@/services/kubernet';
 import { generateYamlList, parseTemplateString } from '@/utils/json-yaml';
-import JSYAML from 'js-yaml';
 import { mapValues, reduce } from 'lodash';
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { GetTemplateByName } from '../getTemplateSource';
@@ -19,7 +18,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       kubeconfig: await authSession(req.headers)
     });
 
-    const { code, message, dataSource, templateYaml, TemplateEnvs, yamlList } =
+    const { code, message, dataSource, templateYaml, TemplateEnvs, appYaml } =
       await GetTemplateByName({
         namespace,
         templateName
@@ -40,9 +39,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       },
       {}
     );
-    const yamlString = yamlList?.map((item) => JSYAML.dump(item)).join('---\n');
 
-    const generateStr = parseTemplateString(yamlString!, /\$\{\{\s*(.*?)\s*\}\}/g, {
+    const generateStr = parseTemplateString(appYaml || '', {
       ...TemplateEnvs,
       defaults: _defaults,
       inputs: { ..._inputs, ...templateForm }

frontend/providers/template/src/pages/api/v1alpha/exportTemplate.ts

@@ -6,7 +6,7 @@ import { authSession } from '@/services/backend/auth';
 import { getK8s } from '@/services/backend/kubernetes';
 import { parseTemplateString, generateYamlList } from '@/utils/json-yaml';
 import { mapValues, reduce } from 'lodash';
-import JSYAML from 'js-yaml';
+import JsYaml from 'js-yaml';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
   try {
@@ -19,7 +19,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       kubeconfig: await authSession(req.headers)
     });
 
-    const { code, message, dataSource, templateYaml, TemplateEnvs, yamlList } =
+    const { code, message, dataSource, templateYaml, TemplateEnvs, appYaml } =
       await GetTemplateByName({
         namespace,
         templateName
@@ -40,15 +40,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       },
       {}
     );
-    const yamlString = yamlList?.map((item) => JSYAML.dump(item)).join('---\n');
 
-    const generateStr = parseTemplateString(yamlString!, /\$\{\{\s*(.*?)\s*\}\}/g, {
+    const generateStr = parseTemplateString(appYaml || '', {
       ...TemplateEnvs,
       defaults: _defaults,
       inputs: { ..._inputs, ...templateForm }
     });
     const correctYaml = generateYamlList(generateStr, app_name);
-    const yaml = JSYAML.loadAll(correctYaml[0].value);
+    const yaml = JsYaml.loadAll(correctYaml[0].value);
 
     jsonRes(res, {
       code: 200,

frontend/providers/template/src/pages/api/v1alpha/getTemplate.ts

@@ -13,7 +13,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       kubeconfig: await authSession(req.headers)
     });
 
-    const { code, message, dataSource, templateYaml, TemplateEnvs, yamlList } =
+    const { code, message, dataSource, templateYaml, TemplateEnvs, appYaml } =
       await GetTemplateByName({
         namespace,
         templateName
@@ -30,8 +30,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
           ...dataSource,
           ...TemplateEnvs
         },
-        yamlList: yamlList,
-        templateYaml: templateYaml
+        appYaml,
+        templateYaml
       }
     });
   } catch (err: any) {