Skip to content

Commit

Permalink
Revert "fix: devbox list big counts bug (labring#5341)"
Browse files Browse the repository at this point in the history 
This reverts commit 21e0b36.
  • Loading branch information
@mlhiter
mlhiter authored Jan 13, 2025
1 parent 21e0b36 commit d279f8e
Show file tree
Hide file tree
Showing 5 changed files with 174 additions and 264 deletions.
20 changes: 0 additions & 20 deletions frontend/providers/devbox/.prettierrc.js
View file

This file was deleted.

18 changes: 18 additions & 0 deletions frontend/providers/devbox/.prettierrc.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"quoteProps": "as-needed",
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": true,
"bracketSameLine": true,
"arrowParens": "always",
"requirePragma": false,
"insertPragma": false,
"proseWrap": "preserve",
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto"
}
157 changes: 75 additions & 82 deletions frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,140 +1,136 @@
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 { 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 { 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 { AdvancedTable } from '@/components/AdvancedTable';
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'

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 duplicatedDevboxList = Array(20)
.fill(0)
.flatMap(() => [...devboxList]);
const router = useRouter()
const t = useTranslations()
const { message: toast } = useMessage()

// 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 @@ -152,7 +148,7 @@ const DevboxList = ({
{item.name}
</Box>
</Flex>
);
)
}
},
{
Expand All @@ -165,7 +161,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 @@ -183,8 +179,7 @@ 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 @@ -206,8 +201,7 @@ 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 @@ -238,9 +232,8 @@ 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 @@ -344,10 +337,10 @@ const DevboxList = ({
</Flex>
)
}
];
]
return (
<>
<AdvancedTable columns={columns} data={duplicatedDevboxList} itemClass="devboxListItem" />
<MyTable columns={columns} data={devboxList} itemClass="devboxListItem" />
{!!delDevbox && (
<DelModal
devbox={delDevbox}
Expand All @@ -359,17 +352,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

0 comments on commit d279f8e

Please sign in to comment.