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>

web/src/pages/NePage.tsx

@@ -26,7 +26,7 @@ import { useToast } from "../hooks/useToast";
 import type { ManagedNeItem } from "../types";
 import { pageCount } from "../utils/display";
 import { formatSystemTime } from "../utils/time";
-import { openNewModuleWindow } from "../utils/moduleWindows";
+import { openOrFocusModule } from "../utils/moduleWindows";
 import {
   defaultHopTemplate,
   isAutoHopTemplate,
@@ -779,9 +779,9 @@ export function NePage() {
                     type="button"
                     className="link-btn"
                     onClick={() =>
-                      openNewModuleWindow({
-                        moduleId: "webcrt",
-                        path: `/webcrt?ne_id=${encodeURIComponent(row.id)}`,
+                      openOrFocusModule({
+                        moduleId: "network",
+                        path: `/network/webcrt?ne_id=${encodeURIComponent(row.id)}`,
                       })
                     }
                     title={t("managedNe.openTerminal")}

web/src/pages/TopologyPage.tsx

@@ -35,7 +35,7 @@ import { queryKeys } from "../constants/queryKeys";
 import { HelpHint } from "../components/HelpHint";
 import { useI18n } from "../i18n";
 import { useToast } from "../hooks/useToast";
-import { openNewModuleWindow, openOrFocusModule } from "../utils/moduleWindows";
+import { openOrFocusModule } from "../utils/moduleWindows";
 import type {
   ManagedNeItem,
   TopologyDiscoverNeResult,
@@ -675,16 +675,16 @@ export function TopologyPage() {
     const managedId = node?.data.managed_ne_id;
     const umeId = node?.data.ume_ne_id;
     if (managedId) {
-      openNewModuleWindow({
-        moduleId: "webcrt",
-        path: `/webcrt?ne_id=${encodeURIComponent(managedId)}`,
+      openOrFocusModule({
+        moduleId: "network",
+        path: `/network/webcrt?ne_id=${encodeURIComponent(managedId)}`,
       });
       return;
     }
     if (umeId) {
-      openNewModuleWindow({
-        moduleId: "webcrt",
-        path: `/webcrt?ne_id=${encodeURIComponent(umeId)}&source=ume`,
+      openOrFocusModule({
+        moduleId: "network",
+        path: `/network/webcrt?ne_id=${encodeURIComponent(umeId)}&source=ume`,
       });
       return;
     }
@@ -697,8 +697,8 @@ export function TopologyPage() {
     const umeId = node?.data.ume_ne_id;
     if (managedId) {
       openOrFocusModule({
-        moduleId: "managed-ne",
-        path: "/ne",
+        moduleId: "network",
+        path: "/network/devices",
       });
       return;
     }

web/src/pages/UmePage.tsx

@@ -3,7 +3,6 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   apiPost,
   disconnectUmeToken,
-  fetchUmeCurrentAlarms,
   fetchUmeNe,
   cancelUmeAlarmSubscription,
   clearLocalUmeAlarmSubscription,
@@ -31,6 +30,7 @@ import type { UmeAlarmSubscriptionStatus, UmeKeyAlertRuleItem } from "../types";
 import { pageCount, runtimeIntervalLabel } from "../utils/display";
 import { runtimeLastError, wsConnectionLabel } from "../utils/runtimeMessages";
 import { formatSystemTime } from "../utils/time";
+import { openOrFocusModule } from "../utils/moduleWindows";
 
 export function UmePage() {
   const { t } = useI18n();
@@ -48,13 +48,6 @@ export function UmePage() {
   const [nePanelOpen, setNePanelOpen] = useState(false);
   const [syncStatusPanelOpen, setSyncStatusPanelOpen] = useState(false);
   const [keyAlertPanelOpen, setKeyAlertPanelOpen] = useState(false);
-  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 [alarmsPanelOpen, setAlarmsPanelOpen] = useState(false);
   const [keyAlertMatchType, setKeyAlertMatchType] = useState<"notification_id" | "keyword">("keyword");
   const [keyAlertMatchValue, setKeyAlertMatchValue] = useState("");
   const [keyAlertLabel, setKeyAlertLabel] = useState("");
@@ -264,19 +257,6 @@ export function UmePage() {
     }
     return map;
   }, [cliTargetsQuery.data]);
-  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 runningTasks = (syncStatusQuery.data?.items || []).filter((x) => String(x.status || "").toLowerCase() === "running");
   const runtimeTasks = syncStatusQuery.data?.runtime_tasks || [];
@@ -425,8 +405,6 @@ export function UmePage() {
   const syncPages = pageCount(syncTotal, syncPageSize);
   const neTotal = Number(neQuery.data?.total || 0);
   const nePages = pageCount(neTotal, nePageSize);
-  const curTotal = Number(currentQuery.data?.total || 0);
-  const curPages = pageCount(curTotal, curPageSize);
 
   const keyAlertForwarder = keyAlertMonitorQuery.data?.forwarder;
   const keyAlertRules = keyAlertMonitorQuery.data?.rules || [];
@@ -1350,112 +1328,16 @@ export function UmePage() {
       <section className="panel">
         <div className="panel__toolbar">
           <h2>{t("ume.alarms.title")}</h2>
-          <button type="button" className="link-btn" onClick={() => setAlarmsPanelOpen((x) => !x)}>
-            {alarmsPanelOpen ? t("ume.alarms.hidePanel") : t("ume.alarms.showPanel")}
-          </button>
         </div>
-        {alarmsPanelOpen ? (
-          <>
-        <div className="filter-inline">
-          <input value={curKeyword} placeholder={t("ume.alarms.keywordPh")} onChange={(e) => setCurKeyword(e.target.value)} />
-          <input value={curHostName} placeholder={t("ume.alarms.hostNamePh")} onChange={(e) => setCurHostName(e.target.value)} />
-          <select value={curSeverity} onChange={(e) => setCurSeverity(e.target.value)}>
-            <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)}>
-            <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={!curKeyword.trim() && !curHostName.trim() && !curSeverity && !curCleared}
-          >
-            {t("common.clearFilters")}
-          </button>
-        </div>
-        <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" onClick={() => setCurPage(Math.max(1, curPage - 1))} disabled={curPage <= 1}>
-              {t("common.prevPage")}
-            </button>
-            <button className="pager__btn" 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>
-          </>
-        ) : null}
+        <p className="muted">
+          {t("ume.alarms.movedHint")}{" "}
+          <a href="/network/alarms" onClick={(e) => {
+            e.preventDefault();
+            openOrFocusModule({ moduleId: "network", path: "/network/alarms" });
+          }}>
+            {t("network.nav.alarms")}
+          </a>
+        </p>
       </section>
       </div>
 

web/src/pages/network/NetworkAlarmsPage.tsx

@@ -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>
+  );
+}

web/src/pages/network/NetworkLayout.tsx

@@ -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>
+  );
+}

web/src/pages/network/NetworkPlaceholderPage.tsx

@@ -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>
+  );
+}