feat:desktop add umami (#3676)

Signed-off-by: jingyang <3161362058@qq.com>

frontend/desktop/.gitignore

@@ -27,7 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
-
+data/config.local.json
 # vercel
 .vercel
 

frontend/desktop/data/config.json

@@ -0,0 +1,3 @@
+{
+  "scripts": []
+}

frontend/desktop/deploy/manifests/deploy.yaml.tmpl

@@ -37,6 +37,10 @@ metadata:
 data:
   config.yaml: |-
     addr: :3000
+  config.json: |-
+  {
+    "scripts": []
+  }
 ---
 apiVersion: apps/v1
 kind: Deployment
@@ -165,6 +169,9 @@ spec:
             - name: desktop-frontend-volume
               mountPath: /config.yaml
               subPath: config.yaml
+            - mountPath: /app/data/config.json
+              name: desktop-frontend-volume
+              subPath: config.json
           resources:
             limits:
               cpu: 1000m

frontend/desktop/src/pages/api/system/getSystemConfig.ts

@@ -0,0 +1,28 @@
+import { jsonRes } from '@/services/backend/response';
+import { SystemConfigType } from '@/types/system';
+import { readFileSync } from 'fs';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const config = await getSystemConfig();
+  jsonRes(res, {
+    data: config,
+    code: 200
+  });
+}
+
+const defaultConfig: SystemConfigType = {
+  scripts: []
+};
+
+export async function getSystemConfig(): Promise<SystemConfigType> {
+  try {
+    const filename =
+      process.env.NODE_ENV === 'development' ? 'data/config.local.json' : '/app/data/config.json';
+    const res = JSON.parse(readFileSync(filename, 'utf-8'));
+    return res;
+  } catch (error) {
+    console.log('get system config error, set default');
+    return defaultConfig;
+  }
+}

frontend/desktop/src/pages/index.tsx

@@ -6,11 +6,14 @@ import { enableRecharge } from '@/services/enable';
 import request from '@/services/request';
 import useAppStore from '@/stores/app';
 import useSessionStore from '@/stores/session';
+import { ApiResp } from '@/types';
+import { SystemConfigType } from '@/types/system';
 import { parseOpenappQuery } from '@/utils/format';
 import { useColorMode } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useRouter } from 'next/router';
+import Script from 'next/script';
 import { createContext, useEffect, useState } from 'react';
 const destination = '/signin';
 interface IMoreAppsContext {
@@ -35,6 +38,10 @@ export default function Home({
   const setAutoLaunch = useAppStore((state) => state.setAutoLaunch);
   const cancelAutoLaunch = useAppStore((state) => state.cancelAutoLaunch);
 
+  const { data: systemConfig, refetch } = useQuery(['getSystemConfig'], () =>
+    request<any, ApiResp<SystemConfigType>>('/api/system/getSystemConfig')
+  );
+
   useEffect(() => {
     colorMode === 'dark' ? toggleColorMode() : null;
   }, [colorMode, toggleColorMode]);
@@ -79,6 +86,9 @@ export default function Home({
 
   return (
     <Layout>
+      {systemConfig?.data?.scripts?.map((item, i) => {
+        return <Script key={i} {...item} />;
+      })}
       <MoreAppsContext.Provider value={{ showMoreApps, setShowMoreApps }}>
         <RechargeEnabledContext.Provider value={rechargeEnabled}>
           <DesktopContent />

frontend/desktop/src/types/system.ts

@@ -0,0 +1,8 @@
+export type SystemConfigType = {
+  scripts: ScriptConfig[];
+};
+
+export type ScriptConfig = {
+  src: string;
+  'data-website-id'?: string;
+};

frontend/providers/dbprovider/deploy/Kubefile

@@ -8,5 +8,7 @@ COPY manifests manifests
 ENV cloudDomain="127.0.0.1.nip.io"
 ENV cloudPort=""
 ENV certSecretName="wildcard-cert"
+ENV monitorUrl=""
+
 
 CMD ["kubectl apply -f manifests"]

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

@@ -42,6 +42,8 @@ spec:
               value: {{ .cloudDomain }}
             - name: SEALOS_PORT
               value: "{{ if .cloudPort }}:{{ .cloudPort }}{{ end }}"
+            - name: MONITOR_URL
+              value: {{ .monitorUrl }}
           securityContext:
             runAsNonRoot: true
             runAsUser: 1001

frontend/providers/dbprovider/src/pages/db/detail/index.tsx

@@ -69,7 +69,7 @@ const AppDetail = ({
           flex={'0 0 400px'}
           mr={4}
           overflowY={'auto'}
-          zIndex={1}
+          zIndex={9}
           transition={'0.4s'}
           bg={'white'}
           border={theme.borders.sm}

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

@@ -58,8 +58,6 @@ spec:
               value: {{ .certSecretName }}
             - name: TEMPLATE_REPO_URL
               value: {{ .templateRepoUrl }}
-            - name: TEMPLATE_REPO_PATH
-              value: {{ .templateRepoPath }}
           image: ghcr.io/labring/sealos-template-frontend:latest
           imagePullPolicy: Always
           volumeMounts:

frontend/providers/template/src/pages/deploy/index.tsx

@@ -8,11 +8,10 @@ import { GET } from '@/services/request';
 import { useCachedStore } from '@/store/cached';
 import { useGlobalStore } from '@/store/global';
 import type { QueryType, YamlItemType } from '@/types';
-import { TemplateSource, TemplateType, YamlType } from '@/types/app';
+import { TemplateSource, TemplateType } from '@/types/app';
 import { serviceSideProps } from '@/utils/i18n';
 import { generateYamlList, parseTemplateString } from '@/utils/json-yaml';
 import { processEnvValue } from '@/utils/tools';
-import { getUserKubeConfig } from '@/utils/user';
 import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Flex } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import JSYAML from 'js-yaml';
@@ -108,9 +107,9 @@ const EditApp = ({ appName, tabType }: { appName?: string; tabType: string }) =>
   }, 200);
 
   const getCachedValue = () => {
-    if (!cached) return {};
+    if (!cached) return null;
     const cachedValue = JSON.parse(cached);
-    return cachedValue?.cachedKey === templateName ? cachedValue : {};
+    return cachedValue?.cachedKey === templateName ? cachedValue : null;
   };
 
   // form
@@ -209,26 +208,23 @@ const EditApp = ({ appName, tabType }: { appName?: string; tabType: string }) =>
     try {
       const yamlString = res.yamlList?.map((item) => JSYAML.dump(item)).join('---\n');
       const output = mapValues(res?.source.defaults, (value) => value.value);
+
       const generateStr = parseTemplateString(yamlString, /\$\{\{\s*(.*?)\s*\}\}/g, {
         ...res?.source,
         defaults: output,
-        inputs: getFormDefaultValues(res)
+        inputs: getCachedValue() ? JSON.parse(cached) : getFormDefaultValues(res)
       });
+
       setCorrectYaml(generateStr);
       setYamlList(generateYamlList(generateStr, detailName));
     } catch (err) {
       console.log(err, 'getTemplateData');
     }
   };
 
-  useEffect(() => {
-    const cached = getCachedValue();
-    formOnchangeDebounce(cached);
-  }, [templateSource]);
-
   useEffect(() => {
     setInsideCloud(!(window.top === window));
-    // get template data
+
     (async () => {
       try {
         await getTemplateData();