feat: support multiple volumes (#5337)

* reverse db version * feat: support multiple volumes * add volumeMounts * update form * update * update style
labring · Jan 10, 2025 · 7f9085f · 7f9085f
1 parent 1389cd0
commit 7f9085f
Show file tree

Hide file tree

Showing 17 changed files with 186 additions and 21 deletions.
diff --git 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"
-}
+  "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
@@ -277,5 +277,6 @@
     "add_configmap": "新增配置文件",
     "storage_path_placeholder": "如：/data"
   },
-  "guide_deploy_button": "完成创建"
-}
+  "guide_deploy_button": "完成创建",
+  "shared": "共享"
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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[]) => {