mirror of
https://github.com/hansjone/netx.git
synced 2026-10-10 09:50:44 +08:00
Unify network management UI with port-traffic list styling.
Drop the sidebar title/collapse chrome and align devices, alarms, configs, collect, and sync pages to the shared list layout. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
00d3e95e2d
commit
a0bef49e1e
8 changed files with 770 additions and 655 deletions
|
|
@ -3519,104 +3519,20 @@ pre {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #f7f9fc;
|
background: #f8fafc;
|
||||||
border-right: 1px solid #d0d7e2;
|
border-right: 1px solid #d8dee8;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
transition: width 0.18s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.network-shell.is-nav-collapsed .network-nav {
|
|
||||||
width: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.network-nav__head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 10px 8px 8px 12px;
|
|
||||||
border-bottom: 1px solid #e2e8f0;
|
|
||||||
min-height: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.network-shell.is-nav-collapsed .network-nav__head {
|
|
||||||
justify-content: center;
|
|
||||||
padding: 10px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.network-nav__title {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #0f172a;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-main .network-nav__collapse-btn,
|
|
||||||
.network-nav__collapse-btn {
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: transparent;
|
|
||||||
color: #64748b;
|
|
||||||
cursor: pointer;
|
|
||||||
line-height: 1;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-main .network-nav__collapse-btn:hover,
|
|
||||||
.network-nav__collapse-btn:hover {
|
|
||||||
background: #eef2f7;
|
|
||||||
color: #0f172a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.network-nav__rail {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 10px 4px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.network-nav__rail-link {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 8px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #475569;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.network-nav__rail-link:hover {
|
|
||||||
background: #eef2f7;
|
|
||||||
color: #0f172a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.network-nav__rail-link.is-active {
|
|
||||||
background: #e3effc;
|
|
||||||
color: #1565c0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.network-nav__scroll {
|
.network-nav__scroll {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 6px 0 16px;
|
padding: 10px 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network-nav__group {
|
.network-nav__group {
|
||||||
margin: 0;
|
margin: 0 0 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-main .network-nav__group-toggle,
|
.app-main .network-nav__group-toggle,
|
||||||
|
|
@ -3625,13 +3541,14 @@ pre {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px 12px;
|
padding: 9px 14px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #0f172a;
|
color: #334155;
|
||||||
font-size: 13px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 650;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -3639,6 +3556,7 @@ pre {
|
||||||
.app-main .network-nav__group-toggle:hover,
|
.app-main .network-nav__group-toggle:hover,
|
||||||
.network-nav__group-toggle:hover {
|
.network-nav__group-toggle:hover {
|
||||||
background: #eef2f7;
|
background: #eef2f7;
|
||||||
|
color: #0f172a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network-nav__group.is-active-group .network-nav__group-toggle {
|
.network-nav__group.is-active-group .network-nav__group-toggle {
|
||||||
|
|
@ -3648,8 +3566,8 @@ pre {
|
||||||
.network-nav__chevron {
|
.network-nav__chevron {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
color: #64748b;
|
color: #94a3b8;
|
||||||
font-size: 12px;
|
font-size: 11px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -3661,16 +3579,18 @@ pre {
|
||||||
.network-nav__list {
|
.network-nav__list {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 0 6px;
|
padding: 0 8px 6px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network-nav__link {
|
.network-nav__link {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 7px 12px 7px 30px;
|
padding: 7px 12px 7px 18px;
|
||||||
color: #334155;
|
border-radius: 6px;
|
||||||
|
color: #475569;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
border-left: 3px solid transparent;
|
line-height: 1.35;
|
||||||
|
border-left: 2px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network-nav__link:hover {
|
.network-nav__link:hover {
|
||||||
|
|
@ -3679,10 +3599,10 @@ pre {
|
||||||
}
|
}
|
||||||
|
|
||||||
.network-nav__link.is-active {
|
.network-nav__link.is-active {
|
||||||
background: #e3effc;
|
background: #e8f1fc;
|
||||||
color: #1565c0;
|
color: #1565c0;
|
||||||
border-left-color: #1565c0;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
border-left-color: #1565c0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network-main {
|
.network-main {
|
||||||
|
|
@ -3690,10 +3610,130 @@ pre {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 16px 20px 24px;
|
padding: 16px 18px 24px;
|
||||||
background: #eef2f7;
|
background: #eef2f7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.network-main > .panel {
|
||||||
|
padding: 16px 18px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-main .panel__toolbar {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px solid #e8edf3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-main .panel__toolbar h2 {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 650;
|
||||||
|
color: #0f172a;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-main .filter-inline {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #f8fafc;
|
||||||
|
grid-template-columns: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-main .filter-inline input,
|
||||||
|
.network-main .filter-inline select {
|
||||||
|
width: auto;
|
||||||
|
min-width: 140px;
|
||||||
|
flex: 1 1 160px;
|
||||||
|
max-width: 280px;
|
||||||
|
height: 32px;
|
||||||
|
margin: 0;
|
||||||
|
border: 1px solid #cbd5e1;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-main .filter-inline button {
|
||||||
|
height: 32px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-main .pt-list {
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-main .pager.pt-list-pager,
|
||||||
|
.network-main .pt-list-pager {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list-status--ok,
|
||||||
|
.pt-list-status--up,
|
||||||
|
.pt-list-status--connected {
|
||||||
|
background: #dcfce7;
|
||||||
|
color: #166534;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list-status--down,
|
||||||
|
.pt-list-status--failed,
|
||||||
|
.pt-list-status--critical {
|
||||||
|
background: #fee2e2;
|
||||||
|
color: #991b1b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list-status--major {
|
||||||
|
background: #ffedd5;
|
||||||
|
color: #9a3412;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list-status--minor,
|
||||||
|
.pt-list-status--warning {
|
||||||
|
background: #fef9c3;
|
||||||
|
color: #854d0e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list-status--info {
|
||||||
|
background: #e0f2fe;
|
||||||
|
color: #075985;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list-status--unknown {
|
||||||
|
background: #f1f5f9;
|
||||||
|
color: #475569;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-main .nm-config-view {
|
||||||
|
margin-top: 14px;
|
||||||
|
padding-top: 14px;
|
||||||
|
border-top: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-main .nm-config-view textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 420px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #0b1220;
|
||||||
|
color: #e2e8f0;
|
||||||
|
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.45;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
.network-main:has(.topo-page),
|
.network-main:has(.topo-page),
|
||||||
.network-main:has(.webcrt-shell),
|
.network-main:has(.webcrt-shell),
|
||||||
.network-main:has(.pt-wall-shell) {
|
.network-main:has(.pt-wall-shell) {
|
||||||
|
|
|
||||||
|
|
@ -445,46 +445,62 @@ export function CollectPage() {
|
||||||
{jobsQuery.isFetching ? t("common.refreshing") : t("common.refresh")}
|
{jobsQuery.isFetching ? t("common.refreshing") : t("common.refresh")}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<table>
|
<div className="pt-list">
|
||||||
<thead>
|
{!(jobsQuery.data?.items ?? []).length && !jobsQuery.isLoading ? (
|
||||||
<tr>
|
<div className="pt-list-empty">
|
||||||
<th>{t("collect.jobs.col.title")}</th>
|
<p>{t("common.empty")}</p>
|
||||||
<th>{t("collect.jobs.col.status")}</th>
|
</div>
|
||||||
<th>{t("collect.jobs.col.progress")}</th>
|
) : (
|
||||||
<th>{t("collect.jobs.col.created")}</th>
|
<div className="pt-list-table-wrap">
|
||||||
<th>{t("collect.jobs.col.lastRun")}</th>
|
<table className="data-table pt-list-table">
|
||||||
<th>{t("collect.jobs.col.actions")}</th>
|
<thead>
|
||||||
</tr>
|
<tr>
|
||||||
</thead>
|
<th>{t("collect.jobs.col.title")}</th>
|
||||||
<tbody>
|
<th>{t("collect.jobs.col.status")}</th>
|
||||||
{(jobsQuery.data?.items ?? []).map((job) => (
|
<th>{t("collect.jobs.col.progress")}</th>
|
||||||
<JobRow
|
<th>{t("collect.jobs.col.created")}</th>
|
||||||
key={job.id}
|
<th>{t("collect.jobs.col.lastRun")}</th>
|
||||||
job={job}
|
<th>{t("collect.jobs.col.actions")}</th>
|
||||||
expanded={expandedJobId === job.id}
|
</tr>
|
||||||
detail={expandedJobId === job.id ? detailQuery.data : undefined}
|
</thead>
|
||||||
onToggle={() => setExpandedJobId(expandedJobId === job.id ? "" : job.id)}
|
<tbody>
|
||||||
onPause={() => pauseMutation.mutate(job.id)}
|
{(jobsQuery.data?.items ?? []).map((job) => (
|
||||||
onStart={() => startJobMutation.mutate(job.id)}
|
<JobRow
|
||||||
onRetryFailed={() => retryFailedMutation.mutate(job.id)}
|
key={job.id}
|
||||||
onDelete={() => {
|
job={job}
|
||||||
if (window.confirm(t("collect.confirmDelete"))) deleteMutation.mutate(job.id);
|
expanded={expandedJobId === job.id}
|
||||||
}}
|
detail={expandedJobId === job.id ? detailQuery.data : undefined}
|
||||||
actionPending={actionPending}
|
onToggle={() => setExpandedJobId(expandedJobId === job.id ? "" : job.id)}
|
||||||
startPending={startJobMutation.isPending}
|
onPause={() => pauseMutation.mutate(job.id)}
|
||||||
/>
|
onStart={() => startJobMutation.mutate(job.id)}
|
||||||
))}
|
onRetryFailed={() => retryFailedMutation.mutate(job.id)}
|
||||||
</tbody>
|
onDelete={() => {
|
||||||
</table>
|
if (window.confirm(t("collect.confirmDelete"))) deleteMutation.mutate(job.id);
|
||||||
<div className="pager">
|
}}
|
||||||
<div className="pager__meta">{t("common.pagerMeta", { total: jobTotal, page: jobPage, pages: jobPages })}</div>
|
actionPending={actionPending}
|
||||||
<div className="pager__controls">
|
startPending={startJobMutation.isPending}
|
||||||
<button className="pager__btn" disabled={jobPage <= 1} onClick={() => setJobPage(jobPage - 1)}>
|
/>
|
||||||
{t("common.prevPage")}
|
))}
|
||||||
</button>
|
</tbody>
|
||||||
<button className="pager__btn" disabled={jobPage >= jobPages} onClick={() => setJobPage(jobPage + 1)}>
|
</table>
|
||||||
{t("common.nextPage")}
|
</div>
|
||||||
</button>
|
)}
|
||||||
|
<div className="pager pt-list-pager">
|
||||||
|
<div className="pager__meta muted">
|
||||||
|
{t("common.pagerMeta", {
|
||||||
|
total: String(jobTotal),
|
||||||
|
page: String(jobPage),
|
||||||
|
pages: String(jobPages),
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div className="pager__controls btn-row">
|
||||||
|
<button className="pager__btn" disabled={jobPage <= 1} onClick={() => setJobPage(jobPage - 1)}>
|
||||||
|
{t("common.prevPage")}
|
||||||
|
</button>
|
||||||
|
<button className="pager__btn" disabled={jobPage >= jobPages} onClick={() => setJobPage(jobPage + 1)}>
|
||||||
|
{t("common.nextPage")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -229,30 +229,34 @@ export function ConfigSyncPage() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="stat-grid" style={{ marginBottom: 16 }}>
|
<div className="pt-list" style={{ marginBottom: 16 }}>
|
||||||
<div className="stat-card">
|
<div className="pt-list-kpis">
|
||||||
<div className="muted">{t("configSync.kpi.snapshots")}</div>
|
<div className="pt-list-kpi">
|
||||||
<strong>{dash?.snapshot_count ?? "-"}</strong>
|
<div className="pt-list-kpi__label">{t("configSync.kpi.snapshots")}</div>
|
||||||
</div>
|
<div className="pt-list-kpi__value">{dash?.snapshot_count ?? "—"}</div>
|
||||||
<div className="stat-card">
|
</div>
|
||||||
<div className="muted">{t("configSync.kpi.running")}</div>
|
<div className={`pt-list-kpi${running ? " pt-list-kpi--live" : ""}`}>
|
||||||
<strong>
|
<div className="pt-list-kpi__label">{t("configSync.kpi.running")}</div>
|
||||||
{running
|
<div className="pt-list-kpi__value" style={{ fontSize: running ? 15 : 22 }}>
|
||||||
? `${running.status} · ${running.success_count}/${running.planned_count}`
|
{running
|
||||||
: t("configSync.kpi.idle")}
|
? `${running.status} · ${running.success_count}/${running.planned_count}`
|
||||||
</strong>
|
: t("configSync.kpi.idle")}
|
||||||
</div>
|
</div>
|
||||||
<div className="stat-card">
|
</div>
|
||||||
<div className="muted">{t("configSync.kpi.last")}</div>
|
<div className="pt-list-kpi">
|
||||||
<strong>
|
<div className="pt-list-kpi__label">{t("configSync.kpi.last")}</div>
|
||||||
{last
|
<div className="pt-list-kpi__value" style={{ fontSize: 15 }}>
|
||||||
? `${last.status} · ok ${last.success_count} / fail ${last.fail_count}`
|
{last
|
||||||
: t("common.empty")}
|
? `${last.status} · ok ${last.success_count} / fail ${last.fail_count}`
|
||||||
</strong>
|
: t("common.empty")}
|
||||||
</div>
|
</div>
|
||||||
<div className="stat-card">
|
</div>
|
||||||
<div className="muted">{t("configSync.kpi.nextDue")}</div>
|
<div className="pt-list-kpi">
|
||||||
<strong>{dash?.next_due_at ? formatSystemTime(dash.next_due_at) : t("common.empty")}</strong>
|
<div className="pt-list-kpi__label">{t("configSync.kpi.nextDue")}</div>
|
||||||
|
<div className="pt-list-kpi__value" style={{ fontSize: 15 }}>
|
||||||
|
{dash?.next_due_at ? formatSystemTime(dash.next_due_at) : t("common.empty")}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -382,7 +386,8 @@ export function ConfigSyncPage() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>{t("configSync.cyclesTitle")}</h3>
|
<h3>{t("configSync.cyclesTitle")}</h3>
|
||||||
<table className="data-table">
|
<div className="pt-list-table-wrap">
|
||||||
|
<table className="data-table pt-list-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th />
|
<th />
|
||||||
|
|
@ -409,9 +414,25 @@ export function ConfigSyncPage() {
|
||||||
{expandedCycleId === c.id ? t("configSync.collapse") : t("configSync.expand")}
|
{expandedCycleId === c.id ? t("configSync.collapse") : t("configSync.expand")}
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
<td title={c.id}>{c.id.slice(0, 8)}</td>
|
<td title={c.id} className="pt-list-num">{c.id.slice(0, 8)}</td>
|
||||||
<td>{c.trigger_mode}</td>
|
<td>{c.trigger_mode}</td>
|
||||||
<td>{c.status}</td>
|
<td>
|
||||||
|
<span
|
||||||
|
className={`pt-list-status ${
|
||||||
|
c.status === "running" || c.status === "pending"
|
||||||
|
? "pt-list-status--running"
|
||||||
|
: c.status === "paused"
|
||||||
|
? "pt-list-status--paused"
|
||||||
|
: c.status === "failed"
|
||||||
|
? "pt-list-status--failed"
|
||||||
|
: c.status === "success" || c.status === "completed"
|
||||||
|
? "pt-list-status--ok"
|
||||||
|
: "pt-list-status--other"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{c.status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
<td>
|
<td>
|
||||||
{c.success_count}/{c.planned_count} · fail {c.fail_count}
|
{c.success_count}/{c.planned_count} · fail {c.fail_count}
|
||||||
</td>
|
</td>
|
||||||
|
|
@ -453,16 +474,23 @@ export function ConfigSyncPage() {
|
||||||
) : null}
|
) : null}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div className="pager">
|
</div>
|
||||||
|
<div className="pager pt-list-pager">
|
||||||
|
<span className="muted">
|
||||||
|
{t("common.pagerMeta", {
|
||||||
|
total: String(cycleTotal),
|
||||||
|
page: String(cyclePage),
|
||||||
|
pages: String(cyclePages),
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
<div className="btn-row">
|
||||||
<button type="button" disabled={cyclePage <= 1} onClick={() => setCyclePage((p) => p - 1)}>
|
<button type="button" disabled={cyclePage <= 1} onClick={() => setCyclePage((p) => p - 1)}>
|
||||||
{t("common.prevPage")}
|
{t("common.prevPage")}
|
||||||
</button>
|
</button>
|
||||||
<span className="muted">
|
|
||||||
{t("common.pagerMeta", { total: String(cycleTotal), page: String(cyclePage), pages: String(cyclePages) })}
|
|
||||||
</span>
|
|
||||||
<button type="button" disabled={cyclePage >= cyclePages} onClick={() => setCyclePage((p) => p + 1)}>
|
<button type="button" disabled={cyclePage >= cyclePages} onClick={() => setCyclePage((p) => p + 1)}>
|
||||||
{t("common.nextPage")}
|
{t("common.nextPage")}
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{expandedCycleId ? (
|
{expandedCycleId ? (
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,16 @@ import { useI18n } from "../../i18n";
|
||||||
import { pageCount } from "../../utils/display";
|
import { pageCount } from "../../utils/display";
|
||||||
import { formatSystemTime } from "../../utils/time";
|
import { formatSystemTime } from "../../utils/time";
|
||||||
|
|
||||||
|
function severityClass(sev: string | null | undefined): string {
|
||||||
|
const s = String(sev || "").trim().toLowerCase();
|
||||||
|
if (s.includes("critical")) return "pt-list-status--critical";
|
||||||
|
if (s.includes("major")) return "pt-list-status--major";
|
||||||
|
if (s.includes("minor")) return "pt-list-status--minor";
|
||||||
|
if (s.includes("warning") || s.includes("warn")) return "pt-list-status--warning";
|
||||||
|
if (s.includes("info") || s.includes("indeterminate")) return "pt-list-status--info";
|
||||||
|
return "pt-list-status--unknown";
|
||||||
|
}
|
||||||
|
|
||||||
/** Current UME alarms query view for Network Management. */
|
/** Current UME alarms query view for Network Management. */
|
||||||
export function NetworkAlarmsPage() {
|
export function NetworkAlarmsPage() {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
@ -17,7 +27,14 @@ export function NetworkAlarmsPage() {
|
||||||
const [curPageSize, setCurPageSize] = useState(50);
|
const [curPageSize, setCurPageSize] = useState(50);
|
||||||
|
|
||||||
const currentQuery = useQuery({
|
const currentQuery = useQuery({
|
||||||
queryKey: queryKeys.umeCurrentAlarms(curSeverity, curCleared, curHostName, curKeyword, curPage, curPageSize),
|
queryKey: queryKeys.umeCurrentAlarms(
|
||||||
|
curSeverity,
|
||||||
|
curCleared,
|
||||||
|
curHostName,
|
||||||
|
curKeyword,
|
||||||
|
curPage,
|
||||||
|
curPageSize,
|
||||||
|
),
|
||||||
queryFn: () =>
|
queryFn: () =>
|
||||||
fetchUmeCurrentAlarms({
|
fetchUmeCurrentAlarms({
|
||||||
severity: curSeverity,
|
severity: curSeverity,
|
||||||
|
|
@ -30,6 +47,7 @@ export function NetworkAlarmsPage() {
|
||||||
staleTime: 5000,
|
staleTime: 5000,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const items = currentQuery.data?.items || [];
|
||||||
const curTotal = Number(currentQuery.data?.total || 0);
|
const curTotal = Number(currentQuery.data?.total || 0);
|
||||||
const curPages = pageCount(curTotal, curPageSize);
|
const curPages = pageCount(curTotal, curPageSize);
|
||||||
const perPage = (n: number) => t("common.perPage", { n: String(n) });
|
const perPage = (n: number) => t("common.perPage", { n: String(n) });
|
||||||
|
|
@ -40,130 +58,164 @@ export function NetworkAlarmsPage() {
|
||||||
<div className="panel__toolbar">
|
<div className="panel__toolbar">
|
||||||
<h2>{t("ume.alarms.title")}</h2>
|
<h2>{t("ume.alarms.title")}</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className="filter-inline">
|
|
||||||
<input
|
<div className="pt-list">
|
||||||
value={curKeyword}
|
<div className="filter-inline">
|
||||||
placeholder={t("ume.alarms.keywordPh")}
|
<input
|
||||||
onChange={(e) => {
|
value={curKeyword}
|
||||||
setCurKeyword(e.target.value);
|
placeholder={t("ume.alarms.keywordPh")}
|
||||||
setCurPage(1);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
value={curHostName}
|
|
||||||
placeholder={t("ume.alarms.hostNamePh")}
|
|
||||||
onChange={(e) => {
|
|
||||||
setCurHostName(e.target.value);
|
|
||||||
setCurPage(1);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<select
|
|
||||||
value={curSeverity}
|
|
||||||
onChange={(e) => {
|
|
||||||
setCurSeverity(e.target.value);
|
|
||||||
setCurPage(1);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="">{t("ume.alarms.allSeverity")}</option>
|
|
||||||
<option value="critical">critical</option>
|
|
||||||
<option value="major">major</option>
|
|
||||||
<option value="minor">minor</option>
|
|
||||||
<option value="warning">warning</option>
|
|
||||||
<option value="info">info</option>
|
|
||||||
</select>
|
|
||||||
<select
|
|
||||||
value={curCleared}
|
|
||||||
onChange={(e) => {
|
|
||||||
setCurCleared(e.target.value);
|
|
||||||
setCurPage(1);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="">{t("ume.alarms.clearedAll")}</option>
|
|
||||||
<option value="true">true</option>
|
|
||||||
<option value="false">false</option>
|
|
||||||
</select>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
title={t("ume.alarms.clearTitle")}
|
|
||||||
onClick={() => {
|
|
||||||
setCurKeyword("");
|
|
||||||
setCurHostName("");
|
|
||||||
setCurSeverity("");
|
|
||||||
setCurCleared("");
|
|
||||||
setCurPage(1);
|
|
||||||
}}
|
|
||||||
disabled={!hasFilters}
|
|
||||||
>
|
|
||||||
{t("common.clearFilters")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{currentQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
|
|
||||||
{currentQuery.isError ? <p className="error-text">{t("common.opFailed")}</p> : null}
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>time_created</th>
|
|
||||||
<th>severity</th>
|
|
||||||
<th>ne_id</th>
|
|
||||||
<th>host_name</th>
|
|
||||||
<th>ne_type</th>
|
|
||||||
<th>cause</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{(currentQuery.data?.items || []).map((x) => (
|
|
||||||
<tr key={x.alarm_key}>
|
|
||||||
<td>{formatSystemTime(x.time_created)}</td>
|
|
||||||
<td>{x.perceived_severity}</td>
|
|
||||||
<td>{x.ne_id}</td>
|
|
||||||
<td>
|
|
||||||
{(x.host_name || "").trim() ? (
|
|
||||||
<button
|
|
||||||
className="link-btn"
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
setCurHostName(x.host_name || "");
|
|
||||||
setCurKeyword("");
|
|
||||||
setCurPage(1);
|
|
||||||
}}
|
|
||||||
title={t("ume.alarms.filterByHost")}
|
|
||||||
>
|
|
||||||
{x.host_name}
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<span className="muted" title={t("ume.alarms.noHostName")}>
|
|
||||||
{t("common.empty")}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
<td>{x.ne_type ?? ""}</td>
|
|
||||||
<td>{x.native_probable_cause}</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div className="pager">
|
|
||||||
<div className="pager__meta">{t("common.pagerMeta", { total: curTotal, page: curPage, pages: curPages })}</div>
|
|
||||||
<div className="pager__controls">
|
|
||||||
<button className="pager__btn" type="button" onClick={() => setCurPage(Math.max(1, curPage - 1))} disabled={curPage <= 1}>
|
|
||||||
{t("common.prevPage")}
|
|
||||||
</button>
|
|
||||||
<button className="pager__btn" type="button" onClick={() => setCurPage(curPage + 1)} disabled={curPage >= curPages}>
|
|
||||||
{t("common.nextPage")}
|
|
||||||
</button>
|
|
||||||
<select
|
|
||||||
className="pager__size"
|
|
||||||
value={String(curPageSize)}
|
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setCurPageSize(Number(e.target.value) || 50);
|
setCurKeyword(e.target.value);
|
||||||
|
setCurPage(1);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
value={curHostName}
|
||||||
|
placeholder={t("ume.alarms.hostNamePh")}
|
||||||
|
onChange={(e) => {
|
||||||
|
setCurHostName(e.target.value);
|
||||||
|
setCurPage(1);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
value={curSeverity}
|
||||||
|
onChange={(e) => {
|
||||||
|
setCurSeverity(e.target.value);
|
||||||
setCurPage(1);
|
setCurPage(1);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<option value="50">{perPage(50)}</option>
|
<option value="">{t("ume.alarms.allSeverity")}</option>
|
||||||
<option value="100">{perPage(100)}</option>
|
<option value="critical">critical</option>
|
||||||
<option value="200">{perPage(200)}</option>
|
<option value="major">major</option>
|
||||||
<option value="500">{perPage(500)}</option>
|
<option value="minor">minor</option>
|
||||||
|
<option value="warning">warning</option>
|
||||||
|
<option value="info">info</option>
|
||||||
</select>
|
</select>
|
||||||
|
<select
|
||||||
|
value={curCleared}
|
||||||
|
onChange={(e) => {
|
||||||
|
setCurCleared(e.target.value);
|
||||||
|
setCurPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="">{t("ume.alarms.clearedAll")}</option>
|
||||||
|
<option value="true">true</option>
|
||||||
|
<option value="false">false</option>
|
||||||
|
</select>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
title={t("ume.alarms.clearTitle")}
|
||||||
|
onClick={() => {
|
||||||
|
setCurKeyword("");
|
||||||
|
setCurHostName("");
|
||||||
|
setCurSeverity("");
|
||||||
|
setCurCleared("");
|
||||||
|
setCurPage(1);
|
||||||
|
}}
|
||||||
|
disabled={!hasFilters}
|
||||||
|
>
|
||||||
|
{t("common.clearFilters")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{currentQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
|
||||||
|
{currentQuery.isError ? <p className="error-text">{t("common.opFailed")}</p> : null}
|
||||||
|
|
||||||
|
{!items.length && !currentQuery.isLoading ? (
|
||||||
|
<div className="pt-list-empty">
|
||||||
|
<p>{t("common.empty")}</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="pt-list-table-wrap">
|
||||||
|
<table className="data-table pt-list-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>time_created</th>
|
||||||
|
<th>severity</th>
|
||||||
|
<th>ne_id</th>
|
||||||
|
<th>host_name</th>
|
||||||
|
<th>ne_type</th>
|
||||||
|
<th>cause</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{items.map((x) => (
|
||||||
|
<tr key={x.alarm_key}>
|
||||||
|
<td className="pt-list-time">{formatSystemTime(x.time_created)}</td>
|
||||||
|
<td>
|
||||||
|
<span className={`pt-list-status ${severityClass(x.perceived_severity)}`}>
|
||||||
|
{x.perceived_severity || "—"}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="pt-list-num">{x.ne_id}</td>
|
||||||
|
<td>
|
||||||
|
{(x.host_name || "").trim() ? (
|
||||||
|
<button
|
||||||
|
className="link-btn pt-list-task-name"
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setCurHostName(x.host_name || "");
|
||||||
|
setCurKeyword("");
|
||||||
|
setCurPage(1);
|
||||||
|
}}
|
||||||
|
title={t("ume.alarms.filterByHost")}
|
||||||
|
>
|
||||||
|
{x.host_name}
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<span className="muted" title={t("ume.alarms.noHostName")}>
|
||||||
|
{t("common.empty")}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td>{x.ne_type ?? ""}</td>
|
||||||
|
<td>{x.native_probable_cause}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="pager pt-list-pager">
|
||||||
|
<div className="pager__meta muted">
|
||||||
|
{t("common.pagerMeta", {
|
||||||
|
total: String(curTotal),
|
||||||
|
page: String(curPage),
|
||||||
|
pages: String(curPages),
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div className="pager__controls btn-row">
|
||||||
|
<button
|
||||||
|
className="pager__btn"
|
||||||
|
type="button"
|
||||||
|
onClick={() => setCurPage(Math.max(1, curPage - 1))}
|
||||||
|
disabled={curPage <= 1}
|
||||||
|
>
|
||||||
|
{t("common.prevPage")}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="pager__btn"
|
||||||
|
type="button"
|
||||||
|
onClick={() => setCurPage(curPage + 1)}
|
||||||
|
disabled={curPage >= curPages}
|
||||||
|
>
|
||||||
|
{t("common.nextPage")}
|
||||||
|
</button>
|
||||||
|
<select
|
||||||
|
className="pager__size"
|
||||||
|
value={String(curPageSize)}
|
||||||
|
onChange={(e) => {
|
||||||
|
setCurPageSize(Number(e.target.value) || 50);
|
||||||
|
setCurPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="50">{perPage(50)}</option>
|
||||||
|
<option value="100">{perPage(100)}</option>
|
||||||
|
<option value="200">{perPage(200)}</option>
|
||||||
|
<option value="500">{perPage(500)}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -49,6 +49,7 @@ export function NetworkConfigsPage() {
|
||||||
const pages = pageCount(total, 20);
|
const pages = pageCount(total, 20);
|
||||||
const detail = detailQuery.data;
|
const detail = detailQuery.data;
|
||||||
const showAlt = Boolean(detail?.has_alt);
|
const showAlt = Boolean(detail?.has_alt);
|
||||||
|
const hasFilters = Boolean(keyword || source || vendor);
|
||||||
|
|
||||||
const exportConfig = async (
|
const exportConfig = async (
|
||||||
src: string,
|
src: string,
|
||||||
|
|
@ -73,200 +74,216 @@ export function NetworkConfigsPage() {
|
||||||
<h2>{t("networkConfigs.title")}</h2>
|
<h2>{t("networkConfigs.title")}</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="filter-inline">
|
<div className="pt-list">
|
||||||
<input
|
<div className="filter-inline">
|
||||||
value={keyword}
|
<input
|
||||||
placeholder={t("networkConfigs.keywordPh")}
|
value={keyword}
|
||||||
onChange={(e) => {
|
placeholder={t("networkConfigs.keywordPh")}
|
||||||
setKeyword(e.target.value);
|
onChange={(e) => {
|
||||||
setPage(1);
|
setKeyword(e.target.value);
|
||||||
}}
|
setPage(1);
|
||||||
/>
|
}}
|
||||||
<select
|
/>
|
||||||
value={source}
|
<select
|
||||||
onChange={(e) => {
|
value={source}
|
||||||
setSource(e.target.value);
|
onChange={(e) => {
|
||||||
setPage(1);
|
setSource(e.target.value);
|
||||||
}}
|
setPage(1);
|
||||||
>
|
}}
|
||||||
<option value="">{t("networkConfigs.allSource")}</option>
|
>
|
||||||
<option value="managed">managed</option>
|
<option value="">{t("networkConfigs.allSource")}</option>
|
||||||
<option value="ume">ume</option>
|
<option value="managed">managed</option>
|
||||||
</select>
|
<option value="ume">ume</option>
|
||||||
<input
|
</select>
|
||||||
value={vendor}
|
<input
|
||||||
placeholder={t("networkConfigs.vendorPh")}
|
value={vendor}
|
||||||
onChange={(e) => {
|
placeholder={t("networkConfigs.vendorPh")}
|
||||||
setVendor(e.target.value);
|
onChange={(e) => {
|
||||||
setPage(1);
|
setVendor(e.target.value);
|
||||||
}}
|
setPage(1);
|
||||||
/>
|
}}
|
||||||
<button
|
/>
|
||||||
type="button"
|
<button
|
||||||
disabled={!keyword && !source && !vendor}
|
type="button"
|
||||||
onClick={() => {
|
disabled={!hasFilters}
|
||||||
setKeyword("");
|
onClick={() => {
|
||||||
setSource("");
|
setKeyword("");
|
||||||
setVendor("");
|
setSource("");
|
||||||
setPage(1);
|
setVendor("");
|
||||||
}}
|
setPage(1);
|
||||||
>
|
}}
|
||||||
{t("common.clearFilters")}
|
>
|
||||||
</button>
|
{t("common.clearFilters")}
|
||||||
</div>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{listQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
|
{listQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
|
||||||
|
|
||||||
<table className="data-table">
|
{!items.length && !listQuery.isLoading ? (
|
||||||
<thead>
|
<div className="pt-list-empty">
|
||||||
<tr>
|
<p>{t("networkConfigs.empty")}</p>
|
||||||
<th>{t("networkConfigs.col.name")}</th>
|
</div>
|
||||||
<th>IP</th>
|
) : (
|
||||||
<th>{t("networkConfigs.col.vendor")}</th>
|
<div className="pt-list-table-wrap">
|
||||||
<th>{t("networkConfigs.col.source")}</th>
|
<table className="data-table pt-list-table">
|
||||||
<th>{t("networkConfigs.col.size")}</th>
|
<thead>
|
||||||
<th>{t("networkConfigs.col.collected")}</th>
|
<tr>
|
||||||
<th />
|
<th>{t("networkConfigs.col.name")}</th>
|
||||||
</tr>
|
<th>IP</th>
|
||||||
</thead>
|
<th>{t("networkConfigs.col.vendor")}</th>
|
||||||
<tbody>
|
<th>{t("networkConfigs.col.source")}</th>
|
||||||
{items.map((row) => {
|
<th>{t("networkConfigs.col.size")}</th>
|
||||||
const exportKey = `${row.source}:${row.target_id}:list`;
|
<th>{t("networkConfigs.col.collected")}</th>
|
||||||
return (
|
<th>{t("portTraffic.col.actions")}</th>
|
||||||
<tr key={`${row.source}:${row.target_id}`}>
|
</tr>
|
||||||
<td>{row.ne_name || row.target_id}</td>
|
</thead>
|
||||||
<td>{row.ne_ip}</td>
|
<tbody>
|
||||||
<td>{row.vendor || "-"}</td>
|
{items.map((row) => {
|
||||||
<td>{row.source}</td>
|
const exportKey = `${row.source}:${row.target_id}:list`;
|
||||||
<td>{fmtBytes(row.plain_size)}</td>
|
return (
|
||||||
<td>{row.collected_at ? formatSystemTime(row.collected_at) : "-"}</td>
|
<tr key={`${row.source}:${row.target_id}`}>
|
||||||
<td className="table-actions">
|
<td className="pt-list-task-name">{row.ne_name || row.target_id}</td>
|
||||||
<button
|
<td className="pt-list-num">{row.ne_ip}</td>
|
||||||
type="button"
|
<td>{row.vendor || "—"}</td>
|
||||||
className="link-btn"
|
<td>{row.source}</td>
|
||||||
onClick={() => {
|
<td className="pt-list-num">{fmtBytes(row.plain_size)}</td>
|
||||||
setSelected({ source: row.source, id: row.target_id });
|
<td className="pt-list-time">
|
||||||
setTab("primary");
|
{row.collected_at ? formatSystemTime(row.collected_at) : "—"}
|
||||||
}}
|
</td>
|
||||||
>
|
<td>
|
||||||
{t("networkConfigs.view")}
|
<div className="btn-row pt-list-actions table-actions">
|
||||||
</button>
|
<button
|
||||||
<button
|
type="button"
|
||||||
type="button"
|
onClick={() => {
|
||||||
className="link-btn"
|
setSelected({ source: row.source, id: row.target_id });
|
||||||
disabled={exporting === exportKey || exporting.startsWith(`${row.source}:${row.target_id}:`)}
|
setTab("primary");
|
||||||
onClick={() =>
|
}}
|
||||||
void exportConfig(row.source, row.target_id, row.has_alt ? "both" : "primary")
|
>
|
||||||
}
|
{t("networkConfigs.view")}
|
||||||
>
|
</button>
|
||||||
{t("networkConfigs.export")}
|
<button
|
||||||
</button>
|
type="button"
|
||||||
<button
|
disabled={
|
||||||
type="button"
|
exporting === exportKey ||
|
||||||
className="link-btn"
|
exporting.startsWith(`${row.source}:${row.target_id}:`)
|
||||||
onClick={() => {
|
}
|
||||||
const path =
|
onClick={() =>
|
||||||
row.source === "ume"
|
void exportConfig(
|
||||||
? `/webcrt?ne_id=${encodeURIComponent(row.target_id)}&source=ume`
|
row.source,
|
||||||
: `/webcrt?ne_id=${encodeURIComponent(row.target_id)}`;
|
row.target_id,
|
||||||
openNewModuleWindow({ moduleId: "webcrt", path });
|
row.has_alt ? "both" : "primary",
|
||||||
}}
|
)
|
||||||
>
|
}
|
||||||
WebCRT
|
>
|
||||||
</button>
|
{t("networkConfigs.export")}
|
||||||
</td>
|
</button>
|
||||||
</tr>
|
<button
|
||||||
);
|
type="button"
|
||||||
})}
|
onClick={() => {
|
||||||
{!items.length && !listQuery.isLoading ? (
|
const path =
|
||||||
<tr>
|
row.source === "ume"
|
||||||
<td colSpan={7} className="muted">
|
? `/webcrt?ne_id=${encodeURIComponent(row.target_id)}&source=ume`
|
||||||
{t("networkConfigs.empty")}
|
: `/webcrt?ne_id=${encodeURIComponent(row.target_id)}`;
|
||||||
</td>
|
openNewModuleWindow({ moduleId: "webcrt", path });
|
||||||
</tr>
|
}}
|
||||||
) : null}
|
>
|
||||||
</tbody>
|
WebCRT
|
||||||
</table>
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="pager">
|
<div className="pager pt-list-pager">
|
||||||
<button type="button" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
|
<span className="muted">
|
||||||
{t("common.prevPage")}
|
{t("common.pagerMeta", {
|
||||||
</button>
|
total: String(total),
|
||||||
<span className="muted">
|
page: String(page),
|
||||||
{t("common.pagerMeta", { total: String(total), page: String(page), pages: String(pages) })}
|
pages: String(pages),
|
||||||
</span>
|
})}
|
||||||
<button type="button" disabled={page >= pages} onClick={() => setPage((p) => p + 1)}>
|
</span>
|
||||||
{t("common.nextPage")}
|
<div className="btn-row">
|
||||||
</button>
|
<button type="button" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
|
||||||
</div>
|
{t("common.prevPage")}
|
||||||
|
</button>
|
||||||
|
<button type="button" disabled={page >= pages} onClick={() => setPage((p) => p + 1)}>
|
||||||
|
{t("common.nextPage")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{selected ? (
|
{selected ? (
|
||||||
<div className="panel" style={{ marginTop: 16 }}>
|
<div className="nm-config-view">
|
||||||
<div className="panel__toolbar">
|
<div className="panel__toolbar">
|
||||||
<h3>
|
<h3>
|
||||||
{detail?.ne_name || selected.id}{" "}
|
{detail?.ne_name || selected.id}{" "}
|
||||||
<span className="muted">
|
<span className="muted">
|
||||||
({selected.source} / {detail?.ne_ip || "-"})
|
({selected.source} / {detail?.ne_ip || "—"})
|
||||||
</span>
|
</span>
|
||||||
</h3>
|
</h3>
|
||||||
<div className="btn-row">
|
<div className="btn-row">
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
disabled={Boolean(exporting)}
|
|
||||||
onClick={() =>
|
|
||||||
void exportConfig(
|
|
||||||
selected.source,
|
|
||||||
selected.id,
|
|
||||||
showAlt ? (tab === "alt" ? "alt" : "primary") : "primary",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t("networkConfigs.export")}
|
|
||||||
</button>
|
|
||||||
{showAlt ? (
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
disabled={Boolean(exporting)}
|
disabled={Boolean(exporting)}
|
||||||
onClick={() => void exportConfig(selected.source, selected.id, "both")}
|
onClick={() =>
|
||||||
|
void exportConfig(
|
||||||
|
selected.source,
|
||||||
|
selected.id,
|
||||||
|
showAlt ? (tab === "alt" ? "alt" : "primary") : "primary",
|
||||||
|
)
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{t("networkConfigs.exportBoth")}
|
{t("networkConfigs.export")}
|
||||||
</button>
|
</button>
|
||||||
) : null}
|
{showAlt ? (
|
||||||
<button type="button" onClick={() => setSelected(null)}>
|
<button
|
||||||
{t("networkConfigs.close")}
|
type="button"
|
||||||
</button>
|
disabled={Boolean(exporting)}
|
||||||
|
onClick={() => void exportConfig(selected.source, selected.id, "both")}
|
||||||
|
>
|
||||||
|
{t("networkConfigs.exportBoth")}
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
<button type="button" onClick={() => setSelected(null)}>
|
||||||
|
{t("networkConfigs.close")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{detailQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
|
||||||
|
{showAlt ? (
|
||||||
|
<div className="btn-row" style={{ marginBottom: 8 }}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={tab === "primary" ? "btn-primary" : undefined}
|
||||||
|
onClick={() => setTab("primary")}
|
||||||
|
>
|
||||||
|
{t("networkConfigs.tabSet")}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={tab === "alt" ? "btn-primary" : undefined}
|
||||||
|
onClick={() => setTab("alt")}
|
||||||
|
>
|
||||||
|
{t("networkConfigs.tabHier")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<textarea
|
||||||
|
readOnly
|
||||||
|
value={tab === "alt" ? detail?.config_alt_text || "" : detail?.config_text || ""}
|
||||||
|
/>
|
||||||
|
<p className="muted" style={{ marginTop: 8 }}>
|
||||||
|
SHA-256: {tab === "alt" ? detail?.config_alt_sha256 : detail?.config_sha256} ·{" "}
|
||||||
|
{fmtBytes(tab === "alt" ? detail?.plain_alt_size || 0 : detail?.plain_size || 0)}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{detailQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
|
) : null}
|
||||||
{showAlt ? (
|
</div>
|
||||||
<div className="btn-row" style={{ marginBottom: 8 }}>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={tab === "primary" ? "btn-primary" : undefined}
|
|
||||||
onClick={() => setTab("primary")}
|
|
||||||
>
|
|
||||||
{t("networkConfigs.tabSet")}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={tab === "alt" ? "btn-primary" : undefined}
|
|
||||||
onClick={() => setTab("alt")}
|
|
||||||
>
|
|
||||||
{t("networkConfigs.tabHier")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<textarea
|
|
||||||
readOnly
|
|
||||||
value={tab === "alt" ? detail?.config_alt_text || "" : detail?.config_text || ""}
|
|
||||||
style={{ width: "100%", minHeight: 420, fontFamily: "ui-monospace, monospace", fontSize: 12 }}
|
|
||||||
/>
|
|
||||||
<p className="muted">
|
|
||||||
SHA-256: {tab === "alt" ? detail?.config_alt_sha256 : detail?.config_sha256} ·{" "}
|
|
||||||
{fmtBytes(tab === "alt" ? detail?.plain_alt_size || 0 : detail?.plain_size || 0)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,16 @@ import { pageCount } from "../../utils/display";
|
||||||
|
|
||||||
const PAGE_SIZE = 50;
|
const PAGE_SIZE = 50;
|
||||||
|
|
||||||
|
function connectStatusClass(status: string | null | undefined): string {
|
||||||
|
const s = String(status || "").trim().toLowerCase();
|
||||||
|
if (!s || s === "-" || s === "unknown") return "pt-list-status--unknown";
|
||||||
|
if (s.includes("fail") || s.includes("down") || s.includes("error")) return "pt-list-status--down";
|
||||||
|
if (s.includes("ok") || s.includes("up") || s.includes("connected") || s.includes("success")) {
|
||||||
|
return "pt-list-status--ok";
|
||||||
|
}
|
||||||
|
return "pt-list-status--other";
|
||||||
|
}
|
||||||
|
|
||||||
/** Read-only inventory of managed + UME NEs for Network Management. */
|
/** Read-only inventory of managed + UME NEs for Network Management. */
|
||||||
export function NetworkDevicesPage() {
|
export function NetworkDevicesPage() {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
@ -23,6 +33,7 @@ export function NetworkDevicesPage() {
|
||||||
const items = listQuery.data?.items ?? [];
|
const items = listQuery.data?.items ?? [];
|
||||||
const total = Number(listQuery.data?.total || 0);
|
const total = Number(listQuery.data?.total || 0);
|
||||||
const pages = pageCount(total, PAGE_SIZE);
|
const pages = pageCount(total, PAGE_SIZE);
|
||||||
|
const hasFilters = Boolean(keyword.trim() || source !== "all");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="panel">
|
<section className="panel">
|
||||||
|
|
@ -30,83 +41,96 @@ export function NetworkDevicesPage() {
|
||||||
<h2>{t("networkDevices.title")}</h2>
|
<h2>{t("networkDevices.title")}</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="filter-inline">
|
<div className="pt-list">
|
||||||
<input
|
<div className="filter-inline">
|
||||||
value={keyword}
|
<input
|
||||||
placeholder={t("networkDevices.keywordPh")}
|
value={keyword}
|
||||||
onChange={(e) => {
|
placeholder={t("networkDevices.keywordPh")}
|
||||||
setKeyword(e.target.value);
|
onChange={(e) => {
|
||||||
setPage(1);
|
setKeyword(e.target.value);
|
||||||
}}
|
setPage(1);
|
||||||
/>
|
}}
|
||||||
<select
|
/>
|
||||||
value={source}
|
<select
|
||||||
onChange={(e) => {
|
value={source}
|
||||||
setSource(e.target.value as "all" | "managed" | "ume");
|
onChange={(e) => {
|
||||||
setPage(1);
|
setSource(e.target.value as "all" | "managed" | "ume");
|
||||||
}}
|
setPage(1);
|
||||||
>
|
}}
|
||||||
<option value="all">{t("networkDevices.allSource")}</option>
|
>
|
||||||
<option value="managed">managed</option>
|
<option value="all">{t("networkDevices.allSource")}</option>
|
||||||
<option value="ume">ume</option>
|
<option value="managed">managed</option>
|
||||||
</select>
|
<option value="ume">ume</option>
|
||||||
<button
|
</select>
|
||||||
type="button"
|
<button
|
||||||
disabled={!keyword.trim() && source === "all"}
|
type="button"
|
||||||
onClick={() => {
|
disabled={!hasFilters}
|
||||||
setKeyword("");
|
onClick={() => {
|
||||||
setSource("all");
|
setKeyword("");
|
||||||
setPage(1);
|
setSource("all");
|
||||||
}}
|
setPage(1);
|
||||||
>
|
}}
|
||||||
{t("common.clearFilters")}
|
>
|
||||||
</button>
|
{t("common.clearFilters")}
|
||||||
</div>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{listQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
|
{listQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
|
||||||
|
|
||||||
<table className="data-table">
|
{!items.length && !listQuery.isLoading ? (
|
||||||
<thead>
|
<div className="pt-list-empty">
|
||||||
<tr>
|
<p>{t("networkDevices.empty")}</p>
|
||||||
<th>{t("networkDevices.col.source")}</th>
|
</div>
|
||||||
<th>{t("networkDevices.col.name")}</th>
|
) : (
|
||||||
<th>IP</th>
|
<div className="pt-list-table-wrap">
|
||||||
<th>{t("networkDevices.col.vendor")}</th>
|
<table className="data-table pt-list-table">
|
||||||
<th>{t("networkDevices.col.deviceType")}</th>
|
<thead>
|
||||||
<th>{t("networkDevices.col.connect")}</th>
|
<tr>
|
||||||
</tr>
|
<th>{t("networkDevices.col.source")}</th>
|
||||||
</thead>
|
<th>{t("networkDevices.col.name")}</th>
|
||||||
<tbody>
|
<th>IP</th>
|
||||||
{items.map((row) => (
|
<th>{t("networkDevices.col.vendor")}</th>
|
||||||
<tr key={`${row.source}:${row.id}`}>
|
<th>{t("networkDevices.col.deviceType")}</th>
|
||||||
<td>{row.source}</td>
|
<th>{t("networkDevices.col.connect")}</th>
|
||||||
<td>{row.name || row.id}</td>
|
</tr>
|
||||||
<td>{row.ip_address || "-"}</td>
|
</thead>
|
||||||
<td>{row.vendor || "-"}</td>
|
<tbody>
|
||||||
<td>{row.device_type || row.ne_type || "-"}</td>
|
{items.map((row) => (
|
||||||
<td>{row.connect_status || "-"}</td>
|
<tr key={`${row.source}:${row.id}`}>
|
||||||
</tr>
|
<td>{row.source}</td>
|
||||||
))}
|
<td className="pt-list-task-name">{row.name || row.id}</td>
|
||||||
{!items.length && !listQuery.isLoading ? (
|
<td className="pt-list-num">{row.ip_address || "—"}</td>
|
||||||
<tr>
|
<td>{row.vendor || "—"}</td>
|
||||||
<td colSpan={6} className="muted">
|
<td>{row.device_type || row.ne_type || "—"}</td>
|
||||||
{t("networkDevices.empty")}
|
<td>
|
||||||
</td>
|
<span className={`pt-list-status ${connectStatusClass(row.connect_status)}`}>
|
||||||
</tr>
|
{row.connect_status || "—"}
|
||||||
) : null}
|
</span>
|
||||||
</tbody>
|
</td>
|
||||||
</table>
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="pager">
|
<div className="pager pt-list-pager">
|
||||||
<button type="button" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
|
<span className="muted">
|
||||||
{t("common.prevPage")}
|
{t("common.pagerMeta", {
|
||||||
</button>
|
total: String(total),
|
||||||
<span className="muted">
|
page: String(page),
|
||||||
{t("common.pagerMeta", { total: String(total), page: String(page), pages: String(pages) })}
|
pages: String(pages),
|
||||||
</span>
|
})}
|
||||||
<button type="button" disabled={page >= pages} onClick={() => setPage((p) => p + 1)}>
|
</span>
|
||||||
{t("common.nextPage")}
|
<div className="btn-row">
|
||||||
</button>
|
<button type="button" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
|
||||||
|
{t("common.prevPage")}
|
||||||
|
</button>
|
||||||
|
<button type="button" disabled={page >= pages} onClick={() => setPage((p) => p + 1)}>
|
||||||
|
{t("common.nextPage")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,6 @@ import { NavLink, Outlet, useLocation } from "react-router-dom";
|
||||||
import { NETWORK_NAV, type NetworkNavGroupId } from "../../config/networkNav";
|
import { NETWORK_NAV, type NetworkNavGroupId } from "../../config/networkNav";
|
||||||
import { useI18n } from "../../i18n";
|
import { useI18n } from "../../i18n";
|
||||||
|
|
||||||
const SIDEBAR_KEY = "netx.network.sidebarCollapsed";
|
|
||||||
|
|
||||||
function groupContainsPath(groupId: NetworkNavGroupId, pathname: string): boolean {
|
function groupContainsPath(groupId: NetworkNavGroupId, pathname: string): boolean {
|
||||||
const group = NETWORK_NAV.find((g) => g.id === groupId);
|
const group = NETWORK_NAV.find((g) => g.id === groupId);
|
||||||
if (!group) return false;
|
if (!group) return false;
|
||||||
|
|
@ -13,18 +11,9 @@ function groupContainsPath(groupId: NetworkNavGroupId, pathname: string): boolea
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function readSidebarCollapsed(): boolean {
|
|
||||||
try {
|
|
||||||
return localStorage.getItem(SIDEBAR_KEY) === "1";
|
|
||||||
} catch {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function NetworkLayout() {
|
export function NetworkLayout() {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { pathname } = useLocation();
|
const { pathname } = useLocation();
|
||||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(readSidebarCollapsed);
|
|
||||||
const [openGroups, setOpenGroups] = useState<Record<NetworkNavGroupId, boolean>>(() => {
|
const [openGroups, setOpenGroups] = useState<Record<NetworkNavGroupId, boolean>>(() => {
|
||||||
const init = {} as Record<NetworkNavGroupId, boolean>;
|
const init = {} as Record<NetworkNavGroupId, boolean>;
|
||||||
for (const g of NETWORK_NAV) {
|
for (const g of NETWORK_NAV) {
|
||||||
|
|
@ -46,101 +35,53 @@ export function NetworkLayout() {
|
||||||
setOpenGroups((prev) => ({ ...prev, [id]: !prev[id] }));
|
setOpenGroups((prev) => ({ ...prev, [id]: !prev[id] }));
|
||||||
};
|
};
|
||||||
|
|
||||||
const toggleSidebar = () => {
|
|
||||||
setSidebarCollapsed((prev) => {
|
|
||||||
const next = !prev;
|
|
||||||
try {
|
|
||||||
localStorage.setItem(SIDEBAR_KEY, next ? "1" : "0");
|
|
||||||
} catch {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
return next;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`network-shell${sidebarCollapsed ? " is-nav-collapsed" : ""}`}>
|
<div className="network-shell">
|
||||||
<aside className="network-nav" aria-label={t("network.title")}>
|
<aside className="network-nav" aria-label={t("network.title")}>
|
||||||
<div className="network-nav__head">
|
<nav className="network-nav__scroll">
|
||||||
{!sidebarCollapsed ? <span className="network-nav__title">{t("network.title")}</span> : null}
|
{NETWORK_NAV.map((group) => {
|
||||||
<button
|
const open = Boolean(openGroups[group.id]);
|
||||||
type="button"
|
const activeGroup = groupContainsPath(group.id, pathname);
|
||||||
className="network-nav__collapse-btn"
|
return (
|
||||||
title={sidebarCollapsed ? t("network.expandNav") : t("network.collapseNav")}
|
<div
|
||||||
aria-label={sidebarCollapsed ? t("network.expandNav") : t("network.collapseNav")}
|
key={group.id}
|
||||||
aria-expanded={!sidebarCollapsed}
|
className={`network-nav__group${open ? " is-open" : ""}${activeGroup ? " is-active-group" : ""}`}
|
||||||
onClick={toggleSidebar}
|
>
|
||||||
>
|
<button
|
||||||
{sidebarCollapsed ? "»" : "«"}
|
type="button"
|
||||||
</button>
|
className="network-nav__group-toggle"
|
||||||
</div>
|
aria-expanded={open}
|
||||||
{!sidebarCollapsed ? (
|
onClick={() => toggleGroup(group.id)}
|
||||||
<nav className="network-nav__scroll">
|
|
||||||
{NETWORK_NAV.map((group) => {
|
|
||||||
const open = Boolean(openGroups[group.id]);
|
|
||||||
const activeGroup = groupContainsPath(group.id, pathname);
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={group.id}
|
|
||||||
className={`network-nav__group${open ? " is-open" : ""}${activeGroup ? " is-active-group" : ""}`}
|
|
||||||
>
|
>
|
||||||
<button
|
<span className="network-nav__chevron" aria-hidden>
|
||||||
type="button"
|
{open ? "▾" : "▸"}
|
||||||
className="network-nav__group-toggle"
|
</span>
|
||||||
aria-expanded={open}
|
<span className="network-nav__group-label">{t(group.labelKey)}</span>
|
||||||
onClick={() => toggleGroup(group.id)}
|
</button>
|
||||||
>
|
{open ? (
|
||||||
<span className="network-nav__chevron" aria-hidden>
|
<ul className="network-nav__list">
|
||||||
{open ? "▾" : "▸"}
|
{group.items.map((item) => (
|
||||||
</span>
|
<li key={item.id}>
|
||||||
<span className="network-nav__group-label">{t(group.labelKey)}</span>
|
<NavLink
|
||||||
</button>
|
to={item.path}
|
||||||
{open ? (
|
className={({ isActive }) =>
|
||||||
<ul className="network-nav__list">
|
`network-nav__link${isActive ? " is-active" : ""}`
|
||||||
{group.items.map((item) => (
|
}
|
||||||
<li key={item.id}>
|
end={
|
||||||
<NavLink
|
item.path === "/network/devices" ||
|
||||||
to={item.path}
|
item.path === "/network/tasks/port-traffic"
|
||||||
className={({ isActive }) =>
|
}
|
||||||
`network-nav__link${isActive ? " is-active" : ""}`
|
>
|
||||||
}
|
{t(item.labelKey)}
|
||||||
end={
|
</NavLink>
|
||||||
item.path === "/network/devices" ||
|
</li>
|
||||||
item.path === "/network/tasks/port-traffic"
|
))}
|
||||||
}
|
</ul>
|
||||||
>
|
) : null}
|
||||||
{t(item.labelKey)}
|
</div>
|
||||||
</NavLink>
|
);
|
||||||
</li>
|
})}
|
||||||
))}
|
</nav>
|
||||||
</ul>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</nav>
|
|
||||||
) : (
|
|
||||||
<nav className="network-nav__rail" aria-label={t("network.title")}>
|
|
||||||
{NETWORK_NAV.flatMap((group) =>
|
|
||||||
group.items.map((item) => (
|
|
||||||
<NavLink
|
|
||||||
key={item.id}
|
|
||||||
to={item.path}
|
|
||||||
title={t(item.labelKey)}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`network-nav__rail-link${isActive ? " is-active" : ""}`
|
|
||||||
}
|
|
||||||
end={
|
|
||||||
item.path === "/network/devices" ||
|
|
||||||
item.path === "/network/tasks/port-traffic"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t(item.labelKey).slice(0, 1)}
|
|
||||||
</NavLink>
|
|
||||||
)),
|
|
||||||
)}
|
|
||||||
</nav>
|
|
||||||
)}
|
|
||||||
</aside>
|
</aside>
|
||||||
<div className="network-main">
|
<div className="network-main">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
|
|
|
||||||
|
|
@ -62,9 +62,6 @@ export function PortTrafficBoardListPage() {
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p className="muted" style={{ marginTop: 0 }}>
|
|
||||||
{t("portTraffic.boardListHint")}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="pt-list">
|
<div className="pt-list">
|
||||||
{boardsQuery.isLoading ? (
|
{boardsQuery.isLoading ? (
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue