Skip to content

Commit 1a873f5

Browse files
mlhitermlhiter
authored
feat(devbox): little address tootip and release info (#5464)
* feat: ok * fix: bug * feat: release info * feat: public address info dialog * fix: svg bug * fix: typo bug * fix: typo bug
1 parent 3ab3251 commit 1a873f5

File tree

9 files changed

+217
-39
lines changed

9 files changed

+217
-39
lines changed

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

Lines changed: 108 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,17 @@
1-
import { Box, Button, Center, Flex, Text, Tooltip, useDisclosure } from '@chakra-ui/react';
1+
import {
2+
Box,
3+
Button,
4+
Center,
5+
Flex,
6+
Popover,
7+
PopoverArrow,
8+
PopoverBody,
9+
PopoverContent,
10+
PopoverTrigger,
11+
Text,
12+
Tooltip,
13+
useDisclosure
14+
} from '@chakra-ui/react';
215
import dayjs from 'dayjs';
316
import { useTranslations } from 'next-intl';
417
import dynamic from 'next/dynamic';
@@ -82,7 +95,7 @@ const MainBody = () => {
8295
width: '0.5fr'
8396
},
8497
{
85-
title: t('internal_address'),
98+
title: t('internal_debug_address'),
8699
key: 'internalAddress',
87100
render: (item: NetworkType) => {
88101
return (
@@ -113,14 +126,14 @@ const MainBody = () => {
113126
}
114127
},
115128
{
116-
title: t('external_address'),
129+
title: t('external_debug_address'),
117130
key: 'externalAddress',
118131
render: (item: NetworkType) => {
119132
if (item.openPublicDomain) {
120133
const address = item.customDomain || item.publicDomain;
121134
const displayAddress = `https://${address}`;
122135
return (
123-
<Flex gap={'2px'} alignItems={'center'}>
136+
<Flex gap={'2'} alignItems={'center'}>
124137
{displayAddress && (
125138
<>
126139
{statusMap[displayAddress]?.ready ? (
@@ -138,34 +151,97 @@ const MainBody = () => {
138151
{t('Accessible')}
139152
</Center>
140153
) : (
141-
<Center
142-
fontSize={'12px'}
143-
fontWeight={400}
144-
bg={'rgba(17, 24, 36, 0.05)'}
145-
color={'#485264'}
146-
borderRadius={'full'}
147-
p={'2px 8px 2px 4px'}
148-
gap={'2px'}
149-
minW={'63px'}
150-
>
151-
<MyIcon
152-
name={'loadingCircle'}
153-
w={'12px'}
154-
h={'12px'}
155-
animation={'spin 1s linear infinite'}
156-
sx={{
157-
'@keyframes spin': {
158-
'0%': {
159-
transform: 'rotate(0deg)'
160-
},
161-
'100%': {
162-
transform: 'rotate(360deg)'
163-
}
164-
}
165-
}}
166-
/>
167-
{t('prepare')}
168-
</Center>
154+
<Popover trigger={'hover'}>
155+
<PopoverTrigger>
156+
<Flex
157+
alignItems={'center'}
158+
gap={'2px'}
159+
cursor="pointer"
160+
fontSize={'12px'}
161+
fontWeight={400}
162+
w={'fit-content'}
163+
bg={'rgba(17, 24, 36, 0.05)'}
164+
color={'#485264'}
165+
borderRadius={'full'}
166+
p={'2px 8px 2px 4px'}
167+
>
168+
<MyIcon
169+
name={'loadingCircle'}
170+
w={'12px'}
171+
h={'12px'}
172+
animation={'spin 1s linear infinite'}
173+
sx={{
174+
'@keyframes spin': {
175+
'0%': {
176+
transform: 'rotate(0deg)'
177+
},
178+
'100%': {
179+
transform: 'rotate(360deg)'
180+
}
181+
}
182+
}}
183+
/>
184+
<Text fontSize={'12px'} w={'full'} color={'#485264'}>
185+
{t('prepare')}
186+
</Text>
187+
</Flex>
188+
</PopoverTrigger>
189+
<PopoverContent w={'410px'} h={'114px'} borderRadius={'10px'}>
190+
<PopoverArrow />
191+
<PopoverBody>
192+
<Box h={'16px'} w={'100%'} fontSize={'12px'} fontWeight={400}>
193+
{t.rich('public_debug_address_tooltip_1', {
194+
blue: (chunks) => (
195+
<Text as={'span'} color={'brightBlue.600'}>
196+
{chunks}
197+
</Text>
198+
)
199+
})}
200+
</Box>
201+
<Flex mt={'12px'} gap={'4px'}>
202+
<Flex alignItems={'center'} direction={'column'} mt={'2px'}>
203+
<MyIcon name="ellipse" w={'6px'} h={'6px'} />
204+
<Box height={'20px'} w={'1px'} bg={'grayModern.250'} />
205+
<MyIcon name="ellipse" w={'6px'} h={'6px'} />
206+
<Box height={'20px'} w={'1px'} bg={'grayModern.250'} />
207+
<MyIcon name="ellipse" w={'6px'} h={'6px'} />
208+
</Flex>
209+
<Flex gap={'6px'} alignItems={'center'} direction={'column'}>
210+
<Flex h={'16px'} w={'100%'} fontSize={'12px'} fontWeight={400}>
211+
<Box>{t('public_debug_address_tooltip_2_1')}</Box>
212+
<Box color={'grayModern.600'}>
213+
{t('public_debug_address_tooltip_2_2')}
214+
</Box>
215+
</Flex>
216+
<Flex h={'16px'} w={'100%'} fontSize={'12px'} fontWeight={400}>
217+
<Box>{t('public_debug_address_tooltip_3_1')}</Box>
218+
<Box color={'grayModern.600'}>
219+
{t.rich('public_debug_address_tooltip_3_2', {
220+
underline: (chunks) => (
221+
<Text as={'span'} textDecoration={'underline'}>
222+
{chunks}
223+
</Text>
224+
)
225+
})}
226+
</Box>
227+
</Flex>
228+
<Flex h={'16px'} w={'100%'} fontSize={'12px'} fontWeight={400}>
229+
<Box>{t('public_debug_address_tooltip_4_1')}</Box>
230+
<Box color={'grayModern.600'}>
231+
{t.rich('public_debug_address_tooltip_4_2', {
232+
underline: (chunks) => (
233+
<Text as={'span'} textDecoration={'underline'}>
234+
{chunks}
235+
</Text>
236+
)
237+
})}
238+
</Box>
239+
</Flex>
240+
</Flex>
241+
</Flex>
242+
</PopoverBody>
243+
</PopoverContent>
244+
</Popover>
169245
)}
170246
</>
171247
)}

‎frontend/providers/devbox/components/Icon/icons/arrowUpRight.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎frontend/providers/devbox/components/Icon/icons/ellipse.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎frontend/providers/devbox/components/Icon/icons/help.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎frontend/providers/devbox/components/Icon/icons/infoRounded.svg‎

Lines changed: 10 additions & 0 deletions
Loading

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,11 @@ const map = {
8686
gift: require('./icons/gift.svg').default,
8787
fileConfig: require('./icons/fileConfig.svg').default,
8888
trae: require('./icons/trae.svg').default,
89-
loadingCircle: require('./icons/loadingCircle.svg').default
89+
loadingCircle: require('./icons/loadingCircle.svg').default,
90+
help: require('./icons/help.svg').default,
91+
infoRounded: require('./icons/infoRounded.svg').default,
92+
arrowUpRight: require('./icons/arrowUpRight.svg').default,
93+
ellipse: require('./icons/ellipse.svg').default
9094
};
9195

9296
const MyIcon = ({

‎frontend/providers/devbox/components/modals/ReleaseModal.tsx‎

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,15 @@ import {
1313
Textarea
1414
} from '@chakra-ui/react';
1515
import { useMessage } from '@sealos/ui';
16-
import { useTranslations } from 'next-intl';
16+
import { useTranslations, useLocale } from 'next-intl';
1717
import { useCallback, useState } from 'react';
1818

1919
import { pauseDevbox, releaseDevbox, startDevbox } from '@/api/devbox';
2020
import { useConfirm } from '@/hooks/useConfirm';
2121
import { useEnvStore } from '@/stores/env';
2222
import { DevboxListItemTypeV2 } from '@/types/devbox';
2323
import { versionSchema } from '@/utils/vaildate';
24+
import MyIcon from '../Icon';
2425

2526
const ReleaseModal = ({
2627
onClose,
@@ -32,6 +33,7 @@ const ReleaseModal = ({
3233
onSuccess: () => void;
3334
}) => {
3435
const t = useTranslations();
36+
const locale = useLocale();
3537
const { message: toast } = useMessage();
3638

3739
const { env } = useEnvStore();
@@ -107,13 +109,63 @@ const ReleaseModal = ({
107109
<ModalOverlay />
108110
<ModalContent minW={'500px'} mt={'100px'} minH={'300px'} top={'50px'}>
109111
<ModalHeader>
110-
<Flex alignItems={'center'} gap={'10px'} ml={'14px'}>
112+
<Flex alignItems={'center'} gap={'10px'} ml={'14px'} fontSize={'16px'}>
111113
{t('release_version')}
112114
</Flex>
113115
</ModalHeader>
114116
<ModalCloseButton top={'10px'} right={'10px'} />
115117
<ModalBody pb={4}>
116-
<Flex alignItems={'start'} gap={'5px'} mb={'24px'}>
118+
<Flex
119+
alignItems={'center'}
120+
gap={'8px'}
121+
p={'12px'}
122+
mb={'24px'}
123+
borderRadius={'6px'}
124+
bg={'brightBlue.50'}
125+
>
126+
<MyIcon name="infoRounded" w="16px" h="16px" color={'brightBlue.600'} />
127+
<Box
128+
color={'brightBlue.600'}
129+
fontSize={'12px'}
130+
fontWeight={'500'}
131+
lineHeight={'16px'}
132+
letterSpacing={'0.5px'}
133+
>
134+
<Box>{t('release_version_info')}</Box>
135+
<Box>
136+
{t.rich('release_version_info_2', {
137+
underline: (chunks) => (
138+
<Button
139+
variant={'link'}
140+
display={'inline-block'}
141+
textDecoration={'underline'}
142+
cursor={'pointer'}
143+
fontWeight={'500'}
144+
fontSize={'12px'}
145+
color={'brightBlue.600'}
146+
onClick={() => {
147+
if (locale === 'zh') {
148+
window.open(
149+
'https://sealos.run/docs/guides/fundamentals/entrypoint-sh',
150+
'_blank'
151+
);
152+
} else {
153+
window.open(
154+
'https://sealos.io/docs/guides/fundamentals/release',
155+
'_blank'
156+
);
157+
}
158+
}}
159+
>
160+
{chunks}
161+
<MyIcon name="arrowUpRight" w="11px" h="11px" mr={'6px'} />
162+
</Button>
163+
)
164+
})}
165+
</Box>
166+
</Box>
167+
</Flex>
168+
<Flex alignItems={'start'} gap={'auto'} mb={'24px'}>
117169
<Box w={'110px'} fontWeight={'bold'} fontSize={'lg'}>
118170
{t('image_name')}
119171
</Box>
@@ -122,7 +174,7 @@ const ReleaseModal = ({
122174
isReadOnly
123175
/>
124176
</Flex>
125-
<Flex alignItems={'start'} gap={'5px'}>
177+
<Flex alignItems={'start'} gap={'auto'}>
126178
<Box w={'110px'} fontWeight={'bold'} fontSize={'lg'}>
127179
{t('version_config')}
128180
</Box>
@@ -146,6 +198,9 @@ const ReleaseModal = ({
146198
minH={'150px'}
147199
onChange={(e) => setReleaseDes(e.target.value)}
148200
placeholder={t('enter_version_description')}
201+
_placeholder={{
202+
color: 'grayModern.500'
203+
}}
149204
/>
150205
</Flex>
151206
</Flex>

‎frontend/providers/devbox/message/en.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@
102102
"export_privateKey": "Export privateKey",
103103
"export_yaml": "Export YAML",
104104
"external_address": "Public Address",
105+
"external_debug_address": "Public Debug Address",
105106
"framework": "Framework",
106107
"gpu": "GPU",
107108
"gpu_exceeds_quota": "Requested GPU exceeds your quota. Please contact admin.",
@@ -126,6 +127,7 @@
126127
"input_template_name_placeholder": "Enter template name",
127128
"input_template_version_placeholder": "Enter version (e.g. 1.0.0)",
128129
"internal_address": "Internal Address",
130+
"internal_debug_address": "Internal Debug Address",
129131
"invalide_template_name": "Please enter a valid template name",
130132
"invalide_template_version": "Please enter a valid version number",
131133
"jetbrains_guide_cancel": "Click to Cancel",
@@ -197,14 +199,22 @@
197199
"pause_success": "Shutdown succeeded",
198200
"please_enter_devbox_name_confirm": "Please enter <strong>{name}</strong> to confirm: ",
199201
"port": "Port",
200-
"prepare": "Waiting",
202+
"prepare": "Pending",
201203
"privacy_and_security_agreement": "Privacy and Security Agreement",
202204
"privacy_and_security_agreement_tips": "Please read and agree to the Privacy and Security Agreement.",
203205
"private": "Private",
204206
"private_key": "Private Key",
205207
"programming_language": "Language",
206208
"prompt": "Prompt",
207209
"public": "Public",
210+
"public_debug_address_tooltip": "The debugging address is a pre-allocated address, and the service needs to be started in the Devbox instance, listening on 0.0.0.0 and the corresponding port for normal debugging access.",
211+
"public_debug_address_tooltip_1": "If your address is stuck in <blue>「Preparing」</blue> for a long time, please check the following items first:",
212+
"public_debug_address_tooltip_2_1": "Start service:",
213+
"public_debug_address_tooltip_2_2": "Execute the start command (e.g., npm run dev) in the Devbox instance.",
214+
"public_debug_address_tooltip_3_1": "Listening address:",
215+
"public_debug_address_tooltip_3_2": "Make sure the development server runs on 0.0.0.0 instead of localhost.",
216+
"public_debug_address_tooltip_4_1": "Wait time:",
217+
"public_debug_address_tooltip_4_2": "After starting the service, the internal gateway needs 2 to 5 minutes to prepare. Please be patient.",
208218
"publish": "Publish",
209219
"read_event_detail": "Toggle event detail",
210220
"recent_error": "Recent Errors",
@@ -217,6 +227,8 @@
217227
"release_success": "Release success",
218228
"release_successful": "Release succeeded",
219229
"release_version": "Release",
230+
"release_version_info": "Before releasing, please ensure that the entrypoint.sh file has been configured as required.",
231+
"release_version_info_2": "Please refer to the detailed steps in <underline>Release Guide</underline>.",
220232
"remaining": "Available",
221233
"resource_quota": "Resource Quota",
222234
"restart": "Restart",

0 commit comments

Comments
 (0)