refactor(ResourceStatsPage): update RouterResourceCard layout to include an icon and improve styling
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m25s

This commit is contained in:
2026-02-22 22:17:16 +07:00
parent 9798e7fe95
commit c3fba50de8
+19 -18
View File
@@ -52,25 +52,31 @@ function KpiBlock({ label, value, percent, variant }) {
);
}
/** Карточка одного роутера: приветствие (имя), сводка, KPI (RAM, CPU, HDD) + декоративная иконка справа */
/** Карточка одного роутера: иконка перед названием, сводка, KPI (RAM, CPU, HDD) */
function RouterResourceCard({ router }) {
const { name, host, error, resource } = router;
const hasResource = resource && !error;
return (
<div className="card rounded-3 shadow-sm border-0 overflow-hidden h-100">
<div className="card-body d-flex flex-column flex-md-row align-items-stretch p-4">
<div className="flex-grow-1 pe-0 pe-md-3">
<h3 className="h4 fw-bold mb-1 text-body">
{name}
</h3>
<p className="text-secondary small mb-3">
{host}
{resource?.version && (
<span className="ms-2"> · RouterOS {resource.version}</span>
)}
</p>
<div className="card-body p-4">
<div className="d-flex align-items-center mb-3">
<span className="avatar avatar-lg bg-primary-lt text-primary rounded-3 me-3 flex-shrink-0">
<IconServer size={28} />
</span>
<div className="min-w-0">
<h3 className="h4 fw-bold mb-0 text-body text-truncate">
{name}
</h3>
<p className="text-secondary small mb-0 mt-1">
{host}
{resource?.version && (
<span className="ms-1"> · RouterOS {resource.version}</span>
)}
</p>
</div>
</div>
<div>
{error && (
<div className="alert alert-danger py-2 mb-3 d-flex align-items-center">
<IconAlertCircle size={20} className="me-2 flex-shrink-0" />
@@ -130,11 +136,6 @@ function RouterResourceCard({ router }) {
</div>
)}
</div>
<div className="d-none d-md-flex align-items-center justify-content-center flex-shrink-0 mt-3 mt-md-0 ms-md-3">
<span className="avatar avatar-xl bg-primary-lt text-primary rounded-3">
<IconServer size={48} />
</span>
</div>
</div>
</div>
);