From 1389cd0d03daf0846854070d0e50ba56a15536fa Mon Sep 17 00:00:00 2001
From: xudaotutou <13435638964@163.com>
Date: Fri, 10 Jan 2025 15:21:56 +0800
Subject: [PATCH 1/5] fix(devbox): fix invaild devbox cr (#5339)

---
 .../detail/[name]/components/Version.tsx      |  4 +-
 .../app/api/v1/getDevboxDetail/route.ts       |  2 +-
 frontend/providers/devbox/types/k8s.d.ts      |  2 +-
 frontend/providers/devbox/utils/adapt.ts      | 82 ++++++-------------
 4 files changed, 28 insertions(+), 62 deletions(-)

diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx
index 2950d9c3b7c..439a1c88530 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx
@@ -25,11 +25,11 @@ import CreateTemplateModal from '@/app/[lang]/(platform)/template/updateTemplate
 import SelectTemplateModal from '@/app/[lang]/(platform)/template/updateTemplate/SelectActionModal'
 import UpdateTemplateRepositoryModal from '@/app/[lang]/(platform)/template/updateTemplate/UpdateTemplateRepositoryModal'
 import AppSelectModal from '@/components/modals/AppSelectModal'
+import useReleaseDriver from '@/hooks/useReleaseDriver'
 import { useDevboxStore } from '@/stores/devbox'
 import { useEnvStore } from '@/stores/env'
 import { AppListItemType } from '@/types/app'
 import { parseTemplateConfig } from '@/utils/tools'
-import useReleaseDriver from '@/hooks/useReleaseDriver'
 
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 6)
 
@@ -260,7 +260,7 @@ const Version = () => {
           <SealosMenu
             width={100}
             Button={
-              <MenuButton as={Button} variant={'square'} boxSize={'32px'} data-group>
+              <MenuButton as={Button} variant={'square'} boxSize={'32px'} data-group isDisabled={item?.status?.value !== 'Success'}>
                 <MyIcon
                   name={'more'}
                   color={'grayModern.600'}
diff --git a/frontend/providers/devbox/app/api/v1/getDevboxDetail/route.ts b/frontend/providers/devbox/app/api/v1/getDevboxDetail/route.ts
index 90ee4298bc5..c0d4f7e3d73 100644
--- a/frontend/providers/devbox/app/api/v1/getDevboxDetail/route.ts
+++ b/frontend/providers/devbox/app/api/v1/getDevboxDetail/route.ts
@@ -52,7 +52,7 @@ export async function GET(req: NextRequest) {
 
     const devbox = {
       status:
-        body.status.phase && devboxStatusMap[body.status.phase]
+        body.status?.phase && devboxStatusMap[body.status.phase]
           ? devboxStatusMap[body.status.phase]
           : devboxStatusMap.Error,
     }
diff --git a/frontend/providers/devbox/types/k8s.d.ts b/frontend/providers/devbox/types/k8s.d.ts
index f76768ed883..3545cac98e9 100644
--- a/frontend/providers/devbox/types/k8s.d.ts
+++ b/frontend/providers/devbox/types/k8s.d.ts
@@ -59,7 +59,7 @@ export type KBDevboxTypeV2 = {
     creationTimestamp: string
   }
   spec: KBDevboxSpecV2
-  status: {
+  status?: {
     lastState: {
       terminated?: {
         containerID: string
diff --git a/frontend/providers/devbox/utils/adapt.ts b/frontend/providers/devbox/utils/adapt.ts
index e4c1b0ef556..370dd8f16b8 100644
--- a/frontend/providers/devbox/utils/adapt.ts
+++ b/frontend/providers/devbox/utils/adapt.ts
@@ -9,7 +9,6 @@ import {
 import { GetDevboxByNameReturn } from '@/types/adapt'
 import { DBListItemType, KbPgClusterType } from '@/types/cluster'
 import {
-  DevboxDetailType,
   DevboxDetailTypeV2,
   DevboxListItemType,
   DevboxListItemTypeV2,
@@ -70,10 +69,10 @@ export const adaptDevboxListItemV2 = ([devbox, template]: [KBDevboxTypeV2, {
     name: devbox.metadata.name || 'devbox',
     template,
     status:
-      devbox.status.phase && devboxStatusMap[devbox.status.phase]
+      devbox.status?.phase && devboxStatusMap[devbox.status.phase]
         ? devboxStatusMap[devbox.status.phase]
         : devboxStatusMap.Error,
-    sshPort: devbox.status.network.nodePort,
+    sshPort: devbox.status?.network.nodePort || 65535,
     createTime: dayjs(devbox.metadata.creationTimestamp).format('YYYY/MM/DD HH:mm'),
     cpu: cpuFormatToM(devbox.spec.resource.cpu),
     memory: memoryFormatToMi(devbox.spec.resource.memory),
@@ -88,60 +87,25 @@ export const adaptDevboxListItemV2 = ([devbox, template]: [KBDevboxTypeV2, {
       yData: new Array(30).fill('0')
     },
     lastTerminatedReason:
-      devbox.status.lastState?.terminated && devbox.status.lastState.terminated.reason === 'Error'
-        ? devbox.status.state.waiting
-          ? devbox.status.state.waiting.reason
-          : devbox.status.state.terminated
-            ? devbox.status.state.terminated.reason
-            : ''
-        : ''
-  }
-}
-export const adaptDevboxDetail = (
-  devbox: KBDevboxType & { portInfos: any[] }
-): DevboxDetailType => {
-  return {
-    id: devbox.metadata?.uid || ``,
-    name: devbox.metadata.name || 'devbox',
-    runtimeType: devbox.spec.runtimeType || '',
-    runtimeVersion: devbox.spec.runtimeRef.name || '',
-    status:
-      devbox.status.phase && devboxStatusMap[devbox.status.phase]
-        ? devboxStatusMap[devbox.status.phase]
-        : devboxStatusMap.Error,
-    sshPort: devbox.status.network.nodePort,
-    isPause: devbox.status.phase === 'Stopped',
-    createTime: dayjs(devbox.metadata.creationTimestamp).format('YYYY-MM-DD HH:mm'),
-    cpu: cpuFormatToM(devbox.spec.resource.cpu),
-    memory: memoryFormatToMi(devbox.spec.resource.memory),
-    usedCpu: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    usedMemory: {
-      name: '',
-      xData: new Array(30).fill(0),
-      yData: new Array(30).fill('0')
-    },
-    networks: devbox.portInfos,
-    lastTerminatedReason:
-      devbox.status.lastState?.terminated && devbox.status.lastState.terminated.reason === 'Error'
-        ? devbox.status.state.waiting
-          ? devbox.status.state.waiting.reason
-          : devbox.status.state.terminated
-            ? devbox.status.state.terminated.reason
-            : ''
+      devbox.status ?
+        devbox.status.lastState?.terminated && devbox.status.lastState.terminated.reason === 'Error'
+          ? devbox.status.state.waiting
+            ? devbox.status.state.waiting.reason
+            : devbox.status.state.terminated
+              ? devbox.status.state.terminated.reason
+              : ''
+          : ''
         : ''
   }
 }
+
 export const adaptDevboxDetailV2 = (
   [devbox, portInfos, template]: GetDevboxByNameReturn
 ): DevboxDetailTypeV2 => {
   console.log('adaptDevboxDetailV2')
-  const status =       devbox.status.phase && devboxStatusMap[devbox.status.phase]
-  ? devboxStatusMap[devbox.status.phase]
-  : devboxStatusMap.Error
+  const status = devbox.status?.phase && devboxStatusMap[devbox.status.phase]
+    ? devboxStatusMap[devbox.status.phase]
+    : devboxStatusMap.Error
   return {
     id: devbox.metadata?.uid || ``,
     name: devbox.metadata.name || 'devbox',
@@ -153,8 +117,8 @@ export const adaptDevboxDetailV2 = (
     image: template.image,
     iconId: template.templateRepository.iconId || '',
     status,
-    sshPort: devbox.status.network.nodePort,
-    isPause: devbox.status.phase === 'Stopped',
+    sshPort: devbox.status?.network.nodePort || 65535,
+    isPause: devbox.status?.phase === 'Stopped',
     createTime: dayjs(devbox.metadata.creationTimestamp).format('YYYY-MM-DD HH:mm'),
     cpu: cpuFormatToM(devbox.spec.resource.cpu),
     memory: memoryFormatToMi(devbox.spec.resource.memory),
@@ -170,12 +134,14 @@ export const adaptDevboxDetailV2 = (
     },
     networks: portInfos || [],
     lastTerminatedReason:
-      devbox.status.lastState?.terminated && devbox.status.lastState.terminated.reason === 'Error'
-        ? devbox.status.state.waiting
-          ? devbox.status.state.waiting.reason
-          : devbox.status.state.terminated
-            ? devbox.status.state.terminated.reason
-            : ''
+      devbox.status ?
+        devbox.status.lastState?.terminated && devbox.status.lastState.terminated.reason === 'Error'
+          ? devbox.status.state.waiting
+            ? devbox.status.state.waiting.reason
+            : devbox.status.state.terminated
+              ? devbox.status.state.terminated.reason
+              : ''
+          : ''
         : ''
   }
 }

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 2/5] 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;
 

From af8e841fef830d8fe70347fd6e9b7f56d11b8b5e Mon Sep 17 00:00:00 2001
From: xudaotutou <13435638964@163.com>
Date: Fri, 10 Jan 2025 16:56:34 +0800
Subject: [PATCH 3/5] Fix devbox name regx (#5340)

* fix(devbox): fix devbox name

* fix(devbox): fix show error
---
 .../devbox/services/backend/response.ts          | 16 ++++++++++++----
 frontend/providers/devbox/utils/vaildate.ts      |  2 +-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/providers/devbox/services/backend/response.ts b/frontend/providers/devbox/services/backend/response.ts
index b78b5f1c362..44254e8ddd9 100644
--- a/frontend/providers/devbox/services/backend/response.ts
+++ b/frontend/providers/devbox/services/backend/response.ts
@@ -15,13 +15,21 @@ export const jsonRes = <T = any>(props: {
     return NextResponse.json(ERROR_RESPONSE[error])
   }
   const body = error?.body
-  if(body instanceof V1Status && body.message?.includes('40001:')) {
-    return NextResponse.json(ERROR_RESPONSE[ERROR_ENUM.outstandingPayment])
+  if (body instanceof V1Status) {
+    if (body.message?.includes('40001:')) {
+      return NextResponse.json(ERROR_RESPONSE[ERROR_ENUM.outstandingPayment])
+    } else {
+      return NextResponse.json({
+        code: 500,
+        statusText: body.message,
+        message: body.message,
+      })
+    }
   }
 
   let msg = message
   if ((code < 200 || code >= 400) && !message) {
-    if(code >= 500) {
+    if (code >= 500) {
       console.log(error)
       msg = 'Internal Server Error'
     } else {
@@ -34,7 +42,7 @@ export const jsonRes = <T = any>(props: {
     }
     console.log('===jsonRes===\n', error)
   }
-  if(code >= 500) {
+  if (code >= 500) {
     return NextResponse.json({
       code,
       statusText: '',
diff --git a/frontend/providers/devbox/utils/vaildate.ts b/frontend/providers/devbox/utils/vaildate.ts
index b02002e5e3c..a59c4d7c9b5 100644
--- a/frontend/providers/devbox/utils/vaildate.ts
+++ b/frontend/providers/devbox/utils/vaildate.ts
@@ -7,7 +7,7 @@ export const versionSchema = z.string().min(1).regex(/[\w][\w.-]{0,127}/, {
   message: versionErrorEnum.INVALID_VERSION,
 });
 export const templateNameSchema = z.string().regex(/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/);
-export const devboxNameSchema = z.string().regex(/^[a-z]([-a-z0-9]*[a-z0-9])?/);
+export const devboxNameSchema = z.string().regex(/^[a-z]([-a-z0-9]*[a-z0-9])?$/);
 export const createTemplateRepositorySchema = z.object({
   description: z.string().max(255),
   version: z.string().min(1).max(255),

From 03c30b8a9eb52e053042bfd7ba55441b674f60c2 Mon Sep 17 00:00:00 2001
From: xudaotutou <13435638964@163.com>
Date: Fri, 10 Jan 2025 21:31:42 +0800
Subject: [PATCH 4/5] fix(devbox):support use deleted template (#5342)

---
 .../app/api/templateRepository/template/getConfig/route.ts   | 5 +++--
 .../app/api/templateRepository/withTemplate/update/route.ts  | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/providers/devbox/app/api/templateRepository/template/getConfig/route.ts b/frontend/providers/devbox/app/api/templateRepository/template/getConfig/route.ts
index 23babfc56e5..abdb6addc1a 100644
--- a/frontend/providers/devbox/app/api/templateRepository/template/getConfig/route.ts
+++ b/frontend/providers/devbox/app/api/templateRepository/template/getConfig/route.ts
@@ -19,7 +19,6 @@ export async function GET(req: NextRequest) {
     const template = await devboxDB.template.findUnique({
       where: {
         uid,
-        isDeleted: false,
       },
       select: {
         config: true,
@@ -36,8 +35,10 @@ export async function GET(req: NextRequest) {
             regionUid: true,
             isDeleted: true,
             isPublic: true,
+            
           }
-        }
+        },
+        isDeleted: true
       }
     })
     const regionUid = getRegionUid()
diff --git a/frontend/providers/devbox/app/api/templateRepository/withTemplate/update/route.ts b/frontend/providers/devbox/app/api/templateRepository/withTemplate/update/route.ts
index 3f0275e8a59..64ce358be30 100644
--- a/frontend/providers/devbox/app/api/templateRepository/withTemplate/update/route.ts
+++ b/frontend/providers/devbox/app/api/templateRepository/withTemplate/update/route.ts
@@ -74,9 +74,10 @@ export async function POST(req: NextRequest) {
     }
     const templateRepository = await devboxDB.templateRepository.findUnique({
       where: {
+        isDeleted: false,
         uid: query.templateRepositoryUid,
+        regionUid: getRegionUid(),
         organizationUid: payload.organizationUid,
-        regionUid: getRegionUid()
       },
       select: {
         uid: true,

From 21e0b3628310daaaa3a2028d7577d450705a19d7 Mon Sep 17 00:00:00 2001
From: Alex Lee <3076438032@qq.com>
Date: Mon, 13 Jan 2025 15:21:34 +0800
Subject: [PATCH 5/5] fix: devbox list big counts bug (#5341)

* fix: adjust prettier

* fix: bug
---
 frontend/providers/devbox/.prettierrc.js      |  20 +++
 frontend/providers/devbox/.prettierrc.json    |  18 --
 .../(home)/components/DevboxList.tsx          | 157 ++++++++--------
 .../devbox/components/AdvancedTable.tsx       |  76 ++++++++
 frontend/providers/devbox/stores/devbox.ts    | 167 +++++++++---------
 5 files changed, 264 insertions(+), 174 deletions(-)
 create mode 100644 frontend/providers/devbox/.prettierrc.js
 delete mode 100644 frontend/providers/devbox/.prettierrc.json
 create mode 100644 frontend/providers/devbox/components/AdvancedTable.tsx

diff --git a/frontend/providers/devbox/.prettierrc.js b/frontend/providers/devbox/.prettierrc.js
new file mode 100644
index 00000000000..b48f2c3caef
--- /dev/null
+++ b/frontend/providers/devbox/.prettierrc.js
@@ -0,0 +1,20 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  jsxSingleQuote: false,
+  trailingComma: 'none',
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  arrowParens: 'always',
+  rangeStart: 0,
+  rangeEnd: Infinity,
+  requirePragma: false,
+  insertPragma: false,
+  proseWrap: 'preserve',
+  htmlWhitespaceSensitivity: 'css',
+  endOfLine: 'lf'
+}
diff --git a/frontend/providers/devbox/.prettierrc.json b/frontend/providers/devbox/.prettierrc.json
deleted file mode 100644
index c3bc434d271..00000000000
--- a/frontend/providers/devbox/.prettierrc.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "printWidth": 100,
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": false,
-  "singleQuote": true,
-  "quoteProps": "as-needed",
-  "trailingComma": "none",
-  "bracketSpacing": true,
-  "jsxBracketSameLine": true,
-  "bracketSameLine": true,
-  "arrowParens": "always",
-  "requirePragma": false,
-  "insertPragma": false,
-  "proseWrap": "preserve",
-  "htmlWhitespaceSensitivity": "ignore",
-  "endOfLine": "auto"
-}
diff --git a/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxList.tsx b/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxList.tsx
index 0264056cc81..7c0ff942e5b 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxList.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxList.tsx
@@ -1,113 +1,117 @@
-import { Box, Button, Flex, Image, MenuButton, Text } from '@chakra-ui/react'
-import { MyTable, SealosMenu, useMessage } from '@sealos/ui'
-import { useTranslations } from 'next-intl'
-import dynamic from 'next/dynamic'
-import { useCallback, useState } from 'react'
-import { sealosApp } from 'sealos-desktop-sdk/app'
+import { Box, Button, Flex, Image, MenuButton, Text } from '@chakra-ui/react';
+import { SealosMenu, useMessage } from '@sealos/ui';
+import { useTranslations } from 'next-intl';
+import dynamic from 'next/dynamic';
+import { useCallback, useState } from 'react';
+import { sealosApp } from 'sealos-desktop-sdk/app';
 
-import { pauseDevbox, restartDevbox, startDevbox } from '@/api/devbox'
-import { useRouter } from '@/i18n'
-import { useGlobalStore } from '@/stores/global'
-import { DevboxListItemTypeV2 } from '@/types/devbox'
+import { pauseDevbox, restartDevbox, startDevbox } from '@/api/devbox';
+import { useRouter } from '@/i18n';
+import { useGlobalStore } from '@/stores/global';
+import { DevboxListItemTypeV2 } from '@/types/devbox';
 
-import DevboxStatusTag from '@/components/DevboxStatusTag'
-import MyIcon from '@/components/Icon'
-import IDEButton from '@/components/IDEButton'
-import ReleaseModal from '@/components/modals/releaseModal'
-import PodLineChart from '@/components/PodLineChart'
+import DevboxStatusTag from '@/components/DevboxStatusTag';
+import MyIcon from '@/components/Icon';
+import IDEButton from '@/components/IDEButton';
+import ReleaseModal from '@/components/modals/releaseModal';
+import PodLineChart from '@/components/PodLineChart';
+import { AdvancedTable } from '@/components/AdvancedTable';
 
-const DelModal = dynamic(() => import('@/components/modals/DelModal'))
+const DelModal = dynamic(() => import('@/components/modals/DelModal'));
 
 const DevboxList = ({
   devboxList = [],
   refetchDevboxList
 }: {
-  devboxList: DevboxListItemTypeV2[]
-  refetchDevboxList: () => void
+  devboxList: DevboxListItemTypeV2[];
+  refetchDevboxList: () => void;
 }) => {
-  const router = useRouter()
-  const t = useTranslations()
-  const { message: toast } = useMessage()
+  const router = useRouter();
+  const t = useTranslations();
+  const { message: toast } = useMessage();
+  const duplicatedDevboxList = Array(20)
+    .fill(0)
+    .flatMap(() => [...devboxList]);
 
   // TODO: Unified Loading Behavior
-  const { setLoading } = useGlobalStore()
+  const { setLoading } = useGlobalStore();
 
-  const [onOpenRelease, setOnOpenRelease] = useState(false)
-  const [delDevbox, setDelDevbox] = useState<DevboxListItemTypeV2 | null>(null)
+  const [onOpenRelease, setOnOpenRelease] = useState(false);
+  const [delDevbox, setDelDevbox] = useState<DevboxListItemTypeV2 | null>(null);
   const [currentDevboxListItem, setCurrentDevboxListItem] = useState<DevboxListItemTypeV2 | null>(
     null
-  )
+  );
 
   const handleOpenRelease = (devbox: DevboxListItemTypeV2) => {
-    setCurrentDevboxListItem(devbox)
-    setOnOpenRelease(true)
-  }
+    setCurrentDevboxListItem(devbox);
+    setOnOpenRelease(true);
+  };
   const handlePauseDevbox = useCallback(
     async (devbox: DevboxListItemTypeV2) => {
       try {
-        setLoading(true)
-        await pauseDevbox({ devboxName: devbox.name })
+        setLoading(true);
+        await pauseDevbox({ devboxName: devbox.name });
         toast({
           title: t('pause_success'),
           status: 'success'
-        })
+        });
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('pause_error'),
           status: 'error'
-        })
-        console.error(error)
+        });
+        console.error(error);
       }
-      refetchDevboxList()
-      setLoading(false)
+      refetchDevboxList();
+      setLoading(false);
     },
     [refetchDevboxList, setLoading, t, toast]
-  )
+  );
   const handleRestartDevbox = useCallback(
     async (devbox: DevboxListItemTypeV2) => {
       try {
-        setLoading(true)
-        await restartDevbox({ devboxName: devbox.name })
+        setLoading(true);
+        await restartDevbox({ devboxName: devbox.name });
         toast({
           title: t('restart_success'),
           status: 'success'
-        })
+        });
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('restart_error'),
           status: 'error'
-        })
-        console.error(error, '==')
+        });
+        console.error(error, '==');
       }
-      refetchDevboxList()
-      setLoading(false)
+      refetchDevboxList();
+      setLoading(false);
     },
     [refetchDevboxList, setLoading, t, toast]
-  )
+  );
   const handleStartDevbox = useCallback(
     async (devbox: DevboxListItemTypeV2) => {
       try {
-        setLoading(true)
-        await startDevbox({ devboxName: devbox.name })
+        setLoading(true);
+        await startDevbox({ devboxName: devbox.name });
         toast({
           title: t('start_success'),
           status: 'success'
-        })
+        });
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('start_error'),
           status: 'error'
-        })
-        console.error(error, '==')
+        });
+        console.error(error, '==');
       }
-      refetchDevboxList()
-      setLoading(false)
+      refetchDevboxList();
+      setLoading(false);
     },
     [refetchDevboxList, setLoading, t, toast]
-  )
+  );
   const handleGoToTerminal = useCallback(
     async (devbox: DevboxListItemTypeV2) => {
-      const defaultCommand = `kubectl exec -it $(kubectl get po -l app.kubernetes.io/name=${devbox.name} -oname) -- sh -c "clear; (bash || ash || sh)"`
+      const defaultCommand = `kubectl exec -it $(kubectl get po -l app.kubernetes.io/name=${devbox.name} -oname) -- sh -c "clear; (bash || ash || sh)"`;
       try {
         sealosApp.runEvents('openDesktopApp', {
           appKey: 'system-terminal',
@@ -115,22 +119,22 @@ const DevboxList = ({
             defaultCommand
           },
           messageData: { type: 'new terminal', command: defaultCommand }
-        })
+        });
       } catch (error: any) {
         toast({
           title: typeof error === 'string' ? error : error.message || t('jump_terminal_error'),
           status: 'error'
-        })
-        console.error(error)
+        });
+        console.error(error);
       }
     },
     [t, toast]
-  )
+  );
   const columns: {
-    title: string
-    dataIndex?: keyof DevboxListItemTypeV2
-    key: string
-    render?: (item: DevboxListItemTypeV2) => JSX.Element
+    title: string;
+    dataIndex?: keyof DevboxListItemTypeV2;
+    key: string;
+    render?: (item: DevboxListItemTypeV2) => JSX.Element;
   }[] = [
     {
       title: t('name'),
@@ -148,7 +152,7 @@ const DevboxList = ({
               {item.name}
             </Box>
           </Flex>
-        )
+        );
       }
     },
     {
@@ -161,7 +165,7 @@ const DevboxList = ({
       dataIndex: 'createTime',
       key: 'createTime',
       render: (item) => {
-        return <Text color={'grayModern.600'}>{item.createTime}</Text>
+        return <Text color={'grayModern.600'}>{item.createTime}</Text>;
       }
     },
     {
@@ -179,7 +183,8 @@ const DevboxList = ({
               right={'4px'}
               bottom={'0px'}
               pointerEvents={'none'}
-              textShadow="1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF">
+              textShadow="1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF"
+            >
               {item?.usedCpu?.yData[item?.usedCpu?.yData?.length - 1]}%
             </Text>
           </Box>
@@ -201,7 +206,8 @@ const DevboxList = ({
               right={'4px'}
               bottom={'0px'}
               pointerEvents={'none'}
-              textShadow="1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF">
+              textShadow="1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF"
+            >
               {item?.usedMemory?.yData[item?.usedMemory?.yData?.length - 1]}%
             </Text>
           </Box>
@@ -232,8 +238,9 @@ const DevboxList = ({
             minW={'unset'}
             // leftIcon={<MyIcon name={'detail'} w={'16px'} />}
             onClick={() => {
-              router.push(`/devbox/detail/${item.name}`)
-            }}>
+              router.push(`/devbox/detail/${item.name}`);
+            }}
+          >
             {/* {t('detail')} */}
             <MyIcon name={'detail'} w={'16px'} />
           </Button>
@@ -337,10 +344,10 @@ const DevboxList = ({
         </Flex>
       )
     }
-  ]
+  ];
   return (
     <>
-      <MyTable columns={columns} data={devboxList} itemClass="devboxListItem" />
+      <AdvancedTable columns={columns} data={duplicatedDevboxList} itemClass="devboxListItem" />
       {!!delDevbox && (
         <DelModal
           devbox={delDevbox}
@@ -352,17 +359,17 @@ const DevboxList = ({
       {!!onOpenRelease && !!currentDevboxListItem && (
         <ReleaseModal
           onSuccess={() => {
-            router.push(`/devbox/detail/${currentDevboxListItem?.name}`)
+            router.push(`/devbox/detail/${currentDevboxListItem?.name}`);
           }}
           onClose={() => {
-            setOnOpenRelease(false)
-            setCurrentDevboxListItem(null)
+            setOnOpenRelease(false);
+            setCurrentDevboxListItem(null);
           }}
           devbox={currentDevboxListItem}
         />
       )}
     </>
-  )
-}
+  );
+};
 
-export default DevboxList
+export default DevboxList;
diff --git a/frontend/providers/devbox/components/AdvancedTable.tsx b/frontend/providers/devbox/components/AdvancedTable.tsx
new file mode 100644
index 00000000000..401d677a628
--- /dev/null
+++ b/frontend/providers/devbox/components/AdvancedTable.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { Box, BoxProps, Grid, Flex } from '@chakra-ui/react';
+
+interface Props extends BoxProps {
+  columns: {
+    title: string;
+    dataIndex?: string;
+    key: string;
+    render?: (item: any) => JSX.Element;
+  }[];
+  data: any[];
+  itemClass?: string;
+}
+
+export const AdvancedTable = ({ columns, data, itemClass = '' }: Props) => {
+  return (
+    <>
+      <Grid
+        templateColumns={`repeat(${columns.length},1fr)`}
+        overflowX={'auto'}
+        borderRadius={'md'}
+        mb={2}
+        fontSize={'base'}
+        color={'grayModern.600'}
+        fontWeight={'bold'}
+      >
+        {columns.map((item, i) => (
+          <Box
+            px={3}
+            py={3}
+            bg={'white'}
+            key={item.key}
+            whiteSpace={'nowrap'}
+            _first={{
+              pl: 7
+            }}
+          >
+            {item.title}
+          </Box>
+        ))}
+      </Grid>
+      {data.map((item: any, index1) => (
+        <Grid
+          templateColumns={`repeat(${columns.length},1fr)`}
+          overflowX={'auto'}
+          minH={'fit-content'}
+          key={index1}
+          bg={'white'}
+          _hover={{
+            bg: '#FBFBFC'
+          }}
+          borderTopRadius={index1 === 0 ? 'md' : '0px'}
+          borderBottomRadius={index1 === data.length - 1 ? 'md' : '0px'}
+          borderBottom={'1px solid'}
+          borderBottomColor={index1 !== data.length - 1 ? 'grayModern.150' : 'transparent'}
+        >
+          {columns.map((col, index2) => (
+            <Flex
+              className={index2 === 0 ? itemClass : ''}
+              data-id={item.id}
+              key={col.key}
+              alignItems={'center'}
+              px={3}
+              py={4}
+              fontSize={'base'}
+              fontWeight={'bold'}
+              color={'grayModern.900'}
+            >
+              {col.render ? col.render(item) : col.dataIndex ? `${item[col.dataIndex]}` : ''}
+            </Flex>
+          ))}
+        </Grid>
+      ))}
+    </>
+  );
+};
diff --git a/frontend/providers/devbox/stores/devbox.ts b/frontend/providers/devbox/stores/devbox.ts
index 6618dbb04b8..30690a18bb9 100644
--- a/frontend/providers/devbox/stores/devbox.ts
+++ b/frontend/providers/devbox/stores/devbox.ts
@@ -1,6 +1,6 @@
-import { create } from 'zustand'
-import { devtools } from 'zustand/middleware'
-import { immer } from 'zustand/middleware/immer'
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
 
 import {
   getDevboxByName,
@@ -9,40 +9,44 @@ import {
   getDevboxVersionList,
   getMyDevboxList,
   getSSHConnectionInfo
-} from '@/api/devbox'
-import { devboxStatusMap, PodStatusEnum } from '@/constants/devbox'
+} from '@/api/devbox';
+import { devboxStatusMap, PodStatusEnum } from '@/constants/devbox';
 import type {
   DevboxDetailType,
   DevboxDetailTypeV2,
   DevboxListItemTypeV2,
   DevboxVersionListItemType
-} from '@/types/devbox'
+} from '@/types/devbox';
 
 type State = {
-  devboxList: DevboxListItemTypeV2[]
-  requestCache: Map<string, Promise<any>>
-  setDevboxList: () => Promise<DevboxListItemTypeV2[]>
-  loadAvgMonitorData: (devboxName: string) => Promise<void>
-  devboxVersionList: DevboxVersionListItemType[]
+  devboxList: DevboxListItemTypeV2[];
+  requestCache: Map<string, Promise<any>>;
+  setDevboxList: () => Promise<DevboxListItemTypeV2[]>;
+  loadAvgMonitorData: (devboxName: string) => Promise<void>;
+  devboxVersionList: DevboxVersionListItemType[];
   startedTemplate?: {
-    uid: string,
-    iconId: string | null,
-    name: string,
-  }
-  setStartedTemplate: (template: {
-    uid: string,
-    iconId: string | null,
-    name: string,
-  } | undefined) => void,
+    uid: string;
+    iconId: string | null;
+    name: string;
+  };
+  setStartedTemplate: (
+    template:
+      | {
+          uid: string;
+          iconId: string | null;
+          name: string;
+        }
+      | undefined
+  ) => void;
   setDevboxVersionList: (
     devboxName: string,
     devboxUid: string
-  ) => Promise<DevboxVersionListItemType[]>
-  devboxDetail?: DevboxDetailTypeV2
-  setDevboxDetail: (devboxName: string, sealosDomain: string) => Promise<DevboxDetailTypeV2>
-  intervalLoadPods: (devboxName: string, updateDetail: boolean) => Promise<any>
-  loadDetailMonitorData: (devboxName: string) => Promise<any>
-}
+  ) => Promise<DevboxVersionListItemType[]>;
+  devboxDetail?: DevboxDetailTypeV2;
+  setDevboxDetail: (devboxName: string, sealosDomain: string) => Promise<DevboxDetailTypeV2>;
+  intervalLoadPods: (devboxName: string, updateDetail: boolean) => Promise<any>;
+  loadDetailMonitorData: (devboxName: string) => Promise<any>;
+};
 
 export const useDevboxStore = create<State>()(
   devtools(
@@ -50,15 +54,15 @@ export const useDevboxStore = create<State>()(
       devboxList: [],
       requestCache: new Map(),
       setDevboxList: async () => {
-        const res = await getMyDevboxList()
+        const res = await getMyDevboxList();
         set((state) => {
-          state.devboxList = res
-        })
-        return res
+          state.devboxList = res;
+        });
+        return res;
       },
       loadAvgMonitorData: async (devboxName) => {
-        const pods = await getDevboxPodsByDevboxName(devboxName)
-        const queryName = pods.length > 0 ? pods[0].podName : devboxName
+        const pods = await getDevboxPodsByDevboxName(devboxName);
+        const queryName = pods.length > 0 ? pods[0].podName : devboxName;
 
         const [averageCpuData, averageMemoryData] = await Promise.all([
           getDevboxMonitorData({
@@ -71,7 +75,7 @@ export const useDevboxStore = create<State>()(
             queryName: queryName,
             step: '2m'
           })
-        ])
+        ]);
         set((state) => {
           state.devboxList = state.devboxList.map((item) => ({
             ...item,
@@ -81,69 +85,70 @@ export const useDevboxStore = create<State>()(
               item.name === devboxName && averageMemoryData[0]
                 ? averageMemoryData[0]
                 : item.usedMemory
-          }))
-        })
+          }));
+        });
       },
       devboxVersionList: [],
       setDevboxVersionList: async (devboxName, devboxUid) => {
-        const res = await getDevboxVersionList(devboxName, devboxUid)
+        const res = await getDevboxVersionList(devboxName, devboxUid);
 
         set((state) => {
-          state.devboxVersionList = res
-        })
-        return res
+          state.devboxVersionList = res;
+        });
+        return res;
       },
       setStartedTemplate(templateRepository) {
         set((state) => {
-          if(!templateRepository) state.startedTemplate = undefined
-          else state.startedTemplate = {
-            uid: templateRepository.uid,
-            iconId: templateRepository.iconId,
-            name: templateRepository.name
-          }
-        })
+          if (!templateRepository) state.startedTemplate = undefined;
+          else
+            state.startedTemplate = {
+              uid: templateRepository.uid,
+              iconId: templateRepository.iconId,
+              name: templateRepository.name
+            };
+        });
       },
       startedTemplate: undefined,
       devboxDetail: undefined,
       setDevboxDetail: async (devboxName: string, sealosDomain: string) => {
-        const detail = await getDevboxByName(devboxName)
+        const detail = await getDevboxByName(devboxName);
 
         if (detail.status.value !== 'Running') {
           set((state) => {
-            state.devboxDetail = detail
-          })
-          return detail
+            state.devboxDetail = detail;
+          });
+          return detail;
         }
-        const pods = await getDevboxPodsByDevboxName(devboxName)
+        const pods = await getDevboxPodsByDevboxName(devboxName);
 
         const { base64PrivateKey, userName } = await getSSHConnectionInfo({
           devboxName: detail.name
-        })
+        });
 
-        const sshPrivateKey = Buffer.from(base64PrivateKey, 'base64').toString('utf-8')
+        const sshPrivateKey = Buffer.from(base64PrivateKey, 'base64').toString('utf-8');
         const sshConfig = {
           sshUser: userName,
           sshDomain: sealosDomain,
           sshPort: detail.sshPort,
           sshPrivateKey
-        }
+        };
 
         // add sshConfig
-        detail.sshConfig = sshConfig as DevboxDetailType['sshConfig']
+        detail.sshConfig = sshConfig as DevboxDetailType['sshConfig'];
 
         // add upTime by Pod
-        detail.upTime = pods[0].upTime
+        detail.upTime = pods[0].upTime;
 
         set((state) => {
-          state.devboxDetail = detail
-        })
+          state.devboxDetail = detail;
+        });
 
-        return detail
+        return detail;
       },
       intervalLoadPods: async (devboxName, updateDetail) => {
-        if (!devboxName) return Promise.reject('devbox name is empty')
+        if (!devboxName) return Promise.reject('devbox name is empty');
 
-        const pods = await getDevboxPodsByDevboxName(devboxName)
+        const pods = await getDevboxPodsByDevboxName(devboxName);
 
         // TODO: change Running to podStatusMap.running
         // TODO: check status enum and backend status enum
@@ -151,24 +156,24 @@ export const useDevboxStore = create<State>()(
           pods.length === 0
             ? devboxStatusMap.Stopped
             : pods.filter((pod) => pod.status.value === PodStatusEnum.running).length > 0
-              ? devboxStatusMap.Running
-              : devboxStatusMap.Pending
+            ? devboxStatusMap.Running
+            : devboxStatusMap.Pending;
 
         set((state) => {
           if (state?.devboxDetail?.name === devboxName && updateDetail) {
-            state.devboxDetail.status = devboxStatus
+            state.devboxDetail.status = devboxStatus;
           }
           state.devboxList = state.devboxList.map((item) => ({
             ...item,
             status: item.name === devboxName ? devboxStatus : item.status
-          }))
-        })
-        return 'success'
+          }));
+        });
+        return 'success';
       },
       loadDetailMonitorData: async (devboxName) => {
-        const pods = await getDevboxPodsByDevboxName(devboxName)
+        const pods = await getDevboxPodsByDevboxName(devboxName);
 
-        const queryName = pods.length > 0 ? pods[0].podName : devboxName
+        const queryName = pods.length > 0 ? pods[0].podName : devboxName;
 
         const [averageCpuData, averageMemoryData] = await Promise.all([
           getDevboxMonitorData({
@@ -181,28 +186,28 @@ export const useDevboxStore = create<State>()(
             queryName: queryName,
             step: '2m'
           })
-        ])
+        ]);
 
         set((state) => {
           if (state?.devboxDetail?.name === devboxName && state.devboxDetail?.isPause !== true) {
             state.devboxDetail.usedCpu = averageCpuData[0]
               ? averageCpuData[0]
               : {
-                xData: new Array(30).fill(0),
-                yData: new Array(30).fill('0'),
-                name: ''
-              }
+                  xData: new Array(30).fill(0),
+                  yData: new Array(30).fill('0'),
+                  name: ''
+                };
             state.devboxDetail.usedMemory = averageMemoryData[0]
               ? averageMemoryData[0]
               : {
-                xData: new Array(30).fill(0),
-                yData: new Array(30).fill('0'),
-                name: ''
-              }
+                  xData: new Array(30).fill(0),
+                  yData: new Array(30).fill('0'),
+                  name: ''
+                };
           }
-        })
-        return 'success'
+        });
+        return 'success';
       }
     }))
   )
-)
+);