mirror of
https://github.com/hansjone/netx.git
synced 2026-10-10 04:40:45 +08:00
Add Network Management module with collapsible left nav.
Consolidate devices, topology, alarms, WebCRT, and collection tasks under /network; keep legacy path redirects and workbench entry. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
3bd5d5b7da
commit
2fc47e5135
13 changed files with 595 additions and 182 deletions
171
web/src/pages/network/NetworkAlarmsPage.tsx
Normal file
171
web/src/pages/network/NetworkAlarmsPage.tsx
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { fetchUmeCurrentAlarms } from "../../services/api";
|
||||
import { queryKeys } from "../../constants/queryKeys";
|
||||
import { useI18n } from "../../i18n";
|
||||
import { pageCount } from "../../utils/display";
|
||||
import { formatSystemTime } from "../../utils/time";
|
||||
|
||||
/** Current UME alarms query view for Network Management. */
|
||||
export function NetworkAlarmsPage() {
|
||||
const { t } = useI18n();
|
||||
const [curSeverity, setCurSeverity] = useState("");
|
||||
const [curCleared, setCurCleared] = useState("");
|
||||
const [curHostName, setCurHostName] = useState("");
|
||||
const [curKeyword, setCurKeyword] = useState("");
|
||||
const [curPage, setCurPage] = useState(1);
|
||||
const [curPageSize, setCurPageSize] = useState(50);
|
||||
|
||||
const currentQuery = useQuery({
|
||||
queryKey: queryKeys.umeCurrentAlarms(curSeverity, curCleared, curHostName, curKeyword, curPage, curPageSize),
|
||||
queryFn: () =>
|
||||
fetchUmeCurrentAlarms({
|
||||
severity: curSeverity,
|
||||
isCleared: curCleared,
|
||||
hostName: curHostName,
|
||||
keyword: curKeyword,
|
||||
page: curPage,
|
||||
pageSize: curPageSize,
|
||||
}),
|
||||
staleTime: 5000,
|
||||
});
|
||||
|
||||
const curTotal = Number(currentQuery.data?.total || 0);
|
||||
const curPages = pageCount(curTotal, curPageSize);
|
||||
const perPage = (n: number) => t("common.perPage", { n: String(n) });
|
||||
const hasFilters = Boolean(curKeyword.trim() || curHostName.trim() || curSeverity || curCleared);
|
||||
|
||||
return (
|
||||
<section className="panel">
|
||||
<div className="panel__toolbar">
|
||||
<h2>{t("ume.alarms.title")}</h2>
|
||||
</div>
|
||||
<div className="filter-inline">
|
||||
<input
|
||||
value={curKeyword}
|
||||
placeholder={t("ume.alarms.keywordPh")}
|
||||
onChange={(e) => {
|
||||
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);
|
||||
}}
|
||||
>
|
||||
<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) => {
|
||||
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>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
88
web/src/pages/network/NetworkLayout.tsx
Normal file
88
web/src/pages/network/NetworkLayout.tsx
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { NavLink, Outlet, useLocation } from "react-router-dom";
|
||||
import { NETWORK_NAV, type NetworkNavGroupId } from "../../config/networkNav";
|
||||
import { useI18n } from "../../i18n";
|
||||
|
||||
function groupContainsPath(groupId: NetworkNavGroupId, pathname: string): boolean {
|
||||
const group = NETWORK_NAV.find((g) => g.id === groupId);
|
||||
if (!group) return false;
|
||||
return group.items.some(
|
||||
(item) => pathname === item.path || pathname.startsWith(`${item.path}/`),
|
||||
);
|
||||
}
|
||||
|
||||
export function NetworkLayout() {
|
||||
const { t } = useI18n();
|
||||
const { pathname } = useLocation();
|
||||
const [openGroups, setOpenGroups] = useState<Record<NetworkNavGroupId, boolean>>(() => {
|
||||
const init = {} as Record<NetworkNavGroupId, boolean>;
|
||||
for (const g of NETWORK_NAV) {
|
||||
// Default collapsed; only the group owning the current route starts open.
|
||||
init[g.id] = groupContainsPath(g.id, pathname);
|
||||
}
|
||||
return init;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
for (const g of NETWORK_NAV) {
|
||||
if (groupContainsPath(g.id, pathname)) {
|
||||
setOpenGroups((prev) => (prev[g.id] ? prev : { ...prev, [g.id]: true }));
|
||||
}
|
||||
}
|
||||
}, [pathname]);
|
||||
|
||||
const toggleGroup = (id: NetworkNavGroupId) => {
|
||||
setOpenGroups((prev) => ({ ...prev, [id]: !prev[id] }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="network-shell">
|
||||
<aside className="network-nav" aria-label={t("network.title")}>
|
||||
<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
|
||||
type="button"
|
||||
className="network-nav__group-toggle"
|
||||
aria-expanded={open}
|
||||
onClick={() => toggleGroup(group.id)}
|
||||
>
|
||||
<span className="network-nav__chevron" aria-hidden>
|
||||
{open ? "▾" : "▸"}
|
||||
</span>
|
||||
<span className="network-nav__group-label">{t(group.labelKey)}</span>
|
||||
</button>
|
||||
{open ? (
|
||||
<ul className="network-nav__list">
|
||||
{group.items.map((item) => (
|
||||
<li key={item.id}>
|
||||
<NavLink
|
||||
to={item.path}
|
||||
className={({ isActive }) =>
|
||||
`network-nav__link${isActive ? " is-active" : ""}`
|
||||
}
|
||||
end={item.path === "/network/devices"}
|
||||
>
|
||||
{t(item.labelKey)}
|
||||
</NavLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
<div className="network-main">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
26
web/src/pages/network/NetworkPlaceholderPage.tsx
Normal file
26
web/src/pages/network/NetworkPlaceholderPage.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { useI18n } from "../../i18n";
|
||||
|
||||
type Props = {
|
||||
kind: "port-traffic";
|
||||
};
|
||||
|
||||
export function NetworkPlaceholderPage({ kind }: Props) {
|
||||
const { t } = useI18n();
|
||||
const titleKey = kind === "port-traffic" ? "network.placeholder.portTrafficTitle" : "network.placeholder.title";
|
||||
const bodyKey = kind === "port-traffic" ? "network.placeholder.portTrafficBody" : "network.placeholder.body";
|
||||
|
||||
return (
|
||||
<section className="panel network-placeholder">
|
||||
<h2>{t(titleKey)}</h2>
|
||||
<p className="muted">{t(bodyKey)}</p>
|
||||
{kind === "port-traffic" ? (
|
||||
<ul className="network-placeholder__list">
|
||||
<li>{t("network.placeholder.portTrafficStep1")}</li>
|
||||
<li>{t("network.placeholder.portTrafficStep2")}</li>
|
||||
<li>{t("network.placeholder.portTrafficStep3")}</li>
|
||||
<li>{t("network.placeholder.portTrafficStep4")}</li>
|
||||
</ul>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue