Client/ppanel-web
5
0
Fork 0
mirror of https://github.com/perfect-panel/ppanel-web.git synced 2026-02-12 19:31:12 -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

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

@ -42,57 +42,57 @@ 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'>
<Badge variant={badgeVariant}>{badgeText}</Badge> <div className='flex items-center space-x-1'>
<span className='text-sm font-medium'> <Badge variant={badgeVariant}>{badgeText}</Badge>
{t('onlineCount')}: {onlineCount} <span className='font-medium'>
</span> {t('onlineCount')}: {onlineCount}
</div> </span>
</TooltipTrigger> </div>
<TooltipContent className='bg-muted text-foreground w-80'> <div className='flex flex-col space-y-1'>
<div className='space-y-4'> <div className='flex justify-between'>
<> <span>CPU</span>
<div className='space-y-2'> <span>{formatPercentage(serverStatus?.cpu ?? 0)}</span>
<div className='space-y-1'>
<div className='flex justify-between text-xs'>
<span className='font-medium'>CPU</span>
<span>{formatPercentage(serverStatus?.cpu ?? 0)}</span>
</div>
<Progress value={(serverStatus?.cpu ?? 0) * 100} className='h-2' />
</div>
<div className='space-y-1'>
<div className='flex justify-between text-xs'>
<span className='font-medium'>{t('memory')}</span>
<span>{formatPercentage(serverStatus?.mem ?? 0)}</span>
</div>
<Progress value={(serverStatus?.mem ?? 0) * 100} className='h-2' />
</div>
<div className='space-y-1'>
<div className='flex justify-between text-xs'>
<span className='font-medium'>{t('disk')}</span>
<span>{formatPercentage(serverStatus?.disk ?? 0)}</span>
</div>
<Progress value={(serverStatus?.disk ?? 0) * 100} className='h-2' />
</div>
</div> </div>
<div className='text-xs'> <Progress value={(serverStatus?.cpu ?? 0) * 100} className='h-2' max={100} />
</div>
<div className='flex flex-col space-y-1'>
<div className='flex justify-between'>
<span>{t('memory')}</span>
<span>{formatPercentage(serverStatus?.mem ?? 0)}</span>
</div>
<Progress value={(serverStatus?.mem ?? 0) * 100} className='h-2' max={100} />
</div>
<div className='flex flex-col space-y-1'>
<div className='flex justify-between'>
<span>{t('disk')}</span>
<span>{formatPercentage(serverStatus?.disk ?? 0)}</span>
</div>
<Progress value={(serverStatus?.disk ?? 0) * 100} className='h-2' max={100} />
</div>
{isOnline && (
<div>
{t('lastUpdated')}: {formatDate(serverStatus?.updated_at ?? 0)} {t('lastUpdated')}: {formatDate(serverStatus?.updated_at ?? 0)}
</div> </div>
{isOnline && onlineCount > 0 && ( )}
<div className='space-y-2'>
<h4 className='text-sm font-semibold'>{t('onlineUsers')}</h4>
<ScrollArea className='h-[400px] rounded-md border p-2'>
{online_users.map((user, index) => (
<div key={user.uid} className='py-1 text-xs'>
{user.ip} (UID: {user.uid})
</div>
))}
</ScrollArea>
</div>
)}
</>
</div> </div>
</TooltipContent> </TooltipTrigger>
{isOnline && onlineCount > 0 && (
<TooltipContent className='bg-muted text-foreground w-80'>
<div className='space-y-4'>
<div className='space-y-2'>
<h4 className='text-sm font-semibold'>{t('onlineUsers')}</h4>
<ScrollArea className='h-[400px] rounded-md border p-2'>
{online_users.map((user, index) => (
<div key={user.uid} className='py-1 text-xs'>
{user.ip} (UID: {user.uid})
</div>
))}
</ScrollArea>
</div>
</div>
</TooltipContent>
)}
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
); );