feat(devbox): devbox basic frontend ui and logic (#4953)

* chore(devbox): Initialization environment

* chore(devbox): ui library

* feat(devbox): for first ui

* feat(devbox): empty page

* feat: devboxList ui

* chore: typo error

* fix(devbox): devbox edit type error

* chore(devbox): remove unused code

* chore(devbox): add js-zip

* feat(devbox): create devbox ui

* fix(devbox): typo error

* fix(devbox): mock error

* fix(devbox): svg color error

* feat(devbox): yaml create devbox

* fix(devbox): typo error

* fix(devbox): typo error and json2yaml error ignore

* style(devbox): global style and h style

* fix(devbox): url params error

* fix(devbox): some ui bug

* fix(devbox): message ui show typo error

* feat(devbox): modified devboxlist cpu and memory to echarts

* feat(devbox): quotabox and pricebox in create devbox

* feat(devbox): version ui

* feat(devbox): i18n support env

* fix(devbox): i18n cause api error

* feat(devbox): i18n transform

* feat(devbox): release modal

* fix(devbox): pricebox i18n

* chore(devbox): remove unused ico

* fix(devbox): i18n error

* fix(devbox): version ui error

* chore(devbox): adjust modals file position

* feat(devbox): delete devbox logic

* feat(devbox): restart devbox logic

* feat(devbox): pause devbox logic

* feat(devbox): del devbox version logic

* feat(devbox): terminal logic

* feat(devbox): adjust api logic

* fix(devbox): next app router error

* feat(devbox): update devbox

* fix(devbox): boundary case

* feat(devbox): release modal prompt

* feat(devbox): network config ui and logic

* chore(devbox): adjust code import

* fix(devbox): cpu and memory transform error

* fix(devbox): delete error

* feat(devbox): user quota

* fix(devbox): yaml show error

* fix(devbox): get image name and image name related ui

* fix(devbox): devbox network yaml error

* fix(devbox): goto terminal command error

* fix(devbox): restart logic error and menu button ui adjust

* feat(devbox): online version

* style(devbox): plus icon error

* fix(devbox): app online error

* fix(devbox): some ts error and req.headers app router error

* fix(devbox): plus svg error

* feat(devbox): get vscode remote password

* feat(devbox): runtime adjust

* chore(devbox): remove unused code

* fix(devbox): network error

* fix(devbox): some little fix

* fix(devbox): runtime and network bug

* fix(devbox): port

* feat(devbox): goto vscode

* chore(devbox): typo error

* fix(devbox): some error

* fix(devbox): headers() transform to req.headers

* fix(devbox): req.nextUrl transform to req.url

* Revert "fix(devbox): req.nextUrl transform to req.url"

This reverts commit 2bf6173.

* chore(devbox): DynamicServerError error

* fix(devbox): some error

* fix(devbox): service create failed

* chore(devbox): remove ApiRes and use export namespace to replace default

* feat(devbox): isEdit for modified and some config

* fix&per(devbox): some fix and ui adjust

* fix(devbox): update devbox logic adjust

* fix(devbox): build error

* fix(devbox): modified runtime ui opacity

* fix(devbox): update ui

* feat(devbox): registerAddr

* chore(devbox): deploy.yaml

* feat(devbox): i18n fix(unsucess)

* fix(devbox): fix error

* fix(devbox): fix bug

* fix(devbox): terminal bug

* chore(devbox): i18n

* fix(devbox): public logo error

* fix(devbox): selector bug

* fix(devbox): delete app selector

* fix(devbox): fix delete devbox ingress bug

* fix(devbox): ui bug

* chore(devbox): ingress domain bug

* fix(devbox): i18n error

* fix(devbox): some ui bug

* fix(devbox): ui and k8s bug

* fix(devbox): i18n error

* Revert "fix(devbox): i18n error"

This reverts commit 06881f8.

* fix(devbox): some ui bug

* chore(devbox): i18n bug

* feat(devbox): i18n

* fix: namespace bug

* fix: delDevbox api bug

* fix: delDevbox bug

* fix: update ui bug

* fix: some bug

* fix: root

* fix: some ui bug

* fix: some ui bug

* chore: networkName

* fix: ingress sealos_name bug

* fix: price prblem

* fix: version modal bug

* fix: port ui bug

* fix: lastRoute bug

* chore: some ui and en perf

* chore: i18n default

* chore: some bug

* feat: devbox runtime adjust

* fix: ui bug

* fix: runtime namespace write bug and delete devbox without service bug

* chore: add debian svg

* feat: quota support

* feat: price

* feat: devboxAffinityEnable

* chore: build bug

* feat: half succeed to mac

* feat: release modal checkbox

* perf: import order adjust

* perf: api logic perf

* perf: code perf

* chore: vue svg name

* chore: cr adjust

* chore: remove unused code

* chore: update yaml.tmpl

* ci: update some build file

* ci: build bug

* fix: ts error

* fix: ts error

* chore: remove console.log code

* fix: vscode transform other info

* chore: export named to default

* fix: ci error try

* feat: sshinfo

* fix: status error

* fix: i18n error

* feat: default version

* fix: nodeports_exceeds_quota

* fix: button show bug

* fix: register_addr bug

* fix: some i18n

* feat: detail basic framework

* feat: version devboxStatusTag

* feat: devbox status

* fix: adjust status

* feat: download config

* feat: monitor

* fix: svg adjust

* style: adjust style

* feat: upTime

* fix: get devbox upTime

* fix: build error bug

* fix:default 8080 port

* fix: detail icon arrow-left adjust style

* feat: runtimeVersion label show ui

* fix: devbox deploy registry_addr bug

* fix: ui some bug

* feat: monitor cpu and memory

* fix: monitorFetch bug

* fix: monitor url to env

* feat: new detail version

* fix: version edit

* feat: support transform params to launchpad

* feat: adjust svg

* fix: runtime version getSSHRuntimeInfo

* fix: monitor will not show

* fix: ugly fix ts bug

* feat: transform kv to applaunchpad

* feat: lastTerminatedState

* style: detail page style perf

* fix: delete then go to list

* fix: cpu and memory adjust

* style: some w h bug

* fix: some bug

* style: detail style perf

* fix: button border

* style: some style bug

* fix: font size

* fix: network null

* feat: release to detail

* chore: adjust import order

* fix: router searchparams disappear bug

* style: some detail ui bug

* fix: pause and restart bug

* chore: some i18n adjust

* fix: memory ui bug

* chore: note a bug

* fix: download private key without name suffix

* feat: add cursor and vscode-insiders support

* fix: update cpu and memory bug

* chore: adjust cpu and memory list

* fix: some ui adjust

* feat: add sealos coin

* fix: wrong frontend/packages/ui modified

* fix: console log security bug

* fix: devbox svg show bug

* chore: transform some Chinese to English

* style: boxShadow bug

* style: detail ui adjust again

* fix: devboxList ui bug

* chore: add react svg

* fix: deploy bug

* feat: deploy only success

* feat: delModal adjust ui

* fix: disable vscode select menuButton

* fix: cpu and memory chart adjust

* fix: update activebar bug

* feat: empty status ui

* style: status tag ui update

* style: releaseModal ui update

* style: version button h adjust

* style: basicInfo detail update

* feat: add squash env

* style: status tag ui adjust

* style: list color adjust

* style: adjust shutdown svg

* feat: add start button and logic

* fix: box w

* feat: small screen adapt

* feat: monitol modal

* fix: style button

* chore: delete some console.log

* fix: menubutton boxShadow

* style: border radius bug

* fix: default add port 8080

* chore: remove unused file

* fix: release appname

* fix: cpu and memory monitor 100

* chore: remove console

* feat: version add time

.github/workflows/frontend.yml

@@ -67,6 +67,7 @@ jobs:
             providers/objectstorage,
             providers/kubepanel,
             providers/workorder,
+            providers/devbox,
             desktop,
           ]
     steps:
@@ -165,6 +166,7 @@ jobs:
             providers/objectstorage,
             providers/kubepanel,
             providers/workorder,
+            providers/devbox,
             desktop,
           ]
     steps:

frontend/Makefile

@@ -26,6 +26,7 @@ buildTargets := \
 	providers/license \
 	providers/kubepanel \
 	providers/objectstorage \
+	providers/devbox \
 	providers/workorder
 
 buildTargets-all := $(addprefix image-build-,$(buildTargets))

frontend/packages/ui/src/components/RangeInput/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState } from 'react';
 import { HStack, Input, useNumberInput, IconButton, InputProps } from '@chakra-ui/react';
 import { AddIcon, MinusIcon } from '@chakra-ui/icons';

frontend/packages/ui/src/components/Select/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useRef, forwardRef, useMemo } from 'react';
 import {
   Menu,

frontend/packages/ui/src/components/icons/AddIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const AddIcon = createIcon({

frontend/packages/ui/src/components/icons/ArrowDownSLineIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const ArrowDownSLineIcon = createIcon({

frontend/packages/ui/src/components/icons/ArrowExchangeIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const ArrowExchangeIcon = createIcon({

frontend/packages/ui/src/components/icons/BucketIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const BucketIcon = createIcon({

frontend/packages/ui/src/components/icons/CancelIcon.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Icon } from '@chakra-ui/react';
 export default function CancelIcon(props: Parameters<typeof Icon>[0]) {
   return (

frontend/packages/ui/src/components/icons/ChangeIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const ChangeIcon = createIcon({

frontend/packages/ui/src/components/icons/ClearOutlineIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const ClearOutlineIcon = createIcon({

frontend/packages/ui/src/components/icons/CloseIcon.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Icon, IconProps } from '@chakra-ui/react';
 
 export default function CloseIcon(props: IconProps) {

frontend/packages/ui/src/components/icons/CopyIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const CopyIcon = createIcon({

frontend/packages/ui/src/components/icons/CreateFolderIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const CreateFolderIcon = createIcon({

frontend/packages/ui/src/components/icons/DeleteIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const DeleteIcon = createIcon({

frontend/packages/ui/src/components/icons/DetailsMoreIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const ListIcon = createIcon({

frontend/packages/ui/src/components/icons/DnsIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const DnsIcon = createIcon({

frontend/packages/ui/src/components/icons/DocsIcon.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Icon, IconProps } from '@chakra-ui/react';
 
 export default function DocsIcon(props: IconProps) {

frontend/packages/ui/src/components/icons/DownloadIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const DownloadIcon = createIcon({

frontend/packages/ui/src/components/icons/EditIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const EditIcon = createIcon({

frontend/packages/ui/src/components/icons/ExpandMoreIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const ExpanMoreIcon = createIcon({

frontend/packages/ui/src/components/icons/FileIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const FileIcon = createIcon({

frontend/packages/ui/src/components/icons/FolderIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const FolderIcon = createIcon({

frontend/packages/ui/src/components/icons/GroupAdd.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const GroupAddIcon = createIcon({

frontend/packages/ui/src/components/icons/InfoCircleIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const InfoCircleIcon = createIcon({

frontend/packages/ui/src/components/icons/InfoIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const InfoIcon = createIcon({

frontend/packages/ui/src/components/icons/LeftArrowIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const LeftArrowIcon = createIcon({

frontend/packages/ui/src/components/icons/LinkIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const LinkIcon = createIcon({

frontend/packages/ui/src/components/icons/ListCheckIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 const ListCheckIcon = createIcon({
   displayName: 'ListCheckIcon',

frontend/packages/ui/src/components/icons/ListIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const ListIcon = createIcon({

frontend/packages/ui/src/components/icons/MoreIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const MoreIcon = createIcon({

frontend/packages/ui/src/components/icons/PortIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const PortIcon = createIcon({

frontend/packages/ui/src/components/icons/ProviderIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const ProviderIcon = createIcon({

frontend/packages/ui/src/components/icons/RefreshIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const RefreshIcon = createIcon({

frontend/packages/ui/src/components/icons/SearchIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const SearchIcon = createIcon({

frontend/packages/ui/src/components/icons/SortPolygonDownIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const SortPolygonUpIcon = createIcon({

frontend/packages/ui/src/components/icons/SortPolygonUpIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const SortPolygonUpIcon = createIcon({

frontend/packages/ui/src/components/icons/StorageIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const StorageIcon = createIcon({

frontend/packages/ui/src/components/icons/UploadIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const UploadIcon = createIcon({

frontend/packages/ui/src/components/icons/VisibilityIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const VisibityIcon = createIcon({

frontend/packages/ui/src/components/icons/WebHostIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const WebHostIcon = createIcon({

frontend/packages/ui/src/components/icons/line/WarnTriange.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createIcon } from '@chakra-ui/react';
 
 const WarnTriangeIcon = createIcon({