feat: update deploy modal (#5245)

* feat: update deploy

* chore: deploy yaml add usw coin

* chore: text adjust

* style: release tag color

* feat: add port column in detail

* fix&style: adjust update modal style and some value

* fix: next build bug

frontend/providers/devbox/api/devbox.ts

@@ -1,4 +1,4 @@
-import { V1Pod } from '@kubernetes/client-node'
+import { V1Deployment, V1Pod, V1StatefulSet } from '@kubernetes/client-node'
 
 import {
   DevboxEditType,
@@ -8,6 +8,7 @@ import {
   runtimeNamespaceMapType
 } from '@/types/devbox'
 import {
+  adaptAppListItem,
   adaptDevboxDetail,
   adaptDevboxListItem,
   adaptDevboxVersionListItem,
@@ -82,3 +83,8 @@ export const getDevboxMonitorData = (payload: {
 
 export const getSSHRuntimeInfo = (runtimeName: string) =>
   GET('/api/getSSHRuntimeInfo', { runtimeName })
+
+export const getAppsByDevboxId = (devboxId: string) =>
+  GET<V1Deployment & V1StatefulSet[]>('/api/getAppsByDevboxId', { devboxId }).then((res) =>
+    res.map(adaptAppListItem)
+  )

frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/MainBody.tsx

@@ -27,7 +27,20 @@ const MainBody = () => {
     dataIndex?: keyof NetworkType
     key: string
     render?: (item: NetworkType) => JSX.Element
+    width?: string
   }[] = [
+    {
+      title: t('port'),
+      key: 'port',
+      render: (item: NetworkType) => {
+        return (
+          <Text pl={4} color={'grayModern.600'}>
+            {item.port}
+          </Text>
+        )
+      },
+      width: '0.5fr'
+    },
     {
       title: t('internal_address'),
       key: 'internalAddress',
@@ -47,7 +60,6 @@ const MainBody = () => {
               _hover={{
                 textDecoration: 'underline'
               }}
-              ml={4}
               color={'grayModern.600'}
               onClick={() =>
                 copyData(

frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx

@@ -12,14 +12,16 @@ import ReleaseModal from '@/components/modals/releaseModal'
 import EditVersionDesModal from '@/components/modals/EditVersionDesModal'
 
 import { DevboxVersionListItemType } from '@/types/devbox'
-import { DevboxReleaseStatusEnum } from '@/constants/devbox'
-import { delDevboxVersionByName, getSSHRuntimeInfo } from '@/api/devbox'
+import { DevboxReleaseStatusEnum, devboxIdKey } from '@/constants/devbox'
+import { delDevboxVersionByName, getAppsByDevboxId, getSSHRuntimeInfo } from '@/api/devbox'
 
 import { useConfirm } from '@/hooks/useConfirm'
 import { useLoading } from '@/hooks/useLoading'
 
 import { useEnvStore } from '@/stores/env'
 import { useDevboxStore } from '@/stores/devbox'
+import AppSelectModal from '@/components/modals/AppSelectModal'
+import { AppListItemType } from '@/types/app'
 
 const Version = () => {
   const t = useTranslations()
@@ -32,6 +34,9 @@ const Version = () => {
 
   const [initialized, setInitialized] = useState(false)
   const [onOpenRelease, setOnOpenRelease] = useState(false)
+  const [onOpenSelectApp, setOnOpenSelectApp] = useState(false)
+  const [apps, setApps] = useState<AppListItemType[]>([])
+  const [deployData, setDeployData] = useState<any>(null)
   const [currentVersion, setCurrentVersion] = useState<DevboxVersionListItemType | null>(null)
 
   const { openConfirm, ConfirmChild } = useConfirm({
@@ -55,6 +60,8 @@ const Version = () => {
 
   const handleDeploy = useCallback(
     async (version: DevboxVersionListItemType) => {
+      const devboxId = devbox.id
+
       const { releaseCommand, releaseArgs } = await getSSHRuntimeInfo(devbox.runtimeVersion)
       const { cpu, memory, networks, name } = devbox
       const newNetworks = networks.map((network) => {
@@ -65,12 +72,13 @@ const Version = () => {
           domain: env.ingressDomain
         }
       })
+      const imageName = `${env.registryAddr}/${env.namespace}/${devbox.name}:${version.tag}`
 
       const transformData = {
         appName: `${name}-release`,
         cpu: cpu,
         memory: memory,
-        imageName: `${env.registryAddr}/${env.namespace}/${devbox.name}:${version.tag}`,
+        imageName: imageName,
         networks:
           newNetworks.length > 0
             ? newNetworks
@@ -83,20 +91,33 @@ const Version = () => {
                 }
               ],
         runCMD: releaseCommand,
-        cmdParam: releaseArgs
+        cmdParam: releaseArgs,
+        labels: {
+          [devboxIdKey]: devboxId
+        }
       }
+      setDeployData(transformData)
+      const apps = await getAppsByDevboxId(devboxId)
 
-      const formData = encodeURIComponent(JSON.stringify(transformData))
+      // when: there is no app,create a new app
+      if (apps.length === 0) {
+        const tempFormDataStr = encodeURIComponent(JSON.stringify(transformData))
+        sealosApp.runEvents('openDesktopApp', {
+          appKey: 'system-applaunchpad',
+          pathname: '/redirect',
+          query: { formData: tempFormDataStr },
+          messageData: {
+            type: 'InternalAppCall',
+            formData: tempFormDataStr
+          }
+        })
+      }
 
-      sealosApp.runEvents('openDesktopApp', {
-        appKey: 'system-applaunchpad',
-        pathname: '/app/edit',
-        query: { formData },
-        messageData: {
-          type: 'InternalAppCall',
-          formData: formData
-        }
-      })
+      // when: there have apps,show the app select modal
+      if (apps.length >= 1) {
+        setApps(apps)
+        setOnOpenSelectApp(true)
+      }
     },
     [devbox, env.ingressDomain, env.namespace, env.registryAddr]
   )
@@ -228,6 +249,7 @@ const Version = () => {
       )
     }
   ]
+
   return (
     <Box
       borderWidth={1}
@@ -291,6 +313,15 @@ const Version = () => {
           devbox={{ ...devbox, sshPort: devbox.sshPort || 0 }}
         />
       )}
+      {!!onOpenSelectApp && (
+        <AppSelectModal
+          apps={apps}
+          devboxName={devbox.name}
+          deployData={deployData}
+          onSuccess={() => setOnOpenSelectApp(false)}
+          onClose={() => setOnOpenSelectApp(false)}
+        />
+      )}
       <ConfirmChild />
     </Box>
   )

frontend/providers/devbox/app/api/getAppsByDevboxId/route.ts

@@ -0,0 +1,54 @@
+import type { NextRequest } from 'next/server'
+
+import { devboxIdKey } from '@/constants/devbox'
+import { authSession } from '@/services/backend/auth'
+import { getK8s } from '@/services/backend/kubernetes'
+import { jsonRes } from '@/services/backend/response'
+
+export const dynamic = 'force-dynamic'
+
+export async function GET(req: NextRequest) {
+  try {
+    const apps = await getApps(req)
+    return jsonRes({ data: apps })
+  } catch (err: any) {
+    return jsonRes({
+      code: 500,
+      error: err
+    })
+  }
+}
+
+async function getApps(req: NextRequest) {
+  const { searchParams } = req.nextUrl
+  const devboxId = searchParams.get('devboxId') as string
+
+  const { k8sApp, namespace } = await getK8s({
+    kubeconfig: await authSession(req.headers)
+  })
+
+  const response = await Promise.allSettled([
+    k8sApp.listNamespacedDeployment(
+      namespace,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      `${devboxIdKey}=${devboxId}`
+    ),
+    k8sApp.listNamespacedStatefulSet(
+      namespace,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      `${devboxIdKey}=${devboxId}`
+    )
+  ])
+  const apps = response
+    .filter((item) => item.status === 'fulfilled')
+    .map((item: any) => item?.value?.body?.items)
+    .filter((item) => item)
+    .flat()
+  return apps
+}

frontend/providers/devbox/app/api/v1/getDBSecretList/route.ts

@@ -94,6 +94,8 @@ const buildConnectionInfo = (
   }
 }
 
+export const dynamic = 'force-dynamic'
+
 export async function GET(req: NextRequest) {
   try {
     const { payload, token } = getPayloadWithoutVerification(req.headers)

frontend/providers/devbox/components/Icon/index.tsx

@@ -63,7 +63,8 @@ const map = {
   check: require('./icons/check.svg').default,
   empty: require('./icons/empty.svg').default,
   shutdown: require('./icons/shutdown.svg').default,
-  windsurf: require('./icons/windsurf.svg').default
+  windsurf: require('./icons/windsurf.svg').default,
+  rocket: require('./icons/rocket.svg').default
 }
 
 const MyIcon = ({

frontend/providers/devbox/components/MyTable.tsx

@@ -8,6 +8,7 @@ interface Props extends BoxProps {
     key: string
     render?: (item: any) => JSX.Element
     minWidth?: string
+    width?: string
   }[]
   data: any[]
   itemClass?: string
@@ -18,7 +19,7 @@ const MyTable = ({ columns, data, itemClass = '', alternateRowColors = false }:
   return (
     <>
       <Grid
-        templateColumns={`repeat(${columns.length}, 1fr)`}
+        templateColumns={columns.map((col) => col.width || '1fr').join(' ')}
         overflowX={'auto'}
         borderTopRadius={'md'}
         fontSize={'base'}
@@ -41,7 +42,7 @@ const MyTable = ({ columns, data, itemClass = '', alternateRowColors = false }:
       </Grid>
       {data.map((item: any, index1) => (
         <Grid
-          templateColumns={`repeat(${columns.length}, 1fr)`}
+          templateColumns={columns.map((col) => col.width || '1fr').join(' ')}
           overflowX={'auto'}
           key={index1}
           bg={alternateRowColors ? (index1 % 2 === 0 ? '#FBFBFC' : '#F4F4F7') : 'white'}