Skip to content

Commit 21e0b36

Browse files
mlhitermlhiter
authored
fix: devbox list big counts bug (#5341)
* fix: adjust prettier * fix: bug
1 parent 03c30b8 commit 21e0b36

File tree

5 files changed

+264
-174
lines changed

5 files changed

+264
-174
lines changed

‎frontend/providers/devbox/.prettierrc.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module.exports = {
2+
printWidth: 100,
3+
tabWidth: 2,
4+
useTabs: false,
5+
semi: true,
6+
singleQuote: true,
7+
quoteProps: 'as-needed',
8+
jsxSingleQuote: false,
9+
trailingComma: 'none',
10+
bracketSpacing: true,
11+
jsxBracketSameLine: false,
12+
arrowParens: 'always',
13+
rangeStart: 0,
14+
rangeEnd: Infinity,
15+
requirePragma: false,
16+
insertPragma: false,
17+
proseWrap: 'preserve',
18+
htmlWhitespaceSensitivity: 'css',
19+
endOfLine: 'lf'
20+
}

‎frontend/providers/devbox/.prettierrc.json‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxList.tsx‎

Lines changed: 82 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,140 @@
1-
import { Box, Button, Flex, Image, MenuButton, Text } from '@chakra-ui/react'
2-
import { MyTable, SealosMenu, useMessage } from '@sealos/ui'
3-
import { useTranslations } from 'next-intl'
4-
import dynamic from 'next/dynamic'
5-
import { useCallback, useState } from 'react'
6-
import { sealosApp } from 'sealos-desktop-sdk/app'
1+
import { Box, Button, Flex, Image, MenuButton, Text } from '@chakra-ui/react';
2+
import { SealosMenu, useMessage } from '@sealos/ui';
3+
import { useTranslations } from 'next-intl';
4+
import dynamic from 'next/dynamic';
5+
import { useCallback, useState } from 'react';
6+
import { sealosApp } from 'sealos-desktop-sdk/app';
77

8-
import { pauseDevbox, restartDevbox, startDevbox } from '@/api/devbox'
9-
import { useRouter } from '@/i18n'
10-
import { useGlobalStore } from '@/stores/global'
11-
import { DevboxListItemTypeV2 } from '@/types/devbox'
8+
import { pauseDevbox, restartDevbox, startDevbox } from '@/api/devbox';
9+
import { useRouter } from '@/i18n';
10+
import { useGlobalStore } from '@/stores/global';
11+
import { DevboxListItemTypeV2 } from '@/types/devbox';
1212

13-
import DevboxStatusTag from '@/components/DevboxStatusTag'
14-
import MyIcon from '@/components/Icon'
15-
import IDEButton from '@/components/IDEButton'
16-
import ReleaseModal from '@/components/modals/releaseModal'
17-
import PodLineChart from '@/components/PodLineChart'
13+
import DevboxStatusTag from '@/components/DevboxStatusTag';
14+
import MyIcon from '@/components/Icon';
15+
import IDEButton from '@/components/IDEButton';
16+
import ReleaseModal from '@/components/modals/releaseModal';
17+
import PodLineChart from '@/components/PodLineChart';
18+
import { AdvancedTable } from '@/components/AdvancedTable';
1819

19-
const DelModal = dynamic(() => import('@/components/modals/DelModal'))
20+
const DelModal = dynamic(() => import('@/components/modals/DelModal'));
2021

2122
const DevboxList = ({
2223
devboxList = [],
2324
refetchDevboxList
2425
}: {
25-
devboxList: DevboxListItemTypeV2[]
26-
refetchDevboxList: () => void
26+
devboxList: DevboxListItemTypeV2[];
27+
refetchDevboxList: () => void;
2728
}) => {
28-
const router = useRouter()
29-
const t = useTranslations()
30-
const { message: toast } = useMessage()
29+
const router = useRouter();
30+
const t = useTranslations();
31+
const { message: toast } = useMessage();
32+
const duplicatedDevboxList = Array(20)
33+
.fill(0)
34+
.flatMap(() => [...devboxList]);
3135

3236
// TODO: Unified Loading Behavior
33-
const { setLoading } = useGlobalStore()
37+
const { setLoading } = useGlobalStore();
3438

35-
const [onOpenRelease, setOnOpenRelease] = useState(false)
36-
const [delDevbox, setDelDevbox] = useState<DevboxListItemTypeV2 | null>(null)
39+
const [onOpenRelease, setOnOpenRelease] = useState(false);
40+
const [delDevbox, setDelDevbox] = useState<DevboxListItemTypeV2 | null>(null);
3741
const [currentDevboxListItem, setCurrentDevboxListItem] = useState<DevboxListItemTypeV2 | null>(
3842
null
39-
)
43+
);
4044

4145
const handleOpenRelease = (devbox: DevboxListItemTypeV2) => {
42-
setCurrentDevboxListItem(devbox)
43-
setOnOpenRelease(true)
44-
}
46+
setCurrentDevboxListItem(devbox);
47+
setOnOpenRelease(true);
48+
};
4549
const handlePauseDevbox = useCallback(
4650
async (devbox: DevboxListItemTypeV2) => {
4751
try {
48-
setLoading(true)
49-
await pauseDevbox({ devboxName: devbox.name })
52+
setLoading(true);
53+
await pauseDevbox({ devboxName: devbox.name });
5054
toast({
5155
title: t('pause_success'),
5256
status: 'success'
53-
})
57+
});
5458
} catch (error: any) {
5559
toast({
5660
title: typeof error === 'string' ? error : error.message || t('pause_error'),
5761
status: 'error'
58-
})
59-
console.error(error)
62+
});
63+
console.error(error);
6064
}
61-
refetchDevboxList()
62-
setLoading(false)
65+
refetchDevboxList();
66+
setLoading(false);
6367
},
6468
[refetchDevboxList, setLoading, t, toast]
65-
)
69+
);
6670
const handleRestartDevbox = useCallback(
6771
async (devbox: DevboxListItemTypeV2) => {
6872
try {
69-
setLoading(true)
70-
await restartDevbox({ devboxName: devbox.name })
73+
setLoading(true);
74+
await restartDevbox({ devboxName: devbox.name });
7175
toast({
7276
title: t('restart_success'),
7377
status: 'success'
74-
})
78+
});
7579
} catch (error: any) {
7680
toast({
7781
title: typeof error === 'string' ? error : error.message || t('restart_error'),
7882
status: 'error'
79-
})
80-
console.error(error, '==')
83+
});
84+
console.error(error, '==');
8185
}
82-
refetchDevboxList()
83-
setLoading(false)
86+
refetchDevboxList();
87+
setLoading(false);
8488
},
8589
[refetchDevboxList, setLoading, t, toast]
86-
)
90+
);
8791
const handleStartDevbox = useCallback(
8892
async (devbox: DevboxListItemTypeV2) => {
8993
try {
90-
setLoading(true)
91-
await startDevbox({ devboxName: devbox.name })
94+
setLoading(true);
95+
await startDevbox({ devboxName: devbox.name });
9296
toast({
9397
title: t('start_success'),
9498
status: 'success'
95-
})
99+
});
96100
} catch (error: any) {
97101
toast({
98102
title: typeof error === 'string' ? error : error.message || t('start_error'),
99103
status: 'error'
100-
})
101-
console.error(error, '==')
104+
});
105+
console.error(error, '==');
102106
}
103-
refetchDevboxList()
104-
setLoading(false)
107+
refetchDevboxList();
108+
setLoading(false);
105109
},
106110
[refetchDevboxList, setLoading, t, toast]
107-
)
111+
);
108112
const handleGoToTerminal = useCallback(
109113
async (devbox: DevboxListItemTypeV2) => {
110-
const defaultCommand = `kubectl exec -it $(kubectl get po -l app.kubernetes.io/name=${devbox.name} -oname) -- sh -c "clear; (bash || ash || sh)"`
114+
const defaultCommand = `kubectl exec -it $(kubectl get po -l app.kubernetes.io/name=${devbox.name} -oname) -- sh -c "clear; (bash || ash || sh)"`;
111115
try {
112116
sealosApp.runEvents('openDesktopApp', {
113117
appKey: 'system-terminal',
114118
query: {
115119
defaultCommand
116120
},
117121
messageData: { type: 'new terminal', command: defaultCommand }
118-
})
122+
});
119123
} catch (error: any) {
120124
toast({
121125
title: typeof error === 'string' ? error : error.message || t('jump_terminal_error'),
122126
status: 'error'
123-
})
124-
console.error(error)
127+
});
128+
console.error(error);
125129
}
126130
},
127131
[t, toast]
128-
)
132+
);
129133
const columns: {
130-
title: string
131-
dataIndex?: keyof DevboxListItemTypeV2
132-
key: string
133-
render?: (item: DevboxListItemTypeV2) => JSX.Element
134+
title: string;
135+
dataIndex?: keyof DevboxListItemTypeV2;
136+
key: string;
137+
render?: (item: DevboxListItemTypeV2) => JSX.Element;
134138
}[] = [
135139
{
136140
title: t('name'),
@@ -148,7 +152,7 @@ const DevboxList = ({
148152
{item.name}
149153
</Box>
150154
</Flex>
151-
)
155+
);
152156
}
153157
},
154158
{
@@ -161,7 +165,7 @@ const DevboxList = ({
161165
dataIndex: 'createTime',
162166
key: 'createTime',
163167
render: (item) => {
164-
return <Text color={'grayModern.600'}>{item.createTime}</Text>
168+
return <Text color={'grayModern.600'}>{item.createTime}</Text>;
165169
}
166170
},
167171
{
@@ -179,7 +183,8 @@ const DevboxList = ({
179183
right={'4px'}
180184
bottom={'0px'}
181185
pointerEvents={'none'}
182-
textShadow="1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF">
186+
textShadow="1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF"
187+
>
183188
{item?.usedCpu?.yData[item?.usedCpu?.yData?.length - 1]}%
184189
</Text>
185190
</Box>
@@ -201,7 +206,8 @@ const DevboxList = ({
201206
right={'4px'}
202207
bottom={'0px'}
203208
pointerEvents={'none'}
204-
textShadow="1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF">
209+
textShadow="1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF"
210+
>
205211
{item?.usedMemory?.yData[item?.usedMemory?.yData?.length - 1]}%
206212
</Text>
207213
</Box>
@@ -232,8 +238,9 @@ const DevboxList = ({
232238
minW={'unset'}
233239
// leftIcon={<MyIcon name={'detail'} w={'16px'} />}
234240
onClick={() => {
235-
router.push(`/devbox/detail/${item.name}`)
236-
}}>
241+
router.push(`/devbox/detail/${item.name}`);
242+
}}
243+
>
237244
{/* {t('detail')} */}
238245
<MyIcon name={'detail'} w={'16px'} />
239246
</Button>
@@ -337,10 +344,10 @@ const DevboxList = ({
337344
</Flex>
338345
)
339346
}
340-
]
347+
];
341348
return (
342349
<>
343-
<MyTable columns={columns} data={devboxList} itemClass="devboxListItem" />
350+
<AdvancedTable columns={columns} data={duplicatedDevboxList} itemClass="devboxListItem" />
344351
{!!delDevbox && (
345352
<DelModal
346353
devbox={delDevbox}
@@ -352,17 +359,17 @@ const DevboxList = ({
352359
{!!onOpenRelease && !!currentDevboxListItem && (
353360
<ReleaseModal
354361
onSuccess={() => {
355-
router.push(`/devbox/detail/${currentDevboxListItem?.name}`)
362+
router.push(`/devbox/detail/${currentDevboxListItem?.name}`);
356363
}}
357364
onClose={() => {
358-
setOnOpenRelease(false)
359-
setCurrentDevboxListItem(null)
365+
setOnOpenRelease(false);
366+
setCurrentDevboxListItem(null);
360367
}}
361368
devbox={currentDevboxListItem}
362369
/>
363370
)}
364371
</>
365-
)
366-
}
372+
);
373+
};
367374

368-
export default DevboxList
375+
export default DevboxList;

0 commit comments

Comments
 (0)