mirror of
https://github.com/hansjone/netx.git
synced 2026-10-10 03:30:49 +08:00
oliver
41fd5b62a4
Refresh left-nav/main chrome, unify list status chips across network pages, and merge UME token with alarm subscription into one top card. Co-authored-by: Cursor <cursoragent@cursor.com>
857 lines
31 KiB
TypeScript
857 lines
31 KiB
TypeScript
import { Button, Input, Modal } from "@heroui/react";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { useSearchParams } from "react-router-dom";
|
|
import { ListPager } from "../components/ListPager";
|
|
import { AppModalShell } from "../components/ui/AppModalShell";
|
|
import { FieldSelect } from "../components/ui/FieldSelect";
|
|
import { queryKeys } from "../constants/queryKeys";
|
|
import { useDebouncedValue } from "../hooks/useDebouncedValue";
|
|
import { useToast } from "../hooks/useToast";
|
|
import { useI18n } from "../i18n";
|
|
import {
|
|
createConfigSyncCycle,
|
|
fetchCliTargets,
|
|
fetchConfigSyncCycleTasks,
|
|
fetchConfigSyncCycles,
|
|
fetchConfigSyncDashboard,
|
|
formatErr,
|
|
pauseConfigSyncCycle,
|
|
resumeConfigSyncCycle,
|
|
stopConfigSyncCycle,
|
|
updateConfigSyncPolicy,
|
|
} from "../services/api";
|
|
import type { CliTargetItem, ConfigSyncCycle, ConfigSyncTargetRef, ConfigSyncTask } from "../types";
|
|
import { downloadCsv, fetchAllPages } from "../utils/csvExport";
|
|
import { pageCount } from "../utils/display";
|
|
import { formatSystemTime } from "../utils/time";
|
|
import { jobChipColor, NmStatusChip, sourceChipColor } from "./network/nmChips";
|
|
|
|
const POLL_MS = 2500;
|
|
const TARGET_PAGE_SIZE = 10;
|
|
|
|
export function ConfigSyncPage() {
|
|
const { t } = useI18n();
|
|
const { showOk, showError } = useToast();
|
|
const queryClient = useQueryClient();
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
|
|
const [cyclePage, setCyclePage] = useState(1);
|
|
const [cyclePageSize, setCyclePageSize] = useState(10);
|
|
const [cycleStatus, setCycleStatus] = useState("");
|
|
const [cycleKeyword, setCycleKeyword] = useState("");
|
|
const [exportingCycles, setExportingCycles] = useState(false);
|
|
const [expandedCycleId, setExpandedCycleId] = useState("");
|
|
const [taskPage, setTaskPage] = useState(1);
|
|
const [taskPageSize, setTaskPageSize] = useState(10);
|
|
const [taskStatus, setTaskStatus] = useState("");
|
|
const [taskKeyword, setTaskKeyword] = useState("");
|
|
const [exportingTasks, setExportingTasks] = useState(false);
|
|
|
|
const debouncedCycleKeyword = useDebouncedValue(cycleKeyword, 300);
|
|
const debouncedTaskKeyword = useDebouncedValue(taskKeyword, 300);
|
|
|
|
const [enabled, setEnabled] = useState(false);
|
|
const [intervalDays, setIntervalDays] = useState(3);
|
|
const [concurrency, setConcurrency] = useState(5);
|
|
const [scopeMode, setScopeMode] = useState<"all" | "selected">("all");
|
|
const [historyKeep, setHistoryKeep] = useState(3);
|
|
const [cycleKeep, setCycleKeep] = useState(30);
|
|
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" || running.status === "pending")
|
|
? 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));
|
|
setCycleKeep(Math.max(0, Math.min(200, Number(p.cycle_keep ?? 30))));
|
|
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]);
|
|
|
|
useEffect(() => {
|
|
const id = String(searchParams.get("cycle_id") || "").trim();
|
|
if (!id) return;
|
|
setExpandedCycleId(id);
|
|
setTaskPage(1);
|
|
setTaskPageSize(20);
|
|
setTaskKeyword("");
|
|
setTaskStatus("");
|
|
setSearchParams(
|
|
(prev) => {
|
|
const next = new URLSearchParams(prev);
|
|
if (next.get("cycle_id") === id) next.delete("cycle_id");
|
|
return next;
|
|
},
|
|
{ replace: true },
|
|
);
|
|
}, [searchParams, setSearchParams]);
|
|
|
|
const cyclesQuery = useQuery({
|
|
queryKey: queryKeys.configSyncCycles(cyclePage, cyclePageSize, cycleStatus, debouncedCycleKeyword),
|
|
queryFn: () =>
|
|
fetchConfigSyncCycles({
|
|
page: cyclePage,
|
|
pageSize: cyclePageSize,
|
|
status: cycleStatus,
|
|
keyword: debouncedCycleKeyword,
|
|
}),
|
|
staleTime: 1000,
|
|
refetchInterval: () => (dashQuery.data?.running_cycle ? POLL_MS : false),
|
|
});
|
|
|
|
const tasksQuery = useQuery({
|
|
queryKey: queryKeys.configSyncCycleTasks(
|
|
expandedCycleId,
|
|
taskPage,
|
|
taskPageSize,
|
|
taskStatus,
|
|
debouncedTaskKeyword,
|
|
),
|
|
queryFn: () =>
|
|
fetchConfigSyncCycleTasks({
|
|
cycleId: expandedCycleId,
|
|
page: taskPage,
|
|
pageSize: taskPageSize,
|
|
status: taskStatus,
|
|
keyword: debouncedTaskKeyword,
|
|
}),
|
|
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,
|
|
cycle_keep: cycleKeep,
|
|
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));
|
|
setIntervalDays(Number(saved.interval_days || 3));
|
|
setConcurrency(Number(saved.concurrency || 5));
|
|
setScopeMode(saved.scope_mode === "selected" ? "selected" : "all");
|
|
setHistoryKeep(Number(saved.history_keep ?? 3));
|
|
setCycleKeep(Math.max(0, Math.min(200, Number(saved.cycle_keep ?? 30))));
|
|
const map: Record<string, ConfigSyncTargetRef> = {};
|
|
for (const ref of saved.selected_targets || []) {
|
|
map[`${ref.source}:${ref.id}`] = { source: ref.source, id: ref.id };
|
|
}
|
|
setSelectedMap(map);
|
|
setPolicyHydrated(true);
|
|
queryClient.setQueryData(queryKeys.configSyncDashboard, (prev: unknown) => {
|
|
if (!prev || typeof prev !== "object") return prev;
|
|
return { ...(prev as object), policy: saved };
|
|
});
|
|
showOk(t("configSync.policySaved"));
|
|
await refresh();
|
|
},
|
|
onError: (err) => showError(formatErr(err)),
|
|
});
|
|
|
|
const startMut = useMutation({
|
|
mutationFn: (mode: "full" | "retry_failed") => createConfigSyncCycle({ mode }),
|
|
onSuccess: async () => {
|
|
showOk(t("configSync.started"));
|
|
await refresh();
|
|
},
|
|
onError: (err) => showError(formatErr(err)),
|
|
});
|
|
|
|
const pauseMut = useMutation({
|
|
mutationFn: (id: string) => pauseConfigSyncCycle(id),
|
|
onSuccess: async () => {
|
|
showOk(t("configSync.paused"));
|
|
await refresh();
|
|
},
|
|
onError: (err) => showError(formatErr(err)),
|
|
});
|
|
|
|
const resumeMut = useMutation({
|
|
mutationFn: (id: string) => resumeConfigSyncCycle(id),
|
|
onSuccess: async () => {
|
|
showOk(t("configSync.resumed"));
|
|
await refresh();
|
|
},
|
|
onError: (err) => showError(formatErr(err)),
|
|
});
|
|
|
|
const stopMut = useMutation({
|
|
mutationFn: (id: string) => stopConfigSyncCycle(id),
|
|
onSuccess: async () => {
|
|
showOk(t("configSync.stopped"));
|
|
await refresh();
|
|
},
|
|
onError: (err) => showError(formatErr(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, cyclePageSize);
|
|
const taskTotal = Number(tasksQuery.data?.total || 0);
|
|
const taskPages = pageCount(taskTotal, taskPageSize);
|
|
const selectedCount = useMemo(() => Object.keys(selectedMap).length, [selectedMap]);
|
|
const hasCycleFilters = Boolean(cycleKeyword.trim() || cycleStatus);
|
|
|
|
const openCycleTasks = (cycleId: string) => {
|
|
setExpandedCycleId(cycleId);
|
|
setTaskPage(1);
|
|
setTaskKeyword("");
|
|
setTaskStatus("");
|
|
};
|
|
|
|
const exportCyclesCsv = async () => {
|
|
setExportingCycles(true);
|
|
try {
|
|
const rows = await fetchAllPages<ConfigSyncCycle>({
|
|
pageSize: 100,
|
|
maxRows: 2000,
|
|
fetchPage: (p, ps) =>
|
|
fetchConfigSyncCycles({
|
|
page: p,
|
|
pageSize: ps,
|
|
status: cycleStatus,
|
|
keyword: debouncedCycleKeyword,
|
|
}),
|
|
});
|
|
downloadCsv(
|
|
`${t("configSync.exportCyclesName")}-${new Date().toISOString().slice(0, 10)}.csv`,
|
|
rows,
|
|
[
|
|
{ key: "id", header: "ID" },
|
|
{ key: "trigger_mode", header: t("configSync.col.trigger") },
|
|
{ key: "status", header: t("configSync.col.status") },
|
|
{
|
|
key: "progress",
|
|
header: t("configSync.col.progress"),
|
|
value: (r) => `${r.success_count}/${r.planned_count} fail ${r.fail_count}`,
|
|
},
|
|
{
|
|
key: "started_at",
|
|
header: t("configSync.col.started"),
|
|
value: (r) => (r.started_at ? formatSystemTime(r.started_at) : ""),
|
|
},
|
|
{
|
|
key: "ended_at",
|
|
header: t("configSync.col.ended"),
|
|
value: (r) => (r.ended_at ? formatSystemTime(r.ended_at) : ""),
|
|
},
|
|
{ key: "error_message", header: t("configSync.col.message") },
|
|
],
|
|
);
|
|
if (rows.length < cycleTotal) {
|
|
showOk(t("common.exportTruncated", { count: String(rows.length), total: String(cycleTotal) }));
|
|
} else {
|
|
showOk(t("common.exportOk", { count: String(rows.length) }));
|
|
}
|
|
} catch (err) {
|
|
showError(t("common.exportFailed") + ": " + formatErr(err));
|
|
} finally {
|
|
setExportingCycles(false);
|
|
}
|
|
};
|
|
|
|
const exportTasksCsv = async () => {
|
|
if (!expandedCycleId) return;
|
|
setExportingTasks(true);
|
|
try {
|
|
const rows = await fetchAllPages<ConfigSyncTask>({
|
|
pageSize: 200,
|
|
maxRows: 2000,
|
|
fetchPage: (p, ps) =>
|
|
fetchConfigSyncCycleTasks({
|
|
cycleId: expandedCycleId,
|
|
page: p,
|
|
pageSize: ps,
|
|
status: taskStatus,
|
|
keyword: debouncedTaskKeyword,
|
|
}),
|
|
});
|
|
downloadCsv(
|
|
`${t("configSync.exportTasksName")}-${expandedCycleId.slice(0, 8)}-${new Date().toISOString().slice(0, 10)}.csv`,
|
|
rows,
|
|
[
|
|
{ key: "ne_name", header: t("configSync.col.name"), value: (r) => r.ne_name || r.target_id },
|
|
{ key: "ne_ip", header: "IP" },
|
|
{ key: "vendor", header: t("configSync.col.vendor") },
|
|
{ key: "source", header: t("configSync.col.source") },
|
|
{ key: "status", header: t("configSync.col.status") },
|
|
{ key: "message", header: t("configSync.col.message") },
|
|
{ key: "target_id", header: "ID" },
|
|
],
|
|
);
|
|
if (rows.length < taskTotal) {
|
|
showOk(t("common.exportTruncated", { count: String(rows.length), total: String(taskTotal) }));
|
|
} else {
|
|
showOk(t("common.exportOk", { count: String(rows.length) }));
|
|
}
|
|
} catch (err) {
|
|
showError(t("common.exportFailed") + ": " + formatErr(err));
|
|
} finally {
|
|
setExportingTasks(false);
|
|
}
|
|
};
|
|
|
|
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 nm-page-panel">
|
|
<div className="panel__toolbar">
|
|
<h2>{t("configSync.title")}</h2>
|
|
<div className="btn-row">
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
isDisabled={dashQuery.isFetching}
|
|
onPress={() => void refresh()}
|
|
>
|
|
{t("common.refresh")}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="primary"
|
|
isDisabled={Boolean(running) || startMut.isPending}
|
|
onPress={() => startMut.mutate("full")}
|
|
>
|
|
{t("configSync.syncNow")}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
isDisabled={Boolean(running) || startMut.isPending || !(last && last.fail_count > 0)}
|
|
onPress={() => startMut.mutate("retry_failed")}
|
|
>
|
|
{t("configSync.retryFailed")}
|
|
</Button>
|
|
{running?.status === "running" || running?.status === "pending" ? (
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
isDisabled={pauseMut.isPending}
|
|
onPress={() => pauseMut.mutate(running.id)}
|
|
>
|
|
{t("configSync.pause")}
|
|
</Button>
|
|
) : null}
|
|
{running?.status === "paused" ? (
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
isDisabled={resumeMut.isPending}
|
|
onPress={() => resumeMut.mutate(running.id)}
|
|
>
|
|
{t("configSync.resume")}
|
|
</Button>
|
|
) : null}
|
|
{running && (running.status === "running" || running.status === "paused" || running.status === "pending") ? (
|
|
<Button
|
|
size="sm"
|
|
variant="danger"
|
|
isDisabled={stopMut.isPending}
|
|
onPress={() => {
|
|
if (window.confirm(t("configSync.confirmStop"))) stopMut.mutate(running.id);
|
|
}}
|
|
>
|
|
{t("configSync.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("configSync.kpi.snapshots")}</div>
|
|
<div className="pt-list-kpi__value">{dash?.snapshot_count ?? "—"}</div>
|
|
</div>
|
|
<div className={`pt-list-kpi${running ? " pt-list-kpi--live" : ""}`}>
|
|
<div className="pt-list-kpi__label">{t("configSync.kpi.running")}</div>
|
|
<div className="pt-list-kpi__value" style={{ fontSize: running ? 15 : 22 }}>
|
|
{running
|
|
? `${running.status} · ${running.success_count}/${running.planned_count}`
|
|
: t("configSync.kpi.idle")}
|
|
</div>
|
|
</div>
|
|
<div className="pt-list-kpi">
|
|
<div className="pt-list-kpi__label">{t("configSync.kpi.last")}</div>
|
|
<div className="pt-list-kpi__value" style={{ fontSize: 15 }}>
|
|
{last
|
|
? `${last.status} · ok ${last.success_count} / fail ${last.fail_count}`
|
|
: t("common.empty")}
|
|
</div>
|
|
</div>
|
|
<div className="pt-list-kpi">
|
|
<div className="pt-list-kpi__label">{t("configSync.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("configSync.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("configSync.enabled")}</span>
|
|
</label>
|
|
<label className="config-sync-policy-field">
|
|
<span>{t("configSync.intervalDays")}</span>
|
|
<Input
|
|
type="number"
|
|
min={1}
|
|
max={365}
|
|
value={String(intervalDays)}
|
|
onChange={(e) => setIntervalDays(Math.max(1, Number(e.target.value) || 1))}
|
|
/>
|
|
</label>
|
|
<label className="config-sync-policy-field">
|
|
<span>{t("configSync.concurrency")}</span>
|
|
<Input
|
|
type="number"
|
|
min={1}
|
|
max={30}
|
|
value={String(concurrency)}
|
|
onChange={(e) => setConcurrency(Math.max(1, Math.min(30, Number(e.target.value) || 1)))}
|
|
/>
|
|
</label>
|
|
<label className="config-sync-policy-field">
|
|
<span>{t("configSync.historyKeep")}</span>
|
|
<Input
|
|
type="number"
|
|
min={0}
|
|
max={30}
|
|
value={String(historyKeep)}
|
|
onChange={(e) => setHistoryKeep(Math.max(0, Math.min(30, Number(e.target.value) || 0)))}
|
|
/>
|
|
</label>
|
|
<label className="config-sync-policy-field">
|
|
<span>{t("configSync.cycleKeep")}</span>
|
|
<Input
|
|
type="number"
|
|
min={0}
|
|
max={200}
|
|
value={String(cycleKeep)}
|
|
onChange={(e) => setCycleKeep(Math.max(0, Math.min(200, Number(e.target.value) || 0)))}
|
|
/>
|
|
</label>
|
|
<label className="config-sync-policy-field">
|
|
<span>{t("configSync.scope")}</span>
|
|
<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
|
|
variant="primary"
|
|
isDisabled={savePolicyMut.isPending}
|
|
onPress={() => 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>
|
|
<NmStatusChip color={sourceChipColor(source)}>{source}</NmStatusChip>
|
|
</td>
|
|
<td>{row.name}</td>
|
|
<td>{row.ip_address}</td>
|
|
<td>{row.vendor || "-"}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
<div className="pager">
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
isDisabled={targetPage <= 1}
|
|
onPress={() => 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
|
|
size="sm"
|
|
variant="ghost"
|
|
isDisabled={targetPage >= pageCount(Number(targetsQuery.data?.total || 0), TARGET_PAGE_SIZE)}
|
|
onPress={() => setTargetPage((p) => p + 1)}
|
|
>
|
|
{t("common.nextPage")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<h3>{t("configSync.cyclesTitle")}</h3>
|
|
<div className="pt-list">
|
|
<div className="filter-inline">
|
|
<Input
|
|
value={cycleKeyword}
|
|
placeholder={t("configSync.keywordPh")}
|
|
onChange={(e) => {
|
|
setCycleKeyword(e.target.value);
|
|
setCyclePage(1);
|
|
}}
|
|
/>
|
|
<FieldSelect
|
|
value={cycleStatus}
|
|
onChange={(e) => {
|
|
setCycleStatus(e.target.value);
|
|
setCyclePage(1);
|
|
}}
|
|
>
|
|
<option value="">{t("configSync.statusAll")}</option>
|
|
<option value="pending">pending</option>
|
|
<option value="running">running</option>
|
|
<option value="paused">paused</option>
|
|
<option value="success">success</option>
|
|
<option value="completed">completed</option>
|
|
<option value="failed">failed</option>
|
|
<option value="stopped">stopped</option>
|
|
</FieldSelect>
|
|
<Button
|
|
size="sm"
|
|
variant="tertiary"
|
|
isDisabled={!hasCycleFilters}
|
|
onPress={() => {
|
|
setCycleKeyword("");
|
|
setCycleStatus("");
|
|
setCyclePage(1);
|
|
}}
|
|
>
|
|
{t("common.clearFilters")}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
isDisabled={exportingCycles || cycleTotal === 0}
|
|
onPress={() => void exportCyclesCsv()}
|
|
>
|
|
{exportingCycles ? t("common.exporting") : t("common.exportCsv")}
|
|
</Button>
|
|
</div>
|
|
|
|
{cyclesQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
|
|
{cyclesQuery.isError ? <p className="error-text">{formatErr(cyclesQuery.error)}</p> : null}
|
|
|
|
<div className="pt-list-table-wrap">
|
|
<table className="data-table pt-list-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>
|
|
<th>{t("configSync.col.actions")}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{cycles.map((c) => (
|
|
<tr key={c.id}>
|
|
<td>
|
|
<Button size="sm" variant="ghost" onPress={() => openCycleTasks(c.id)}>
|
|
{t("configSync.expand")}
|
|
</Button>
|
|
</td>
|
|
<td title={c.id} className="pt-list-num">{c.id.slice(0, 8)}</td>
|
|
<td>{c.trigger_mode}</td>
|
|
<td>
|
|
<NmStatusChip color={jobChipColor(c.status)}>{c.status}</NmStatusChip>
|
|
</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>
|
|
<td>
|
|
<div className="btn-row">
|
|
{c.status === "running" || c.status === "pending" ? (
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
isDisabled={pauseMut.isPending}
|
|
onPress={() => pauseMut.mutate(c.id)}
|
|
>
|
|
{t("configSync.pause")}
|
|
</Button>
|
|
) : null}
|
|
{c.status === "paused" ? (
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
isDisabled={resumeMut.isPending}
|
|
onPress={() => resumeMut.mutate(c.id)}
|
|
>
|
|
{t("configSync.resume")}
|
|
</Button>
|
|
) : null}
|
|
{c.status === "running" || c.status === "paused" || c.status === "pending" ? (
|
|
<Button
|
|
size="sm"
|
|
variant="danger"
|
|
isDisabled={stopMut.isPending}
|
|
onPress={() => {
|
|
if (window.confirm(t("configSync.confirmStop"))) stopMut.mutate(c.id);
|
|
}}
|
|
>
|
|
{t("configSync.stop")}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{!cycles.length && !cyclesQuery.isLoading ? (
|
|
<tr>
|
|
<td colSpan={8} className="muted">
|
|
{t("configSync.cyclesEmpty")}
|
|
</td>
|
|
</tr>
|
|
) : null}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<ListPager
|
|
page={cyclePage}
|
|
pages={cyclePages}
|
|
total={cycleTotal}
|
|
pageSize={cyclePageSize}
|
|
pageSizeOptions={[10, 20, 50, 100]}
|
|
onPageChange={setCyclePage}
|
|
onPageSizeChange={(size) => {
|
|
setCyclePageSize(size);
|
|
setCyclePage(1);
|
|
}}
|
|
disabled={cyclesQuery.isLoading}
|
|
/>
|
|
</div>
|
|
|
|
<AppModalShell
|
|
open={Boolean(expandedCycleId)}
|
|
onClose={() => setExpandedCycleId("")}
|
|
size="lg"
|
|
>
|
|
<Modal.Header>
|
|
<Modal.Heading>{t("configSync.tasksTitle")}</Modal.Heading>
|
|
<Modal.CloseTrigger />
|
|
</Modal.Header>
|
|
<Modal.Body className="flex flex-col gap-3">
|
|
<p className="text-sm text-muted">
|
|
{expandedCycleId.slice(0, 8)}
|
|
{(() => {
|
|
const c = cycles.find((x) => x.id === expandedCycleId);
|
|
return c
|
|
? ` · ${c.trigger_mode} · ${c.status} · ${c.success_count}/${c.planned_count}`
|
|
: "";
|
|
})()}
|
|
</p>
|
|
<div className="filter-inline">
|
|
<Input
|
|
value={taskKeyword}
|
|
placeholder={t("configSync.taskKeywordPh")}
|
|
onChange={(e) => {
|
|
setTaskKeyword(e.target.value);
|
|
setTaskPage(1);
|
|
}}
|
|
/>
|
|
<FieldSelect
|
|
value={taskStatus}
|
|
onChange={(e) => {
|
|
setTaskStatus(e.target.value);
|
|
setTaskPage(1);
|
|
}}
|
|
>
|
|
<option value="">{t("configSync.statusAll")}</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>
|
|
</FieldSelect>
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
isDisabled={exportingTasks || taskTotal === 0}
|
|
onPress={() => void exportTasksCsv()}
|
|
>
|
|
{exportingTasks ? t("common.exporting") : t("common.exportCsv")}
|
|
</Button>
|
|
</div>
|
|
|
|
{tasksQuery.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
|
|
{tasksQuery.isError ? (
|
|
<p className="ops-detail-modal__error">{formatErr(tasksQuery.error)}</p>
|
|
) : null}
|
|
|
|
<div className="pt-list-table-wrap">
|
|
<table className="data-table pt-list-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>
|
|
<NmStatusChip color={sourceChipColor(task.source)}>{task.source}</NmStatusChip>
|
|
</td>
|
|
<td>
|
|
<NmStatusChip color={jobChipColor(task.status)}>{task.status}</NmStatusChip>
|
|
</td>
|
|
<td title={task.message}>{task.message || "-"}</td>
|
|
</tr>
|
|
))}
|
|
{!tasksQuery.isLoading && !(tasksQuery.data?.items ?? []).length ? (
|
|
<tr>
|
|
<td colSpan={6} className="muted">
|
|
{t("common.empty")}
|
|
</td>
|
|
</tr>
|
|
) : null}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<ListPager
|
|
page={taskPage}
|
|
pages={taskPages}
|
|
total={taskTotal}
|
|
pageSize={taskPageSize}
|
|
pageSizeOptions={[10, 20, 50, 100, 200]}
|
|
onPageChange={setTaskPage}
|
|
onPageSizeChange={(size) => {
|
|
setTaskPageSize(size);
|
|
setTaskPage(1);
|
|
}}
|
|
disabled={tasksQuery.isLoading}
|
|
/>
|
|
</Modal.Body>
|
|
<Modal.Footer>
|
|
<Button variant="tertiary" onPress={() => setExpandedCycleId("")}>
|
|
{t("networkConfigs.close")}
|
|
</Button>
|
|
</Modal.Footer>
|
|
</AppModalShell>
|
|
</section>
|
|
);
|
|
}
|