From 7f9085f36130b6e3971371f5cd44eaf960e1ed6d Mon Sep 17 00:00:00 2001
From: jingyang <72259332+zjy365@users.noreply.github.com>
Date: Fri, 10 Jan 2025 16:09:49 +0800
Subject: [PATCH] feat: support multiple volumes (#5337)

* reverse db version

* feat: support multiple volumes

* add volumeMounts

* update form

* update

* update style
---
 .../public/locales/en/common.json             |  5 +-
 .../public/locales/zh/common.json             |  5 +-
 .../applaunchpad/src/constants/editApp.ts     |  3 ++
 .../providers/applaunchpad/src/mock/apps.ts   |  3 ++
 .../app/detail/components/AppBaseInfo.tsx     | 47 ++++++++++++++++-
 .../app/edit/components/ConfigmapModal.tsx    |  1 +
 .../pages/app/edit/components/EditEnvs.tsx    |  2 +-
 .../src/pages/app/edit/components/Form.tsx    | 50 +++++++++++++++++++
 .../applaunchpad/src/pages/app/edit/index.tsx |  4 +-
 .../providers/applaunchpad/src/types/app.d.ts |  7 ++-
 .../providers/applaunchpad/src/utils/adapt.ts | 22 +++++++-
 .../applaunchpad/src/utils/deployYaml2Json.ts |  7 +--
 .../src/pages/api/platform/getVersion.ts      |  2 +-
 .../providers/dbprovider/src/store/static.ts  |  5 +-
 frontend/providers/template/src/api/delete.ts |  3 +-
 .../src/pages/api/app/listOtherByName.ts      | 38 ++++++++++++--
 .../providers/template/src/types/resource.ts  |  3 +-
 17 files changed, 186 insertions(+), 21 deletions(-)

diff --git a/frontend/providers/applaunchpad/public/locales/en/common.json b/frontend/providers/applaunchpad/public/locales/en/common.json
index 0b7147775e8..0062715f00c 100644
--- a/frontend/providers/applaunchpad/public/locales/en/common.json
+++ b/frontend/providers/applaunchpad/public/locales/en/common.json
@@ -276,5 +276,6 @@
     "add_configmap": "Add Configmaps",
     "storage_path_placeholder": "For Example: /data"
   },
-  "guide_deploy_button": "Complete creation"
-}
\ No newline at end of file
+  "guide_deploy_button": "Complete creation",
+  "shared": "Shared"
+}
diff --git a/frontend/providers/applaunchpad/public/locales/zh/common.json b/frontend/providers/applaunchpad/public/locales/zh/common.json
index da5b88f3929..95df44ea1ac 100644
--- a/frontend/providers/applaunchpad/public/locales/zh/common.json
+++ b/frontend/providers/applaunchpad/public/locales/zh/common.json
@@ -277,5 +277,6 @@
     "add_configmap": "新增配置文件",
     "storage_path_placeholder": "如：/data"
   },
-  "guide_deploy_button": "完成创建"
-}
\ No newline at end of file
+  "guide_deploy_button": "完成创建",
+  "shared": "共享"
+}
diff --git a/frontend/providers/applaunchpad/src/constants/editApp.ts b/frontend/providers/applaunchpad/src/constants/editApp.ts
index 9b19828fbfc..6cf0e2a1915 100644
--- a/frontend/providers/applaunchpad/src/constants/editApp.ts
+++ b/frontend/providers/applaunchpad/src/constants/editApp.ts
@@ -23,6 +23,7 @@ export const editModeMap = (isEdit: boolean) => {
 };
 
 export const defaultEditVal: AppEditType = {
+  kind: 'deployment',
   appName: 'hello-world',
   imageName: 'nginx',
   runCMD: '',
@@ -58,6 +59,8 @@ export const defaultEditVal: AppEditType = {
     serverAddress: 'docker.io'
   },
   storeList: [],
+  volumes: [],
+  volumeMounts: [],
   gpu: {
     manufacturers: 'nvidia',
     type: '',
diff --git a/frontend/providers/applaunchpad/src/mock/apps.ts b/frontend/providers/applaunchpad/src/mock/apps.ts
index f6809b3a744..af76efe453a 100644
--- a/frontend/providers/applaunchpad/src/mock/apps.ts
+++ b/frontend/providers/applaunchpad/src/mock/apps.ts
@@ -238,6 +238,9 @@ export const MOCK_PODS: PodDetailType[] = [
 ];
 
 export const MOCK_APP_DETAIL: AppDetailType = {
+  kind: 'deployment',
+  volumes: [],
+  volumeMounts: [],
   crYamlList: [],
   id: '4bd50c41-149e-4da5-89d5-0308b9dd75c6',
   createTime: '2022/1/22',
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/AppBaseInfo.tsx b/frontend/providers/applaunchpad/src/pages/app/detail/components/AppBaseInfo.tsx
index 5c6ec64d031..4448388b6ac 100644
--- a/frontend/providers/applaunchpad/src/pages/app/detail/components/AppBaseInfo.tsx
+++ b/frontend/providers/applaunchpad/src/pages/app/detail/components/AppBaseInfo.tsx
@@ -100,6 +100,30 @@ const AppBaseInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
     [app]
   );
 
+  const persistentVolumes = useMemo(() => {
+    return app.volumes
+      .filter((item) => 'persistentVolumeClaim' in item)
+      .reduce(
+        (
+          acc: {
+            path: string;
+            name: string;
+          }[],
+          volume
+        ) => {
+          const mount = app.volumeMounts.find((m) => m.name === volume.name);
+          if (mount) {
+            acc.push({
+              path: mount.mountPath,
+              name: volume.name
+            });
+          }
+          return acc;
+        },
+        []
+      );
+  }, [app.volumes, app.volumeMounts]);
+
   return (
     <Box px={6} py={7} position={'relative'}>
       {app?.source?.hasSource && (
@@ -383,7 +407,7 @@ const AppBaseInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
                   borderRadius={'md'}
                   overflow={'hidden'}
                   bg={'#FFF'}
-                  {...(app.storeList.length > 0
+                  {...(app.storeList.length > 0 || persistentVolumes.length > 0
                     ? {
                         mb: 4,
                         border: theme.borders.base
@@ -415,6 +439,27 @@ const AppBaseInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
                       </Box>
                     </Flex>
                   ))}
+                  {persistentVolumes.map((item) => (
+                    <Flex
+                      key={item.path}
+                      alignItems={'center'}
+                      px={4}
+                      py={1}
+                      _notLast={{
+                        borderBottom: theme.borders.base
+                      }}
+                    >
+                      <MyIcon name={'store'} />
+                      <Box ml={4} flex={'1 0 0'} w={0}>
+                        <Box color={'grayModern.900'} fontWeight={'bold'}>
+                          {item.path}
+                        </Box>
+                      </Box>
+                      <Box fontSize={'12px'} color={'grayModern.600'}>
+                        {t('shared')}
+                      </Box>
+                    </Flex>
+                  ))}
                 </Box>
               </AccordionPanel>
             </AccordionItem>
diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/components/ConfigmapModal.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/components/ConfigmapModal.tsx
index c5ede83d5bf..62a68556299 100644
--- a/frontend/providers/applaunchpad/src/pages/app/edit/components/ConfigmapModal.tsx
+++ b/frontend/providers/applaunchpad/src/pages/app/edit/components/ConfigmapModal.tsx
@@ -94,6 +94,7 @@ const ConfigmapModal = ({
                 {t('file value')}{' '}
               </Box>
               <Textarea
+                whiteSpace={'pre-wrap'}
                 rows={10}
                 resize={'both'}
                 {...register('value', {
diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/components/EditEnvs.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/components/EditEnvs.tsx
index 5529ed0cec0..1e09234a2dc 100644
--- a/frontend/providers/applaunchpad/src/pages/app/edit/components/EditEnvs.tsx
+++ b/frontend/providers/applaunchpad/src/pages/app/edit/components/EditEnvs.tsx
@@ -77,13 +77,13 @@ const EditEnvs = ({
             {t('Environment Variables')}
           </Box>
           <Textarea
+            whiteSpace={'pre-wrap'}
             h={'350px'}
             maxH={'100%'}
             value={inputVal}
             resize={'both'}
             placeholder={t('Env Placeholder') || ''}
             overflowX={'auto'}
-            whiteSpace={inputVal === '' ? 'pre-wrap' : 'nowrap'}
             onChange={(e) => setInputVal(e.target.value)}
           />
         </ModalBody>
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 4a73a901a89..8aec2ab98d2 100644
--- a/frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx
+++ b/frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx
@@ -84,6 +84,7 @@ const Form = ({
     control,
     setValue,
     getValues,
+    watch,
     formState: { errors }
   } = formHook;
 
@@ -310,6 +311,30 @@ const Form = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const SliderList = useMemo(() => countSliderList(), [already, refresh]);
 
+  const persistentVolumes = useMemo(() => {
+    return getValues('volumes')
+      .filter((item) => 'persistentVolumeClaim' in item)
+      .reduce(
+        (
+          acc: {
+            path: string;
+            name: string;
+          }[],
+          volume
+        ) => {
+          const mount = getValues('volumeMounts').find((m) => m.name === volume.name);
+          if (mount) {
+            acc.push({
+              path: mount.mountPath,
+              name: volume.name
+            });
+          }
+          return acc;
+        },
+        []
+      );
+  }, [getValues, refresh]);
+
   return (
     <>
       <Grid
@@ -1194,6 +1219,31 @@ const Form = ({
                           />
                         </Flex>
                       ))}
+                      {persistentVolumes.map((item) => (
+                        <Flex key={item.path} _notLast={{ mb: 5 }} alignItems={'center'}>
+                          <Flex
+                            alignItems={'center'}
+                            px={4}
+                            py={1}
+                            border={theme.borders.base}
+                            flex={'0 0 320px'}
+                            w={0}
+                            borderRadius={'md'}
+                            cursor={'not-allowed'}
+                            bg={'grayModern.25'}
+                          >
+                            <MyIcon name={'store'} />
+                            <Box ml={4} flex={'1 0 0'} w={0}>
+                              <Box color={'myGray.900'} fontWeight={'bold'}>
+                                {item.path}
+                              </Box>
+                            </Box>
+                            <Box fontSize={'12px'} color={'grayModern.600'}>
+                              {t('shared')}
+                            </Box>
+                          </Flex>
+                        </Flex>
+                      ))}
                     </Box>
                   </Box>
                 </AccordionPanel>
diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx
index e23a0a94b97..e252323346c 100644
--- a/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx
+++ b/frontend/providers/applaunchpad/src/pages/app/edit/index.tsx
@@ -47,9 +47,9 @@ export const formData2Yamls = (
     filename: 'service.yaml',
     value: json2Service(data)
   },
-  !!data.storeList?.length
+  data.kind === 'statefulset' || data.storeList?.length > 0
     ? {
-        filename: 'statefulSet.yaml',
+        filename: 'statefulset.yaml',
         value: json2DeployCr(data, 'statefulset')
       }
     : {
diff --git a/frontend/providers/applaunchpad/src/types/app.d.ts b/frontend/providers/applaunchpad/src/types/app.d.ts
index 737a09ec384..cbdd42666ca 100644
--- a/frontend/providers/applaunchpad/src/types/app.d.ts
+++ b/frontend/providers/applaunchpad/src/types/app.d.ts
@@ -9,7 +9,9 @@ import type {
   V1HorizontalPodAutoscaler,
   V1Pod,
   SinglePodMetrics,
-  V1StatefulSet
+  V1StatefulSet,
+  V1Volume,
+  V1VolumeMount
 } from '@kubernetes/client-node';
 import { MonitorDataResult } from './monitor';
 
@@ -108,6 +110,9 @@ export interface AppEditType {
     value: number;
   }[];
   labels: { [key: string]: string };
+  volumes: V1Volume[];
+  volumeMounts: V1VolumeMount[];
+  kind: 'deployment' | 'statefulset';
 }
 
 export type AppEditSyncedFields = Pick<
diff --git a/frontend/providers/applaunchpad/src/utils/adapt.ts b/frontend/providers/applaunchpad/src/utils/adapt.ts
index 89a60c779e8..8de20127fa6 100644
--- a/frontend/providers/applaunchpad/src/utils/adapt.ts
+++ b/frontend/providers/applaunchpad/src/utils/adapt.ts
@@ -250,6 +250,19 @@ export const adaptAppDetail = async (configs: DeployKindsType[]): Promise<AppDet
   );
   const gpuNodeSelector = useGpu ? appDeploy?.spec?.template?.spec?.nodeSelector : null;
 
+  const getFilteredVolumeMounts = () => {
+    const volumeMounts = appDeploy?.spec?.template?.spec?.containers?.[0]?.volumeMounts || [];
+    const configMapKeys = Object.keys(deployKindsMap.ConfigMap?.data || {});
+    const storeNames =
+      deployKindsMap.StatefulSet?.spec?.volumeClaimTemplates?.map(
+        (template) => template.metadata?.name
+      ) || [];
+
+    return volumeMounts.filter(
+      (mount) => !configMapKeys.includes(mount.name) && !storeNames.includes(mount.name)
+    );
+  };
+
   return {
     labels: appDeploy?.metadata?.labels || {},
     crYamlList: configs,
@@ -373,6 +386,10 @@ export const adaptAppDetail = async (configs: DeployKindsType[]): Promise<AppDet
           value: Number(item.metadata?.annotations?.value || 0)
         }))
       : [],
+    volumeMounts: getFilteredVolumeMounts(),
+    // keep original non-configMap type volumes
+    volumes: appDeploy?.spec?.template?.spec?.volumes?.filter((volume) => !volume.configMap) || [],
+    kind: appDeploy?.kind?.toLowerCase() as 'deployment' | 'statefulset',
     source: getAppSource(appDeploy)
   };
 };
@@ -393,7 +410,10 @@ export const adaptEditAppData = (app: AppDetailType): AppEditType => {
     'secret',
     'storeList',
     'gpu',
-    'labels'
+    'labels',
+    'kind',
+    'volumes',
+    'volumeMounts'
   ];
 
   const res: Record<string, any> = {};
diff --git a/frontend/providers/applaunchpad/src/utils/deployYaml2Json.ts b/frontend/providers/applaunchpad/src/utils/deployYaml2Json.ts
index a669acb0cff..bc790bf3817 100644
--- a/frontend/providers/applaunchpad/src/utils/deployYaml2Json.ts
+++ b/frontend/providers/applaunchpad/src/utils/deployYaml2Json.ts
@@ -167,11 +167,11 @@ export const json2DeployCr = (data: AppEditType, type: 'deployment' | 'statefuls
             containers: [
               {
                 ...commonContainer,
-                volumeMounts: [...configMapVolumeMounts]
+                volumeMounts: [...(data?.volumeMounts || []), ...configMapVolumeMounts]
               }
             ],
             ...gpuMap,
-            volumes: [...configMapVolumes]
+            volumes: [...(data?.volumes || []), ...configMapVolumes]
           }
         }
       }
@@ -200,6 +200,7 @@ export const json2DeployCr = (data: AppEditType, type: 'deployment' | 'statefuls
               {
                 ...commonContainer,
                 volumeMounts: [
+                  ...(data?.volumeMounts || []),
                   ...configMapVolumeMounts,
                   ...data.storeList.map((item) => ({
                     name: item.name,
@@ -209,7 +210,7 @@ export const json2DeployCr = (data: AppEditType, type: 'deployment' | 'statefuls
               }
             ],
             ...gpuMap,
-            volumes: [...configMapVolumes]
+            volumes: [...(data?.volumes || []), ...configMapVolumes]
           }
         },
         volumeClaimTemplates: storageTemplates
diff --git a/frontend/providers/dbprovider/src/pages/api/platform/getVersion.ts b/frontend/providers/dbprovider/src/pages/api/platform/getVersion.ts
index cb2794da76c..826b8e1143b 100644
--- a/frontend/providers/dbprovider/src/pages/api/platform/getVersion.ts
+++ b/frontend/providers/dbprovider/src/pages/api/platform/getVersion.ts
@@ -46,7 +46,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         item?.metadata?.name &&
         !DBVersionMap[db].find((db) => db.id === item.metadata.name)
       ) {
-        DBVersionMap[db].push({
+        DBVersionMap[db].unshift({
           id: item.metadata.name,
           label: item.metadata.name
         });
diff --git a/frontend/providers/dbprovider/src/store/static.ts b/frontend/providers/dbprovider/src/store/static.ts
index af5614034f7..20ebd88d92d 100644
--- a/frontend/providers/dbprovider/src/store/static.ts
+++ b/frontend/providers/dbprovider/src/store/static.ts
@@ -16,7 +16,10 @@ let retryGetPrice = 3;
 let retryVersion = 3;
 let retryGetEnv = 3;
 export let DBVersionMap: DBVersionMapType = {
-  [DBTypeEnum.postgresql]: [{ id: 'postgresql-14.8.0', label: 'postgresql-14.8.0' }],
+  [DBTypeEnum.postgresql]: [
+    { id: 'postgresql-12.14.0', label: 'postgresql-12.14.0' },
+    { id: 'postgresql-14.8.0', label: 'postgresql-14.8.0' }
+  ],
   [DBTypeEnum.mongodb]: [{ id: 'mongodb-5.0', label: 'mongodb-5.0' }],
   [DBTypeEnum.mysql]: [{ id: 'ac-mysql-8.0.30', label: 'ac-mysql-8.0.30' }],
   [DBTypeEnum.redis]: [{ id: 'redis-7.0.6', label: 'redis-7.0.6' }],
diff --git a/frontend/providers/template/src/api/delete.ts b/frontend/providers/template/src/api/delete.ts
index 7281283a6c0..b479de0dd84 100644
--- a/frontend/providers/template/src/api/delete.ts
+++ b/frontend/providers/template/src/api/delete.ts
@@ -65,7 +65,8 @@ const deleteResourceByKind: Record<AllResourceKindType, DeleteResourceFunction |
   ServiceAccount: (instanceName: string) => delServiceAccountByName(instanceName),
   PersistentVolumeClaim: delPersistentVolumeClaim,
   Service: delServiceByName,
-  ObjectStorageBucket: undefined // use delCR
+  ObjectStorageBucket: undefined, // use delCR
+  Devbox: undefined // use delCR
 };
 
 export const deleteAllResources = async (resources: ResourceListItemType[]) => {
diff --git a/frontend/providers/template/src/pages/api/app/listOtherByName.ts b/frontend/providers/template/src/pages/api/app/listOtherByName.ts
index 3360452b892..48eec1e8bca 100644
--- a/frontend/providers/template/src/pages/api/app/listOtherByName.ts
+++ b/frontend/providers/template/src/pages/api/app/listOtherByName.ts
@@ -146,14 +146,25 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
         kind: 'PromehteusList';
       };
     }>;
-    const prometheusPvcPromise = k8sCore.listNamespacedPersistentVolumeClaim(
+
+    // const prometheusPvcPromise = k8sCore.listNamespacedPersistentVolumeClaim(
+    //   namespace,
+    //   undefined,
+    //   undefined,
+    //   undefined,
+    //   undefined,
+    //   `app.kubernetes.io/name=prometheus,prometheus=${instanceName}`
+    // );
+
+    const pvcPromise = k8sCore.listNamespacedPersistentVolumeClaim(
       namespace,
       undefined,
       undefined,
       undefined,
       undefined,
-      `app.kubernetes.io/name=prometheus,prometheus=${instanceName}`
+      labelSelector
     );
+
     const servicemonitorPromise = k8sCustomObjects.listNamespacedCustomObject(
       'monitoring.coreos.com',
       'v1',
@@ -198,6 +209,24 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       `${labelSelector}`
     );
 
+    const devboxPromise = k8sCustomObjects.listNamespacedCustomObject(
+      'devbox.sealos.io',
+      'v1alpha1',
+      namespace,
+      'devboxes',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      labelSelector
+    ) as Promise<{
+      response: IncomingMessage;
+      body: {
+        items: { kind?: string }[];
+        kind: 'DevboxList';
+      };
+    }>;
+
     const result = await Promise.allSettled([
       secretPromise,
       jobPromise,
@@ -209,10 +238,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       configMapPromise,
       prometheusPromise,
       prometheusPromiseRule,
-      prometheusPvcPromise,
       servicemonitorPromise,
       probePromise,
-      servicePromise
+      servicePromise,
+      devboxPromise,
+      pvcPromise
     ]);
     const data = result
       .map((res) => {
diff --git a/frontend/providers/template/src/types/resource.ts b/frontend/providers/template/src/types/resource.ts
index f987d92631e..06e8a293651 100644
--- a/frontend/providers/template/src/types/resource.ts
+++ b/frontend/providers/template/src/types/resource.ts
@@ -15,7 +15,8 @@ export type AllResourceKindType =
   | 'Instance'
   | 'Service'
   | 'ObjectStorageBucket'
-  | 'PersistentVolumeClaim';
+  | 'PersistentVolumeClaim'
+  | 'Devbox';
 
 export type DeleteResourceFunction = (instanceName: string) => void;