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 }) {
|
function RouterResourceCard({ router }) {
|
||||||
const { name, host, error, resource } = router;
|
const { name, host, error, resource } = router;
|
||||||
const hasResource = resource && !error;
|
const hasResource = resource && !error;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card rounded-3 shadow-sm border-0 overflow-hidden h-100">
|
<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="card-body p-4">
|
||||||
<div className="flex-grow-1 pe-0 pe-md-3">
|
<div className="d-flex align-items-center mb-3">
|
||||||
<h3 className="h4 fw-bold mb-1 text-body">
|
<span className="avatar avatar-lg bg-primary-lt text-primary rounded-3 me-3 flex-shrink-0">
|
||||||
{name}
|
<IconServer size={28} />
|
||||||
</h3>
|
</span>
|
||||||
<p className="text-secondary small mb-3">
|
<div className="min-w-0">
|
||||||
{host}
|
<h3 className="h4 fw-bold mb-0 text-body text-truncate">
|
||||||
{resource?.version && (
|
{name}
|
||||||
<span className="ms-2"> · RouterOS {resource.version}</span>
|
</h3>
|
||||||
)}
|
<p className="text-secondary small mb-0 mt-1">
|
||||||
</p>
|
{host}
|
||||||
|
{resource?.version && (
|
||||||
|
<span className="ms-1"> · RouterOS {resource.version}</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
{error && (
|
{error && (
|
||||||
<div className="alert alert-danger py-2 mb-3 d-flex align-items-center">
|
<div className="alert alert-danger py-2 mb-3 d-flex align-items-center">
|
||||||
<IconAlertCircle size={20} className="me-2 flex-shrink-0" />
|
<IconAlertCircle size={20} className="me-2 flex-shrink-0" />
|
||||||
@@ -130,11 +136,6 @@ function RouterResourceCard({ router }) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user