mirror of
https://github.com/hansjone/netx.git
synced 2026-10-14 19:50:53 +08:00
Improve managed NE filters/validation and simplify the workbench UI.
Add column filters and clearer API error mapping for NE management, tighten port validation, and slim the workbench into reusable modules with cleaner styles. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
3c9e0efd2b
commit
312f6f2f96
25 changed files with 1484 additions and 2016 deletions
|
|
@ -22,8 +22,8 @@ export const queryKeys = {
|
|||
managedNeMeta: ["managedNeMeta"] as const,
|
||||
managedNeStats: ["managedNeStats"] as const,
|
||||
managedNeAll: ["managedNe"] as const,
|
||||
managedNe: (keyword: string, vendor: string, connectStatus: string, page: number, pageSize: number) =>
|
||||
["managedNe", keyword, vendor, connectStatus, page, pageSize] as const,
|
||||
managedNe: (columnFilters: string, page: number, pageSize: number) =>
|
||||
["managedNe", columnFilters, page, pageSize] as const,
|
||||
collectionEligibleNeAll: ["collectionEligibleNe"] as const,
|
||||
collectionEligibleNe: (page: number, keyword: string) => ["collectionEligibleNe", page, keyword] as const,
|
||||
neCollectionsAll: ["neCollections"] as const,
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -8,10 +8,13 @@ import { FieldSelect } from "../../../components/ui/FieldSelect";
|
|||
import { queryKeys } from "../../../constants/queryKeys";
|
||||
import { useI18n } from "../../../i18n";
|
||||
import { patchHopVendorChange } from "../lib/hopProxy";
|
||||
import { managedNeErrorText } from "../lib/errors";
|
||||
import type { ManagedNeItem } from "../../../types";
|
||||
import {
|
||||
applyHopTemplate,
|
||||
buildManagedNeSaveBody,
|
||||
deviceTypeForVendor,
|
||||
isValidMgmtAddress,
|
||||
emptyManagedNeForm,
|
||||
formFromManagedNe,
|
||||
allowsOpenExecPolicy,
|
||||
|
|
@ -37,6 +40,9 @@ export function ManagedNeFormDialog({
|
|||
}: ManagedNeFormDialogProps) {
|
||||
const { t } = useI18n();
|
||||
const [form, setForm] = useState<ManagedNeFormState>(emptyManagedNeForm);
|
||||
// Port is edited as text so the field can be cleared while typing.
|
||||
const [portDraft, setPortDraft] = useState("22");
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const metaQuery = useQuery({
|
||||
queryKey: queryKeys.managedNeMeta,
|
||||
|
|
@ -45,16 +51,6 @@ export function ManagedNeFormDialog({
|
|||
enabled: open,
|
||||
});
|
||||
|
||||
const editingId = editing?.id ?? "";
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
if (editing) {
|
||||
setForm(formFromManagedNe(editing));
|
||||
return;
|
||||
}
|
||||
setForm({ ...emptyManagedNeForm(), ...(initialValues || {}) });
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- seed once per open/create
|
||||
}, [open, editingId]);
|
||||
|
||||
const vendors = metaQuery.data?.vendors ?? [];
|
||||
const execPolicyEnabled = Boolean(metaQuery.data?.exec_policy_enabled);
|
||||
|
|
@ -65,6 +61,15 @@ export function ManagedNeFormDialog({
|
|||
return base;
|
||||
}, [metaQuery.data?.device_types, form.device_type]);
|
||||
|
||||
const ipText = form.ip_address.trim();
|
||||
const portNum = /^\d+$/.test(portDraft.trim()) ? Number(portDraft.trim()) : NaN;
|
||||
const fieldErrors = {
|
||||
ip: !ipText ? t("managedNe.form.ipRequired") : !isValidMgmtAddress(ipText) ? t("managedNe.form.ipInvalid") : "",
|
||||
username: !form.username.trim() ? t("managedNe.form.usernameRequired") : "",
|
||||
port: portNum >= 1 && portNum <= 65535 ? "" : t("managedNe.form.portInvalid"),
|
||||
};
|
||||
const hasFieldErrors = Object.values(fieldErrors).some(Boolean);
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const body = buildManagedNeSaveBody(form, {
|
||||
|
|
@ -84,6 +89,17 @@ export function ManagedNeFormDialog({
|
|||
},
|
||||
});
|
||||
|
||||
const editingId = editing?.id ?? "";
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const seed = editing ? formFromManagedNe(editing) : { ...emptyManagedNeForm(), ...(initialValues || {}) };
|
||||
setForm(seed);
|
||||
setPortDraft(String(seed.port));
|
||||
setSubmitted(false);
|
||||
saveMutation.reset();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- seed once per open/create
|
||||
}, [open, editingId]);
|
||||
|
||||
return (
|
||||
<AppModalShell open={open} onClose={onClose} dismissible={!saveMutation.isPending} size="lg">
|
||||
<Modal.Header>
|
||||
|
|
@ -113,12 +129,13 @@ export function ManagedNeFormDialog({
|
|||
setForm((prev) => {
|
||||
const next = { ...prev, vendor };
|
||||
const dt = String(prev.device_type || "").trim().toLowerCase();
|
||||
if (!dt || dt === "generic" || dt === "other" || dt === "linux") {
|
||||
if (vendor === "ZTE") next.device_type = "zte_zxros";
|
||||
else if (vendor === "Huawei") next.device_type = "huawei";
|
||||
else if (vendor === "Cisco") next.device_type = "cisco_ios";
|
||||
else if (vendor === "Juniper") next.device_type = "juniper_junos";
|
||||
else if (vendor === "Nokia") next.device_type = "nokia_sros";
|
||||
const suggested = deviceTypeForVendor(vendor);
|
||||
// Follow the vendor while the type is a placeholder or still the old vendor's default.
|
||||
const followVendor = !dt || dt === deviceTypeForVendor(prev.vendor)
|
||||
|| ((dt === "generic" || dt === "other" || dt === "linux") && suggested !== "generic");
|
||||
if (followVendor) {
|
||||
next.device_type = suggested;
|
||||
if (!allowsOpenExecPolicy(suggested)) next.exec_policy = "readonly";
|
||||
}
|
||||
return next;
|
||||
});
|
||||
|
|
@ -175,25 +192,39 @@ export function ManagedNeFormDialog({
|
|||
<TextField
|
||||
fullWidth
|
||||
isRequired
|
||||
isInvalid={submitted && Boolean(fieldErrors.ip)}
|
||||
value={form.ip_address}
|
||||
onChange={(ip_address) => setForm({ ...form, ip_address })}
|
||||
>
|
||||
<Label>{t("managedNe.col.ip")}</Label>
|
||||
<Input />
|
||||
<Input placeholder="192.0.2.10 / pe-01.example.net" />
|
||||
{submitted && fieldErrors.ip ? <span className="form-field-hint error-text">{fieldErrors.ip}</span> : null}
|
||||
</TextField>
|
||||
<TextField
|
||||
fullWidth
|
||||
type="number"
|
||||
value={String(form.port)}
|
||||
onChange={(port) => setForm({ ...form, port: Number(port) || 22 })}
|
||||
isRequired
|
||||
inputMode="numeric"
|
||||
isInvalid={submitted && Boolean(fieldErrors.port)}
|
||||
value={portDraft}
|
||||
onChange={(value) => {
|
||||
setPortDraft(value);
|
||||
if (/^\d+$/.test(value.trim())) setForm((prev) => ({ ...prev, port: Number(value.trim()) }));
|
||||
}}
|
||||
>
|
||||
<Label>{t("managedNe.col.port")}</Label>
|
||||
<Input />
|
||||
{submitted && fieldErrors.port ? <span className="form-field-hint error-text">{fieldErrors.port}</span> : null}
|
||||
</TextField>
|
||||
<FieldSelect
|
||||
label={t("managedNe.col.protocol")}
|
||||
value={form.protocol}
|
||||
onChange={(e) => setForm({ ...form, protocol: e.target.value })}
|
||||
onChange={(e) => {
|
||||
const protocol = e.target.value;
|
||||
// Keep the well-known port in step with the protocol unless it was customised.
|
||||
const swapPort = protocol === "telnet" && portNum === 22 ? 23 : protocol === "ssh" && portNum === 23 ? 22 : 0;
|
||||
setForm((prev) => ({ ...prev, protocol, ...(swapPort ? { port: swapPort } : {}) }));
|
||||
if (swapPort) setPortDraft(String(swapPort));
|
||||
}}
|
||||
>
|
||||
<option value="ssh">ssh</option>
|
||||
<option value="telnet">telnet</option>
|
||||
|
|
@ -201,11 +232,13 @@ export function ManagedNeFormDialog({
|
|||
<TextField
|
||||
fullWidth
|
||||
isRequired
|
||||
isInvalid={submitted && Boolean(fieldErrors.username)}
|
||||
value={form.username}
|
||||
onChange={(username) => setForm({ ...form, username })}
|
||||
>
|
||||
<Label>{t("managedNe.col.user")}</Label>
|
||||
<Input />
|
||||
{submitted && fieldErrors.username ? <span className="form-field-hint error-text">{fieldErrors.username}</span> : null}
|
||||
</TextField>
|
||||
<TextField
|
||||
fullWidth
|
||||
|
|
@ -279,7 +312,7 @@ export function ManagedNeFormDialog({
|
|||
{saveMutation.isError ? (
|
||||
<Alert status="danger">
|
||||
<Alert.Content>
|
||||
<Alert.Description>{String(saveMutation.error)}</Alert.Description>
|
||||
<Alert.Description>{managedNeErrorText(saveMutation.error, t)}</Alert.Description>
|
||||
</Alert.Content>
|
||||
</Alert>
|
||||
) : null}
|
||||
|
|
@ -291,7 +324,11 @@ export function ManagedNeFormDialog({
|
|||
<Button
|
||||
variant="primary"
|
||||
isDisabled={saveMutation.isPending}
|
||||
onPress={() => saveMutation.mutate()}
|
||||
onPress={() => {
|
||||
setSubmitted(true);
|
||||
if (hasFieldErrors) return;
|
||||
saveMutation.mutate();
|
||||
}}
|
||||
>
|
||||
{saveMutation.isPending ? t("managedNe.form.saving") : t("managedNe.form.save")}
|
||||
</Button>
|
||||
|
|
|
|||
19
web/src/features/managed-ne/lib/errors.ts
Normal file
19
web/src/features/managed-ne/lib/errors.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { formatErr } from "../../../services/api";
|
||||
|
||||
type Translate = (key: string, vars?: Record<string, string | number>) => string;
|
||||
|
||||
/** Map API detail codes such as `ip_address_exists` or `hop_password_required: a,b` to localized text. */
|
||||
export function managedNeErrorText(err: unknown, t: Translate): string {
|
||||
const raw = formatErr(err);
|
||||
const matched = /^([a-z_]+)(?::\s*([\s\S]*))?$/.exec(raw.trim());
|
||||
if (!matched) return raw;
|
||||
const key = `managedNe.errors.${matched[1]}`;
|
||||
const template = t(key);
|
||||
if (template === key) return raw;
|
||||
const detail = (matched[2] || "").trim();
|
||||
if (detail) return template.replace(/\{\{detail\}\}/g, detail);
|
||||
// No detail from the API: drop the "(…{{detail}})" or ": {{detail}}" part of the message.
|
||||
return template
|
||||
.replace(/\s*[（(][^（()）]*\{\{detail\}\}[）)]/g, "")
|
||||
.replace(/\s*[:：]\s*\{\{detail\}\}/g, "");
|
||||
}
|
||||
|
|
@ -30,6 +30,26 @@ export type ManagedNeFormState = {
|
|||
exec_policy: "readonly" | "linux_shell" | "unrestricted";
|
||||
};
|
||||
|
||||
const IPV4_RE = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;
|
||||
const HOSTNAME_RE = /^(?=.{1,253}$)[A-Za-z0-9_][A-Za-z0-9_-]{0,62}(\.[A-Za-z0-9_][A-Za-z0-9_-]{0,62})*\.?$/;
|
||||
|
||||
/** IPv4 / IPv6 literal or DNS hostname; mirrors the API's `invalid_ip_address` check. */
|
||||
export function isValidMgmtAddress(value: string): boolean {
|
||||
const text = value.trim();
|
||||
if (!text) return false;
|
||||
if (IPV4_RE.test(text)) return true;
|
||||
if (/^[0-9.]+$/.test(text)) return false;
|
||||
if (text.includes(":")) {
|
||||
try {
|
||||
new URL(`http://[${text}]/`);
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return HOSTNAME_RE.test(text);
|
||||
}
|
||||
|
||||
export function deviceTypeForVendor(vendor: string): string {
|
||||
if (vendor === "ZTE") return "zte_zxros";
|
||||
if (vendor === "Huawei") return "huawei";
|
||||
|
|
|
|||
|
|
@ -2,22 +2,18 @@ import { useMemo, type ReactNode } from "react";
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Button } from "@heroui/react";
|
||||
import { useI18n } from "../../i18n";
|
||||
import { WorkbenchCardIcon } from "./components/WorkbenchCardIcon";
|
||||
import { WorkbenchModules, type DisplaySection } from "./components/WorkbenchModules";
|
||||
import { ConsoleIcon } from "./components/ConsoleIcon";
|
||||
import { modulesInSection, type ModuleDefinition, type WorkbenchSection } from "../../config/modules";
|
||||
import { openOrFocusModule } from "../../utils/moduleWindows";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
import { fetchFabricSummary, fetchManagedNeStats, fetchOpsTasks, fetchRuntimeMetrics, fetchTopologyTree, type OpsTaskItem } from "../../services/api";
|
||||
import { formatSystemTime } from "../../utils/time";
|
||||
import { parseApiTime } from "../../utils/time";
|
||||
import { isUmeWorldContainer, isWorldDrillFolder } from "../topology/lib/treeUtils";
|
||||
import type { TopologyTreeFolderItem } from "../../types";
|
||||
|
||||
const SECTIONS: WorkbenchSection[] = ["monitoring", "operations", "system"];
|
||||
|
||||
type DisplaySection = {
|
||||
key: "operations" | "system";
|
||||
mods: ModuleDefinition[];
|
||||
};
|
||||
|
||||
function formatCount(n: number | string): string {
|
||||
if (typeof n === "string") return n;
|
||||
if (!Number.isFinite(n)) return "—";
|
||||
|
|
@ -32,20 +28,13 @@ function formatAgeSec(sec: number | null | undefined): string {
|
|||
const n = Math.max(0, sec);
|
||||
if (n < 60) return `${Math.round(n)}s`;
|
||||
if (n < 3600) return `${Math.max(1, Math.round(n / 60))}m`;
|
||||
return `${(n / 3600).toFixed(n >= 10 ? 0 : 1)}h`;
|
||||
return `${(n / 3600).toFixed(n >= 10 * 3600 ? 0 : 1)}h`;
|
||||
}
|
||||
|
||||
function formatCompactTime(value: string | null | undefined): string {
|
||||
if (!value) return "—";
|
||||
const full = formatSystemTime(value);
|
||||
if (!full) return "—";
|
||||
// Keep date+time but drop seconds when present: "2026/9/12 15:42:01" → "9/12 15:42"
|
||||
const m = full.match(/(\d{1,4}[/-]\d{1,2}[/-]\d{1,2})\s+(\d{1,2}:\d{2})(?::\d{2})?/);
|
||||
if (m) {
|
||||
const date = m[1].replace(/^\d{4}[/-]/, "");
|
||||
return `${date} ${m[2]}`;
|
||||
}
|
||||
return full;
|
||||
const date = parseApiTime(value);
|
||||
if (!date) return "—";
|
||||
return `${date.toLocaleDateString(undefined, { month: "numeric", day: "numeric" })} ${date.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", hour12: false })}`;
|
||||
}
|
||||
|
||||
const FLEET_TONE_COLOR: Record<"ok" | "mid" | "warn" | "bad" | "muted", string> = {
|
||||
|
|
@ -121,7 +110,8 @@ function FleetDonut({
|
|||
<div
|
||||
className="wb-fleet__donut"
|
||||
style={{ background: buildDonutGradient(parts) }}
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
aria-label={`${center} ${unit ?? ""}`.trim()}
|
||||
>
|
||||
<div className="wb-fleet__donut-hole">
|
||||
<div className="wb-fleet__donut-value">{center}</div>
|
||||
|
|
@ -131,115 +121,15 @@ function FleetDonut({
|
|||
);
|
||||
}
|
||||
|
||||
const SCHED_DISC_COLORS = ["#38bdf8", "#22d3ee", "#818cf8", "#34d399"];
|
||||
|
||||
function polarPoint(cx: number, cy: number, r: number, deg: number): [number, number] {
|
||||
const rad = ((deg - 90) * Math.PI) / 180;
|
||||
return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
|
||||
}
|
||||
|
||||
function donutSlicePath(
|
||||
cx: number,
|
||||
cy: number,
|
||||
rOuter: number,
|
||||
rInner: number,
|
||||
startDeg: number,
|
||||
endDeg: number,
|
||||
): string {
|
||||
const sweep = endDeg - startDeg;
|
||||
const large = sweep > 180 ? 1 : 0;
|
||||
const [x1, y1] = polarPoint(cx, cy, rOuter, startDeg);
|
||||
const [x2, y2] = polarPoint(cx, cy, rOuter, endDeg);
|
||||
const [x3, y3] = polarPoint(cx, cy, rInner, endDeg);
|
||||
const [x4, y4] = polarPoint(cx, cy, rInner, startDeg);
|
||||
return [
|
||||
`M ${x1.toFixed(2)} ${y1.toFixed(2)}`,
|
||||
`A ${rOuter} ${rOuter} 0 ${large} 1 ${x2.toFixed(2)} ${y2.toFixed(2)}`,
|
||||
`L ${x3.toFixed(2)} ${y3.toFixed(2)}`,
|
||||
`A ${rInner} ${rInner} 0 ${large} 0 ${x4.toFixed(2)} ${y4.toFixed(2)}`,
|
||||
"Z",
|
||||
].join(" ");
|
||||
}
|
||||
|
||||
type SchedDiscItem = {
|
||||
key: string;
|
||||
label: string;
|
||||
on: boolean;
|
||||
on: boolean | null;
|
||||
age: string;
|
||||
moduleId: string;
|
||||
path: string;
|
||||
};
|
||||
|
||||
function SchedDartDisc({
|
||||
items,
|
||||
center,
|
||||
unit,
|
||||
onSelect,
|
||||
}: {
|
||||
items: SchedDiscItem[];
|
||||
center: ReactNode;
|
||||
unit?: ReactNode;
|
||||
onSelect: (item: SchedDiscItem) => void;
|
||||
}) {
|
||||
// Match FleetDonut footprint (84px) so the three FLEET cards share one visual rhythm.
|
||||
const size = 84;
|
||||
const cx = size / 2;
|
||||
const cy = size / 2;
|
||||
const rOuter = 39;
|
||||
const rInner = 25;
|
||||
const gap = items.length > 1 ? 2.5 : 0;
|
||||
const slice = items.length > 0 ? 360 / items.length : 360;
|
||||
|
||||
return (
|
||||
<div className="wb-fleet__donut wb-fleet__donut--dart">
|
||||
<svg
|
||||
className="wb-fleet__dart"
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
width={size}
|
||||
height={size}
|
||||
role="group"
|
||||
aria-label={typeof unit === "string" ? unit : "schedulers"}
|
||||
>
|
||||
{items.map((item, i) => {
|
||||
const start = i * slice + gap / 2;
|
||||
const end = (i + 1) * slice - gap / 2;
|
||||
const color = item.on
|
||||
? SCHED_DISC_COLORS[i % SCHED_DISC_COLORS.length]
|
||||
: "#475569";
|
||||
return (
|
||||
<path
|
||||
key={item.key}
|
||||
className={`wb-fleet__dart-slice${item.on ? " is-on" : ""}`}
|
||||
d={donutSlicePath(cx, cy, rOuter, rInner, start, end)}
|
||||
fill={color}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={item.label}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelect(item);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onSelect(item);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<title>{`${item.label} · ${item.on ? "ON" : "OFF"} · ${item.age}`}</title>
|
||||
</path>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
<div className="wb-fleet__donut-hole wb-fleet__donut-hole--dart">
|
||||
<div className="wb-fleet__donut-value">{center}</div>
|
||||
{unit ? <div className="wb-fleet__donut-unit">{unit}</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function topLevelRegions(root: TopologyTreeFolderItem | null | undefined): TopologyTreeFolderItem[] {
|
||||
if (!root) return [];
|
||||
return (root.children || []).filter((c) => {
|
||||
|
|
@ -558,17 +448,20 @@ export function WorkbenchPage() {
|
|||
return slices;
|
||||
}, [topoTreeQuery.data, fabricNodes]);
|
||||
|
||||
const memValue =
|
||||
memTotal > 0 ? `${memPct}% · ${formatBytes(memUsed)}` : `${memPct}%`;
|
||||
const storageValue = storageOk ? formatBytesCompact(storageUsed) : "—";
|
||||
const metricsPlaceholder = metricsQuery.isLoading ? "…" : "—";
|
||||
const hostOk = Boolean(host && !host.error);
|
||||
const memValue = hostOk
|
||||
? memTotal > 0 ? `${memPct}% · ${formatBytes(memUsed)}` : `${memPct}%`
|
||||
: metricsPlaceholder;
|
||||
const storageValue = storageOk ? formatBytesCompact(storageUsed) : metricsPlaceholder;
|
||||
|
||||
const dash = (v: number | string) => (canReadFleet ? v : "—");
|
||||
const dash = (v: number | string) => (canReadFleet && neStatsQuery.data ? v : neStatsQuery.isLoading ? "…" : "—");
|
||||
const tickAge = (sec?: number | null) => formatAgeSec(sec ?? null);
|
||||
|
||||
const schedRows: SchedDiscItem[] = [
|
||||
{
|
||||
key: "config",
|
||||
on: schedConfigOn,
|
||||
on: schedulers && !metricsQuery.isError ? schedConfigOn : null,
|
||||
label: t("workbench.fleetSchedConfig"),
|
||||
age: tickAge(schedulers?.config_sync?.last_tick_age_sec),
|
||||
moduleId: "network",
|
||||
|
|
@ -576,7 +469,7 @@ export function WorkbenchPage() {
|
|||
},
|
||||
{
|
||||
key: "lldp",
|
||||
on: schedLldpOn,
|
||||
on: schedulers && !metricsQuery.isError ? schedLldpOn : null,
|
||||
label: t("workbench.fleetSchedLldp"),
|
||||
age: tickAge(schedulers?.lldp_collect?.last_tick_age_sec),
|
||||
moduleId: "network",
|
||||
|
|
@ -584,7 +477,7 @@ export function WorkbenchPage() {
|
|||
},
|
||||
{
|
||||
key: "port",
|
||||
on: schedPortOn,
|
||||
on: schedulers && !metricsQuery.isError ? schedPortOn : null,
|
||||
label: t("workbench.fleetSchedPort"),
|
||||
age: tickAge(schedulers?.port_traffic?.last_tick_age_sec),
|
||||
moduleId: "network",
|
||||
|
|
@ -592,7 +485,7 @@ export function WorkbenchPage() {
|
|||
},
|
||||
{
|
||||
key: "ne",
|
||||
on: schedNeOn,
|
||||
on: schedulers && !metricsQuery.isError ? schedNeOn : null,
|
||||
label: t("workbench.fleetSchedNeCollect"),
|
||||
age: tickAge(schedulers?.ne_collect?.last_tick_age_sec),
|
||||
moduleId: "network",
|
||||
|
|
@ -600,80 +493,45 @@ export function WorkbenchPage() {
|
|||
},
|
||||
];
|
||||
const schedOnCount = schedRows.filter((r) => r.on).length;
|
||||
const refreshing = [metricsQuery, opsQuery, neStatsQuery, fabricQuery, topoTreeQuery].some((query) => query.isFetching);
|
||||
const refreshConsole = () => {
|
||||
void metricsQuery.refetch();
|
||||
void opsQuery.refetch();
|
||||
if (canReadFleet) {
|
||||
void neStatsQuery.refetch();
|
||||
void fabricQuery.refetch();
|
||||
void topoTreeQuery.refetch();
|
||||
}
|
||||
};
|
||||
const healthKnown = Boolean(metrics && hostOk && !metricsQuery.isError);
|
||||
const healthTone = !healthKnown ? "is-unknown" : healthBusy ? "is-busy" : "is-ok";
|
||||
const healthLabel = !healthKnown ? t("workbench.kpi.healthUnknown") : healthBusy ? t("workbench.kpi.healthWarn") : t("workbench.kpi.healthOk");
|
||||
const taskValue = opsQuery.isLoading ? "…" : opsQuery.isError ? "—" : formatCount(activeTasks);
|
||||
const schedValue = metricsQuery.isLoading ? "…" : !schedulers || metricsQuery.isError ? "—" : `${schedOnCount}/${schedRows.length}`;
|
||||
|
||||
return (
|
||||
<div className="workbench workbench--console">
|
||||
<header className="wb-head">
|
||||
<div className="wb-head__title-row">
|
||||
<h1 className="wb-head__title">{t("workbench.title")}</h1>
|
||||
<span className={`wb-head__health${healthBusy ? " is-busy" : " is-ok"}`}>
|
||||
<span className="wb-head__health-dot" aria-hidden="true" />
|
||||
{healthBusy
|
||||
? t("workbench.kpi.healthWarn")
|
||||
: metrics
|
||||
? t("workbench.kpi.healthOk")
|
||||
: t("workbench.kpi.healthUnknown")}
|
||||
</span>
|
||||
<div>
|
||||
<div className="wb-head__title-row">
|
||||
<h1 className="wb-head__title">{t("workbench.consoleTitle")}</h1>
|
||||
<span className={`wb-head__health ${healthTone}`}><span className="wb-head__health-dot" aria-hidden="true" />{healthLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="wb-head__actions">
|
||||
<span className="wb-head__updated">{metricsQuery.dataUpdatedAt ? t("workbench.refreshedAt", { time: new Date(metricsQuery.dataUpdatedAt).toLocaleTimeString(undefined, { hour12: false }) }) : t("workbench.awaitingData")}</span>
|
||||
<Button size="sm" variant="outline" className="wb-refresh" isDisabled={refreshing} onPress={refreshConsole}><span className={refreshing ? "wb-refresh__icon is-spinning" : "wb-refresh__icon"}><ConsoleIcon kind="refresh" /></span>{t("workbench.refresh")}</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="wb-strip wb-panel" aria-label={t("workbench.statusTitle")}>
|
||||
<div className="wb-strip__row">
|
||||
<span className="wb-strip__tag">{t("workbench.hostHealth")}</span>
|
||||
<StatLine label={t("workbench.gauge.cpu")} value={`${cpuPct}%`} pct={cpuPct} />
|
||||
<StatLine label={t("workbench.gauge.mem")} value={memValue} pct={memPct} />
|
||||
<StatLine
|
||||
label={t("workbench.gauge.storage")}
|
||||
value={storageValue}
|
||||
muted={!storageOk}
|
||||
/>
|
||||
<span className="wb-strip__divider" aria-hidden="true" />
|
||||
<span className="wb-strip__tag wb-strip__tag--soft">{t("workbench.channels")}</span>
|
||||
<StatLine
|
||||
label={t("workbench.gauge.cli")}
|
||||
value={`${cliUsed}/${cliLimit}`}
|
||||
pct={cliPct}
|
||||
/>
|
||||
<StatLine
|
||||
label={t("workbench.gauge.db")}
|
||||
value={`${dbOut}/${dbSize}`}
|
||||
pct={dbPct}
|
||||
/>
|
||||
<StatLine
|
||||
label={t("workbench.gauge.webcrt")}
|
||||
value={`${webUsed}/${webMax}`}
|
||||
pct={webPct}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="wb-body">
|
||||
<div className="wb-main">
|
||||
<section className="wb-modules wb-panel" aria-label={t("workbench.modules")}>
|
||||
{displaySections.map((section) => (
|
||||
<div key={section.key} className={`wb-section wb-section--${section.key}`}>
|
||||
<h2 className="wb-section__title">{t(`workbench.${section.key}`)}</h2>
|
||||
<div className="wb-tiles">
|
||||
{section.mods.map((mod) => (
|
||||
<Button
|
||||
key={mod.moduleId}
|
||||
variant="ghost"
|
||||
className={`wb-tile wb-tile--${mod.iconTone}`}
|
||||
aria-label={t("workbench.openModule")}
|
||||
onPress={() => openOrFocusModule({ moduleId: mod.moduleId, path: mod.path })}
|
||||
>
|
||||
<WorkbenchCardIcon tone={mod.iconTone} kind={mod.iconKind} />
|
||||
<span className="wb-tile__label">{t(mod.labelKey)}</span>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
<WorkbenchModules sections={displaySections} />
|
||||
|
||||
<section className="wb-fleet wb-panel" aria-label={t("workbench.fleet")}>
|
||||
<div className="wb-fleet__head">
|
||||
<h2 className="wb-fleet__title">{t("workbench.fleet")}</h2>
|
||||
<span className="wb-fleet__live"><span aria-hidden="true" />{t("workbench.autoRefresh")}</span>
|
||||
</div>
|
||||
<div className="wb-fleet__grid">
|
||||
<button
|
||||
|
|
@ -685,7 +543,7 @@ export function WorkbenchPage() {
|
|||
<div className="wb-fleet__card-top">
|
||||
<div className="wb-fleet__card-label">{t("workbench.fleetNe")}</div>
|
||||
<span className="wb-fleet__card-badge">
|
||||
{canReadFleet ? `${t("workbench.fleetNeKnown")} ${neKnownPct}%` : "—"}
|
||||
{neStatsQuery.isError ? t("workbench.loadFailed") : canReadFleet && neStatsQuery.data ? `${t("workbench.fleetNeKnown")} ${neKnownPct}%` : "—"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="wb-fleet__viz">
|
||||
|
|
@ -746,7 +604,7 @@ export function WorkbenchPage() {
|
|||
))
|
||||
) : (
|
||||
<em>
|
||||
{t("workbench.fleetNeNoTag")} {canReadFleet ? neNoTag : "—"}
|
||||
{t("workbench.fleetNeNoTag")} {dash(neNoTag)}
|
||||
</em>
|
||||
)}
|
||||
</span>
|
||||
|
|
@ -762,7 +620,7 @@ export function WorkbenchPage() {
|
|||
<div className="wb-fleet__card-top">
|
||||
<div className="wb-fleet__card-label">{t("workbench.fleetTopo")}</div>
|
||||
<span className="wb-fleet__card-badge">
|
||||
{canReadFleet
|
||||
{fabricQuery.isError || topoTreeQuery.isError ? t("workbench.loadFailed") : canReadFleet
|
||||
? `${formatCount(fabricEdges)} ${t("workbench.fleetTopoEdges")}`
|
||||
: "—"}
|
||||
</span>
|
||||
|
|
@ -775,15 +633,15 @@ export function WorkbenchPage() {
|
|||
? "—"
|
||||
: fabricQuery.isLoading || topoTreeQuery.isLoading
|
||||
? "…"
|
||||
: formatCount(fabricNodes)
|
||||
: fabricQuery.isError ? "—" : formatCount(fabricNodes)
|
||||
}
|
||||
unit={t("workbench.fleetTopoNodes")}
|
||||
/>
|
||||
<div className="wb-fleet__rows">
|
||||
{(canReadFleet ? regionSlices : []).length === 0 ? (
|
||||
<div className="wb-fleet__row">
|
||||
<span>{t("workbench.fleetTopoNoRegion")}</span>
|
||||
<strong>{dash(formatCount(fabricNodes))}</strong>
|
||||
<span>{fabricQuery.isError || topoTreeQuery.isError ? t("workbench.loadFailed") : t("workbench.fleetTopoNoRegion")}</span>
|
||||
<strong>{canReadFleet && fabricQuery.data ? formatCount(fabricNodes) : "—"}</strong>
|
||||
</div>
|
||||
) : (
|
||||
(canReadFleet ? regionSlices : []).map((s) => (
|
||||
|
|
@ -822,41 +680,16 @@ export function WorkbenchPage() {
|
|||
|
||||
<div
|
||||
className="wb-fleet__card wb-fleet__card--sched"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() =>
|
||||
openOrFocusModule({
|
||||
moduleId: "network",
|
||||
path: "/network/tasks/port-traffic/wall",
|
||||
})
|
||||
}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
openOrFocusModule({
|
||||
moduleId: "network",
|
||||
path: "/network/tasks/port-traffic/wall",
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="wb-fleet__card-top">
|
||||
<div className="wb-fleet__card-label">{t("workbench.fleetSched")}</div>
|
||||
<span className={`wb-fleet__card-badge${schedStale ? " is-warn" : " is-ok"}`}>
|
||||
{schedStale ? t("workbench.fleetSchedStale") : t("workbench.fleetSchedFresh")}
|
||||
<span className="wb-fleet__card-badge">
|
||||
{schedValue} · {t("workbench.enabledSchedulers")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="wb-fleet__viz">
|
||||
<SchedDartDisc
|
||||
items={schedRows}
|
||||
center={`${schedOnCount}/${schedRows.length}`}
|
||||
unit={t("workbench.fleetSchedOn")}
|
||||
onSelect={(row) =>
|
||||
openOrFocusModule({ moduleId: row.moduleId, path: row.path })
|
||||
}
|
||||
/>
|
||||
<div className="wb-fleet__rows">
|
||||
{schedRows.map((row, i) => (
|
||||
{schedRows.map((row) => (
|
||||
<button
|
||||
key={row.key}
|
||||
type="button"
|
||||
|
|
@ -868,19 +701,13 @@ export function WorkbenchPage() {
|
|||
>
|
||||
<span className="wb-fleet__legend">
|
||||
<i
|
||||
className="wb-fleet__swatch"
|
||||
style={{
|
||||
background: row.on
|
||||
? SCHED_DISC_COLORS[i % SCHED_DISC_COLORS.length]
|
||||
: "#475569",
|
||||
boxShadow: "none",
|
||||
}}
|
||||
className={`wb-fleet__swatch${row.on ? " is-ok" : ""}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="wb-fleet__legend-text">{row.label}</span>
|
||||
</span>
|
||||
<span className={`wb-fleet__sched-state${row.on ? " is-ok" : " is-muted"}`}>
|
||||
{row.on ? "ON" : "OFF"}
|
||||
{!schedulers || metricsQuery.isError ? "—" : row.on ? "ON" : "OFF"}
|
||||
</span>
|
||||
<span className="wb-fleet__sched-age">{row.age}</span>
|
||||
</button>
|
||||
|
|
@ -906,7 +733,7 @@ export function WorkbenchPage() {
|
|||
<div className="wb-rail__head">
|
||||
<h2 className="wb-rail__title">
|
||||
{t("workbench.taskRail")}
|
||||
<span className="wb-rail__count">{activeTasks}</span>
|
||||
<span className="wb-rail__count">{taskValue}</span>
|
||||
</h2>
|
||||
<Button
|
||||
type="button"
|
||||
|
|
@ -919,8 +746,10 @@ export function WorkbenchPage() {
|
|||
</Button>
|
||||
</div>
|
||||
|
||||
{railTasks.length === 0 ? (
|
||||
<p className="wb-rail__empty">{t("workbench.taskRailEmpty")}</p>
|
||||
{opsQuery.isLoading ? <p className="wb-rail__empty" role="status">{t("workbench.loadingTasks")}</p> : opsQuery.isError ? (
|
||||
<div className="wb-rail__empty wb-rail__empty--error" role="status"><ConsoleIcon kind="activity" /><strong>{t("workbench.loadFailed")}</strong><Button size="sm" variant="ghost" onPress={() => void opsQuery.refetch()}>{t("workbench.retry")}</Button></div>
|
||||
) : railTasks.length === 0 ? (
|
||||
<div className="wb-rail__empty"><span className="wb-rail__empty-icon"><ConsoleIcon kind="check" /></span><strong>{t("workbench.taskRailEmpty")}</strong></div>
|
||||
) : (
|
||||
<ul className="wb-rail__list">
|
||||
{railTasks.map((row) => (
|
||||
|
|
@ -939,14 +768,32 @@ export function WorkbenchPage() {
|
|||
<span className="wb-rail__progress"> · {row.progress}</span>
|
||||
) : null}
|
||||
</span>
|
||||
<span className="wb-rail__time">{formatCompactTime(row.updated_at || row.started_at)}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<section className="wb-runtime wb-panel" aria-label={t("workbench.statusTitle")}>
|
||||
<div className="wb-runtime__head"><h2 className="wb-panel-title">{t("workbench.statusTitle")}</h2><ConsoleIcon kind="activity" /></div>
|
||||
{metricsQuery.isError && <p className="wb-runtime__error" role="status">{t("workbench.loadFailed")} · {t("workbench.retryHint")}</p>}
|
||||
<div className="wb-runtime__group wb-runtime__group--host"><h3>{t("workbench.hostHealth")}</h3>
|
||||
<StatLine label={t("workbench.gauge.cpu")} value={hostOk ? `${cpuPct}%` : metricsPlaceholder} pct={hostOk ? cpuPct : undefined} />
|
||||
<StatLine label={t("workbench.gauge.mem")} value={memValue} pct={hostOk ? memPct : undefined} />
|
||||
<StatLine label={t("workbench.gauge.storage")} value={storageValue} muted={!storageOk} />
|
||||
</div>
|
||||
<div className="wb-runtime__group wb-runtime__group--capacity"><h3>{t("workbench.channels")}</h3>
|
||||
<StatLine label={t("workbench.gauge.cli")} value={metrics?.cli_budget ? `${cliUsed}/${cliLimit}` : metricsPlaceholder} pct={metrics?.cli_budget ? cliPct : undefined} />
|
||||
<StatLine label={t("workbench.gauge.db")} value={metrics?.db_pool ? `${dbOut}/${dbSize}` : metricsPlaceholder} pct={metrics?.db_pool ? dbPct : undefined} />
|
||||
<StatLine label={t("workbench.gauge.webcrt")} value={metrics?.webcrt ? `${webUsed}/${webMax}` : metricsPlaceholder} pct={metrics?.webcrt ? webPct : undefined} />
|
||||
</div>
|
||||
<div className="wb-runtime__foot"><span>{t("workbench.kpi.uptime")}</span><strong>{metrics ? formatAgeSec(metrics.uptime_sec) : metricsPlaceholder}</strong></div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
14
web/src/features/workbench/components/ConsoleIcon.tsx
Normal file
14
web/src/features/workbench/components/ConsoleIcon.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
type Props = { kind: "arrow" | "search" | "refresh" | "activity" | "check" | "close" };
|
||||
|
||||
export function ConsoleIcon({ kind }: Props) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||
{kind === "arrow" && <path d="M5 12h14m-6-6 6 6-6 6" />}
|
||||
{kind === "search" && <><circle cx="10.5" cy="10.5" r="6.5" /><path d="m16 16 4 4" /></>}
|
||||
{kind === "refresh" && <><path d="M20 7v5h-5M4 17v-5h5" /><path d="M6 7a7 7 0 0 1 11-2l3 3M4 16l3 3a7 7 0 0 0 11-2" /></>}
|
||||
{kind === "activity" && <path d="M3 12h4l3-7 4 14 3-7h4" />}
|
||||
{kind === "check" && <><circle cx="12" cy="12" r="9" /><path d="m8 12 3 3 5-6" /></>}
|
||||
{kind === "close" && <path d="m6 6 12 12M6 18 18 6" />}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
70
web/src/features/workbench/components/WorkbenchModules.tsx
Normal file
70
web/src/features/workbench/components/WorkbenchModules.tsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import { useMemo, useState } from "react";
|
||||
import { Button } from "@heroui/react";
|
||||
import type { ModuleDefinition } from "../../../config/modules";
|
||||
import { useI18n } from "../../../i18n";
|
||||
import { openOrFocusModule } from "../../../utils/moduleWindows";
|
||||
import { ConsoleIcon } from "./ConsoleIcon";
|
||||
import { WorkbenchCardIcon } from "./WorkbenchCardIcon";
|
||||
|
||||
export type DisplaySection = { key: "operations" | "system"; mods: ModuleDefinition[] };
|
||||
|
||||
function moduleDescription(mod: ModuleDefinition, t: (key: string) => string) {
|
||||
const key = `workbench.descriptions.${mod.moduleId}`;
|
||||
const description = t(key);
|
||||
return description === key ? t(mod.titleKey) : description;
|
||||
}
|
||||
|
||||
export function WorkbenchModules({ sections }: { sections: DisplaySection[] }) {
|
||||
const { t } = useI18n();
|
||||
const [search, setSearch] = useState("");
|
||||
const filtered = useMemo(() => {
|
||||
const term = search.trim().toLocaleLowerCase();
|
||||
return sections.map((section) => ({
|
||||
...section,
|
||||
mods: section.mods.filter((mod) =>
|
||||
[t(mod.labelKey), moduleDescription(mod, t), mod.moduleId]
|
||||
.some((value) => value.toLocaleLowerCase().includes(term)),
|
||||
),
|
||||
})).filter((section) => section.mods.length > 0);
|
||||
}, [sections, search, t]);
|
||||
const count = filtered.reduce((sum, section) => sum + section.mods.length, 0);
|
||||
|
||||
return (
|
||||
<section className="wb-modules wb-panel" aria-label={t("workbench.modules")}>
|
||||
<div className="wb-modules__head">
|
||||
<div>
|
||||
<h2 className="wb-panel-title">{t("workbench.modules")}</h2>
|
||||
</div>
|
||||
<div className="wb-search">
|
||||
<ConsoleIcon kind="search" />
|
||||
<input
|
||||
type="search"
|
||||
value={search}
|
||||
aria-label={t("workbench.searchModules")}
|
||||
placeholder={t("workbench.searchModules")}
|
||||
onChange={(event) => setSearch(event.target.value)}
|
||||
onKeyDown={(event) => { if (event.key === "Escape") setSearch(""); }}
|
||||
/>
|
||||
{search && <Button isIconOnly size="sm" variant="ghost" className="wb-search__clear" aria-label={t("workbench.clearSearch")} onPress={() => setSearch("")}><ConsoleIcon kind="close" /></Button>}
|
||||
</div>
|
||||
</div>
|
||||
<span className="wb-sr-only" role="status">{t("workbench.moduleCount", { count })}</span>
|
||||
{filtered.map((section) => (
|
||||
<div key={section.key} className={`wb-section wb-section--${section.key}`}>
|
||||
<div className={section.key === "operations" ? "wb-sr-only" : "wb-section__head"}>
|
||||
<h3 className="wb-section__title">{t(`workbench.${section.key}`)}</h3>
|
||||
</div>
|
||||
<div className="wb-tiles">
|
||||
{section.mods.map((mod) => (
|
||||
<Button key={mod.moduleId} variant="ghost" className={`wb-tile wb-tile--${mod.iconTone}`} aria-label={`${t(mod.labelKey)} · ${t("workbench.openModule")}`} onPress={() => openOrFocusModule({ moduleId: mod.moduleId, path: mod.path })}>
|
||||
<WorkbenchCardIcon tone={mod.iconTone} kind={mod.iconKind} />
|
||||
<span className="wb-tile__label">{t(mod.labelKey)}</span>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{count === 0 && <div className="wb-modules__empty"><ConsoleIcon kind="search" /><p>{t("workbench.noModules")}</p><Button size="sm" variant="ghost" onPress={() => setSearch("")}>{t("workbench.clearSearch")}</Button></div>}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -18,6 +18,10 @@ const managedNe = {
|
|||
batchDeleteDone: "Deleted {{n}} network element(s)",
|
||||
batchDeleteSelectRequired: "Select network elements to delete",
|
||||
keywordPh: "name / IP / user / tags",
|
||||
emptyFiltered: "No NEs match the current filters. Adjust or clear them.",
|
||||
selectedCount: "{{n}} selected",
|
||||
clearSelection: "Clear selection",
|
||||
loadFailed: "Failed to load NEs: {{error}}",
|
||||
allVendors: "All vendors",
|
||||
allConnectStatus: "All connect status",
|
||||
stats: {
|
||||
|
|
@ -38,6 +42,9 @@ const managedNe = {
|
|||
proxyDone: "Proxy applied to {{n}} NE(s)",
|
||||
testDone: "Connect-test submitted for {{n}} NE(s)",
|
||||
loadingIds: "Loading…",
|
||||
noMatchingNe: "No NEs in the selected scope",
|
||||
scopeCount: "Applies to {{n}} NEs",
|
||||
cardFilterHint: "Click a card to filter the list below by tag",
|
||||
},
|
||||
col: {
|
||||
name: "Name",
|
||||
|
|
@ -106,6 +113,7 @@ const managedNe = {
|
|||
"[Bulk import]\n" +
|
||||
"· Required: device_type, ip, username, port, protocol, name, vendor (download template first)\n" +
|
||||
"· password may be empty for bastion-managed / later Batch add proxy; required for direct login\n" +
|
||||
"· Existing IPs are updated; a blank password keeps the saved one\n" +
|
||||
"· Flow: import → select rows → Batch add proxy\n\n" +
|
||||
"[Jump / bastion]\n" +
|
||||
"· Username template: {hop_user}@{target_user}@{target_ip} (bastion host filled separately)\n" +
|
||||
|
|
@ -115,6 +123,11 @@ const managedNe = {
|
|||
"· Storing passwords needs NETX_CREDENTIAL_SECRET_KEY\n" +
|
||||
"· Blank password on edit keeps current; use Details hop context after failed connect (no secrets)",
|
||||
importResult: {
|
||||
title: "Import result",
|
||||
failedTitle: "Failed rows ({{n}})",
|
||||
row: "Row",
|
||||
reason: "Reason",
|
||||
close: "Close",
|
||||
done: "Import done: {{inserted}} inserted, {{updated}} updated, {{failed}} failed row(s)",
|
||||
},
|
||||
form: {
|
||||
|
|
@ -130,6 +143,10 @@ const managedNe = {
|
|||
deleted: "Network element deleted",
|
||||
passwordRequired: "Password is required",
|
||||
passwordOptional: "leave blank to keep unchanged",
|
||||
ipRequired: "Management address is required",
|
||||
ipInvalid: "Invalid management address (expect an IPv4 / IPv6 address or hostname)",
|
||||
usernameRequired: "Username is required",
|
||||
portInvalid: "Port must be an integer from 1 to 65535",
|
||||
},
|
||||
hop: {
|
||||
sectionTitle: "Jump host / proxy",
|
||||
|
|
@ -196,6 +213,28 @@ const managedNe = {
|
|||
selectRequired: "Select network elements first",
|
||||
applying: "Applying…",
|
||||
apply: "Apply to selected",
|
||||
batchPasswordHint: "Leave the hop password blank to keep each NE's saved hop password; NEs that never had one are rejected.",
|
||||
},
|
||||
errors: {
|
||||
ip_address_exists: "This management address already exists",
|
||||
ip_address_required: "Management address is required",
|
||||
ip_required: "Management address is missing",
|
||||
invalid_ip_address: "Invalid management address (expect an IPv4 / IPv6 address or hostname)",
|
||||
invalid_port: "Port must be an integer from 1 to 65535",
|
||||
unsupported_device_type: "Unsupported device type",
|
||||
username_required: "Username is missing",
|
||||
password_required: "Manual mode requires the target NE password",
|
||||
hop_host_required: "Hop address is required",
|
||||
hop_username_required: "Hop username is required",
|
||||
hop_password_required: "Hop password is required (these NEs have none saved: {{detail}})",
|
||||
username_or_password_required: "Enter a username or a password",
|
||||
managed_ne_not_found: "NE not found or already deleted: {{detail}}",
|
||||
ids_required: "Select NEs first",
|
||||
credential_secret_key_not_configured: "Credential encryption key is not configured; passwords cannot be saved",
|
||||
import_missing_columns: "Import file is missing columns: {{detail}}",
|
||||
import_parse_failed: "Could not parse the import file: {{detail}}",
|
||||
empty_file: "Import file is empty",
|
||||
invalid_filter_field: "Unsupported filter column",
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,39 @@
|
|||
const workbench = {
|
||||
title: "Workbench",
|
||||
modules: "Modules",
|
||||
consoleTitle: "Operations console",
|
||||
consoleWelcome: "Welcome back, {{name}}. Monitor your network and get to work.",
|
||||
overview: "Operations overview",
|
||||
managedDevices: "Managed devices",
|
||||
connectedDevices: "{{count}} connected",
|
||||
topologyLinks: "{{count}} topology links",
|
||||
runningSchedulers: "Running schedulers",
|
||||
enabledSchedulers: "enabled",
|
||||
schedulerAuto: "Automatic collection and sync",
|
||||
moduleHint: "Choose a module to open its workspace tab",
|
||||
searchModules: "Search modules…",
|
||||
clearSearch: "Clear search",
|
||||
noModules: "No matching modules",
|
||||
fleetHint: "Connectivity, regions, and collection schedules",
|
||||
autoRefresh: "Auto refresh",
|
||||
refresh: "Refresh",
|
||||
awaitingData: "Waiting for an update",
|
||||
loadFailed: "Unable to load data",
|
||||
loadingTasks: "Loading tasks…",
|
||||
retry: "Retry",
|
||||
retryHint: "Try refreshing again shortly",
|
||||
taskRailEmptyHint: "Collection and sync tasks will appear here.",
|
||||
descriptions: {
|
||||
ume: "Sync devices and alarms",
|
||||
ne: "Inventory and connectivity tests",
|
||||
network: "Monitoring, collection, and cutover",
|
||||
topology: "Discover and edit network topology",
|
||||
webcrt: "Remote terminals and diagnostics",
|
||||
users: "Accounts and permissions",
|
||||
audit: "Task progress and activity logs",
|
||||
"api-keys": "Manage API access keys",
|
||||
sessions: "Review active login sessions",
|
||||
},
|
||||
sections: "Sections",
|
||||
moduleCount: "{{count}} modules",
|
||||
backToWorkbench: "Back to Workbench",
|
||||
|
|
@ -17,15 +50,15 @@ const workbench = {
|
|||
uptime: "API uptime",
|
||||
health: "System health",
|
||||
tasks: "Active tasks",
|
||||
healthOk: "OK",
|
||||
healthWarn: "CHECK",
|
||||
healthUnknown: "N/A",
|
||||
healthOk: "System healthy",
|
||||
healthWarn: "Needs attention",
|
||||
healthUnknown: "Status unknown",
|
||||
},
|
||||
statusTitle: "Runtime status",
|
||||
hostHealth: "HOST",
|
||||
hostHealth: "Host resources",
|
||||
platformCapacity: "Platform capacity",
|
||||
channels: "CHANNELS",
|
||||
fleet: "FLEET",
|
||||
channels: "Platform capacity",
|
||||
fleet: "Network & schedulers",
|
||||
fleetNe: "NE",
|
||||
fleetNeUnit: "units",
|
||||
fleetNeKnown: "Known",
|
||||
|
|
@ -36,7 +69,7 @@ const workbench = {
|
|||
fleetNeNoTag: "No tag",
|
||||
fleetNeTags: "Top tags",
|
||||
fleetTopo: "Topology",
|
||||
fleetTopoNodes: "nodes",
|
||||
fleetTopoNodes: "Nodes",
|
||||
fleetTopoEdges: "edges",
|
||||
fleetTopoOther: "Other regions",
|
||||
fleetTopoUnassigned: "Unassigned",
|
||||
|
|
@ -59,10 +92,10 @@ const workbench = {
|
|||
sidePanel: "Console side panel",
|
||||
consoleId: "OPS CONSOLE",
|
||||
refreshedAt: "Updated {{time}}",
|
||||
taskRail: "ACTIVE TASKS",
|
||||
taskRailAll: "ALL",
|
||||
taskRailEmpty: "No active tasks",
|
||||
taskTotal: "POOL {{count}}",
|
||||
taskRail: "Task activity",
|
||||
taskRailAll: "View all",
|
||||
taskRailEmpty: "No tasks running",
|
||||
taskTotal: "{{count}} tasks in total",
|
||||
announceTitle: "Announcements",
|
||||
recentTitle: "Recent operations",
|
||||
recentMore: "View all",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@ const managedNe = {
|
|||
batchDeleteDone: "已删除 {{n}} 台网元",
|
||||
batchDeleteSelectRequired: "请先勾选要删除的网元",
|
||||
keywordPh: "名称 / IP / 用户名 / 标签",
|
||||
emptyFiltered: "没有符合当前筛选条件的网元，请调整或清除筛选条件。",
|
||||
selectedCount: "已选 {{n}} 台",
|
||||
clearSelection: "清除选择",
|
||||
loadFailed: "网元列表加载失败：{{error}}",
|
||||
allVendors: "全部厂商",
|
||||
allConnectStatus: "全部连通状态",
|
||||
stats: {
|
||||
|
|
@ -37,6 +41,9 @@ const managedNe = {
|
|||
proxyDone: "已为 {{n}} 台网元提交代理配置",
|
||||
testDone: "已提交 {{n}} 台网元连通性测试",
|
||||
loadingIds: "加载中…",
|
||||
noMatchingNe: "所选范围内没有网元",
|
||||
scopeCount: "将作用于 {{n}} 台网元",
|
||||
cardFilterHint: "点击卡片可按标签筛选下方列表",
|
||||
},
|
||||
col: {
|
||||
name: "名称",
|
||||
|
|
@ -104,6 +111,7 @@ const managedNe = {
|
|||
"【批量导入】\n" +
|
||||
"· 必填列：device_type、ip、username、port、protocol、name、vendor（可先下载模板）\n" +
|
||||
"· password 可留空：直连需填；堡垒机托管或后续「批量添加代理」时可空\n" +
|
||||
"· 已存在的 IP 按更新处理；password 留空时保留已保存的密码\n" +
|
||||
"· 推荐：导入网元 → 勾选 →「批量添加代理」统一配置跳板\n\n" +
|
||||
"【跳板 / 堡垒机】\n" +
|
||||
"· 用户名模板：{hop_user}@{target_user}@{target_ip}（堡垒机地址另填跳板地址）\n" +
|
||||
|
|
@ -113,6 +121,11 @@ const managedNe = {
|
|||
"· 保存密码需配置 NETX_CREDENTIAL_SECRET_KEY\n" +
|
||||
"· 编辑时密码留空表示不改；失败请看「详情」中的 hop 上下文（不含密码）",
|
||||
importResult: {
|
||||
title: "导入结果",
|
||||
failedTitle: "失败明细（共 {{n}} 行）",
|
||||
row: "行号",
|
||||
reason: "原因",
|
||||
close: "关闭",
|
||||
done: "导入完成：新增 {{inserted}}，更新 {{updated}}，失败 {{failed}} 行",
|
||||
},
|
||||
form: {
|
||||
|
|
@ -128,6 +141,10 @@ const managedNe = {
|
|||
deleted: "网元已删除",
|
||||
passwordRequired: "请填写密码",
|
||||
passwordOptional: "留空则不修改",
|
||||
ipRequired: "请填写管理地址",
|
||||
ipInvalid: "管理地址格式不正确（应为 IPv4 / IPv6 地址或主机名）",
|
||||
usernameRequired: "请填写用户名",
|
||||
portInvalid: "端口须为 1–65535 的整数",
|
||||
},
|
||||
hop: {
|
||||
sectionTitle: "跳板 / 代理",
|
||||
|
|
@ -194,6 +211,28 @@ const managedNe = {
|
|||
selectRequired: "请先勾选要配置的网元",
|
||||
applying: "应用中…",
|
||||
apply: "应用到选中网元",
|
||||
batchPasswordHint: "跳板密码留空时沿用各网元已保存的跳板密码；从未保存过跳板密码的网元会被拒绝。",
|
||||
},
|
||||
errors: {
|
||||
ip_address_exists: "该管理地址已存在于网元管理中",
|
||||
ip_address_required: "请填写管理地址",
|
||||
ip_required: "缺少管理地址",
|
||||
invalid_ip_address: "管理地址格式不正确（应为 IPv4 / IPv6 地址或主机名）",
|
||||
invalid_port: "端口须为 1–65535 的整数",
|
||||
unsupported_device_type: "不支持的设备类型",
|
||||
username_required: "缺少用户名",
|
||||
password_required: "手动模式需填写目标网元密码",
|
||||
hop_host_required: "请填写跳板地址",
|
||||
hop_username_required: "请填写跳板用户名",
|
||||
hop_password_required: "跳板密码必填（以下网元未保存跳板密码：{{detail}}）",
|
||||
username_or_password_required: "用户名和密码至少填写一项",
|
||||
managed_ne_not_found: "网元不存在或已被删除：{{detail}}",
|
||||
ids_required: "请先选择网元",
|
||||
credential_secret_key_not_configured: "未配置凭据加密密钥，无法保存密码",
|
||||
import_missing_columns: "导入文件缺少列：{{detail}}",
|
||||
import_parse_failed: "导入文件解析失败：{{detail}}",
|
||||
empty_file: "导入文件为空",
|
||||
invalid_filter_field: "不支持的筛选列",
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,39 @@
|
|||
const workbench = {
|
||||
title: "工作台",
|
||||
modules: "可用模块",
|
||||
modules: "功能入口",
|
||||
consoleTitle: "运维控制台",
|
||||
consoleWelcome: "欢迎回来，{{name}}。掌握网络状态，快速开始运维工作。",
|
||||
overview: "运行概览",
|
||||
managedDevices: "托管网元",
|
||||
connectedDevices: "{{count}} 台已连通",
|
||||
topologyLinks: "{{count}} 条拓扑连线",
|
||||
runningSchedulers: "运行中调度",
|
||||
enabledSchedulers: "启用",
|
||||
schedulerAuto: "自动采集与同步",
|
||||
moduleHint: "选择模块，打开独立工作页签",
|
||||
searchModules: "搜索功能…",
|
||||
clearSearch: "清除搜索",
|
||||
noModules: "未找到匹配的功能",
|
||||
fleetHint: "网元连通性、区域分布与采集调度",
|
||||
autoRefresh: "自动更新",
|
||||
refresh: "刷新",
|
||||
awaitingData: "等待数据更新",
|
||||
loadFailed: "数据加载失败",
|
||||
loadingTasks: "正在加载任务…",
|
||||
retry: "重试",
|
||||
retryHint: "请稍后刷新重试",
|
||||
taskRailEmptyHint: "采集、同步等任务将在这里显示。",
|
||||
descriptions: {
|
||||
ume: "同步网元与告警数据",
|
||||
ne: "设备纳管与连通性测试",
|
||||
network: "监控、采集与业务割接",
|
||||
topology: "发现连接与编辑网络拓扑",
|
||||
webcrt: "远程终端与设备调试",
|
||||
users: "账户与访问权限",
|
||||
audit: "任务进度与操作记录",
|
||||
"api-keys": "管理 API 访问密钥",
|
||||
sessions: "查看登录与会话状态",
|
||||
},
|
||||
sections: "功能分区",
|
||||
moduleCount: "{{count}} 个模块",
|
||||
backToWorkbench: "返回工作台",
|
||||
|
|
@ -17,15 +50,15 @@ const workbench = {
|
|||
uptime: "API 运行时长",
|
||||
health: "系统健康",
|
||||
tasks: "进行中任务",
|
||||
healthOk: "OK",
|
||||
healthWarn: "CHECK",
|
||||
healthUnknown: "N/A",
|
||||
healthOk: "运行正常",
|
||||
healthWarn: "需要关注",
|
||||
healthUnknown: "状态未知",
|
||||
},
|
||||
statusTitle: "运行状态",
|
||||
hostHealth: "HOST",
|
||||
hostHealth: "主机资源",
|
||||
platformCapacity: "平台容量",
|
||||
channels: "CHANNELS",
|
||||
fleet: "FLEET",
|
||||
channels: "平台容量",
|
||||
fleet: "网络与调度",
|
||||
fleetNe: "网元",
|
||||
fleetNeUnit: "台",
|
||||
fleetNeKnown: "已知",
|
||||
|
|
@ -36,8 +69,8 @@ const workbench = {
|
|||
fleetNeNoTag: "无标签",
|
||||
fleetNeTags: "热门标签",
|
||||
fleetTopo: "拓扑",
|
||||
fleetTopoNodes: "节点",
|
||||
fleetTopoEdges: "边",
|
||||
fleetTopoNodes: "拓扑节点",
|
||||
fleetTopoEdges: "连线",
|
||||
fleetTopoOther: "其他区域",
|
||||
fleetTopoUnassigned: "未分区",
|
||||
fleetTopoNoRegion: "暂无区域",
|
||||
|
|
@ -53,16 +86,16 @@ const workbench = {
|
|||
fleetSchedOff: "OFF",
|
||||
fleetSchedMode: "模式",
|
||||
fleetSchedHeartbeat: "心跳",
|
||||
fleetSchedFresh: "新鲜",
|
||||
fleetSchedFresh: "心跳正常",
|
||||
fleetSchedStale: "过期",
|
||||
|
||||
sidePanel: "控制台侧栏",
|
||||
consoleId: "OPS CONSOLE",
|
||||
refreshedAt: "更新于 {{time}}",
|
||||
taskRail: "ACTIVE TASKS",
|
||||
taskRailAll: "ALL",
|
||||
taskRailEmpty: "No active tasks",
|
||||
taskTotal: "POOL {{count}}",
|
||||
taskRail: "任务动态",
|
||||
taskRailAll: "查看全部",
|
||||
taskRailEmpty: "当前没有运行中的任务",
|
||||
taskTotal: "共 {{count}} 个任务",
|
||||
announceTitle: "系统公告",
|
||||
recentTitle: "最近操作",
|
||||
recentMore: "查看全部",
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ export function AppLayout({ children }: Props) {
|
|||
refetchOnWindowFocus: false,
|
||||
});
|
||||
const activeTasks = opsTasksQuery.data?.active ?? 0;
|
||||
const activeTaskCount = opsTasksQuery.isLoading ? "…" : opsTasksQuery.isError ? "—" : activeTasks;
|
||||
|
||||
useAppWindowRegistration(pathname);
|
||||
|
||||
|
|
@ -66,15 +67,17 @@ export function AppLayout({ children }: Props) {
|
|||
<div className="app-brand__actions">
|
||||
{user ? (
|
||||
<div className="app-brand__actions-group">
|
||||
<Chip
|
||||
<Button
|
||||
size="sm"
|
||||
color={activeTasks > 0 ? "success" : "default"}
|
||||
variant="soft"
|
||||
className="conn-pill conn-pill--on-brand conn-pill--tasks cursor-pointer"
|
||||
onClick={() => openOrFocusModule({ moduleId: "audit", path: "/audit/tasks" })}
|
||||
variant="ghost"
|
||||
className="conn-pill conn-pill--on-brand conn-pill--tasks"
|
||||
aria-label={t("layout.activeTasks", { count: activeTaskCount })}
|
||||
onPress={() => openOrFocusModule({ moduleId: "audit", path: "/audit/tasks" })}
|
||||
>
|
||||
<Chip.Label>{t("layout.activeTasks", { count: activeTasks })}</Chip.Label>
|
||||
</Chip>
|
||||
<svg viewBox="0 0 20 20" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><path d="M3 5h14M3 10h10M3 15h7" /></svg>
|
||||
<span className="app-brand__tasks-text">{t("layout.activeTasks", { count: activeTaskCount })}</span>
|
||||
<span className="app-brand__tasks-count" aria-hidden="true">{activeTaskCount}</span>
|
||||
</Button>
|
||||
<Chip size="sm" variant="soft" className="conn-pill conn-pill--on-brand conn-pill--user" title={user.role}>
|
||||
<Chip.Label>{user.username}</Chip.Label>
|
||||
</Chip>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import type {
|
|||
ManagedNeListResponse,
|
||||
ManagedNeMeta,
|
||||
} from "../../types";
|
||||
import type { TableColumnFilters } from "../../types/tableFilters";
|
||||
import { appendColumnFilters } from "./tableFilters";
|
||||
import { ApiRequestError, apiDelete, apiGet, apiPatch, apiPost, authHeaders, fetchCreds, handleUnauthorized, parseApiResponse } from "./http";
|
||||
|
||||
export const fetchManagedNeMeta = () =>
|
||||
|
|
@ -46,11 +48,13 @@ export const fetchManagedNe = (params: {
|
|||
connectStatus: string;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
columnFilters?: TableColumnFilters;
|
||||
}) => {
|
||||
const p = new URLSearchParams();
|
||||
if (params.keyword) p.set("keyword", params.keyword);
|
||||
if (params.vendor) p.set("vendor", params.vendor);
|
||||
if (params.connectStatus) p.set("connect_status", params.connectStatus);
|
||||
appendColumnFilters(p, params.columnFilters);
|
||||
p.set("page", String(Math.max(1, params.page)));
|
||||
p.set("page_size", String(Math.max(1, Math.min(500, params.pageSize))));
|
||||
return apiGet<ManagedNeListResponse>(`/v1/managed-ne?${p.toString()}`);
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.app-brand__apps {
|
||||
|
|
@ -74,6 +75,9 @@
|
|||
color: rgba(255, 255, 255, 0.92);
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.02em;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.app-brand__actions {
|
||||
|
|
@ -103,3 +107,36 @@
|
|||
background: var(--nm-chrome, #e8eef6);
|
||||
color: var(--nm-text, var(--nx-line));
|
||||
}
|
||||
|
||||
.app--shell .app-brand .conn-pill.conn-pill--tasks::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.app--shell .app-brand .conn-pill--tasks {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-brand__tasks-count { display: none; }
|
||||
|
||||
.app--shell .app-brand .conn-pill--user .chip__label {
|
||||
max-width: 110px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.app--shell .app-brand { padding-inline: 12px; gap: 8px; }
|
||||
.app-brand__start { gap: 8px; }
|
||||
.app-brand__actions-group { gap: 4px; }
|
||||
.app--shell .app-brand .conn-pill--user .chip__label { max-width: 64px; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.app-brand__tasks-text { display: none; }
|
||||
.app-brand__tasks-count { display: inline; font-variant-numeric: tabular-nums; }
|
||||
.app--shell .app-brand .conn-pill--tasks { padding-inline: 7px; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,6 +84,47 @@
|
|||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
button.ne-tag-card {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.ne-tag-card > .ne-tag-card__title,
|
||||
button.ne-tag-card > .ne-tag-card__total {
|
||||
display: block;
|
||||
}
|
||||
|
||||
button.ne-tag-card:hover {
|
||||
border-color: rgb(var(--nx-accent-rgb) / 0.45);
|
||||
}
|
||||
|
||||
button.ne-tag-card:focus-visible {
|
||||
outline: 2px solid var(--nx-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
button.ne-tag-card.is-active {
|
||||
border-color: var(--nx-accent);
|
||||
box-shadow: inset 0 0 0 1px var(--nx-accent);
|
||||
}
|
||||
|
||||
.ne-selection-meta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--nx-text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ne-import-failures {
|
||||
max-height: 320px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ne-tag-card__title {
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -135,256 +135,7 @@ table,
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------- 3. Workbench */
|
||||
.app--shell .app-main:has(> .workbench) {
|
||||
background:
|
||||
radial-gradient(900px 380px at 12% -8%, rgb(var(--nx-accent-rgb) / 0.1), transparent 65%),
|
||||
radial-gradient(700px 320px at 100% 0%, rgb(52 211 153 / 0.05), transparent 60%),
|
||||
var(--nx-bg);
|
||||
}
|
||||
|
||||
.app--shell .workbench {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Soft gradient plate instead of the corner-bracket HUD frame. */
|
||||
.app--shell .wb-panel {
|
||||
border: 1px solid var(--nx-line);
|
||||
border-radius: var(--nx-radius-lg);
|
||||
background: linear-gradient(180deg, var(--nx-surface-2) 0%, var(--nx-surface-1) 100%);
|
||||
box-shadow: var(--nx-shadow-panel);
|
||||
}
|
||||
|
||||
.app--shell .wb-head__title {
|
||||
font-family: var(--nx-font-sans);
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
color: var(--nx-text-strong);
|
||||
}
|
||||
|
||||
.app--shell .wb-head__health {
|
||||
height: 24px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
font-family: var(--nx-font-sans);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* Section captions: sans, readable, with a small gradient bar. */
|
||||
.app--shell .wb-section__title,
|
||||
.app--shell .wb-fleet__title,
|
||||
.app--shell .wb-rail__title,
|
||||
.app--shell .wb-fleet__card-label {
|
||||
font-family: var(--nx-font-sans);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: none;
|
||||
color: var(--nx-text);
|
||||
}
|
||||
|
||||
.app--shell .wb-section__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app--shell .wb-section__title::before {
|
||||
content: "";
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
border-radius: 2px;
|
||||
background: var(--nx-gradient-accent);
|
||||
}
|
||||
|
||||
.app--shell .wb-strip__tag,
|
||||
.app--shell .wb-strip__tag--soft {
|
||||
font-size: 11px;
|
||||
color: var(--nx-text-faint);
|
||||
}
|
||||
|
||||
.app--shell .wb-stat__label {
|
||||
font-size: 12px;
|
||||
color: var(--nx-text-muted);
|
||||
}
|
||||
|
||||
.app--shell .wb-stat__value {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.app--shell .wb-stat__track {
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Content-height layout: no stretched empty panel above/below the tiles. */
|
||||
.app--shell .wb-body {
|
||||
flex: 0 0 auto;
|
||||
grid-template-columns: minmax(0, 1fr) clamp(320px, 26vw, 400px);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.app--shell .wb-main {
|
||||
height: auto;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.app--shell .wb-modules {
|
||||
flex: 0 0 auto;
|
||||
justify-content: flex-start;
|
||||
gap: 22px;
|
||||
padding: 20px 22px 24px;
|
||||
}
|
||||
|
||||
.app--shell .wb-tiles {
|
||||
grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.app--shell .app-main .wb-tile {
|
||||
min-height: 72px;
|
||||
padding: 14px 16px;
|
||||
gap: 14px;
|
||||
border: 1px solid var(--nx-line);
|
||||
border-radius: 10px;
|
||||
background: var(--nx-surface-2);
|
||||
transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.app--shell .app-main .wb-tile:hover,
|
||||
.app--shell .app-main .wb-tile:focus-visible {
|
||||
border-color: rgb(var(--nx-accent-rgb) / 0.6);
|
||||
background: linear-gradient(180deg, rgb(var(--nx-accent-rgb) / 0.16), var(--nx-surface-2));
|
||||
box-shadow: 0 6px 18px rgb(0 0 0 / 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.app--shell .wb-tile__label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--nx-text);
|
||||
}
|
||||
|
||||
.app--shell .wb-card__icon {
|
||||
--wb-icon: var(--nx-text-muted);
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
color: var(--wb-icon);
|
||||
background: color-mix(in oklab, var(--wb-icon) 14%, transparent);
|
||||
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wb-icon) 28%, transparent);
|
||||
}
|
||||
|
||||
.app--shell .wb-card__icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.app--shell .wb-card__icon--blue {
|
||||
--wb-icon: var(--nx-accent);
|
||||
}
|
||||
|
||||
.app--shell .wb-card__icon--green {
|
||||
--wb-icon: #34d399;
|
||||
}
|
||||
|
||||
.app--shell .wb-card__icon--amber {
|
||||
--wb-icon: var(--nx-warn);
|
||||
}
|
||||
|
||||
.app--shell .wb-card__icon--slate {
|
||||
--wb-icon: var(--nx-text-soft);
|
||||
}
|
||||
|
||||
.app--shell .wb-fleet {
|
||||
padding: 14px 16px 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.app--shell .wb-fleet__head {
|
||||
padding-bottom: 8px;
|
||||
border-bottom-color: var(--nx-line-soft);
|
||||
}
|
||||
|
||||
.app--shell .wb-fleet__grid {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.app--shell .wb-fleet__card {
|
||||
padding: 12px 12px 10px;
|
||||
border: 1px solid var(--nx-line);
|
||||
border-radius: 10px;
|
||||
background: rgb(var(--nx-ink-deep-rgb) / 0.45);
|
||||
}
|
||||
|
||||
.app--shell button.wb-fleet__card:hover,
|
||||
.app--shell button.wb-fleet__card:focus-visible,
|
||||
.app--shell .wb-fleet__card--sched:hover,
|
||||
.app--shell .wb-fleet__card--sched:focus-visible {
|
||||
border-color: rgb(var(--nx-accent-rgb) / 0.55);
|
||||
background: rgb(var(--nx-accent-rgb) / 0.1);
|
||||
}
|
||||
|
||||
.app--shell .wb-fleet__card-badge,
|
||||
.app--shell .wb-fleet__donut-unit,
|
||||
.app--shell .wb-fleet__foot,
|
||||
.app--shell .wb-fleet__row-age,
|
||||
.app--shell .wb-fleet__sched-age,
|
||||
.app--shell .wb-rail__meta,
|
||||
.app--shell .wb-rail__progress,
|
||||
.app--shell .wb-rail__empty {
|
||||
color: var(--nx-text-faint);
|
||||
}
|
||||
|
||||
.app--shell .wb-fleet__card-badge,
|
||||
.app--shell .wb-fleet__foot {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.app--shell .wb-rail {
|
||||
padding: 16px 16px 14px;
|
||||
}
|
||||
|
||||
.app--shell .wb-rail__count {
|
||||
border-radius: 999px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
background: var(--nx-accent-soft);
|
||||
color: var(--nx-accent-text);
|
||||
}
|
||||
|
||||
.app--shell .wb-rail__list {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app--shell .app-main button.wb-rail__item,
|
||||
.app--shell .wb-rail__item {
|
||||
padding: 11px 12px;
|
||||
border: 1px solid var(--nx-line);
|
||||
border-radius: 10px;
|
||||
background: rgb(var(--nx-ink-deep-rgb) / 0.45);
|
||||
}
|
||||
|
||||
.app--shell .app-main button.wb-rail__item:hover,
|
||||
.app--shell .app-main button.wb-rail__item:focus-visible {
|
||||
background: var(--nx-accent-soft);
|
||||
border-color: rgb(var(--nx-accent-rgb) / 0.5);
|
||||
}
|
||||
|
||||
.app--shell .wb-rail__item-title {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.app--shell .wb-rail__item-meta {
|
||||
font-size: 12px;
|
||||
color: var(--nx-text-muted);
|
||||
}
|
||||
/* Workbench styles are owned by pages/workbench.css. */
|
||||
|
||||
/* ---------------------------------------------------------- 4. Nav + panels */
|
||||
.app--shell .network-nav {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue