Add industrial config sync separate from collection tasks.

Periodic vendor-aware CLI sync stores zlib snapshots in Postgres with dashboard, retry, and config viewer under Network Management.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-07-31 10:25:36 +08:00
parent 2fc47e5135
commit 0eead0e662
23 changed files with 2993 additions and 9 deletions

View file

@ -37,11 +37,13 @@ src/
| `/network/devices` | 设备列表 | `network` |
| `/network/topology` | 拓扑信息 | `network` |
| `/network/alarms` | 告警信息 | `network` |
| `/network/configs` | 配置信息(同步快照) | `network` |
| `/network/webcrt` | WebCRT 终端 | `network` |
| `/network/tasks/config-sync` | 采集任务(原批量采集) | `network` |
| `/network/tasks/collect` | 采集任务 | `network` |
| `/network/tasks/config-sync` | 配置同步 | `network` |
| `/network/tasks/port-traffic` | 端口流量(占位) | `network` |
| `/ne` | redirect → `/network/devices` | — |
| `/collect` | redirect → `/network/tasks/config-sync` | — |
| `/collect` | redirect → `/network/tasks/collect` | — |
| `/topology` | redirect → `/network/topology` | — |
| `/webcrt` | redirect → `/network/webcrt`(保留 query) | — |
@ -90,6 +92,14 @@ src/
- 采集日志目录:`NETX_NE_COLLECTION_DATA_DIR`(默认 `data/ne_collections`)
- 命令每行一条,`#` 为注释;输出格式与旧版 NetX 采集 `.txt` 一致
## 配置同步
- API:`/v1/config-sync/*`(策略、看板、周期、快照)
- 存储:PostgreSQL `ne_config_snapshot` / `ne_config_history`(zlib BYTEA)
- 范围:ManagedNE + UME CLI 目标;厂商固定只读命令矩阵
- 调度:`NETX_CONFIG_SYNC_SCHEDULER_ENABLED`(默认开),周期天数策略可配(默认 3 天)
- 前端:`/network/tasks/config-sync`(看板)+ `/network/configs`(查看)
## WebCRT
- API:`POST /v1/webcrt/sessions`(`ne_id` 或 `ume_ne_id`)、`WS /v1/webcrt/sessions/{id}/ws`、`DELETE /v1/webcrt/sessions/{id}`

View file

@ -4,12 +4,14 @@ import { AppLayout } from "./layout/AppLayout";
import { queryKeys } from "./constants/queryKeys";
import { WorkbenchPage } from "./pages/WorkbenchPage";
import { CollectPage } from "./pages/CollectPage";
import { ConfigSyncPage } from "./pages/ConfigSyncPage";
import { NePage } from "./pages/NePage";
import { UmePage } from "./pages/UmePage";
import { WebcrtPage } from "./pages/WebcrtPage";
import { TopologyPage } from "./pages/TopologyPage";
import { NetworkLayout } from "./pages/network/NetworkLayout";
import { NetworkAlarmsPage } from "./pages/network/NetworkAlarmsPage";
import { NetworkConfigsPage } from "./pages/network/NetworkConfigsPage";
import { NetworkPlaceholderPage } from "./pages/network/NetworkPlaceholderPage";
import { LoginPage } from "./pages/LoginPage";
import { UsersPage } from "./pages/UsersPage";
@ -85,12 +87,14 @@ function ProtectedApp() {
<Route path="devices" element={<NePage />} />
<Route path="topology" element={<TopologyPage />} />
<Route path="alarms" element={<NetworkAlarmsPage />} />
<Route path="configs" element={<NetworkConfigsPage />} />
<Route path="webcrt" element={<WebcrtPage />} />
<Route path="tasks/config-sync" element={<CollectPage />} />
<Route path="tasks/collect" element={<CollectPage />} />
<Route path="tasks/config-sync" element={<ConfigSyncPage />} />
<Route path="tasks/port-traffic" element={<NetworkPlaceholderPage kind="port-traffic" />} />
</Route>
<Route path="/ne" element={<Navigate to="/network/devices" replace />} />
<Route path="/collect" element={<Navigate to="/network/tasks/config-sync" replace />} />
<Route path="/collect" element={<Navigate to="/network/tasks/collect" replace />} />
<Route path="/topology" element={<Navigate to="/network/topology" replace />} />
<Route path="/webcrt" element={<WebcrtLegacyRedirect />} />
<Route path="/users" element={<UsersPage />} />

View file

@ -26,6 +26,7 @@ export const NETWORK_NAV: readonly NetworkNavGroup[] = [
{ id: "devices", path: "/network/devices", labelKey: "network.nav.devices", group: "detail" },
{ id: "topology", path: "/network/topology", labelKey: "network.nav.topology", group: "detail" },
{ id: "alarms", path: "/network/alarms", labelKey: "network.nav.alarms", group: "detail" },
{ id: "configs", path: "/network/configs", labelKey: "network.nav.configs", group: "detail" },
{ id: "webcrt", path: "/network/webcrt", labelKey: "network.nav.webcrt", group: "detail" },
],
},
@ -33,6 +34,12 @@ export const NETWORK_NAV: readonly NetworkNavGroup[] = [
id: "tasks",
labelKey: "network.nav.tasks",
items: [
{
id: "collect",
path: "/network/tasks/collect",
labelKey: "network.nav.collectTasks",
group: "tasks",
},
{
id: "config-sync",
path: "/network/tasks/config-sync",

View file

@ -48,4 +48,15 @@ export const queryKeys = {
) => ["umeCurrentAlarms", severity, cleared, hostName, keyword, page, pageSize] as const,
topologyMaps: ["topologyMaps"] as const,
topologyGraph: (mapId: string) => ["topologyGraph", mapId] as const,
configSyncDashboard: ["configSyncDashboard"] as const,
configSyncPolicy: ["configSyncPolicy"] as const,
configSyncCyclesAll: ["configSyncCycles"] as const,
configSyncCycles: (page: number) => ["configSyncCycles", page] as const,
configSyncCycleTasksAll: ["configSyncCycleTasks"] as const,
configSyncCycleTasks: (cycleId: string, page: number, status: string, keyword: string) =>
["configSyncCycleTasks", cycleId, page, status, keyword] as const,
networkConfigsAll: ["networkConfigs"] as const,
networkConfigs: (page: number, keyword: string, source: string, vendor: string) =>
["networkConfigs", page, keyword, source, vendor] as const,
networkConfigDetail: (source: string, id: string) => ["networkConfigDetail", source, id] as const,
};

View file

@ -49,8 +49,10 @@ const en = {
devices: "Device list",
topology: "Topology",
alarms: "Alarms",
configs: "Configurations",
webcrt: "WebCRT",
configSync: "Collection tasks",
collectTasks: "Collection tasks",
configSync: "Config sync",
portTraffic: "Port traffic",
},
placeholder: {
@ -64,6 +66,71 @@ const en = {
portTrafficStep4: "UI: task list + per-port trend charts",
},
},
configSync: {
title: "Config sync",
syncNow: "Sync now",
retryFailed: "Retry failed",
pause: "Pause",
resume: "Resume",
started: "Sync cycle started",
paused: "Paused",
resumed: "Resumed",
policyTitle: "Sync policy",
policySaved: "Policy saved",
enabled: "Enable scheduled sync",
intervalDays: "Interval (days)",
concurrency: "Concurrency",
historyKeep: "History keep",
scope: "Scope",
scopeAll: "All NEs",
scopeSelected: "Selected NEs",
savePolicy: "Save policy",
selectedCount: "{{count}} selected",
targetKeywordPh: "Name / IP / vendor",
cyclesTitle: "Sync cycles",
cyclesEmpty: "No sync cycles yet",
tasksTitle: "Cycle tasks",
taskKeywordPh: "Name / IP / message",
allStatus: "All statuses",
expand: "Expand",
collapse: "Collapse",
kpi: {
snapshots: "Snapshots",
running: "In progress",
idle: "Idle",
last: "Last cycle",
nextDue: "Next due",
},
col: {
source: "Source",
name: "Device",
vendor: "Vendor",
trigger: "Trigger",
status: "Status",
progress: "Progress",
started: "Started",
ended: "Ended",
message: "Message",
},
},
networkConfigs: {
title: "Configurations",
keywordPh: "Name / IP / ID",
vendorPh: "Vendor",
allSource: "All sources",
empty: "No synced configs yet. Run Config sync first.",
view: "View",
close: "Close",
tabSet: "Set format",
tabHier: "Hierarchical",
col: {
name: "Device",
vendor: "Vendor",
source: "Source",
size: "Size",
collected: "Collected",
},
},
layout: {
title: "UME Integration",
titleUme: "UME Sync",

View file

@ -49,8 +49,10 @@ const zh = {
devices: "设备列表",
topology: "拓扑信息",
alarms: "告警信息",
configs: "配置信息",
webcrt: "WebCRT",
configSync: "采集任务",
collectTasks: "采集任务",
configSync: "配置同步",
portTraffic: "端口流量监控",
},
placeholder: {
@ -64,6 +66,71 @@ const zh = {
portTrafficStep4: "界面:任务列表 + 单端口趋势图",
},
},
configSync: {
title: "配置同步",
syncNow: "立即全量同步",
retryFailed: "一键重试失败",
pause: "暂停",
resume: "继续",
started: "已启动同步周期",
paused: "已暂停",
resumed: "已继续",
policyTitle: "同步策略",
policySaved: "策略已保存",
enabled: "启用周期调度",
intervalDays: "周期(天)",
concurrency: "并发",
historyKeep: "历史保留",
scope: "范围",
scopeAll: "全部网元",
scopeSelected: "指定网元",
savePolicy: "保存策略",
selectedCount: "已选 {{count}} 台",
targetKeywordPh: "名称 / IP / 厂商",
cyclesTitle: "同步周期",
cyclesEmpty: "暂无同步周期",
tasksTitle: "周期任务",
taskKeywordPh: "名称 / IP / 消息",
allStatus: "全部状态",
expand: "展开",
collapse: "收起",
kpi: {
snapshots: "配置覆盖数",
running: "进行中",
idle: "空闲",
last: "最近一轮",
nextDue: "下次调度",
},
col: {
source: "来源",
name: "设备",
vendor: "厂商",
trigger: "触发",
status: "状态",
progress: "进度",
started: "开始",
ended: "结束",
message: "消息",
},
},
networkConfigs: {
title: "配置信息",
keywordPh: "名称 / IP / ID",
vendorPh: "厂商",
allSource: "全部来源",
empty: "暂无已同步配置。请先在「配置同步」执行采集。",
view: "查看",
close: "关闭",
tabSet: "Set 格式",
tabHier: "层级格式",
col: {
name: "设备",
vendor: "厂商",
source: "来源",
size: "大小",
collected: "采集时间",
},
},
layout: {
title: "UME 对接",
titleUme: "UME同步",

View file

@ -758,7 +758,46 @@ pre {
flex-wrap: wrap;
}
/* ── NE stats card ── */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}
.stat-card {
border: 1px solid var(--border, #e2e8f0);
border-radius: 8px;
padding: 12px 14px;
background: var(--panel-bg, #fff);
}
.stat-card strong {
display: block;
margin-top: 4px;
font-size: 1.05rem;
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.btn-primary {
background: #2563eb;
color: #fff;
border-color: #1d4ed8;
}
.btn-primary:disabled {
opacity: 0.55;
}
.data-table {
width: 100%;
}
.ne-stats-card {
padding: 12px 14px;
}

View file

@ -0,0 +1,496 @@
import { useEffect, useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
createConfigSyncCycle,
fetchCliTargets,
fetchConfigSyncCycleTasks,
fetchConfigSyncCycles,
fetchConfigSyncDashboard,
pauseConfigSyncCycle,
resumeConfigSyncCycle,
updateConfigSyncPolicy,
} from "../services/api";
import { queryKeys } from "../constants/queryKeys";
import { useI18n } from "../i18n";
import { useToast } from "../hooks/useToast";
import type { CliTargetItem, ConfigSyncTargetRef } from "../types";
import { pageCount } from "../utils/display";
import { formatSystemTime } from "../utils/time";
const POLL_MS = 2500;
const TARGET_PAGE_SIZE = 20;
export function ConfigSyncPage() {
const { t } = useI18n();
const { showOk, showError } = useToast();
const queryClient = useQueryClient();
const [cyclePage, setCyclePage] = useState(1);
const [expandedCycleId, setExpandedCycleId] = useState("");
const [taskPage, setTaskPage] = useState(1);
const [taskStatus, setTaskStatus] = useState("");
const [taskKeyword, setTaskKeyword] = useState("");
const [enabled, setEnabled] = useState(true);
const [intervalDays, setIntervalDays] = useState(3);
const [concurrency, setConcurrency] = useState(5);
const [scopeMode, setScopeMode] = useState<"all" | "selected">("all");
const [historyKeep, setHistoryKeep] = useState(3);
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.configSyncDashboard,
queryFn: fetchConfigSyncDashboard,
staleTime: 1000,
refetchInterval: (q) => {
const running = q.state.data?.running_cycle;
return running && (running.status === "running" || running.status === "paused") ? POLL_MS : false;
},
});
useEffect(() => {
if (!dashQuery.data || policyHydrated) return;
const p = dashQuery.data.policy;
setEnabled(Boolean(p.enabled));
setIntervalDays(Number(p.interval_days || 3));
setConcurrency(Number(p.concurrency || 5));
setScopeMode(p.scope_mode === "selected" ? "selected" : "all");
setHistoryKeep(Number(p.history_keep ?? 3));
const map: Record<string, ConfigSyncTargetRef> = {};
for (const ref of p.selected_targets || []) {
map[`${ref.source}:${ref.id}`] = { source: ref.source, id: ref.id };
}
setSelectedMap(map);
setPolicyHydrated(true);
}, [dashQuery.data, policyHydrated]);
const cyclesQuery = useQuery({
queryKey: queryKeys.configSyncCycles(cyclePage),
queryFn: () => fetchConfigSyncCycles({ page: cyclePage, pageSize: 10 }),
staleTime: 1000,
refetchInterval: () => (dashQuery.data?.running_cycle ? POLL_MS : false),
});
const tasksQuery = useQuery({
queryKey: queryKeys.configSyncCycleTasks(expandedCycleId, taskPage, taskStatus, taskKeyword),
queryFn: () =>
fetchConfigSyncCycleTasks({
cycleId: expandedCycleId,
page: taskPage,
pageSize: 20,
status: taskStatus,
keyword: taskKeyword,
}),
enabled: Boolean(expandedCycleId),
staleTime: 800,
refetchInterval: () => (dashQuery.data?.running_cycle?.id === expandedCycleId ? 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 refresh = async () => {
await Promise.all([
queryClient.invalidateQueries({ queryKey: queryKeys.configSyncDashboard }),
queryClient.invalidateQueries({ queryKey: queryKeys.configSyncCyclesAll }),
queryClient.invalidateQueries({ queryKey: queryKeys.configSyncCycleTasksAll }),
]);
};
const savePolicyMut = useMutation({
mutationFn: () =>
updateConfigSyncPolicy({
enabled,
interval_days: intervalDays,
concurrency,
scope_mode: scopeMode,
history_keep: historyKeep,
selected_targets: Object.values(selectedMap),
}),
onSuccess: async () => {
showOk(t("configSync.policySaved"));
setPolicyHydrated(false);
await refresh();
},
onError: (err) => showError(String(err)),
});
const startMut = useMutation({
mutationFn: (mode: "full" | "retry_failed") => createConfigSyncCycle({ mode }),
onSuccess: async () => {
showOk(t("configSync.started"));
await refresh();
},
onError: (err) => showError(String(err)),
});
const pauseMut = useMutation({
mutationFn: (id: string) => pauseConfigSyncCycle(id),
onSuccess: async () => {
showOk(t("configSync.paused"));
await refresh();
},
onError: (err) => showError(String(err)),
});
const resumeMut = useMutation({
mutationFn: (id: string) => resumeConfigSyncCycle(id),
onSuccess: async () => {
showOk(t("configSync.resumed"));
await refresh();
},
onError: (err) => showError(String(err)),
});
const dash = dashQuery.data;
const running = dash?.running_cycle;
const last = dash?.last_cycle;
const cycles = cyclesQuery.data?.items ?? [];
const cycleTotal = Number(cyclesQuery.data?.total || 0);
const cyclePages = pageCount(cycleTotal, 10);
const selectedCount = useMemo(() => Object.keys(selectedMap).length, [selectedMap]);
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("configSync.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("full")}
>
{t("configSync.syncNow")}
</button>
<button
type="button"
disabled={Boolean(running) || startMut.isPending || !(last && last.fail_count > 0)}
onClick={() => startMut.mutate("retry_failed")}
>
{t("configSync.retryFailed")}
</button>
{running?.status === "running" ? (
<button type="button" onClick={() => pauseMut.mutate(running.id)} disabled={pauseMut.isPending}>
{t("configSync.pause")}
</button>
) : null}
{running?.status === "paused" ? (
<button type="button" onClick={() => resumeMut.mutate(running.id)} disabled={resumeMut.isPending}>
{t("configSync.resume")}
</button>
) : null}
</div>
</div>
<div className="stat-grid" style={{ marginBottom: 16 }}>
<div className="stat-card">
<div className="muted">{t("configSync.kpi.snapshots")}</div>
<strong>{dash?.snapshot_count ?? "-"}</strong>
</div>
<div className="stat-card">
<div className="muted">{t("configSync.kpi.running")}</div>
<strong>
{running
? `${running.status} · ${running.success_count}/${running.planned_count}`
: t("configSync.kpi.idle")}
</strong>
</div>
<div className="stat-card">
<div className="muted">{t("configSync.kpi.last")}</div>
<strong>
{last
? `${last.status} · ok ${last.success_count} / fail ${last.fail_count}`
: t("common.empty")}
</strong>
</div>
<div className="stat-card">
<div className="muted">{t("configSync.kpi.nextDue")}</div>
<strong>{dash?.next_due_at ? formatSystemTime(dash.next_due_at) : t("common.empty")}</strong>
</div>
</div>
<div className="panel" style={{ marginBottom: 16 }}>
<h3>{t("configSync.policyTitle")}</h3>
<div className="filter-inline" style={{ flexWrap: "wrap", gap: 12 }}>
<label>
<input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />{" "}
{t("configSync.enabled")}
</label>
<label>
{t("configSync.intervalDays")}{" "}
<input
type="number"
min={1}
max={365}
value={intervalDays}
onChange={(e) => setIntervalDays(Math.max(1, Number(e.target.value) || 1))}
style={{ width: 72 }}
/>
</label>
<label>
{t("configSync.concurrency")}{" "}
<input
type="number"
min={1}
max={30}
value={concurrency}
onChange={(e) => setConcurrency(Math.max(1, Math.min(30, Number(e.target.value) || 1)))}
style={{ width: 72 }}
/>
</label>
<label>
{t("configSync.historyKeep")}{" "}
<input
type="number"
min={0}
max={30}
value={historyKeep}
onChange={(e) => setHistoryKeep(Math.max(0, Math.min(30, Number(e.target.value) || 0)))}
style={{ width: 72 }}
/>
</label>
<label>
{t("configSync.scope")}{" "}
<select
value={scopeMode}
onChange={(e) => setScopeMode(e.target.value === "selected" ? "selected" : "all")}
>
<option value="all">{t("configSync.scopeAll")}</option>
<option value="selected">{t("configSync.scopeSelected")}</option>
</select>
</label>
<button
type="button"
className="btn-primary"
disabled={savePolicyMut.isPending}
onClick={() => savePolicyMut.mutate()}
>
{t("configSync.savePolicy")}
</button>
</div>
{scopeMode === "selected" ? (
<div style={{ marginTop: 12 }}>
<p className="muted">{t("configSync.selectedCount", { count: String(selectedCount) })}</p>
<div className="filter-inline">
<input
value={targetKeyword}
placeholder={t("configSync.targetKeywordPh")}
onChange={(e) => {
setTargetKeyword(e.target.value);
setTargetPage(1);
}}
/>
</div>
<table className="data-table">
<thead>
<tr>
<th />
<th>{t("configSync.col.source")}</th>
<th>{t("configSync.col.name")}</th>
<th>IP</th>
<th>{t("configSync.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("configSync.cyclesTitle")}</h3>
<table className="data-table">
<thead>
<tr>
<th />
<th>ID</th>
<th>{t("configSync.col.trigger")}</th>
<th>{t("configSync.col.status")}</th>
<th>{t("configSync.col.progress")}</th>
<th>{t("configSync.col.started")}</th>
<th>{t("configSync.col.ended")}</th>
</tr>
</thead>
<tbody>
{cycles.map((c) => (
<tr key={c.id}>
<td>
<button
type="button"
onClick={() => {
setExpandedCycleId((id) => (id === c.id ? "" : c.id));
setTaskPage(1);
}}
>
{expandedCycleId === c.id ? t("configSync.collapse") : t("configSync.expand")}
</button>
</td>
<td title={c.id}>{c.id.slice(0, 8)}</td>
<td>{c.trigger_mode}</td>
<td>{c.status}</td>
<td>
{c.success_count}/{c.planned_count} · fail {c.fail_count}
</td>
<td>{c.started_at ? formatSystemTime(c.started_at) : "-"}</td>
<td>{c.ended_at ? formatSystemTime(c.ended_at) : "-"}</td>
</tr>
))}
{!cycles.length ? (
<tr>
<td colSpan={7} className="muted">
{t("configSync.cyclesEmpty")}
</td>
</tr>
) : null}
</tbody>
</table>
<div className="pager">
<button type="button" disabled={cyclePage <= 1} onClick={() => setCyclePage((p) => p - 1)}>
{t("common.prevPage")}
</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)}>
{t("common.nextPage")}
</button>
</div>
{expandedCycleId ? (
<div style={{ marginTop: 16 }}>
<h3>{t("configSync.tasksTitle")}</h3>
<div className="filter-inline">
<input
value={taskKeyword}
placeholder={t("configSync.taskKeywordPh")}
onChange={(e) => {
setTaskKeyword(e.target.value);
setTaskPage(1);
}}
/>
<select
value={taskStatus}
onChange={(e) => {
setTaskStatus(e.target.value);
setTaskPage(1);
}}
>
<option value="">{t("configSync.allStatus")}</option>
<option value="pending">pending</option>
<option value="running">running</option>
<option value="success">success</option>
<option value="fail">fail</option>
<option value="skipped">skipped</option>
</select>
</div>
<table className="data-table">
<thead>
<tr>
<th>{t("configSync.col.name")}</th>
<th>IP</th>
<th>{t("configSync.col.vendor")}</th>
<th>{t("configSync.col.source")}</th>
<th>{t("configSync.col.status")}</th>
<th>{t("configSync.col.message")}</th>
</tr>
</thead>
<tbody>
{(tasksQuery.data?.items ?? []).map((task) => (
<tr key={task.id}>
<td>{task.ne_name || task.target_id}</td>
<td>{task.ne_ip}</td>
<td>{task.vendor || "-"}</td>
<td>{task.source}</td>
<td>{task.status}</td>
<td title={task.message}>{task.message || "-"}</td>
</tr>
))}
</tbody>
</table>
<div className="pager">
<button type="button" disabled={taskPage <= 1} onClick={() => setTaskPage((p) => p - 1)}>
{t("common.prevPage")}
</button>
<span className="muted">
{t("common.pagerMeta", {
total: String(tasksQuery.data?.total ?? 0),
page: String(taskPage),
pages: String(pageCount(Number(tasksQuery.data?.total || 0), 20)),
})}
</span>
<button
type="button"
disabled={taskPage >= pageCount(Number(tasksQuery.data?.total || 0), 20)}
onClick={() => setTaskPage((p) => p + 1)}
>
{t("common.nextPage")}
</button>
</div>
</div>
) : null}
</section>
);
}

View file

@ -0,0 +1,203 @@
import { useState } from "react";
import { Link } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { fetchNeConfigSnapshotDetail, fetchNeConfigSnapshots } from "../../services/api";
import { queryKeys } from "../../constants/queryKeys";
import { useI18n } from "../../i18n";
import { pageCount } from "../../utils/display";
import { formatSystemTime } from "../../utils/time";
function fmtBytes(n: number): string {
if (!n) return "0 B";
if (n < 1024) return `${n} B`;
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
return `${(n / (1024 * 1024)).toFixed(2)} MB`;
}
export function NetworkConfigsPage() {
const { t } = useI18n();
const [page, setPage] = useState(1);
const [keyword, setKeyword] = useState("");
const [source, setSource] = useState("");
const [vendor, setVendor] = useState("");
const [selected, setSelected] = useState<{ source: string; id: string } | null>(null);
const [tab, setTab] = useState<"primary" | "alt">("primary");
const listQuery = useQuery({
queryKey: queryKeys.networkConfigs(page, keyword, source, vendor),
queryFn: () =>
fetchNeConfigSnapshots({ page, pageSize: 20, keyword, source, vendor }),
staleTime: 5000,
});
const detailQuery = useQuery({
queryKey: queryKeys.networkConfigDetail(selected?.source || "", selected?.id || ""),
queryFn: () => fetchNeConfigSnapshotDetail(selected!.source, selected!.id, "both"),
enabled: Boolean(selected),
staleTime: 10000,
});
const items = listQuery.data?.items ?? [];
const total = Number(listQuery.data?.total || 0);
const pages = pageCount(total, 20);
const detail = detailQuery.data;
const showAlt = Boolean(detail?.has_alt);
return (
<section className="panel">
<div className="panel__toolbar">
<h2>{t("networkConfigs.title")}</h2>
</div>
<div className="filter-inline">
<input
value={keyword}
placeholder={t("networkConfigs.keywordPh")}
onChange={(e) => {
setKeyword(e.target.value);
setPage(1);
}}
/>
<select
value={source}
onChange={(e) => {
setSource(e.target.value);
setPage(1);
}}
>
<option value="">{t("networkConfigs.allSource")}</option>
<option value="managed">managed</option>
<option value="ume">ume</option>
</select>
<input
value={vendor}
placeholder={t("networkConfigs.vendorPh")}
onChange={(e) => {
setVendor(e.target.value);
setPage(1);
}}
/>
<button
type="button"
disabled={!keyword && !source && !vendor}
onClick={() => {
setKeyword("");
setSource("");
setVendor("");
setPage(1);
}}
>
{t("common.clearFilters")}
</button>
</div>
{listQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
<table className="data-table">
<thead>
<tr>
<th>{t("networkConfigs.col.name")}</th>
<th>IP</th>
<th>{t("networkConfigs.col.vendor")}</th>
<th>{t("networkConfigs.col.source")}</th>
<th>{t("networkConfigs.col.size")}</th>
<th>{t("networkConfigs.col.collected")}</th>
<th />
</tr>
</thead>
<tbody>
{items.map((row) => (
<tr key={`${row.source}:${row.target_id}`}>
<td>{row.ne_name || row.target_id}</td>
<td>{row.ne_ip}</td>
<td>{row.vendor || "-"}</td>
<td>{row.source}</td>
<td>{fmtBytes(row.plain_size)}</td>
<td>{row.collected_at ? formatSystemTime(row.collected_at) : "-"}</td>
<td>
<button
type="button"
onClick={() => {
setSelected({ source: row.source, id: row.target_id });
setTab("primary");
}}
>
{t("networkConfigs.view")}
</button>
<Link
to={`/network/webcrt?${row.source === "ume" ? "ume_ne_id" : "ne_id"}=${encodeURIComponent(row.target_id)}`}
style={{ marginLeft: 8 }}
>
WebCRT
</Link>
</td>
</tr>
))}
{!items.length && !listQuery.isLoading ? (
<tr>
<td colSpan={7} className="muted">
{t("networkConfigs.empty")}
</td>
</tr>
) : null}
</tbody>
</table>
<div className="pager">
<button type="button" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
{t("common.prevPage")}
</button>
<span className="muted">
{t("common.pagerMeta", { total: String(total), page: String(page), pages: String(pages) })}
</span>
<button type="button" disabled={page >= pages} onClick={() => setPage((p) => p + 1)}>
{t("common.nextPage")}
</button>
</div>
{selected ? (
<div className="panel" style={{ marginTop: 16 }}>
<div className="panel__toolbar">
<h3>
{detail?.ne_name || selected.id}{" "}
<span className="muted">
({selected.source} / {detail?.ne_ip || "-"})
</span>
</h3>
<button type="button" onClick={() => setSelected(null)}>
{t("networkConfigs.close")}
</button>
</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 || ""}
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>
);
}

View file

@ -23,6 +23,12 @@ import type {
TopologyDiscoverStreamHandlers,
TopologyGraph,
TopologyMapItem,
ConfigSyncCycle,
ConfigSyncDashboard,
ConfigSyncPolicy,
ConfigSyncTask,
NeConfigSnapshotDetail,
NeConfigSnapshotMeta,
} from "../types";
export const AUTH_TOKEN_KEY = "netx_access_token";
@ -669,3 +675,73 @@ export async function discoverTopologyNeighborsStream(
if (!finalReport) throw new Error("discover_stream_incomplete");
return finalReport;
}
export const fetchConfigSyncDashboard = () =>
apiGet<ConfigSyncDashboard>("/v1/config-sync/dashboard");
export const fetchConfigSyncPolicy = () => apiGet<ConfigSyncPolicy>("/v1/config-sync/policy");
export const updateConfigSyncPolicy = (body: Partial<ConfigSyncPolicy>) =>
apiPut<ConfigSyncPolicy>("/v1/config-sync/policy", body);
export const fetchConfigSyncCycles = (params: { page?: number; pageSize?: number }) => {
const p = new URLSearchParams();
p.set("page", String(Math.max(1, Number(params.page || 1))));
p.set("page_size", String(Math.max(1, Math.min(100, Number(params.pageSize || 20)))));
return apiGet<{ total: number; page: number; page_size: number; items: ConfigSyncCycle[] }>(
`/v1/config-sync/cycles?${p.toString()}`,
);
};
export const createConfigSyncCycle = (body: { mode: "full" | "retry_failed"; cycle_id?: string }) =>
apiPost<ConfigSyncCycle>("/v1/config-sync/cycles", body);
export const pauseConfigSyncCycle = (cycleId: string) =>
apiPost<ConfigSyncCycle>(`/v1/config-sync/cycles/${encodeURIComponent(cycleId)}/pause`, {});
export const resumeConfigSyncCycle = (cycleId: string) =>
apiPost<ConfigSyncCycle>(`/v1/config-sync/cycles/${encodeURIComponent(cycleId)}/resume`, {});
export const fetchConfigSyncCycleTasks = (params: {
cycleId: string;
page?: number;
pageSize?: number;
status?: string;
keyword?: string;
}) => {
const p = new URLSearchParams();
p.set("page", String(Math.max(1, Number(params.page || 1))));
p.set("page_size", String(Math.max(1, Math.min(200, Number(params.pageSize || 20)))));
if (params.status) p.set("status", params.status);
if (params.keyword?.trim()) p.set("keyword", params.keyword.trim());
return apiGet<{ total: number; page: number; page_size: number; items: ConfigSyncTask[] }>(
`/v1/config-sync/cycles/${encodeURIComponent(params.cycleId)}/tasks?${p.toString()}`,
);
};
export const fetchNeConfigSnapshots = (params: {
page?: number;
pageSize?: number;
keyword?: string;
source?: string;
vendor?: string;
}) => {
const p = new URLSearchParams();
p.set("page", String(Math.max(1, Number(params.page || 1))));
p.set("page_size", String(Math.max(1, Math.min(100, Number(params.pageSize || 20)))));
if (params.keyword?.trim()) p.set("keyword", params.keyword.trim());
if (params.source) p.set("source", params.source);
if (params.vendor?.trim()) p.set("vendor", params.vendor.trim());
return apiGet<{ total: number; page: number; page_size: number; items: NeConfigSnapshotMeta[] }>(
`/v1/config-sync/snapshots?${p.toString()}`,
);
};
export const fetchNeConfigSnapshotDetail = (
source: string,
targetId: string,
field: "primary" | "alt" | "both" = "both",
) =>
apiGet<NeConfigSnapshotDetail>(
`/v1/config-sync/snapshots/${encodeURIComponent(source)}/${encodeURIComponent(targetId)}?field=${field}`,
);

View file

@ -429,3 +429,81 @@ export type TopologyDiscoverStreamHandlers = {
onDone?: (report: TopologyDiscoverOut) => void;
onError?: (detail: string) => void;
};
export type ConfigSyncTargetRef = {
source: "managed" | "ume";
id: string;
};
export type ConfigSyncPolicy = {
enabled: boolean;
interval_days: number;
concurrency: number;
scope_mode: string;
selected_targets: ConfigSyncTargetRef[];
history_keep: number;
updated_at?: string | null;
};
export type ConfigSyncCycle = {
id: string;
trigger_mode: string;
status: string;
concurrency: number;
planned_count: number;
success_count: number;
fail_count: number;
skip_count: number;
error_message: string;
started_at?: string | null;
ended_at?: string | null;
created_at?: string | null;
};
export type ConfigSyncTask = {
id: string;
cycle_id: string;
source: string;
target_id: string;
ne_name: string;
ne_ip: string;
vendor: string;
status: string;
message: string;
started_at?: string | null;
ended_at?: string | null;
};
export type ConfigSyncDashboard = {
policy: ConfigSyncPolicy;
snapshot_count: number;
last_cycle: ConfigSyncCycle | null;
running_cycle: ConfigSyncCycle | null;
next_due_at?: string | null;
fail_by_vendor: Record<string, number>;
};
export type NeConfigSnapshotMeta = {
source: string;
target_id: string;
vendor: string;
device_type: string;
ne_name: string;
ne_ip: string;
config_sha256: string;
config_alt_sha256: string;
plain_size: number;
plain_alt_size: number;
zlib_size: number;
zlib_alt_size: number;
has_alt: boolean;
commands: string[];
collected_at?: string | null;
last_cycle_id: string;
};
export type NeConfigSnapshotDetail = NeConfigSnapshotMeta & {
config_text: string;
config_alt_text: string;
};