Client/ppanel-web
5
0
Fork 0
mirror of https://github.com/perfect-panel/ppanel-web.git synced 2026-02-15 04:41:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

💄 style(node): Improve layout and spacing in NodeStatusCell component

Browse Source
This commit is contained in:
web@ppanel 2025-01-01 12:44:57 +07:00
parent 5bc7905a52
commit 136287d85a
1 changed files with 47 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
apps/admin/app/dashboard/server/node-status.tsx
View File

@ -42,43 +42,44 @@ export function NodeStatusCell({ status }: { status: API.NodeStatus }) {
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div className='flex items-center space-x-2 rounded-md'> <div className='flex items-center gap-2 text-xs *:flex-1'>
<div className='flex items-center space-x-1'>
<Badge variant={badgeVariant}>{badgeText}</Badge> <Badge variant={badgeVariant}>{badgeText}</Badge>
<span className='text-sm font-medium'> <span className='font-medium'>
{t('onlineCount')}: {onlineCount} {t('onlineCount')}: {onlineCount}
</span> </span>
</div> </div>
</TooltipTrigger> <div className='flex flex-col space-y-1'>
<TooltipContent className='bg-muted text-foreground w-80'> <div className='flex justify-between'>
<div className='space-y-4'> <span>CPU</span>
<>
<div className='space-y-2'>
<div className='space-y-1'>
<div className='flex justify-between text-xs'>
<span className='font-medium'>CPU</span>
<span>{formatPercentage(serverStatus?.cpu ?? 0)}</span> <span>{formatPercentage(serverStatus?.cpu ?? 0)}</span>
</div> </div>
<Progress value={(serverStatus?.cpu ?? 0) * 100} className='h-2' /> <Progress value={(serverStatus?.cpu ?? 0) * 100} className='h-2' max={100} />
</div> </div>
<div className='space-y-1'> <div className='flex flex-col space-y-1'>
<div className='flex justify-between text-xs'> <div className='flex justify-between'>
<span className='font-medium'>{t('memory')}</span> <span>{t('memory')}</span>
<span>{formatPercentage(serverStatus?.mem ?? 0)}</span> <span>{formatPercentage(serverStatus?.mem ?? 0)}</span>
</div> </div>
<Progress value={(serverStatus?.mem ?? 0) * 100} className='h-2' /> <Progress value={(serverStatus?.mem ?? 0) * 100} className='h-2' max={100} />
</div> </div>
<div className='space-y-1'> <div className='flex flex-col space-y-1'>
<div className='flex justify-between text-xs'> <div className='flex justify-between'>
<span className='font-medium'>{t('disk')}</span> <span>{t('disk')}</span>
<span>{formatPercentage(serverStatus?.disk ?? 0)}</span> <span>{formatPercentage(serverStatus?.disk ?? 0)}</span>
</div> </div>
<Progress value={(serverStatus?.disk ?? 0) * 100} className='h-2' /> <Progress value={(serverStatus?.disk ?? 0) * 100} className='h-2' max={100} />
</div> </div>
</div> {isOnline && (
<div className='text-xs'> <div>
{t('lastUpdated')}: {formatDate(serverStatus?.updated_at ?? 0)} {t('lastUpdated')}: {formatDate(serverStatus?.updated_at ?? 0)}
</div> </div>
)}
</div>
</TooltipTrigger>
{isOnline && onlineCount > 0 && ( {isOnline && onlineCount > 0 && (
<TooltipContent className='bg-muted text-foreground w-80'>
<div className='space-y-4'>
<div className='space-y-2'> <div className='space-y-2'>
<h4 className='text-sm font-semibold'>{t('onlineUsers')}</h4> <h4 className='text-sm font-semibold'>{t('onlineUsers')}</h4>
<ScrollArea className='h-[400px] rounded-md border p-2'> <ScrollArea className='h-[400px] rounded-md border p-2'>
@ -89,10 +90,9 @@ export function NodeStatusCell({ status }: { status: API.NodeStatus }) {
))} ))}
</ScrollArea> </ScrollArea>
</div> </div>
)}
</>
</div> </div>
</TooltipContent> </TooltipContent>
)}
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
); );