Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: devbox list big counts bug #5341

Merged
merged 2 commits into from
Jan 13, 2025
Merged

fix: devbox list big counts bug #5341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7646668
fix: adjust prettier
mlhiter Jan 10, 2025
6d70e3a
fix: bug
mlhiter Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions frontend/providers/devbox/.prettierrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
}
18 changes: 0 additions & 18 deletions frontend/providers/devbox/.prettierrc.json
View file
Open in desktop

This file was deleted.

157 changes: 82 additions & 75 deletions frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,136 +1,140 @@
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',
query: {
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'),
Expand All @@ -148,7 +152,7 @@ const DevboxList = ({
{item.name}
</Box>
</Flex>
)
);
}
},
{
Expand All @@ -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>;
}
},
{
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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}
Expand All @@ -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;
Loading
Loading