denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(network-map): enhance card layout and issue display with badges for critical and warning nodes
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m28s
Details

Browse Source
This commit is contained in:
denozord
2026-02-25 02:04:54 +07:00
parent e1b5bb4c97
commit d53100f5bd
1 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/NetworkMapUnifi.jsx
+24 -14
View File
@@ -1046,15 +1046,15 @@ export default function NetworkMapUnifi({
</div> </div>
<div className="row g-3 mt-2"> <div className="row g-3 mt-2">
<div className="col-12 col-xl-6"> <div className="col-12 col-xl-6">
<div <div className="card">
className="card" <div className="card-header d-flex align-items-center">
style={{ background: '#0f172a', border: `1px solid ${UNIFI_CARD_BORDER}` }}
>
<div className="card-header">
<h3 className="card-title mb-0">Критичные узлы</h3> <h3 className="card-title mb-0">Критичные узлы</h3>
<div className="card-actions ms-auto">
<span className="badge bg-red-lt text-red">{criticalNodes.length}</span>
</div>
</div> </div>
<div className="table-responsive"> <div className="table-responsive">
<table className="table card-table table-vcenter table-nowrap mb-0 table-sm"> <table className="table card-table table-vcenter table-nowrap mb-0 table-sm table-striped">
<thead> <thead>
<tr> <tr>
<th scope="col">Узел</th> <th scope="col">Узел</th>
@@ -1085,7 +1085,11 @@ export default function NetworkMapUnifi({
<td>{n.maxPingMs != null ? `${n.maxPingMs} ms` : '—'}</td> <td>{n.maxPingMs != null ? `${n.maxPingMs} ms` : '—'}</td>
<td>{n.minSpeedMbps != null ? `${n.minSpeedMbps.toFixed(1)} Мбит/с` : '—'}</td> <td>{n.minSpeedMbps != null ? `${n.minSpeedMbps.toFixed(1)} Мбит/с` : '—'}</td>
<td>{n.linkCount}</td> <td>{n.linkCount}</td>
<td className="text-warning">{n.issues.slice(0, 2).join(', ')}</td> <td>
<span className="badge bg-orange-lt text-orange">
{n.issues.slice(0, 2).join(', ')}
</span>
</td>
</tr> </tr>
)) ))
)} )}
@@ -1095,12 +1099,12 @@ export default function NetworkMapUnifi({
</div> </div>
</div> </div>
<div className="col-12 col-xl-6"> <div className="col-12 col-xl-6">
<div <div className="card">
className="card" <div className="card-header d-flex align-items-center">
style={{ background: '#0f172a', border: `1px solid ${UNIFI_CARD_BORDER}` }}
>
<div className="card-header">
<h3 className="card-title mb-0">Требуют внимания</h3> <h3 className="card-title mb-0">Требуют внимания</h3>
<div className="card-actions ms-auto">
<span className="badge bg-yellow-lt text-yellow">{warningNodes.length}</span>
</div>
</div> </div>
<div className="table-responsive"> <div className="table-responsive">
<table className="table card-table table-vcenter table-nowrap mb-0 table-sm table-striped"> <table className="table card-table table-vcenter table-nowrap mb-0 table-sm table-striped">
@@ -1127,8 +1131,14 @@ export default function NetworkMapUnifi({
</td> </td>
<td>{n.maxPingMs != null ? `${n.maxPingMs} ms` : '—'}</td> <td>{n.maxPingMs != null ? `${n.maxPingMs} ms` : '—'}</td>
<td>{n.minSpeedMbps != null ? `${n.minSpeedMbps.toFixed(1)} Мбит/с` : '—'}</td> <td>{n.minSpeedMbps != null ? `${n.minSpeedMbps.toFixed(1)} Мбит/с` : '—'}</td>
<td>{n.staleCount}</td> <td>
<td className="text-muted">{n.issues.slice(0, 2).join(', ')}</td> <span className={n.staleCount > 0 ? 'badge bg-yellow-lt text-yellow' : 'text-muted'}>
{n.staleCount}
</span>
</td>
<td>
<span className="text-muted">{n.issues.slice(0, 2).join(', ')}</span>
</td>
</tr> </tr>
)) ))
)} )}