Add topology situational overlays and harden live sync.

Show connect/alarm/level on the canvas with display toggles, refresh overlay fields even on dirty edits, fix connect-test dots and create-place messaging, and deep-link node alarms into the network alarms page.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-09-01 21:13:15 +08:00
parent 56569e49d1
commit 497a5e048e
19 changed files with 814 additions and 66 deletions

View file

@ -1,4 +1,5 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { ListPager } from "../../components/ListPager";
import { queryKeys } from "../../constants/queryKeys";
@ -25,6 +26,7 @@ function severityClass(sev: string | null | undefined): string {
export function NetworkAlarmsPage() {
const { t } = useI18n();
const { showOk, showError } = useToast();
const [searchParams] = useSearchParams();
const [curSeverity, setCurSeverity] = useState("");
const [curCleared, setCurCleared] = useState("");
const [curHostName, setCurHostName] = useState("");
@ -33,6 +35,32 @@ export function NetworkAlarmsPage() {
const [curPageSize, setCurPageSize] = useState(50);
const [exporting, setExporting] = useState(false);
// Deep-link from topology (and similar): ?host=&cleared=&severity=&keyword=
useEffect(() => {
const host = searchParams.get("host");
const cleared = searchParams.get("cleared");
const severity = searchParams.get("severity");
const keyword = searchParams.get("keyword");
let touched = false;
if (host != null) {
setCurHostName(host);
touched = true;
}
if (cleared != null) {
setCurCleared(cleared);
touched = true;
}
if (severity != null) {
setCurSeverity(severity);
touched = true;
}
if (keyword != null) {
setCurKeyword(keyword);
touched = true;
}
if (touched) setCurPage(1);
}, [searchParams]);
const debouncedKeyword = useDebouncedValue(curKeyword, 300);
const debouncedHost = useDebouncedValue(curHostName, 300);