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
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m25s
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user