mirror of
https://github.com/hansjone/netx.git
synced 2026-10-09 00:43:17 +08:00
887 lines
34 KiB
TypeScript
887 lines
34 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||
import {
|
||
fetchCliTargets,
|
||
fetchFabricEdges,
|
||
fetchLldpCollectDashboard,
|
||
fetchLldpCollectJob,
|
||
fetchLldpCollectJobs,
|
||
pauseLldpCollectJob,
|
||
resumeLldpCollectJob,
|
||
startLldpCollect,
|
||
stopLldpCollectJob,
|
||
updateLldpCollectPolicy,
|
||
} from "../../services/api";
|
||
import { queryKeys } from "../../constants/queryKeys";
|
||
import { useI18n } from "../../i18n";
|
||
import { useToast } from "../../hooks/useToast";
|
||
import type { CliTargetItem, ConfigSyncTargetRef, TopologyDiscoverJobItem } from "../../types";
|
||
import { pageCount } from "../../utils/display";
|
||
import { formatSystemTime } from "../../utils/time";
|
||
|
||
const POLL_MS = 2500;
|
||
const TARGET_PAGE_SIZE = 20;
|
||
const SEP = " · ";
|
||
|
||
export function LldpLinksPage() {
|
||
const { t } = useI18n();
|
||
const { showOk, showError } = useToast();
|
||
const queryClient = useQueryClient();
|
||
|
||
const [jobPage, setJobPage] = useState(1);
|
||
const [expandedJobId, setExpandedJobId] = useState("");
|
||
const [itemPage, setItemPage] = useState(1);
|
||
const [itemDetail, setItemDetail] = useState<TopologyDiscoverJobItem | null>(null);
|
||
const ITEM_PAGE_SIZE = 20;
|
||
|
||
const [edgeStatus, setEdgeStatus] = useState<"all" | "active" | "missing">("all");
|
||
const [edgeKeyword, setEdgeKeyword] = useState("");
|
||
const [edgePage, setEdgePage] = useState(1);
|
||
const EDGE_PAGE_SIZE = 20;
|
||
|
||
const [enabled, setEnabled] = useState(false);
|
||
const [intervalValue, setIntervalValue] = useState(1);
|
||
const [intervalUnit, setIntervalUnit] = useState<"days" | "hours">("days");
|
||
const [concurrency, setConcurrency] = useState(4);
|
||
const [historyKeep, setHistoryKeep] = useState(30);
|
||
const [scopeMode, setScopeMode] = useState<"all" | "selected">("all");
|
||
const [autoAdd, setAutoAdd] = useState(true);
|
||
const [selectedMap, setSelectedMap] = useState<Record<string, ConfigSyncTargetRef>>({});
|
||
const [policyHydrated, setPolicyHydrated] = useState(false);
|
||
|
||
const [targetKeyword, setTargetKeyword] = useState("");
|
||
const [targetPage, setTargetPage] = useState(1);
|
||
|
||
const dashQuery = useQuery({
|
||
queryKey: queryKeys.lldpCollectDashboard,
|
||
queryFn: fetchLldpCollectDashboard,
|
||
staleTime: 1000,
|
||
refetchInterval: (q) => {
|
||
const running = q.state.data?.running_job;
|
||
return running &&
|
||
(running.status === "running" || running.status === "pending" || running.status === "paused")
|
||
? POLL_MS
|
||
: false;
|
||
},
|
||
});
|
||
|
||
useEffect(() => {
|
||
if (!dashQuery.data || policyHydrated) return;
|
||
const p = dashQuery.data.policy;
|
||
setEnabled(Boolean(p.enabled));
|
||
const hours = Math.max(1, Number(p.interval_hours || (Number(p.interval_days || 1) * 24)));
|
||
if (hours % 24 === 0) {
|
||
setIntervalUnit("days");
|
||
setIntervalValue(Math.max(1, Math.min(365, hours / 24)));
|
||
} else {
|
||
setIntervalUnit("hours");
|
||
setIntervalValue(Math.max(1, Math.min(8760, hours)));
|
||
}
|
||
setConcurrency(Number(p.concurrency || 4));
|
||
setHistoryKeep(Math.max(0, Math.min(200, Number(p.history_keep ?? 30))));
|
||
setScopeMode(p.scope_mode === "selected" ? "selected" : "all");
|
||
setAutoAdd(Boolean(p.auto_add_unmatched));
|
||
const map: Record<string, ConfigSyncTargetRef> = {};
|
||
for (const ref of p.selected_targets || []) {
|
||
const source = ref.source === "ume" ? "ume" : "managed";
|
||
map[`${source}:${ref.id}`] = { source, id: ref.id };
|
||
}
|
||
setSelectedMap(map);
|
||
setPolicyHydrated(true);
|
||
}, [dashQuery.data, policyHydrated]);
|
||
|
||
const jobsQuery = useQuery({
|
||
queryKey: queryKeys.lldpCollectJobs(jobPage),
|
||
queryFn: () => fetchLldpCollectJobs({ page: jobPage, pageSize: 10 }),
|
||
staleTime: 1000,
|
||
refetchInterval: () => (dashQuery.data?.running_job ? POLL_MS : false),
|
||
});
|
||
|
||
const jobDetailQuery = useQuery({
|
||
queryKey: queryKeys.lldpCollectJob(expandedJobId, itemPage),
|
||
queryFn: () => fetchLldpCollectJob(expandedJobId, { page: itemPage, pageSize: ITEM_PAGE_SIZE }),
|
||
enabled: Boolean(expandedJobId),
|
||
staleTime: 800,
|
||
refetchInterval: () => (dashQuery.data?.running_job?.id === expandedJobId ? POLL_MS : false),
|
||
});
|
||
|
||
const targetsQuery = useQuery({
|
||
queryKey: queryKeys.cliTargets(targetKeyword, targetPage, TARGET_PAGE_SIZE),
|
||
queryFn: () =>
|
||
fetchCliTargets({ source: "all", keyword: targetKeyword, page: targetPage, pageSize: TARGET_PAGE_SIZE }),
|
||
enabled: scopeMode === "selected",
|
||
staleTime: 5000,
|
||
});
|
||
|
||
const edgesQuery = useQuery({
|
||
queryKey: queryKeys.fabricEdges(edgeStatus, edgeKeyword, edgePage),
|
||
queryFn: () =>
|
||
fetchFabricEdges({
|
||
status: edgeStatus === "all" ? "" : edgeStatus,
|
||
keyword: edgeKeyword,
|
||
page: edgePage,
|
||
pageSize: EDGE_PAGE_SIZE,
|
||
}),
|
||
staleTime: 2000,
|
||
refetchInterval: () => (dashQuery.data?.running_job ? POLL_MS : false),
|
||
});
|
||
|
||
const refresh = async () => {
|
||
await Promise.all([
|
||
queryClient.invalidateQueries({ queryKey: queryKeys.lldpCollectDashboard }),
|
||
queryClient.invalidateQueries({ queryKey: queryKeys.lldpCollectJobsAll }),
|
||
queryClient.invalidateQueries({ queryKey: queryKeys.lldpCollectJobAll }),
|
||
queryClient.invalidateQueries({ queryKey: queryKeys.fabricEdgesAll }),
|
||
]);
|
||
};
|
||
|
||
const savePolicyMut = useMutation({
|
||
mutationFn: () => {
|
||
const hours =
|
||
intervalUnit === "days"
|
||
? Math.max(1, Math.min(365, intervalValue)) * 24
|
||
: Math.max(1, Math.min(8760, intervalValue));
|
||
return updateLldpCollectPolicy({
|
||
enabled,
|
||
interval_hours: hours,
|
||
concurrency,
|
||
history_keep: historyKeep,
|
||
scope_mode: scopeMode,
|
||
auto_add_unmatched: autoAdd,
|
||
selected_targets: Object.values(selectedMap),
|
||
});
|
||
},
|
||
onSuccess: async (saved) => {
|
||
// Apply server response immediately — do NOT flip policyHydrated false then
|
||
// rehydrate from a possibly-stale dashboard cache (checkbox "pops back" bug).
|
||
setEnabled(Boolean(saved.enabled));
|
||
const hours = Math.max(1, Number(saved.interval_hours || (Number(saved.interval_days || 1) * 24)));
|
||
if (hours % 24 === 0) {
|
||
setIntervalUnit("days");
|
||
setIntervalValue(Math.max(1, Math.min(365, hours / 24)));
|
||
} else {
|
||
setIntervalUnit("hours");
|
||
setIntervalValue(Math.max(1, Math.min(8760, hours)));
|
||
}
|
||
setConcurrency(Number(saved.concurrency || 4));
|
||
setHistoryKeep(Math.max(0, Math.min(200, Number(saved.history_keep ?? 30))));
|
||
setScopeMode(saved.scope_mode === "selected" ? "selected" : "all");
|
||
setAutoAdd(Boolean(saved.auto_add_unmatched));
|
||
const map: Record<string, ConfigSyncTargetRef> = {};
|
||
for (const ref of saved.selected_targets || []) {
|
||
const source = ref.source === "ume" ? "ume" : "managed";
|
||
map[`${source}:${ref.id}`] = { source, id: ref.id };
|
||
}
|
||
setSelectedMap(map);
|
||
setPolicyHydrated(true);
|
||
queryClient.setQueryData(queryKeys.lldpCollectDashboard, (prev: unknown) => {
|
||
if (!prev || typeof prev !== "object") return prev;
|
||
return { ...(prev as object), policy: saved };
|
||
});
|
||
showOk(t("lldpLinks.policySaved"));
|
||
await refresh();
|
||
},
|
||
onError: (err) => showError(String(err)),
|
||
});
|
||
|
||
const startMut = useMutation({
|
||
mutationFn: () => startLldpCollect(),
|
||
onSuccess: async () => {
|
||
showOk(t("lldpLinks.started"));
|
||
await refresh();
|
||
},
|
||
onError: (err) => showError(String(err)),
|
||
});
|
||
|
||
const pauseMut = useMutation({
|
||
mutationFn: (id: string) => pauseLldpCollectJob(id),
|
||
onSuccess: async () => {
|
||
showOk(t("lldpLinks.paused"));
|
||
await refresh();
|
||
},
|
||
onError: (err) => showError(String(err)),
|
||
});
|
||
|
||
const resumeMut = useMutation({
|
||
mutationFn: (id: string) => resumeLldpCollectJob(id),
|
||
onSuccess: async () => {
|
||
showOk(t("lldpLinks.resumed"));
|
||
await refresh();
|
||
},
|
||
onError: (err) => showError(String(err)),
|
||
});
|
||
|
||
const stopMut = useMutation({
|
||
mutationFn: (id: string) => stopLldpCollectJob(id),
|
||
onSuccess: async () => {
|
||
showOk(t("lldpLinks.stopped"));
|
||
await refresh();
|
||
},
|
||
onError: (err) => showError(String(err)),
|
||
});
|
||
|
||
const dash = dashQuery.data;
|
||
const running = dash?.running_job;
|
||
const last = dash?.last_job;
|
||
const jobs = jobsQuery.data?.items ?? [];
|
||
const jobTotal = Number(jobsQuery.data?.total || 0);
|
||
const jobPages = pageCount(jobTotal, 10);
|
||
const selectedCount = useMemo(() => Object.keys(selectedMap).length, [selectedMap]);
|
||
const detailItems = jobDetailQuery.data?.items ?? [];
|
||
const itemTotal = Number(jobDetailQuery.data?.items_total ?? detailItems.length);
|
||
const itemPages = pageCount(itemTotal, ITEM_PAGE_SIZE);
|
||
const edgeItems = edgesQuery.data?.items ?? [];
|
||
const edgeTotal = Number(edgesQuery.data?.total || 0);
|
||
const edgePages = pageCount(edgeTotal, EDGE_PAGE_SIZE);
|
||
|
||
const toggleTarget = (row: CliTargetItem) => {
|
||
const source = row.source === "ume" ? "ume" : "managed";
|
||
const key = `${source}:${row.id}`;
|
||
setSelectedMap((prev) => {
|
||
const next = { ...prev };
|
||
if (next[key]) delete next[key];
|
||
else next[key] = { source, id: row.id };
|
||
return next;
|
||
});
|
||
};
|
||
|
||
return (
|
||
<section className="panel">
|
||
<div className="panel__toolbar">
|
||
<h2>{t("lldpLinks.title")}</h2>
|
||
<div className="btn-row">
|
||
<button type="button" onClick={() => void refresh()} disabled={dashQuery.isFetching}>
|
||
{t("common.refresh")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn-primary"
|
||
disabled={Boolean(running) || startMut.isPending}
|
||
onClick={() => startMut.mutate()}
|
||
>
|
||
{t("lldpLinks.collectNow")}
|
||
</button>
|
||
{running?.status === "running" || running?.status === "pending" ? (
|
||
<button type="button" onClick={() => pauseMut.mutate(running.id)} disabled={pauseMut.isPending}>
|
||
{t("lldpLinks.pause")}
|
||
</button>
|
||
) : null}
|
||
{running?.status === "paused" ? (
|
||
<button type="button" onClick={() => resumeMut.mutate(running.id)} disabled={resumeMut.isPending}>
|
||
{t("lldpLinks.resume")}
|
||
</button>
|
||
) : null}
|
||
{running &&
|
||
(running.status === "running" || running.status === "paused" || running.status === "pending") ? (
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
if (window.confirm(t("lldpLinks.confirmStop"))) stopMut.mutate(running.id);
|
||
}}
|
||
disabled={stopMut.isPending}
|
||
>
|
||
{t("lldpLinks.stop")}
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pt-list" style={{ marginBottom: 16 }}>
|
||
<div className="pt-list-kpis">
|
||
<div className="pt-list-kpi">
|
||
<div className="pt-list-kpi__label">{t("lldpLinks.kpi.nodes")}</div>
|
||
<div className="pt-list-kpi__value">{dash?.fabric_node_count ?? "—"}</div>
|
||
</div>
|
||
<div className="pt-list-kpi">
|
||
<div className="pt-list-kpi__label">{t("lldpLinks.kpi.edges")}</div>
|
||
<div className="pt-list-kpi__value">{dash?.fabric_edge_active ?? "—"}</div>
|
||
</div>
|
||
<div className="pt-list-kpi">
|
||
<div className="pt-list-kpi__label">{t("lldpLinks.kpi.missing")}</div>
|
||
<div className="pt-list-kpi__value">
|
||
{dash?.fabric_edge_missing ?? dash?.fabric_edge_stale ?? "—"}
|
||
</div>
|
||
</div>
|
||
<div className={`pt-list-kpi${running ? " pt-list-kpi--live" : ""}`}>
|
||
<div className="pt-list-kpi__label">{t("lldpLinks.kpi.running")}</div>
|
||
<div className="pt-list-kpi__value" style={{ fontSize: running ? 15 : 22 }}>
|
||
{running
|
||
? `${running.status} · ${running.done}/${running.total}`
|
||
: t("lldpLinks.kpi.idle")}
|
||
</div>
|
||
</div>
|
||
<div className="pt-list-kpi">
|
||
<div className="pt-list-kpi__label">{t("lldpLinks.kpi.last")}</div>
|
||
<div className="pt-list-kpi__value" style={{ fontSize: 15 }}>
|
||
{last
|
||
? `${last.status} · +${last.edges_added} / ~${last.edges_updated}`
|
||
: t("common.empty")}
|
||
</div>
|
||
</div>
|
||
<div className="pt-list-kpi">
|
||
<div className="pt-list-kpi__label">{t("lldpLinks.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 className="panel" style={{ marginBottom: 16 }}>
|
||
<h3>{t("lldpLinks.policyTitle")}</h3>
|
||
<div className="config-sync-policy-row">
|
||
<label className="config-sync-policy-check">
|
||
<input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />
|
||
<span>{t("lldpLinks.enabled")}</span>
|
||
</label>
|
||
<label className="config-sync-policy-check">
|
||
<input type="checkbox" checked={autoAdd} onChange={(e) => setAutoAdd(e.target.checked)} />
|
||
<span>{t("lldpLinks.autoAddUnmatched")}</span>
|
||
</label>
|
||
<label className="config-sync-policy-field">
|
||
<span>{t("lldpLinks.interval")}</span>
|
||
<input
|
||
type="number"
|
||
min={1}
|
||
max={intervalUnit === "days" ? 365 : 8760}
|
||
value={intervalValue}
|
||
onChange={(e) => {
|
||
const max = intervalUnit === "days" ? 365 : 8760;
|
||
setIntervalValue(Math.max(1, Math.min(max, Number(e.target.value) || 1)));
|
||
}}
|
||
/>
|
||
<select
|
||
value={intervalUnit}
|
||
onChange={(e) => {
|
||
const next = e.target.value === "hours" ? "hours" : "days";
|
||
if (next === intervalUnit) return;
|
||
if (next === "hours") {
|
||
setIntervalValue(Math.max(1, Math.min(8760, intervalValue * 24)));
|
||
} else {
|
||
setIntervalValue(Math.max(1, Math.min(365, Math.round(intervalValue / 24) || 1)));
|
||
}
|
||
setIntervalUnit(next);
|
||
}}
|
||
>
|
||
<option value="days">{t("lldpLinks.intervalUnitDays")}</option>
|
||
<option value="hours">{t("lldpLinks.intervalUnitHours")}</option>
|
||
</select>
|
||
</label>
|
||
<label className="config-sync-policy-field">
|
||
<span>{t("lldpLinks.concurrency")}</span>
|
||
<input
|
||
type="number"
|
||
min={1}
|
||
max={32}
|
||
value={concurrency}
|
||
onChange={(e) => setConcurrency(Math.max(1, Math.min(32, Number(e.target.value) || 1)))}
|
||
/>
|
||
</label>
|
||
<label className="config-sync-policy-field">
|
||
<span>{t("lldpLinks.historyKeep")}</span>
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
max={200}
|
||
value={historyKeep}
|
||
onChange={(e) => setHistoryKeep(Math.max(0, Math.min(200, Number(e.target.value) || 0)))}
|
||
/>
|
||
</label>
|
||
<label className="config-sync-policy-field">
|
||
<span>{t("lldpLinks.scope")}</span>
|
||
<select
|
||
value={scopeMode}
|
||
onChange={(e) => setScopeMode(e.target.value === "selected" ? "selected" : "all")}
|
||
>
|
||
<option value="all">{t("lldpLinks.scopeAll")}</option>
|
||
<option value="selected">{t("lldpLinks.scopeSelected")}</option>
|
||
</select>
|
||
</label>
|
||
<button
|
||
type="button"
|
||
className="btn-primary"
|
||
disabled={savePolicyMut.isPending}
|
||
onClick={() => savePolicyMut.mutate()}
|
||
>
|
||
{t("lldpLinks.savePolicy")}
|
||
</button>
|
||
</div>
|
||
|
||
{scopeMode === "selected" ? (
|
||
<div style={{ marginTop: 12 }}>
|
||
<p className="muted">{t("lldpLinks.selectedCount", { count: String(selectedCount) })}</p>
|
||
<div className="filter-inline">
|
||
<input
|
||
value={targetKeyword}
|
||
placeholder={t("lldpLinks.targetKeywordPh")}
|
||
onChange={(e) => {
|
||
setTargetKeyword(e.target.value);
|
||
setTargetPage(1);
|
||
}}
|
||
/>
|
||
</div>
|
||
<table className="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th />
|
||
<th>{t("lldpLinks.col.source")}</th>
|
||
<th>{t("lldpLinks.col.name")}</th>
|
||
<th>IP</th>
|
||
<th>{t("lldpLinks.col.vendor")}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{(targetsQuery.data?.items ?? []).map((row) => {
|
||
const source = row.source === "ume" ? "ume" : "managed";
|
||
const key = `${source}:${row.id}`;
|
||
return (
|
||
<tr key={key}>
|
||
<td>
|
||
<input
|
||
type="checkbox"
|
||
checked={Boolean(selectedMap[key])}
|
||
onChange={() => toggleTarget(row)}
|
||
/>
|
||
</td>
|
||
<td>{source}</td>
|
||
<td>{row.name}</td>
|
||
<td>{row.ip_address}</td>
|
||
<td>{row.vendor || "-"}</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
<div className="pager">
|
||
<button type="button" disabled={targetPage <= 1} onClick={() => setTargetPage((p) => p - 1)}>
|
||
{t("common.prevPage")}
|
||
</button>
|
||
<span className="muted">
|
||
{t("common.pagerMeta", {
|
||
total: String(targetsQuery.data?.total ?? 0),
|
||
page: String(targetPage),
|
||
pages: String(pageCount(Number(targetsQuery.data?.total || 0), TARGET_PAGE_SIZE)),
|
||
})}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
disabled={targetPage >= pageCount(Number(targetsQuery.data?.total || 0), TARGET_PAGE_SIZE)}
|
||
onClick={() => setTargetPage((p) => p + 1)}
|
||
>
|
||
{t("common.nextPage")}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<h3>{t("lldpLinks.edgesTitle")}</h3>
|
||
<div className="filter-inline" style={{ marginBottom: 8 }}>
|
||
<select
|
||
value={edgeStatus}
|
||
onChange={(e) => {
|
||
const v = e.target.value;
|
||
setEdgeStatus(v === "active" || v === "missing" ? v : "all");
|
||
setEdgePage(1);
|
||
}}
|
||
>
|
||
<option value="all">{t("lldpLinks.edgeStatusAll")}</option>
|
||
<option value="active">{t("lldpLinks.edgeStatusActive")}</option>
|
||
<option value="missing">{t("lldpLinks.edgeStatusMissing")}</option>
|
||
</select>
|
||
<input
|
||
value={edgeKeyword}
|
||
placeholder={t("lldpLinks.edgeKeywordPh")}
|
||
onChange={(e) => {
|
||
setEdgeKeyword(e.target.value);
|
||
setEdgePage(1);
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="pt-list-table-wrap">
|
||
<table className="data-table pt-list-table">
|
||
<thead>
|
||
<tr>
|
||
<th>{t("lldpLinks.col.status")}</th>
|
||
<th>{t("lldpLinks.col.aSide")}</th>
|
||
<th>{t("lldpLinks.col.aPort")}</th>
|
||
<th>{t("lldpLinks.col.bSide")}</th>
|
||
<th>{t("lldpLinks.col.bPort")}</th>
|
||
<th>{t("lldpLinks.col.source")}</th>
|
||
<th>{t("lldpLinks.missCount")}</th>
|
||
<th>{t("lldpLinks.col.lastSeen")}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{edgeItems.map((e) => {
|
||
const attrs = (e.attrs || {}) as Record<string, unknown>;
|
||
const missCount = Number(attrs.miss_count || 0) || 0;
|
||
const replaced = String(attrs.replaced_by_edge_id || "").trim();
|
||
const aLabel = e.a_name || e.a_ip || e.a_node_id.slice(0, 8);
|
||
const bLabel = e.b_name || e.b_ip || e.b_node_id.slice(0, 8);
|
||
const st = e.status === "stale" ? "missing" : e.status;
|
||
return (
|
||
<tr key={e.id}>
|
||
<td>{st}</td>
|
||
<td>
|
||
<div>{aLabel}</div>
|
||
{e.a_ip && e.a_name ? <div className="muted">{e.a_ip}</div> : null}
|
||
</td>
|
||
<td>{e.a_port || "—"}</td>
|
||
<td>
|
||
<div>{bLabel}</div>
|
||
{e.b_ip && e.b_name ? <div className="muted">{e.b_ip}</div> : null}
|
||
</td>
|
||
<td>{e.b_port || "—"}</td>
|
||
<td>{e.source}</td>
|
||
<td>
|
||
{missCount || (st === "missing" ? 1 : 0)}
|
||
{replaced ? (
|
||
<div className="muted" title={replaced}>
|
||
{t("lldpLinks.replacedBy")}
|
||
</div>
|
||
) : null}
|
||
</td>
|
||
<td>{e.last_seen_at ? formatSystemTime(e.last_seen_at) : "—"}</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
{!edgeItems.length ? (
|
||
<tr>
|
||
<td colSpan={8} className="muted">
|
||
{edgesQuery.isLoading ? "…" : t("common.empty")}
|
||
</td>
|
||
</tr>
|
||
) : null}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="pager">
|
||
<button type="button" disabled={edgePage <= 1} onClick={() => setEdgePage((p) => p - 1)}>
|
||
{t("common.prevPage")}
|
||
</button>
|
||
<span className="muted">
|
||
{t("common.pagerMeta", {
|
||
total: String(edgeTotal),
|
||
page: String(edgePage),
|
||
pages: String(edgePages),
|
||
})}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
disabled={edgePage >= edgePages}
|
||
onClick={() => setEdgePage((p) => p + 1)}
|
||
>
|
||
{t("common.nextPage")}
|
||
</button>
|
||
</div>
|
||
|
||
<h3 style={{ marginTop: 24 }}>{t("lldpLinks.jobsTitle")}</h3>
|
||
<div className="pt-list-table-wrap">
|
||
<table className="data-table pt-list-table">
|
||
<thead>
|
||
<tr>
|
||
<th />
|
||
<th>ID</th>
|
||
<th>{t("lldpLinks.col.trigger")}</th>
|
||
<th>{t("lldpLinks.col.scope")}</th>
|
||
<th>{t("lldpLinks.col.status")}</th>
|
||
<th>{t("lldpLinks.col.progress")}</th>
|
||
<th>{t("lldpLinks.col.edges")}</th>
|
||
<th>{t("lldpLinks.col.missingDelta")}</th>
|
||
<th>{t("lldpLinks.col.started")}</th>
|
||
<th>{t("lldpLinks.col.ended")}</th>
|
||
<th />
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{jobs.map((job) => {
|
||
const open = expandedJobId === job.id;
|
||
return (
|
||
<tr key={job.id} className={open ? "is-expanded" : undefined}>
|
||
<td>
|
||
<button
|
||
type="button"
|
||
className="btn btn--sm btn--ghost"
|
||
onClick={() => {
|
||
setItemDetail(null);
|
||
setExpandedJobId(open ? "" : job.id);
|
||
setItemPage(1);
|
||
}}
|
||
>
|
||
{open ? "−" : "+"}
|
||
</button>
|
||
</td>
|
||
<td className="mono">{job.id.slice(0, 8)}</td>
|
||
<td>{job.trigger_mode}</td>
|
||
<td>{job.scope}</td>
|
||
<td>
|
||
<span
|
||
className={
|
||
job.status === "running" || job.status === "pending"
|
||
? "pt-list-status--running"
|
||
: job.status === "paused"
|
||
? "pt-list-status--paused"
|
||
: undefined
|
||
}
|
||
>
|
||
{job.status}
|
||
</span>
|
||
</td>
|
||
<td>
|
||
{job.done}/{job.total}
|
||
</td>
|
||
<td>
|
||
+{job.edges_added} / ~{job.edges_updated}
|
||
</td>
|
||
<td>{job.edges_missing ?? job.edges_stale ?? 0}</td>
|
||
<td>{job.started_at ? formatSystemTime(job.started_at) : "—"}</td>
|
||
<td>{job.ended_at ? formatSystemTime(job.ended_at) : "—"}</td>
|
||
<td>
|
||
<div className="btn-row">
|
||
{job.status === "running" || job.status === "pending" ? (
|
||
<button
|
||
type="button"
|
||
onClick={() => pauseMut.mutate(job.id)}
|
||
disabled={pauseMut.isPending}
|
||
>
|
||
{t("lldpLinks.pause")}
|
||
</button>
|
||
) : null}
|
||
{job.status === "paused" ? (
|
||
<button
|
||
type="button"
|
||
onClick={() => resumeMut.mutate(job.id)}
|
||
disabled={resumeMut.isPending}
|
||
>
|
||
{t("lldpLinks.resume")}
|
||
</button>
|
||
) : null}
|
||
{job.status === "running" || job.status === "paused" || job.status === "pending" ? (
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
if (window.confirm(t("lldpLinks.confirmStop"))) stopMut.mutate(job.id);
|
||
}}
|
||
disabled={stopMut.isPending}
|
||
>
|
||
{t("lldpLinks.stop")}
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
{!jobs.length ? (
|
||
<tr>
|
||
<td colSpan={11} className="muted">
|
||
{t("common.empty")}
|
||
</td>
|
||
</tr>
|
||
) : null}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="pager">
|
||
<button type="button" disabled={jobPage <= 1} onClick={() => setJobPage((p) => p - 1)}>
|
||
{t("common.prevPage")}
|
||
</button>
|
||
<span className="muted">
|
||
{t("common.pagerMeta", {
|
||
total: String(jobTotal),
|
||
page: String(jobPage),
|
||
pages: String(jobPages),
|
||
})}
|
||
</span>
|
||
<button type="button" disabled={jobPage >= jobPages} onClick={() => setJobPage((p) => p + 1)}>
|
||
{t("common.nextPage")}
|
||
</button>
|
||
</div>
|
||
|
||
{expandedJobId ? (
|
||
<div className="panel" style={{ marginTop: 16 }}>
|
||
<h3>{t("lldpLinks.jobDetailTitle")}</h3>
|
||
{jobDetailQuery.isLoading ? <p className="muted">…</p> : null}
|
||
{jobDetailQuery.data?.error ? (
|
||
<p className="muted" style={{ color: "var(--danger, #b00)" }}>
|
||
{jobDetailQuery.data.error}
|
||
</p>
|
||
) : null}
|
||
<table className="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>{t("lldpLinks.col.name")}</th>
|
||
<th>IP</th>
|
||
<th>{t("lldpLinks.col.status")}</th>
|
||
<th>{t("lldpLinks.col.neighbors")}</th>
|
||
<th>{t("lldpLinks.col.edges")}</th>
|
||
<th>{t("lldpLinks.col.error")}</th>
|
||
<th />
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{detailItems.map((it) => {
|
||
const unmatchedCount = it.unmatched_count ?? (it.unmatched?.length || 0);
|
||
return (
|
||
<tr key={it.id}>
|
||
<td>{it.ne_name || it.ne_id || "—"}</td>
|
||
<td>{it.ne_ip || "—"}</td>
|
||
<td>
|
||
{!it.ok ? "fail" : it.parser_stub || unmatchedCount > 0 ? "warn" : "ok"}
|
||
</td>
|
||
<td>{it.neighbors}</td>
|
||
<td>
|
||
+{it.edges_added} / ~{it.edges_updated}
|
||
{unmatchedCount > 0
|
||
? ` · ${t("topology.discoverUnmatched").replace("{{count}}", String(unmatchedCount))}`
|
||
: ""}
|
||
</td>
|
||
<td className="muted">{it.error || "—"}</td>
|
||
<td>
|
||
<button
|
||
type="button"
|
||
className="btn btn--sm btn--ghost"
|
||
onClick={() => setItemDetail(it)}
|
||
>
|
||
{t("topology.discoverViewDetail")}
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
{!detailItems.length && !jobDetailQuery.isLoading ? (
|
||
<tr>
|
||
<td colSpan={7} className="muted">
|
||
{t("common.empty")}
|
||
</td>
|
||
</tr>
|
||
) : null}
|
||
</tbody>
|
||
</table>
|
||
<div className="pager">
|
||
<button type="button" disabled={itemPage <= 1} onClick={() => setItemPage((p) => p - 1)}>
|
||
{t("common.prevPage")}
|
||
</button>
|
||
<span className="muted">
|
||
{t("common.pagerMeta", {
|
||
total: String(itemTotal),
|
||
page: String(itemPage),
|
||
pages: String(itemPages),
|
||
})}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
disabled={itemPage >= itemPages}
|
||
onClick={() => setItemPage((p) => p + 1)}
|
||
>
|
||
{t("common.nextPage")}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
{itemDetail ? (
|
||
<div className="modal-backdrop" role="presentation" onClick={() => setItemDetail(null)}>
|
||
<div
|
||
className="modal modal--wide topo-discover-modal"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="lldp-item-detail-title"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="topo-discover-modal__head">
|
||
<div>
|
||
<h3 id="lldp-item-detail-title">
|
||
{itemDetail.ne_name || itemDetail.ne_ip || itemDetail.ne_id}
|
||
</h3>
|
||
<p className="topo-discover-modal__sub">
|
||
{[itemDetail.ne_ip, itemDetail.command].filter(Boolean).join(SEP)}
|
||
</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="btn btn--sm btn--ghost"
|
||
onClick={() => setItemDetail(null)}
|
||
>
|
||
{t("topology.discoverClose")}
|
||
</button>
|
||
</div>
|
||
|
||
{!itemDetail.ok ? (
|
||
<p className="topo-discover__error">
|
||
{itemDetail.error === "vendor_or_device_type_required"
|
||
? t("topology.discoverVendorRequired")
|
||
: itemDetail.error || t("topology.discoverNeFail")}
|
||
</p>
|
||
) : null}
|
||
{itemDetail.parser_stub ? (
|
||
<p className="topo-discover__item-warn">
|
||
{t("topology.discoverParserStub").replace(
|
||
"{{parser}}",
|
||
itemDetail.parser_key || "unknown",
|
||
)}
|
||
</p>
|
||
) : null}
|
||
|
||
<div className="topo-discover-modal__stats">
|
||
<span>
|
||
{t("topology.discoverNeOk")
|
||
.replace("{{neighbors}}", String(itemDetail.neighbors || 0))
|
||
.replace("{{added}}", String(itemDetail.edges_added || 0))
|
||
.replace("{{updated}}", String(itemDetail.edges_updated || 0))}
|
||
</span>
|
||
</div>
|
||
|
||
<h4 className="topo-discover-modal__section">
|
||
{t("topology.discoverUnmatchedTitle").replace(
|
||
"{{count}}",
|
||
String(itemDetail.unmatched_count ?? itemDetail.unmatched?.length ?? 0),
|
||
)}
|
||
</h4>
|
||
{(itemDetail.unmatched || []).length === 0 ? (
|
||
<p className="panel__hint">{t("topology.discoverUnmatchedEmpty")}</p>
|
||
) : (
|
||
<div className="topo-discover-modal__table-wrap">
|
||
<table className="topo-discover-modal__table">
|
||
<thead>
|
||
<tr>
|
||
<th>{t("topology.discoverColRemote")}</th>
|
||
<th>{t("topology.discoverColLocalPort")}</th>
|
||
<th>{t("topology.discoverColRemotePort")}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{(itemDetail.unmatched || []).map((u, idx) => (
|
||
<tr key={`${itemDetail.id}-u-${idx}`}>
|
||
<td>
|
||
{(u.remote_name || u.remote_ip || "?").trim()}
|
||
{u.remote_ip && u.remote_name ? ` (${u.remote_ip})` : ""}
|
||
</td>
|
||
<td>{u.local_port || "?"}</td>
|
||
<td>{u.remote_port || "?"}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
|
||
{itemDetail.raw_preview ? (
|
||
<>
|
||
<h4 className="topo-discover-modal__section">{t("topology.discoverRawPreview")}</h4>
|
||
<pre className="topo-discover-modal__raw">{itemDetail.raw_preview}</pre>
|
||
</>
|
||
) : null}
|
||
|
||
<div className="modal__actions">
|
||
<button type="button" className="btn btn--sm" onClick={() => setItemDetail(null)}>
|
||
{t("topology.discoverClose")}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</section>
|
||
);
|
||
}
|