markmorado/pvemanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

polish(ui): пульсация статус-точки для online, моно-цифры в бейджах, fade-up анимация

Browse Source 
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
markmorado
2026-07-11 04:35:29 +05:00
parent db2f408d57
commit f2ee09ab5a
6 changed files with 56 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/shared/status-dot.tsx
View File

@@ -27,7 +27,7 @@ export function StatusDot({ status, className, pulse }: StatusDotProps) {
title={status}
className={cn('relative inline-block h-2 w-2 rounded-full', color, className)}
>
{pulse && status === 'running' && (
{pulse && (status === 'running' || status === 'online') && (
<span className={cn('absolute inset-0 animate-ping rounded-full opacity-75', color)} />
)}
</span>

8
frontend/src/features/cluster/ClusterPage.tsx
View File

@@ -497,7 +497,7 @@ export default function ClusterPage() {
<div className="flex items-center gap-2">
<Network className="h-5 w-5 text-primary" />
<h2 className="font-semibold">{name}</h2>
<Badge variant="secondary">{members.length} {t('cluster.nodes', 'nodes')}</Badge>
<Badge variant="secondary" className="font-mono">{members.length} {t('cluster.nodes', 'nodes')}</Badge>
</div>
{members.length === 2 && (
@@ -521,7 +521,7 @@ export default function ClusterPage() {
</div>
<div className="flex items-center gap-3">
<span className="flex items-center gap-1.5 text-xs text-muted-foreground">
<StatusDot status={m.is_online ? 'online' : 'offline'} />
<StatusDot status={m.is_online ? 'online' : 'offline'} pulse />
{m.is_online ? t('common.online', 'Online') : t('common.offline', 'Offline')}
</span>
<Button
@@ -548,7 +548,7 @@ export default function ClusterPage() {
<div className="flex items-center gap-2">
<Boxes className="h-5 w-5 text-muted-foreground" />
<h2 className="font-semibold">{t('cluster.standalone', 'Standalone servers')}</h2>
<Badge variant="outline">{standalone.length}</Badge>
<Badge variant="outline" className="font-mono">{standalone.length}</Badge>
</div>
{standalone.length === 0 ? (
<p className="text-sm text-muted-foreground">{t('cluster.no_standalone', 'No standalone servers.')}</p>
@@ -566,7 +566,7 @@ export default function ClusterPage() {
</div>
</div>
<span className="flex items-center gap-1.5 text-xs text-muted-foreground">
<StatusDot status={s.is_online ? 'online' : 'offline'} />
<StatusDot status={s.is_online ? 'online' : 'offline'} pulse />
{s.is_online ? t('common.online', 'Online') : t('common.offline', 'Offline')}
</span>
</div>

48
frontend/src/features/dashboard/DashboardPage.tsx
View File

@@ -31,7 +31,7 @@ function ResourceBar({ label, percent }: { label: string; percent: number }) {
<div>
<div className="flex justify-between text-xs mb-1">
<span className="text-muted-foreground">{label}</span>
<span className="tabular-nums font-medium">{percent.toFixed(1)}%</span>
<span className="font-mono tabular-nums font-medium">{percent.toFixed(1)}%</span>
</div>
<div className="h-1.5 rounded-full bg-track overflow-hidden">
<div
@@ -43,6 +43,12 @@ function ResourceBar({ label, percent }: { label: string; percent: number }) {
)
}
// Worst-case health across a set of percentages — drives status accent bars.
function healthColor(...percents: number[]) {
const worst = Math.max(...percents)
return worst >= 90 ? 'bg-danger' : worst >= 70 ? 'bg-warning' : 'bg-success'
}
// ==================== SVG Circular Gauge ====================
function CircularGauge({ label, value }: { label: string; value: number }) {
const r = 26
@@ -64,10 +70,10 @@ function CircularGauge({ label, value }: { label: string; value: number }) {
/>
</svg>
<div className="absolute inset-0 flex items-center justify-center">
<span className="text-[13px] font-bold tabular-nums">{Math.round(clamped)}</span>
<span className="font-mono text-[13px] font-bold tabular-nums">{Math.round(clamped)}</span>
</div>
</div>
<span className="text-2xs text-muted-foreground tracking-wide">{label}</span>
<span className="text-2xs font-mono text-muted-foreground tracking-wide uppercase">{label}</span>
</div>
)
}
@@ -90,8 +96,9 @@ function ClusterOverviewCard({ serverList, nodeStats, allVMs, memPercent, diskPe
const cols = availableIPs > 0 ? 'grid-cols-3' : 'grid-cols-2'
return (
<Card className="h-full">
<CardContent className="p-5 flex flex-col gap-4 h-full">
<Card className="h-full gap-0 py-0 overflow-hidden">
<div className={`h-[3px] w-full ${healthColor(memPercent, diskPercent)}`} />
<CardContent className="p-5 pt-4 flex flex-col gap-4 h-full">
<div className="flex items-center gap-1.5">
<button className="flex items-center gap-1.5 group text-left rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card">
<span className="text-base font-semibold group-hover:text-primary transition-colors">{clusterName}</span>
@@ -103,16 +110,16 @@ function ClusterOverviewCard({ serverList, nodeStats, allVMs, memPercent, diskPe
{availableIPs > 0 && (
<div>
<p className="text-2xs font-semibold uppercase tracking-wider text-muted-foreground mb-1">IPv4 доступно</p>
<p className="text-3xl font-bold tabular-nums text-success">{availableIPs.toLocaleString()}</p>
<p className="font-mono text-3xl font-bold tabular-nums text-success">{availableIPs.toLocaleString()}</p>
</div>
)}
<div>
<p className="text-2xs font-semibold uppercase tracking-wider text-muted-foreground mb-1">Узлов</p>
<p className="text-3xl font-bold tabular-nums">{nodeStats.length}</p>
<p className="font-mono text-3xl font-bold tabular-nums">{nodeStats.length}</p>
</div>
<div>
<p className="text-2xs font-semibold uppercase tracking-wider text-muted-foreground mb-1">VM</p>
<p className="text-3xl font-bold tabular-nums">{totalVMs + totalCTs}</p>
<p className="font-mono text-3xl font-bold tabular-nums">{totalVMs + totalCTs}</p>
</div>
</div>
@@ -123,7 +130,7 @@ function ClusterOverviewCard({ serverList, nodeStats, allVMs, memPercent, diskPe
<div className="flex items-center justify-between text-xs pt-1">
<span className="text-muted-foreground">
Оверселлинг RAM = <span className="text-foreground font-medium">{overselling}</span>
Оверселлинг RAM = <span className="font-mono text-foreground font-medium">{overselling}</span>
</span>
<span className="flex items-center gap-1 text-muted-foreground">
<ExternalLink className="h-3 w-3" /> Grafana
@@ -175,12 +182,12 @@ function TasksTodayCard() {
{rows.map(({ label, value, red }) => (
<div key={label} className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">{label}</span>
<span className={`text-sm font-semibold tabular-nums ${red ? 'text-danger' : ''}`}>{value}</span>
<span className={`font-mono text-sm font-semibold tabular-nums ${red ? 'text-danger' : ''}`}>{value}</span>
</div>
))}
<div className="border-t border-border pt-2.5 flex items-center justify-between">
<span className="text-sm font-medium">Всего</span>
<span className="text-sm font-bold tabular-nums">{today.length}</span>
<span className="font-mono text-sm font-bold tabular-nums">{today.length}</span>
</div>
</CardContent>
</Card>
@@ -192,8 +199,9 @@ function NodeStatsCard({ cpuPercent, memPercent, serverName, serverCount }: {
cpuPercent: number; memPercent: number; serverName: string; serverCount: number
}) {
return (
<Card className="h-full">
<CardHeader className="pb-2 pt-5 px-5">
<Card className="h-full gap-0 py-0 overflow-hidden">
<div className={`h-[3px] w-full ${healthColor(cpuPercent, memPercent)}`} />
<CardHeader className="pb-2 pt-4 px-5">
<CardTitle className="text-sm font-semibold truncate">{serverName || 'Сервер'}</CardTitle>
</CardHeader>
<CardContent className="px-5 pb-5 space-y-4">
@@ -204,7 +212,7 @@ function NodeStatsCard({ cpuPercent, memPercent, serverName, serverCount }: {
<div className="space-y-1.5 text-xs">
<div className="flex justify-between">
<span className="text-muted-foreground">Серверов:</span>
<span className="font-medium">{serverCount}</span>
<span className="font-mono font-medium">{serverCount}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Платформа:</span>
@@ -293,13 +301,13 @@ function ClusterNodesSection({ nodeStats }: { nodeStats: Rec[] }) {
</span>
)}
</div>
<span className={`text-right tabular-nums text-xs font-medium ${cpu >= 90 ? 'text-danger' : cpu >= 70 ? 'text-warning' : ''}`}>
<span className={`font-mono text-right tabular-nums text-xs font-medium ${cpu >= 90 ? 'text-danger' : cpu >= 70 ? 'text-warning' : ''}`}>
{cpu.toFixed(0)}
</span>
<span className={`text-right tabular-nums text-xs ${ram >= 90 ? 'text-danger' : ram >= 70 ? 'text-warning' : ''}`}>
<span className={`font-mono text-right tabular-nums text-xs ${ram >= 90 ? 'text-danger' : ram >= 70 ? 'text-warning' : ''}`}>
{ram.toFixed(0)}
</span>
<span className="text-right tabular-nums text-xs text-muted-foreground">{disk.toFixed(0)}</span>
<span className="font-mono text-right tabular-nums text-xs text-muted-foreground">{disk.toFixed(0)}</span>
</div>
)
})
@@ -469,7 +477,7 @@ export default function DashboardPage() {
return (
<div className="space-y-4">
{/* Top row: cluster overview | tasks | node stats */}
<div className="grid gap-4 lg:grid-cols-[1fr_220px_210px]">
<div className="grid gap-4 lg:grid-cols-[1fr_220px_210px] animate-fade-up">
<ClusterOverviewCard
serverList={serverList}
nodeStats={nodeStats}
@@ -488,7 +496,9 @@ export default function DashboardPage() {
</div>
{/* Bottom row: nodes table + disk chart */}
<ClusterNodesSection nodeStats={nodeStats} />
<div className="animate-fade-up" style={{ animationDelay: '80ms' }}>
<ClusterNodesSection nodeStats={nodeStats} />
</div>
</div>
)
}

4
frontend/src/features/instances/CreateInstanceWizard.tsx
View File

@@ -100,8 +100,8 @@ export default function CreateInstanceWizard({ onClose }: { onClose?: () => void
const { data: templates = [] } = useTemplates(undefined, selectedServer?.id);
const { data: networks = [] } = useIPAMNetworks();
const { data: lxcTemplates = [], isLoading: lxcLoading } = useLXCTemplates(selectedServer?.id);
const { data: lxcStorages = [] } = useLXCStorages(selectedServer?.id, undefined, 'rootdir');
const { data: vmStorages = [] } = useLXCStorages(selectedServer?.id, undefined, 'images');
const { data: lxcStorages = [] } = useLXCStorages(selectedServer?.id, selectedNode || undefined, 'rootdir');
const { data: vmStorages = [] } = useLXCStorages(selectedServer?.id, selectedNode || undefined, 'images');
const { data: nodesData } = useNodes(selectedServer?.id ?? 0);
const nodes = nodesData?.nodes ?? [];
const activeWorkspaceId = useWorkspaceStore((s) => s.activeWorkspaceId);

8
frontend/src/features/nodes/NodesPage.tsx
View File

@@ -14,6 +14,7 @@ import type { ProxmoxServer, ProxmoxServerCreate } from '@/types';
import { formatUptime } from '@/lib/format';
import { toast } from 'sonner';
import { useConfirm } from '@/components/shared/ConfirmDialog';
import { StatusDot } from '@/components/shared/status-dot';
import ServerUpdatesBadge from './ServerUpdatesBadge';
/**
@@ -370,14 +371,15 @@ export default function NodesPage() {
<div className="flex items-center gap-4 text-sm text-muted-foreground">
<div className="flex items-center gap-1.5">
<Monitor className="h-3.5 w-3.5" />
<span>{srvVMs.length} VM</span>
<span className="font-mono tabular-nums">{srvVMs.length} VM</span>
</div>
<div className="flex items-center gap-1.5">
<Container className="h-3.5 w-3.5" />
<span>{srvCTs.length} LXC</span>
<span className="font-mono tabular-nums">{srvCTs.length} LXC</span>
</div>
</div>
<Badge variant={srv.is_online ? 'default' : 'destructive'}>
<Badge variant={srv.is_online ? 'default' : 'destructive'} className="gap-1.5">
<StatusDot status={srv.is_online ? 'online' : 'offline'} pulse className="h-1.5 w-1.5" />
{srv.is_online ? t('common.online') : t('common.offline')}
</Badge>
</div>

15
frontend/src/index.css
View File

@@ -163,6 +163,21 @@
@apply bg-background text-foreground font-sans antialiased;
}
/* Section entrance on first paint — signals load hierarchy, not decoration. */
@keyframes fade-up {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-up {
animation: fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Respect users who ask for less motion: neutralise transitions/animations
globally instead of auditing every component (WCAG reduced-motion). */
@media (prefers-reduced-motion: reduce) {