833 lines
68 KiB
JavaScript
833 lines
68 KiB
JavaScript
 
|
// IPAM Manager — UI-админка. Только визуализирует ответы /api/v1, бизнес-логики нет.
|
|||
|
|
const API = "/api/v1";
|
|||
|
|
const $ = (s) => document.querySelector(s);
|
|||
|
|
const esc = (v) => String(v ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c]));
|
|||
|
|
const fmtNum = (n) => new Intl.NumberFormat("ru-RU").format(n);
|
|||
|
|
const fmtDate = (iso) => (iso ? iso.replace("T", " ").slice(0, 16) : "—");
|
|||
|
|
const plural = (n, one, few, many) => {
|
|||
|
|
const m10 = n % 10, m100 = n % 100;
|
|||
|
|
return m10 === 1 && m100 !== 11 ? one : m10 >= 2 && m10 <= 4 && (m100 < 10 || m100 >= 20) ? few : many;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------------ icons */
|
|||
|
|
const ic = (inner, s = 16) => `<svg width="${s}" height="${s}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
|
|||
|
|
const I = {
|
|||
|
|
chevR: (s) => ic('<path d="m9 6 6 6-6 6"/>', s),
|
|||
|
|
chevD: (s) => ic('<path d="m6 9 6 6 6-6"/>', s),
|
|||
|
|
plus: () => ic('<path d="M12 5v14M5 12h14"/>'),
|
|||
|
|
search: () => ic('<circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>'),
|
|||
|
|
dots: () => ic('<circle cx="5" cy="12" r="1.3"/><circle cx="12" cy="12" r="1.3"/><circle cx="19" cy="12" r="1.3"/>'),
|
|||
|
|
close: () => ic('<path d="M6 6l12 12M18 6 6 18"/>'),
|
|||
|
|
edit: (s) => ic('<path d="M12 20h9M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4Z"/>', s),
|
|||
|
|
trash: (s) => ic('<path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/>', s),
|
|||
|
|
org: () => ic('<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9h4M7 13h4"/>'),
|
|||
|
|
gear: () => ic('<path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/><path d="M19.4 13a7.6 7.6 0 0 0 .1-1 7.6 7.6 0 0 0-.1-1l2-1.6-2-3.4-2.3.9a7.4 7.4 0 0 0-1.7-1l-.3-2.5h-4l-.3 2.5a7.4 7.4 0 0 0-1.7 1l-2.3-.9-2 3.4 2 1.6a7.6 7.6 0 0 0 0 2l-2 1.6 2 3.4 2.3-.9a7.4 7.4 0 0 0 1.7 1l.3 2.5h4l.3-2.5a7.4 7.4 0 0 0 1.7-1l2.3.9 2-3.4Z"/>'),
|
|||
|
|
refresh: () => ic('<path d="M20 12a8 8 0 1 1-2.3-5.7M20 4v5h-5"/>'),
|
|||
|
|
cog: () => ic('<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>'),
|
|||
|
|
trashJ: () => ic('<path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/>'),
|
|||
|
|
calendar: () => ic('<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/>'),
|
|||
|
|
copy: () => ic('<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/>'),
|
|||
|
|
globe: () => `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3.5 9h17M3.5 15h17"/><path d="M12 3a15 15 0 0 1 4 9 15 15 0 0 1-4 9"/><path d="M12 3a15 15 0 0 0-4 9 15 15 0 0 0 4 9"/></svg>`,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------------- state */
|
|||
|
|
const store = {
|
|||
|
|
get token() { return sessionStorage.getItem("ipam.token"); },
|
|||
|
|
set token(v) { v ? sessionStorage.setItem("ipam.token", v) : sessionStorage.removeItem("ipam.token"); },
|
|||
|
|
get orgId() { return Number(localStorage.getItem("ipam.org")) || null; },
|
|||
|
|
set orgId(v) { localStorage.setItem("ipam.org", v); },
|
|||
|
|
};
|
|||
|
|
let user = null;
|
|||
|
|
let orgs = [];
|
|||
|
|
let S = {}; // локальное состояние текущего экрана
|
|||
|
|
let menu = null; // открытое всплывающее меню {id, items:[{label,value,cls}], on}
|
|||
|
|
|
|||
|
|
/* --------------------------------------------------------------------- api */
|
|||
|
|
class ApiError extends Error {
|
|||
|
|
constructor(status, body) {
|
|||
|
|
super(body?.message || `Ошибка ${status}`);
|
|||
|
|
this.status = status;
|
|||
|
|
this.fields = body?.fields || {};
|
|||
|
|
this.body = body || {};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
async function api(path, { method = "GET", body, params } = {}) {
|
|||
|
|
const qs = params ? "?" + new URLSearchParams(Object.entries(params).filter(([, v]) => v !== "" && v != null)) : "";
|
|||
|
|
const res = await fetch(API + path + qs, {
|
|||
|
|
method,
|
|||
|
|
headers: { ...(body ? { "Content-Type": "application/json" } : {}), ...(store.token ? { Authorization: "Bearer " + store.token } : {}) },
|
|||
|
|
body: body ? JSON.stringify(body) : undefined,
|
|||
|
|
});
|
|||
|
|
if (res.status === 204) return null;
|
|||
|
|
const data = await res.json().catch(() => null);
|
|||
|
|
if (res.status === 401 && path !== "/auth/login") {
|
|||
|
|
store.token = null;
|
|||
|
|
location.hash = "#/login";
|
|||
|
|
throw new ApiError(401, { message: "Сессия истекла" });
|
|||
|
|
}
|
|||
|
|
if (!res.ok) throw new ApiError(res.status, data);
|
|||
|
|
return data;
|
|||
|
|
}
|
|||
|
|
function toast(msg, err = false) {
|
|||
|
|
const el = document.createElement("div");
|
|||
|
|
el.className = "toast" + (err ? " err" : "");
|
|||
|
|
el.textContent = msg;
|
|||
|
|
$("#toast-root").append(el);
|
|||
|
|
setTimeout(() => el.remove(), 3500);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* --------------------------------------------------------- shared fragments */
|
|||
|
|
const badge = (cls, text) => `<span class="badge ${cls}">${esc(text)}</span>`;
|
|||
|
|
const PREFIX_STATUS = { active: ["green", "Активен"], reserved: ["amber", "Резерв"], deprecated: ["red", "Устарел"] };
|
|||
|
|
const ADDR_STATUS = { assigned: ["green", "Назначен"], reserved: ["amber", "Резерв"], deprecated: ["red", "Устаревший"], free: ["", "Свободен"] };
|
|||
|
|
const utilColor = (p) => (p >= 90 ? ["#c62828", "#a32020"] : p >= 75 ? ["#d97706", "#7c4a00"] : ["#2450c8", "#58657a"]);
|
|||
|
|
const btn = (label, action, { cls = "", data = "", icon = "" } = {}) => `<button type="button" class="btn ${cls}" data-action="${action}" ${data}>${icon}${label}</button>`;
|
|||
|
|
const iconBtn = (icon, action, label, data = "", sm = false, disabled = false) =>
|
|||
|
|
`<button type="button" class="icon-btn${sm ? " sm" : ""}" data-action="${action}" aria-label="${esc(label)}" title="${esc(label)}" ${data} ${disabled ? "disabled" : ""}>${icon}</button>`;
|
|||
|
|
const searchBox = (value, placeholder, width) =>
|
|||
|
|
`<label class="search" style="width:${width}px"><span class="ico">${I.search()}</span><input type="search" id="q" data-input="q" placeholder="${esc(placeholder)}" aria-label="${esc(placeholder)}" value="${esc(value)}"></label>`;
|
|||
|
|
const currentOrg = () => orgs.find((o) => o.id === store.orgId);
|
|||
|
|
|
|||
|
|
function popMenu(id, items, extra = "") {
|
|||
|
|
if (menu?.id !== id) return "";
|
|||
|
|
return `<div class="pop ${extra}" role="menu">${items.map((it) => `<button type="button" role="menuitem" class="${it.cls || ""}" data-action="pick" data-menu="${id}" data-value="${esc(it.value)}">${esc(it.label)}</button>`).join("")}</div>`;
|
|||
|
|
}
|
|||
|
|
function filterBtn(id, label, items, value, width = 180) {
|
|||
|
|
const cur = items.find((i) => String(i.value) === String(value));
|
|||
|
|
return `<span class="rel"><button type="button" class="btn filter-btn" style="width:${width}px" data-action="menu" data-menu="${id}">${esc(label)}: ${esc(cur?.label ?? "любой")}${I.chevD(14)}</button>${popMenu(id, items.map((i) => ({ ...i, cls: String(i.value) === String(value) ? "sel" : "" })), "")}</span>`;
|
|||
|
|
}
|
|||
|
|
function orgSwitcher() {
|
|||
|
|
const o = currentOrg();
|
|||
|
|
return `<span class="rel" style="flex:none"><button type="button" class="org-btn" data-action="menu" data-menu="org">${I.org()}<span class="lbl">Организация:</span><span class="val">${esc(o?.name ?? "—")}</span>${I.chevD(14)}</button>${popMenu("org", orgs.map((x) => ({ label: x.name, value: x.id, cls: x.id === store.orgId ? "sel" : "" })))}</span><div class="vsep"></div>`;
|
|||
|
|
}
|
|||
|
|
const crumbsOrg = () => `<div class="crumbs"><a href="#/orgs" style="color:var(--muted)">Организации</a>${I.chevR(14)}<span class="cur">${esc(currentOrg()?.name ?? "")}</span></div>`;
|
|||
|
|
const header = (title, sub, actions = "") => `<div class="head"><div><h1>${esc(title)}</h1><div class="sub">${sub}</div></div><div class="actions">${actions}</div></div>`;
|
|||
|
|
|
|||
|
|
const NAV = [["overview", "Обзор"], ["prefixes", "Префиксы"], ["orgs", "Организации"], ["isps", "Операторы"], ["devices", "Устройства"], ["journal", "Журнал"]];
|
|||
|
|
function shell(active, content) {
|
|||
|
|
return `<div class="appbar"><div class="brand"><span class="brand-logo">${I.globe()}</span>ipam_manager</div>
|
|||
|
|
<nav class="nav">${NAV.map(([k, l]) => `<a href="#/${k}" class="${k === active ? "active" : ""}">${l}</a>`).join("")}</nav>
|
|||
|
|
<div class="grow"></div><span class="user">${esc(user?.username ?? "")}</span>${btn("Выйти", "logout", { cls: "ghost" })}</div>
|
|||
|
|
<div class="page">${content}</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------------ dialogs */
|
|||
|
|
function openDialog({ title, width = 560, note = "", body, foot }) {
|
|||
|
|
$("#modal-root").innerHTML = `<div class="overlay" data-action="overlay"><div class="dialog" style="width:${width}px" role="dialog" aria-modal="true" aria-label="${esc(title)}">
|
|||
|
|
<div class="dialog-head"><h2>${esc(title)}</h2>${iconBtn(I.close(), "close-dialog", "Закрыть")}</div>${note ? `<div class="dialog-note">${note}</div>` : ""}${body}${foot}</div></div>`;
|
|||
|
|
$("#dlg-form .input, #dlg-form .select")?.focus();
|
|||
|
|
}
|
|||
|
|
const closeDialog = () => { $("#modal-root").innerHTML = ""; S.dialog = null; };
|
|||
|
|
const opt = (label) => `<span class="opt"> ${label}</span>`;
|
|||
|
|
const fInput = (name, label, { value = "", ph = "", mono = false, optional = false, type = "text" } = {}) =>
|
|||
|
|
`<label class="field"><span>${label}${optional ? opt("необязательно") : ""}</span><input class="input${mono ? " mono" : ""}" type="${type}" name="${name}" value="${esc(value)}" placeholder="${esc(ph)}"></label>`;
|
|||
|
|
const fArea = (name, label, { value = "", ph = "Любая дополнительная информация", rows = 2, h = 56, mono = false, optional = true, hint = "" } = {}) =>
|
|||
|
|
`<label class="field"><span>${label}${optional ? opt("необязательно") : ""}${hint ? opt(hint) : ""}</span><textarea class="textarea${mono ? " mono" : ""}" name="${name}" rows="${rows}" placeholder="${esc(ph)}" style="height:${h}px${mono ? ";font-size:13px" : ""}">${esc(value)}</textarea></label>`;
|
|||
|
|
// Выпадающий список в диалогах — тот же стиль, что у меню строк (не нативный <select>); значение хранится в скрытом поле
|
|||
|
|
const fSelect = (name, label, options, value, { optional = false, hint = "", empty = "" } = {}) => {
|
|||
|
|
const all = empty !== "" ? [{ value: "", label: empty }, ...options] : options;
|
|||
|
|
const cur = all.find((o) => String(o.value) === String(value)) ?? all[0];
|
|||
|
|
return `<div class="field"><span>${label}${optional ? opt("необязательно") : ""}${hint ? opt(hint) : ""}</span>
|
|||
|
|
<div class="cselect"><input type="hidden" name="${name}" value="${esc(cur?.value ?? "")}">
|
|||
|
|
<button type="button" class="select${cur?.value === "" ? " ph" : ""}" data-action="dd-toggle" aria-haspopup="listbox" aria-label="${esc(label)}"><span class="v">${esc(cur?.label ?? "")}</span></button>
|
|||
|
|
<div class="pop dd" role="listbox" hidden>${all.map((o) => `<button type="button" role="option" class="${String(o.value) === String(cur?.value) ? "sel" : ""}" data-action="dd-pick" data-value="${esc(o.value)}" data-empty="${o.value === "" ? 1 : 0}">${esc(o.label)}</button>`).join("")}</div></div></div>`;
|
|||
|
|
};
|
|||
|
|
const dlgFoot = (submit) => `<div class="dialog-foot">${btn("Отмена", "close-dialog", { cls: "ghost" })}${btn(submit, "submit-form", { cls: "primary" })}</div>`;
|
|||
|
|
const formBody = (inner) => `<form class="dialog-body" id="dlg-form" novalidate><div class="err-banner" id="dlg-err" hidden></div>${inner}</form>`;
|
|||
|
|
|
|||
|
|
function readForm() {
|
|||
|
|
const out = {};
|
|||
|
|
for (const el of $("#dlg-form").elements) {
|
|||
|
|
if (!el.name) continue;
|
|||
|
|
out[el.name] = el.type === "checkbox" ? el.checked : el.value.trim();
|
|||
|
|
}
|
|||
|
|
return out;
|
|||
|
|
}
|
|||
|
|
function showFormError(e) {
|
|||
|
|
const box = $("#dlg-err");
|
|||
|
|
if (!box) return toast(e.message, true);
|
|||
|
|
const msgs = Object.entries(e.fields || {}).map(([f, m]) => (f ? `${f}: ${m}` : m));
|
|||
|
|
box.textContent = msgs.length ? msgs.join(" · ") : e.message;
|
|||
|
|
box.hidden = false;
|
|||
|
|
for (const f of Object.keys(e.fields || {})) $(`#dlg-form [name="${f.split(".")[0]}"]`)?.classList.add("bad");
|
|||
|
|
}
|
|||
|
|
async function submitDialog() {
|
|||
|
|
const h = S.dialog;
|
|||
|
|
try {
|
|||
|
|
await h(readForm());
|
|||
|
|
closeDialog();
|
|||
|
|
} catch (e) {
|
|||
|
|
if (e instanceof ApiError) showFormError(e); else throw e;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------------- screens */
|
|||
|
|
const screens = {};
|
|||
|
|
|
|||
|
|
// ---- overview
|
|||
|
|
screens.overview = async () => {
|
|||
|
|
const o = await api("/overview");
|
|||
|
|
const [, tc] = utilColor(o.utilization);
|
|||
|
|
const actionBadge = { created: ["blue", "создан"], assigned: ["green", "назначен"], deleted: ["red", "удалён"], updated: ["amber", "изменён"] };
|
|||
|
|
const top = o.top_prefixes.map((p, i, a) => {
|
|||
|
|
const [bar, txt] = utilColor(p.utilization);
|
|||
|
|
return `<div class="tr${i === a.length - 1 ? " last" : ""}" style="--cols:2fr 1fr 1fr;--h:48px"><span class="m13">${esc(p.prefix)}</span><span style="color:${txt === "#58657a" ? "var(--muted)" : txt};font-weight:${txt === "#58657a" ? 400 : 500}">${fmtNum(p.used)}/${fmtNum(p.capacity)} (${p.utilization}%)</span><div class="bar"><div class="track" style="height:4px"><div class="fill" style="width:${p.utilization}%;background:${bar}"></div></div></div></div>`;
|
|||
|
|
}).join("");
|
|||
|
|
const recent = o.recent_changes.map((r, i, a) => {
|
|||
|
|
const [c, t] = actionBadge[r.action] || ["", r.action];
|
|||
|
|
return `<div class="tr${i === a.length - 1 ? " last" : ""}" style="--cols:140px 1.2fr 1fr 130px;--h:48px;font-size:13px"><span class="muted">${fmtDate(r.ts)}</span><span class="${["prefix", "address"].includes(r.entity_type) ? "m13" : ""}" style="${["prefix", "address"].includes(r.entity_type) ? "" : "font-size:13px"}">${esc(r.entity_label)}</span><span>${badge(c, t)}</span><span class="muted">${esc(r.username)}</span></div>`;
|
|||
|
|
}).join("");
|
|||
|
|
return shell("overview", `${header("Обзор", "Сводка по адресному пространству")}
|
|||
|
|
<div class="stats">
|
|||
|
|
<div class="card stat"><div class="l">Префиксов</div><div class="v">${fmtNum(o.prefixes)}</div><div class="s">${o.vrfs} VRF</div></div>
|
|||
|
|
<div class="card stat"><div class="l">Адресов назначено</div><div class="v">${fmtNum(o.assigned)}</div><div class="s">из ${fmtNum(o.capacity)} возможных</div></div>
|
|||
|
|
<div class="card stat"><div class="l">Использование</div><div class="v">${o.utilization}%</div><div class="track"><div style="width:${o.utilization}%"></div></div></div>
|
|||
|
|
<div class="card stat"><div class="l">Зарезервировано</div><div class="v" style="color:#7c4a00">${fmtNum(o.reserved)}</div><div class="s">адресов</div></div></div>
|
|||
|
|
<div class="two"><div class="card"><div class="card-title">Высокая загрузка</div>
|
|||
|
|
<div class="tr th" style="--cols:2fr 1fr 1fr;--h:36px"><span>Префикс</span><span>Использовано</span><span></span></div>${top || '<div class="empty">Нет данных</div>'}</div>
|
|||
|
|
<div class="card"><div class="card-title">Последние изменения</div>
|
|||
|
|
<div class="tr th" style="--cols:140px 1.2fr 1fr 130px;--h:36px"><span>Дата (UTC)</span><span>Объект</span><span>Действие</span><span>Пользователь</span></div>${recent || '<div class="empty">Изменений пока нет</div>'}</div></div>`);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ---- organizations
|
|||
|
|
screens.orgs = async () => {
|
|||
|
|
const q = S.q || "";
|
|||
|
|
const { items, total } = await api("/organizations", { params: { q, limit: 500 } });
|
|||
|
|
const all = q ? (await api("/organizations", { params: { limit: 1 } })).total : total;
|
|||
|
|
const rows = items.map((o, i) => `<div class="tr hoverable clickable${i === items.length - 1 ? " last" : ""}" data-row="1" data-action="org-open" data-id="${o.id}" style="--cols:minmax(200px,1.5fr) 110px 130px minmax(200px,1.5fr) 80px 80px 44px">
|
|||
|
|
<a href="#/prefixes" data-action="open-org" data-id="${o.id}" style="font-weight:500;color:var(--text)">${esc(o.name)}</a><span class="muted">${esc(o.short_name)}</span><span class="mono muted" style="font-size:13px">${esc(o.inn)}</span>
|
|||
|
|
<span class="muted ell">${esc(o.address)}</span><a href="#/prefixes" data-action="open-org" data-id="${o.id}" style="font:500 13px var(--sans);text-align:center">${o.prefixes_count}</a><span style="font-size:13px;text-align:center" class="muted">${fmtNum(o.addresses_count)}</span>
|
|||
|
|
<span class="cell-actions rel">${iconBtn(I.dots(), "menu", "Действия", `data-menu="org-row-${o.id}"`)}${popMenu("org-row-" + o.id, [{ label: "Открыть префиксы", value: "open:" + o.id }, { label: "Редактировать", value: "edit:" + o.id }, { label: "Удалить", value: "del:" + o.id, cls: "danger" }], "row-pop")}</span></div>`).join("");
|
|||
|
|
S.rows = items;
|
|||
|
|
return shell("orgs", `${header("Организации", `${all} ${plural(all, "организация", "организации", "организаций")}`, btn("Добавить организацию", "org-new", { cls: "primary", icon: I.plus() }))}
|
|||
|
|
<div class="card"><div class="filters">${searchBox(q, "Поиск: название, ИНН, адрес", 300)}</div>
|
|||
|
|
<div class="tr th" style="--cols:minmax(200px,1.5fr) 110px 130px minmax(200px,1.5fr) 80px 80px 44px"><span>Название</span><span>Краткое имя</span><span>ИНН</span><span>Адрес</span><span>Префиксов</span><span>Адресов</span><span></span></div>
|
|||
|
|
${rows || '<div class="empty">Ничего не найдено</div>'}<div class="foot">Показано ${items.length} из ${all} ${plural(all, "организации", "организаций", "организаций")}</div></div>`);
|
|||
|
|
};
|
|||
|
|
function orgDialog(o) {
|
|||
|
|
const edit = !!o;
|
|||
|
|
S.dialog = async (v) => {
|
|||
|
|
await api(edit ? `/organizations/${o.id}` : "/organizations", { method: edit ? "PATCH" : "POST", body: v });
|
|||
|
|
toast(edit ? "Организация сохранена" : "Организация добавлена");
|
|||
|
|
await loadOrgs();
|
|||
|
|
await draw();
|
|||
|
|
};
|
|||
|
|
openDialog({
|
|||
|
|
title: edit ? "Редактирование организации" : "Новая организация",
|
|||
|
|
body: formBody(`${fInput("name", "Название", { value: o?.name })}
|
|||
|
|
<div class="grid2">${fInput("short_name", "Краткое имя", { value: o?.short_name })}${fInput("inn", "ИНН", { value: o?.inn })}</div>
|
|||
|
|
${fInput("address", "Юридический адрес", { value: o?.address })}
|
|||
|
|
<div class="grid2">${fInput("contact_person", "Контактное лицо", { value: o?.contact_person, optional: true })}${fInput("phone", "Телефон", { value: o?.phone, optional: true })}</div>
|
|||
|
|
${fInput("email", "Email", { value: o?.email, optional: true, ph: "email@example.com" })}${fArea("note", "Примечание", { value: o?.note })}`),
|
|||
|
|
foot: dlgFoot(edit ? "Сохранить" : "Добавить организацию"),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ---- ISPs
|
|||
|
|
screens.isps = async () => {
|
|||
|
|
const q = S.q || "";
|
|||
|
|
const { items } = await api("/isps", { params: { q, limit: 500 } });
|
|||
|
|
const all = q ? (await api("/isps", { params: { limit: 1 } })).total : items.length;
|
|||
|
|
S.rows = items;
|
|||
|
|
const cols = "minmax(130px,1fr) minmax(160px,1.2fr) minmax(180px,1.4fr) 150px 140px minmax(120px,1fr) 44px";
|
|||
|
|
const rows = items.map((i, n) => `<div class="tr hoverable clickable${n === items.length - 1 ? " last" : ""}" data-row="1" data-action="isp-edit" data-id="${i.id}" style="--cols:${cols}"><span style="font-weight:500">${esc(i.name)}</span>
|
|||
|
|
<a href="#/prefixes" data-action="open-org" data-id="${i.organization_id}" style="font-size:13px">${esc(i.organization_name)}</a>
|
|||
|
|
<span style="display:flex;align-items:center"><span class="mono" style="font-size:13px">${esc(i.networks[0] ?? "—")}</span>${i.networks.length > 1 ? `<span class="more">+${i.networks.length - 1}</span>` : ""}</span>
|
|||
|
|
<span class="mono muted" style="font-size:13px">${esc(i.hotline)}</span><span class="muted">${esc(i.contract_number)}</span><span class="muted ell">${esc(i.note)}</span>
|
|||
|
|
<span class="cell-actions rel">${iconBtn(I.dots(), "menu", "Действия", `data-menu="isp-row-${i.id}"`)}${popMenu("isp-row-" + i.id, [{ label: "Редактировать", value: "edit:" + i.id }, { label: "Удалить", value: "del:" + i.id, cls: "danger" }], "row-pop")}</span></div>`).join("");
|
|||
|
|
return shell("isps", `${header("Операторы связи", "Реестр провайдеров и каналов", btn("Добавить оператора", "isp-new", { cls: "primary", icon: I.plus() }))}
|
|||
|
|
<div class="card"><div class="filters">${searchBox(q, "Поиск: оператор, организация, IP", 300)}</div>
|
|||
|
|
<div class="tr th" style="--cols:${cols}"><span>Название</span><span>Организация</span><span>IP-адреса</span><span>Горячая линия</span><span>Договор</span><span>Заметки</span><span></span></div>
|
|||
|
|
${rows || '<div class="empty">Ничего не найдено</div>'}<div class="foot">Показано ${items.length} из ${all} ${plural(all, "оператора", "операторов", "операторов")}</div></div>`);
|
|||
|
|
};
|
|||
|
|
function ispDialog(i) {
|
|||
|
|
const edit = !!i;
|
|||
|
|
S.dialog = async (v) => {
|
|||
|
|
const body = { ...v, organization_id: Number(v.organization_id), networks: v.networks.split(/\s+/).filter(Boolean) };
|
|||
|
|
await api(edit ? `/isps/${i.id}` : "/isps", { method: edit ? "PUT" : "POST", body });
|
|||
|
|
toast(edit ? "Оператор сохранён" : "Оператор добавлен");
|
|||
|
|
await draw();
|
|||
|
|
};
|
|||
|
|
openDialog({
|
|||
|
|
title: edit ? "Редактирование оператора" : "Новый оператор связи",
|
|||
|
|
body: formBody(`${fInput("name", "Название", { value: i?.name })}
|
|||
|
|
${fSelect("organization_id", "Организация", orgs.map((o) => ({ value: o.id, label: o.name })), i?.organization_id ?? store.orgId)}
|
|||
|
|
${fArea("networks", "IP-адреса", { value: (i?.networks || []).join("\n"), ph: "один CIDR на строку", rows: 3, h: 72, mono: true, optional: false, hint: "можно несколько" })}
|
|||
|
|
<div class="grid2">${fInput("hotline", "Горячая линия", { value: i?.hotline })}${fInput("contract_number", "Номер договора", { value: i?.contract_number })}</div>
|
|||
|
|
${fArea("note", "Примечание", { value: i?.note })}`),
|
|||
|
|
foot: dlgFoot(edit ? "Сохранить" : "Добавить оператора"),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ---- devices
|
|||
|
|
screens.devices = async () => {
|
|||
|
|
const org = currentOrg();
|
|||
|
|
const [types, list] = await Promise.all([
|
|||
|
|
api("/device-types"),
|
|||
|
|
api("/devices", { params: { organization_id: org?.id, device_type_id: S.type, q: S.q, limit: 500 } }),
|
|||
|
|
]);
|
|||
|
|
S.types = types.items;
|
|||
|
|
S.rows = list.items;
|
|||
|
|
const cols = "minmax(200px,1.6fr) 170px 110px minmax(220px,1.8fr) 44px";
|
|||
|
|
const q = S.q || "";
|
|||
|
|
const typeItems = [{ label: "любой", value: "" }, ...types.items.map((t) => ({ label: t.name, value: t.id }))];
|
|||
|
|
const rows = list.items.map((d, n) => {
|
|||
|
|
const dep = d.all_deprecated;
|
|||
|
|
const ips = d.ip_addresses.length
|
|||
|
|
? `<span style="display:flex;align-items:center"><a href="#/prefixes/${d.first_prefix_id}" style="font:500 13px var(--sans)">${d.ip_addresses.length}</a>${d.ip_addresses.length > 1 ? `<span class="more">+${d.ip_addresses.length - 1}</span>` : ""}</span>`
|
|||
|
|
: `<span class="muted" style="font-size:13px">0</span>`;
|
|||
|
|
return `<div class="tr hoverable clickable${n === list.items.length - 1 ? " last" : ""}" data-row="1" data-action="dev-edit" data-id="${d.id}" style="--cols:${cols}"><span class="m13" style="font-weight:600;${dep ? "color:var(--faint);text-decoration:line-through" : ""}">${esc(d.name)}</span>
|
|||
|
|
<span class="${dep ? "" : "muted"}" style="${dep ? "color:var(--faint)" : ""}">${esc(d.device_type_name)}</span>${ips}<span class="ell" style="color:${dep ? "var(--faint)" : "var(--muted)"}">${esc(d.note)}</span>
|
|||
|
|
<span class="cell-actions rel">${iconBtn(I.dots(), "menu", "Действия", `data-menu="dev-row-${d.id}"`)}${popMenu("dev-row-" + d.id, [{ label: "Редактировать", value: "edit:" + d.id }, { label: "Удалить", value: "del:" + d.id, cls: "danger" }], "row-pop")}</span></div>`;
|
|||
|
|
}).join("");
|
|||
|
|
return shell("devices", `${crumbsOrg()}${header("Устройства", `${list.total} ${plural(list.total, "устройство", "устройства", "устройств")} · организация: ${esc(org?.name ?? "")}`, btn("Добавить устройство", "dev-new", { cls: "primary", icon: I.plus() }))}
|
|||
|
|
<div class="right-link"><a href="#" data-action="types">${I.gear()}Управление типами</a></div>
|
|||
|
|
<div class="card"><div class="filters">${orgSwitcher()}${searchBox(q, "Поиск: имя, IP, заметка", 260)}${filterBtn("type", "Тип", typeItems, S.type ?? "", 170)}</div>
|
|||
|
|
<div class="tr th" style="--cols:${cols}"><span>Устройство</span><span>Тип</span><span>IP-адресов</span><span>Заметки</span><span></span></div>
|
|||
|
|
${rows || '<div class="empty">Устройств нет</div>'}<div class="foot">Показано ${list.items.length} из ${list.total} ${plural(list.total, "устройства", "устройств", "устройств")}</div></div>`);
|
|||
|
|
};
|
|||
|
|
function deviceDialog(d) {
|
|||
|
|
const edit = !!d;
|
|||
|
|
S.dialog = async (v) => {
|
|||
|
|
const body = edit ? { name: v.name, device_type_id: Number(v.device_type_id), mac: v.mac, note: v.note }
|
|||
|
|
: { ...v, device_type_id: Number(v.device_type_id), organization_id: Number(v.organization_id) };
|
|||
|
|
await api(edit ? `/devices/${d.id}` : "/devices", { method: edit ? "PATCH" : "POST", body });
|
|||
|
|
toast(edit ? "Устройство сохранено" : "Устройство добавлено");
|
|||
|
|
await draw();
|
|||
|
|
};
|
|||
|
|
openDialog({
|
|||
|
|
title: edit ? "Редактирование устройства" : "Новое устройство",
|
|||
|
|
body: formBody(`${fInput("name", "Название (hostname)", { value: d?.name, ph: "host.internal" })}
|
|||
|
|
<div class="grid2">${fSelect("device_type_id", "Тип", S.types.map((t) => ({ value: t.id, label: t.name })), d?.device_type_id)}${fInput("mac", "MAC-адрес", { value: d?.mac, ph: "00:1A:2B:3C:4D:5E", optional: true })}</div>
|
|||
|
|
${edit ? "" : fSelect("organization_id", "Организация", orgs.map((o) => ({ value: o.id, label: o.name })), store.orgId)}
|
|||
|
|
${fArea("note", "Заметки", { value: d?.note })}
|
|||
|
|
<div class="info">IP-адрес назначается отдельно — на экране «Адреса» через «Назначить адрес» и поле «Связано с устройством».</div>`),
|
|||
|
|
foot: dlgFoot(edit ? "Сохранить" : "Добавить устройство"),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
async function typesDialog() {
|
|||
|
|
const { items } = await api("/device-types");
|
|||
|
|
S.types = items;
|
|||
|
|
const cols = "1fr 110px 84px";
|
|||
|
|
const rows = items.map((t) => {
|
|||
|
|
const editing = S.typeEdit === t.id;
|
|||
|
|
const name = editing
|
|||
|
|
? `<input class="input" id="edit-name" value="${esc(t.name)}" style="height:32px">`
|
|||
|
|
: `<span style="font-weight:600;${t.is_default ? "color:var(--faint)" : ""}">${esc(t.name)}</span>`;
|
|||
|
|
const locked = t.devices_count > 0;
|
|||
|
|
const acts = t.is_default
|
|||
|
|
? `<span class="muted" style="font-size:12px">по умолчанию</span>`
|
|||
|
|
: editing
|
|||
|
|
? `${iconBtn(I.edit(14), "type-save", "Сохранить", `data-id="${t.id}"`, true)}${iconBtn(I.close(), "type-cancel", "Отмена", "", true)}`
|
|||
|
|
: `${iconBtn(I.edit(14), "type-edit", "Переименовать", `data-id="${t.id}"`, true)}${iconBtn(I.trash(14), "type-del", locked ? "Нельзя удалить: используется устройствами" : "Удалить", `data-id="${t.id}"`, true, locked)}`;
|
|||
|
|
return `<div class="tr" style="--cols:${cols};--h:48px">${name}<span class="muted">${t.devices_count}</span><span style="display:flex;justify-content:flex-end;align-items:center;gap:4px">${acts}</span></div>`;
|
|||
|
|
}).join("");
|
|||
|
|
openDialog({
|
|||
|
|
title: "Управление типами устройств", width: 640,
|
|||
|
|
note: "Типы используются в фильтре и в поле «Тип» при добавлении устройства. Общий список для всех организаций.",
|
|||
|
|
body: `<div class="mini-table"><div class="tr th" style="--cols:${cols}"><span>Название</span><span>Устройств</span><span></span></div>${rows}</div>
|
|||
|
|
<div class="add-row"><input class="input" id="new-type" placeholder="Название нового типа"><button type="button" class="btn outline-primary" data-action="type-add">${I.plus()}Добавить</button></div>`,
|
|||
|
|
foot: `<div class="dialog-foot">${btn("Готово", "close-dialog", { cls: "primary" })}</div>`,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ---- prefixes
|
|||
|
|
screens.prefixes = async () => {
|
|||
|
|
const org = currentOrg();
|
|||
|
|
if (!org) return shell("prefixes", header("Префиксы", "Сначала добавьте организацию") + `<div class="card"><div class="empty">Нет организаций. ${btn("Добавить организацию", "org-new", { cls: "primary" })}</div></div>`);
|
|||
|
|
const [pl, vl] = await Promise.all([
|
|||
|
|
api("/prefixes", { params: { organization_id: org.id, limit: 1000 } }),
|
|||
|
|
api("/vrfs", { params: { organization_id: org.id } }),
|
|||
|
|
]);
|
|||
|
|
S.prefixes = pl.items;
|
|||
|
|
S.vrfs = vl.items;
|
|||
|
|
const all = pl.items;
|
|||
|
|
const q = (S.q || "").toLowerCase();
|
|||
|
|
const filtered = all.filter((p) => (!S.vrf || p.vrf_id === S.vrf) && (!S.status || p.status === S.status) && (!S.family || p.family === Number(S.family))
|
|||
|
|
&& (!q || p.prefix.includes(q) || p.description.toLowerCase().includes(q)));
|
|||
|
|
const hasKids = new Set(all.map((p) => p.parent_id).filter(Boolean));
|
|||
|
|
if (!S.collapsed) S.collapsed = new Set(all.filter((p) => !p.depth && hasKids.has(p.id)).slice(1).map((p) => p.id)); // раскрыта только первая ветка
|
|||
|
|
const collapsed = S.collapsed;
|
|||
|
|
const byId = Object.fromEntries(all.map((p) => [p.id, p]));
|
|||
|
|
const hidden = (p) => { for (let x = byId[p.parent_id]; x; x = byId[x.parent_id]) if (collapsed.has(x.id)) return true; return false; };
|
|||
|
|
const visible = filtered.filter((p) => !hidden(p));
|
|||
|
|
const cols = "44px minmax(200px,1.8fr) 1.4fr 100px 100px 200px 80px 44px";
|
|||
|
|
const tab = (id, label, n) => `<button type="button" class="tab${(S.vrf || 0) === id ? " active" : ""}" data-action="vrf-tab" data-id="${id}">${esc(label)} <span class="n">${n}</span></button>`;
|
|||
|
|
const rows = visible.map((p, n) => {
|
|||
|
|
const [bar, txt] = utilColor(p.utilization);
|
|||
|
|
const [sc, st] = PREFIX_STATUS[p.status];
|
|||
|
|
const leaf = !hasKids.has(p.id);
|
|||
|
|
const chev = hasKids.has(p.id) ? `<span class="chev ${collapsed.has(p.id) ? "" : "open"}"><button type="button" data-action="toggle" data-id="${p.id}" aria-label="Свернуть/развернуть" aria-expanded="${!collapsed.has(p.id)}">${I.chevR(16)}</button></span>` : "<span></span>";
|
|||
|
|
const pad = p.depth * 20;
|
|||
|
|
const cidr = leaf ? `<a href="#/prefixes/${p.id}" class="m13" style="padding-left:${pad}px;font-weight:600">${esc(p.prefix)}</a>` : `<span class="m13" style="padding-left:${pad}px;font-weight:600">${esc(p.prefix)}</span>`;
|
|||
|
|
return `<div class="tr hoverable clickable${p.depth ? " child" : ""}${n === visible.length - 1 ? " last" : ""}" data-row="1" data-action="${leaf ? "pfx-open" : "toggle"}" data-id="${p.id}" style="--cols:${cols}">${chev}${cidr}<span class="muted">${esc(p.description)}</span><span class="muted" style="font-size:13px">${esc(p.vrf_name)}</span><span>${badge(sc, st)}</span>
|
|||
|
|
<div class="bar"><div class="track"><div class="fill" style="width:${p.utilization}%;background:${bar}"></div></div><span class="pct" style="color:${txt}">${p.utilization}%</span></div><span class="muted" style="font-size:13px">${fmtNum(p.used)}</span>
|
|||
|
|
<span class="cell-actions rel">${leaf ? iconBtn(I.dots(), "menu", "Действия", `data-menu="pfx-row-${p.id}"`) + popMenu("pfx-row-" + p.id, [{ label: "Открыть адреса", value: "open:" + p.id }, { label: "Редактировать", value: "edit:" + p.id }, { label: "Удалить", value: "del:" + p.id, cls: "danger" }], "row-pop") : ""}</span></div>`;
|
|||
|
|
}).join("");
|
|||
|
|
const statusItems = [{ label: "любой", value: "" }, { label: "Активен", value: "active" }, { label: "Резерв", value: "reserved" }, { label: "Устарел", value: "deprecated" }];
|
|||
|
|
const famItems = [{ label: "любое", value: "" }, { label: "IPv4", value: "4" }, { label: "IPv6", value: "6" }];
|
|||
|
|
return shell("prefixes", `${crumbsOrg()}${header("Префиксы", `${all.length} ${plural(all.length, "префикс", "префикса", "префиксов")} · ${vl.total} VRF · организация: ${esc(org.name)}`, btn("Добавить префикс", "pfx-new", { cls: "primary", icon: I.plus() }))}
|
|||
|
|
<div class="tabs">${tab(0, "Все", all.length)}${vl.items.map((v) => tab(v.id, v.name, v.prefixes_count)).join("")}<div class="grow"></div><button type="button" class="link-muted" data-action="vrfs">${I.gear()}Управление VRF</button></div>
|
|||
|
|
<div class="card"><div class="filters">${orgSwitcher()}${searchBox(S.q || "", "Поиск: префикс, описание", 280)}${filterBtn("status", "Статус", statusItems, S.status ?? "")}${filterBtn("family", "Семейство", famItems, S.family ?? "")}</div>
|
|||
|
|
<div class="tr th" style="--cols:${cols};--h:40px"><span></span><span>Префикс</span><span>Описание</span><span>VRF</span><span>Статус</span><span>Использование</span><span>Адресов</span><span></span></div>
|
|||
|
|
${rows || '<div class="empty">Префиксов нет</div>'}<div class="foot">Показано ${visible.length} из ${all.length} ${plural(all.length, "префикса", "префиксов", "префиксов")}</div></div>`);
|
|||
|
|
};
|
|||
|
|
function prefixDialog(p) {
|
|||
|
|
const edit = !!p;
|
|||
|
|
S.dialog = async (v) => {
|
|||
|
|
if (edit) await api(`/prefixes/${p.id}`, { method: "PATCH", body: { vrf_id: Number(v.vrf_id), description: v.description, status: v.status, is_pool: v.is_pool, note: v.note } });
|
|||
|
|
else await api("/prefixes", { method: "POST", body: { ...v, organization_id: store.orgId, vrf_id: Number(v.vrf_id), parent_id: v.parent_id ? Number(v.parent_id) : null } });
|
|||
|
|
toast(edit ? "Префикс сохранён" : "Префикс добавлен");
|
|||
|
|
await draw();
|
|||
|
|
};
|
|||
|
|
const parents = (S.prefixes || []).map((x) => ({ value: x.id, label: x.description ? `${x.prefix} — ${x.description}` : x.prefix }));
|
|||
|
|
// число вложенных префиксов: они переезжают вместе с выбранным при смене VRF
|
|||
|
|
let nested = 0;
|
|||
|
|
if (edit) {
|
|||
|
|
let level = [p.id];
|
|||
|
|
while (level.length) { level = (S.prefixes || []).filter((x) => level.includes(x.parent_id)).map((x) => x.id); nested += level.length; }
|
|||
|
|
S.vrfHint = { original: String(p.vrf_id) };
|
|||
|
|
}
|
|||
|
|
openDialog({
|
|||
|
|
title: edit ? `Префикс ${p.prefix}` : "Новый префикс",
|
|||
|
|
body: formBody(`${edit ? "" : fInput("prefix", "Префикс (CIDR)", { ph: "0.0.0.0/0", mono: true, hint: "например 10.30.0.0/24" }).replace("</span><input", `${opt("например 10.30.0.0/24")}</span><input`)}
|
|||
|
|
${fInput("description", "Описание", { value: p?.description })}
|
|||
|
|
<div class="grid2">${fSelect("vrf_id", "VRF", (S.vrfs || []).map((v) => ({ value: v.id, label: v.name })), edit ? p.vrf_id : S.vrf || S.vrfs?.[0]?.id)}${fSelect("status", "Статус", [["active", "Активен"], ["reserved", "Резерв"], ["deprecated", "Устарел"]].map(([value, label]) => ({ value, label })), p?.status ?? "active")}</div>
|
|||
|
|
${edit && nested ? `<div class="info" id="vrf-hint" hidden>Вместе с префиксом будет перенесено вложенных: ${nested}</div>` : ""}
|
|||
|
|
${edit ? "" : fSelect("parent_id", "Родительский префикс", parents, "", { optional: true, empty: "Определить автоматически" })}
|
|||
|
|
${fArea("note", "Примечание", { value: p?.note, ph: "Любая дополнительная информация" })}
|
|||
|
|
<label class="check"><input type="checkbox" name="is_pool" ${p?.is_pool ? "checked" : ""}><span>Пул для автоназначения<small>Адреса из этого префикса будут выдаваться автоматически по запросу</small></span></label>`),
|
|||
|
|
foot: dlgFoot(edit ? "Сохранить" : "Добавить префикс"),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
async function vrfsDialog() {
|
|||
|
|
const org = currentOrg();
|
|||
|
|
const { items } = await api("/vrfs", { params: { organization_id: org.id } });
|
|||
|
|
S.vrfs = items;
|
|||
|
|
const cols = "1fr 140px 90px 84px";
|
|||
|
|
const rows = items.map((v) => {
|
|||
|
|
const editing = S.vrfEdit === v.id;
|
|||
|
|
const acts = editing
|
|||
|
|
? `${iconBtn(I.edit(14), "vrf-save", "Сохранить", `data-id="${v.id}"`, true)}${iconBtn(I.close(), "vrf-cancel", "Отмена", "", true)}`
|
|||
|
|
: `${iconBtn(I.edit(14), "vrf-edit", "Переименовать", `data-id="${v.id}"`, true)}${iconBtn(I.trash(14), "vrf-del", v.prefixes_count ? "Нельзя удалить: используется префиксами" : "Удалить", `data-id="${v.id}"`, true, v.prefixes_count > 0)}`;
|
|||
|
|
return `<div class="tr" style="--cols:${cols};--h:48px">${editing ? `<input class="input" id="edit-name" value="${esc(v.name)}" style="height:32px">` : `<span style="font-weight:600">${esc(v.name)}</span>`}
|
|||
|
|
${editing ? `<input class="input mono" id="edit-rt" value="${esc(v.route_target)}" style="height:32px;font-size:13px">` : `<span class="mono muted" style="font-size:13px">${esc(v.route_target)}</span>`}<span class="muted">${v.prefixes_count}</span><span style="display:flex;justify-content:flex-end;gap:4px">${acts}</span></div>`;
|
|||
|
|
}).join("");
|
|||
|
|
openDialog({
|
|||
|
|
title: "Управление VRF", width: 680,
|
|||
|
|
note: `VRF (Virtual Routing and Forwarding) — изолированная таблица маршрутизации. Каждый префикс закрепляется за одним VRF; здесь — общий список для организации «${esc(org.name)}».`,
|
|||
|
|
body: `<div class="mini-table"><div class="tr th" style="--cols:${cols}"><span>Название</span><span>Route target</span><span>Префиксов</span><span></span></div>${rows}</div>
|
|||
|
|
<div class="add-row"><input class="input" id="new-vrf" placeholder="Название нового VRF"><input class="input mono" id="new-rt" placeholder="Route target (необязательно)" style="width:180px;flex:none;font-size:13px"><button type="button" class="btn outline-primary" style="flex:none" data-action="vrf-add">${I.plus()}Добавить</button></div>`,
|
|||
|
|
foot: `<div class="dialog-foot">${btn("Готово", "vrf-done", { cls: "primary" })}</div>`,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ---- addresses of one prefix
|
|||
|
|
screens.address = async (id) => {
|
|||
|
|
const p = await api(`/prefixes/${id}`);
|
|||
|
|
if (store.orgId !== p.organization_id) store.orgId = p.organization_id;
|
|||
|
|
const limit = S.limit || 100;
|
|||
|
|
const [page, plist, devs, vrfs] = await Promise.all([
|
|||
|
|
api(`/prefixes/${id}/addresses`, { params: { status: S.astatus, q: S.q, limit } }),
|
|||
|
|
api("/prefixes", { params: { organization_id: p.organization_id, limit: 1000 } }),
|
|||
|
|
api("/devices", { params: { organization_id: p.organization_id, limit: 500 } }),
|
|||
|
|
api("/vrfs", { params: { organization_id: p.organization_id } }), // нужен окну «Редактировать префикс»
|
|||
|
|
]);
|
|||
|
|
S.prefix = p; S.prefixes = plist.items; S.devices = devs.items; S.vrfs = vrfs.items; S.page = page; S.rows = page.items;
|
|||
|
|
const byId = Object.fromEntries(plist.items.map((x) => [x.id, x]));
|
|||
|
|
const chain = [];
|
|||
|
|
for (let x = byId[p.parent_id]; x; x = byId[x.parent_id]) chain.unshift(x);
|
|||
|
|
const sm = page.summary;
|
|||
|
|
const cols = "minmax(140px,1fr) 1.2fr 1.6fr 120px 160px 44px";
|
|||
|
|
const rows = page.items.map((a, n) => {
|
|||
|
|
const [c, t] = ADDR_STATUS[a.status];
|
|||
|
|
const free = a.status === "free";
|
|||
|
|
const key = "adr-row-" + (a.id ?? a.address);
|
|||
|
|
const items = free ? [{ label: "Назначить адрес", value: "assign:" + a.address }] : [{ label: "Редактировать", value: "edit:" + a.id }, { label: "Удалить", value: "del:" + a.id, cls: "danger" }];
|
|||
|
|
return `<div class="tr hoverable clickable${free ? " free" : ""}${n === page.items.length - 1 ? " last" : ""}" data-row="1" data-action="${free ? "adr-assign" : "adr-edit"}" data-id="${a.id ?? ""}" data-ip="${esc(a.address)}" style="--cols:${cols};--h:52px"><span class="m13 ${free ? "" : ""}" style="color:${free ? "var(--faint)" : "var(--text)"}">${esc(a.address)}</span>
|
|||
|
|
<span class="mono ${free ? "" : "muted"}" style="font-size:13px;font-weight:400">${esc(a.dns_name || "—")}</span><span class="muted">${esc(a.description || (free ? "—" : ""))}</span><span>${badge(c, t)}</span>
|
|||
|
|
<span style="font-size:13px" class="muted">${a.updated_at ? fmtDate(a.updated_at) : "—"}</span><span class="cell-actions rel">${iconBtn(I.dots(), "menu", "Действия", `data-menu="${key}"`)}${popMenu(key, items, "row-pop")}</span></div>`;
|
|||
|
|
}).join("");
|
|||
|
|
const pct = (n) => (sm.capacity ? Math.min((n / sm.capacity) * 100, 100) : 0);
|
|||
|
|
const shown = page.items.length;
|
|||
|
|
const more = page.total > shown ? ` · <a href="#" data-action="more">Показать ещё 100</a>` : "";
|
|||
|
|
const stItems = [{ label: "любой", value: "" }, { label: "Назначен", value: "assigned" }, { label: "Резерв", value: "reserved" }, { label: "Устаревший", value: "deprecated" }, { label: "Свободен", value: "free" }];
|
|||
|
|
return shell("prefixes", `<div class="crumbs" style="font-weight:400;margin-top:16px;padding-top:0"><a href="#/prefixes">Префиксы</a>${chain.map((x) => `${I.chevR(14)}<span>${esc(x.prefix)}</span>`).join("")}${I.chevR(14)}<span style="color:var(--text);font-weight:500">${esc(p.prefix)}</span></div>
|
|||
|
|
<div class="head" style="margin:12px 0 16px"><div><h1 class="mono" style="font-family:var(--sans)">${esc(p.prefix)}</h1><div class="sub">${esc(p.description)}${p.description ? " · " : ""}${sm.assigned} назначено · ${sm.free} свободно · VRF ${esc(p.vrf_name)}</div></div>
|
|||
|
|
<div class="actions">${btn("Редактировать", "pfx-edit", { icon: I.edit(16) })}${btn("Назначить адрес", "adr-new", { cls: "primary", icon: I.plus() })}</div></div>
|
|||
|
|
<div class="card usage"><div style="flex:1"><div class="track"><div style="width:${pct(sm.assigned)}%;background:#2450c8"></div><div style="width:${pct(sm.reserved)}%;background:#d97706"></div></div></div>
|
|||
|
|
<div class="legend"><span><i style="background:#2450c8"></i>Назначено ${sm.assigned}</span><span><i style="background:#d97706"></i>Зарезервировано ${sm.reserved}</span><span><i style="background:#dde3ea"></i>Свободно ${sm.free}</span></div></div>
|
|||
|
|
<div class="card"><div class="filters">${searchBox(S.q || "", "Поиск: адрес, DNS, описание", 260)}${filterBtn("astatus", "Статус", stItems, S.astatus ?? "", 190)}</div>
|
|||
|
|
<div class="tr th" style="--cols:${cols};--h:40px"><span>IP-адрес</span><span>DNS-имя</span><span>Описание</span><span>Статус</span><span>Изменён (UTC)</span><span></span></div>
|
|||
|
|
${rows || '<div class="empty">Адресов нет</div>'}<div class="foot">Показано ${shown} из ${page.total} ${plural(page.total, "адреса", "адресов", "адресов")}${more}</div></div>`);
|
|||
|
|
};
|
|||
|
|
function addressDialog(a, presetIp = "") {
|
|||
|
|
const edit = !!a;
|
|||
|
|
const p = S.prefix;
|
|||
|
|
S.dialog = async (v) => {
|
|||
|
|
const body = { status: v.status, dns_name: v.dns_name, description: v.description, device_id: v.device_id ? Number(v.device_id) : null, note: v.note };
|
|||
|
|
if (edit) await api(`/addresses/${a.id}`, { method: "PATCH", body });
|
|||
|
|
else await api(`/prefixes/${p.id}/addresses`, { method: "POST", body: { ...body, address: v.address } });
|
|||
|
|
toast(edit ? "Адрес сохранён" : "Адрес назначен");
|
|||
|
|
await draw();
|
|||
|
|
};
|
|||
|
|
const ipField = edit
|
|||
|
|
? `<label class="field"><span>IP-адрес</span><input class="input mono" value="${esc(a.address)}" disabled></label>`
|
|||
|
|
: fInput("address", "IP-адрес", { mono: true, value: presetIp || (S.page.items.find((x) => x.status === "free")?.address ?? "") });
|
|||
|
|
openDialog({
|
|||
|
|
title: edit ? "Редактировать адрес" : "Назначить адрес",
|
|||
|
|
body: formBody(`<div class="info">Подсеть: <b>${esc(p.prefix)}</b> · ${S.page.summary.free} ${plural(S.page.summary.free, "свободный адрес", "свободных адреса", "свободных адресов")}</div>
|
|||
|
|
<div class="grid2">${ipField}${fSelect("status", "Статус", [["assigned", "Назначен"], ["reserved", "Резерв"], ["deprecated", "Устаревший"]].map(([value, label]) => ({ value, label })), a?.status ?? "assigned")}</div>
|
|||
|
|
${fInput("dns_name", "DNS-имя", { value: a?.dns_name, mono: true, ph: "host.example.com", optional: true }).replace("необязательно", "необязательно, FQDN")}
|
|||
|
|
${fInput("description", "Описание", { value: a?.description })}
|
|||
|
|
<div class="field">${fSelect("device_id", "Связано с устройством", S.devices.map((d) => ({ value: d.id, label: d.name })), a?.device_id ?? "", { optional: true, empty: "Выберите устройство…" }).replace('<label class="field">', "<label class=\"field\" style=\"gap:6px\">")}<a href="#/devices" style="align-self:flex-end;margin-top:-4px;font:500 12px var(--sans)">Управление устройствами →</a></div>
|
|||
|
|
${fArea("note", "Примечание", { value: a?.note })}`),
|
|||
|
|
foot: dlgFoot(edit ? "Сохранить" : "Назначить адрес"),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ---- journal (audit)
|
|||
|
|
const ENTITY_RU = { organization: "Организация", vrf: "VRF", prefix: "Префикс", address: "Адрес", device: "Устройство", device_type: "Тип устройства", isp: "Оператор", session: "Сессия", journal: "Журнал" };
|
|||
|
|
const eventBadge = (ev) => {
|
|||
|
|
const [entity, action] = ev.split(".");
|
|||
|
|
const cls = { created: "blue", assigned: "green", updated: "amber", deleted: "red", failed: "red" }[action] || "";
|
|||
|
|
return badge(cls, ev);
|
|||
|
|
};
|
|||
|
|
const fmtDateSec = (iso) => (iso ? iso.replace("T", " ").slice(0, 19) : "—");
|
|||
|
|
const isAdmin = () => user?.role === "admin";
|
|||
|
|
|
|||
|
|
screens.journal = async () => {
|
|||
|
|
const limit = S.limit || 100;
|
|||
|
|
const [page, sum, facets] = await Promise.all([
|
|||
|
|
api("/audit", { params: { event_type: S.jtype, actor: S.jactor, entity_type: S.jentity, date_from: S.jfrom, date_to: S.jto, q: S.q, limit } }),
|
|||
|
|
api("/audit/summary"),
|
|||
|
|
api("/audit/facets"),
|
|||
|
|
]);
|
|||
|
|
S.entries = page.items; S.summary = sum;
|
|||
|
|
const any = (l) => ({ label: l, value: "" });
|
|||
|
|
const typeItems = [any("любой"), ...facets.event_types.map((v) => ({ label: v, value: v }))];
|
|||
|
|
const actorItems = [any("любой"), ...facets.actors.map((v) => ({ label: v, value: v }))];
|
|||
|
|
const entItems = [any("любая"), ...facets.entity_types.map((v) => ({ label: ENTITY_RU[v] || v, value: v }))];
|
|||
|
|
const cols = "150px 168px 150px 1fr 110px 130px 96px";
|
|||
|
|
const rows = page.items.map((r) => `<div class="tr hoverable clickable" style="--cols:${cols};--h:48px" data-action="jr-open" data-uid="${r.uid}" role="button" tabindex="0">
|
|||
|
|
<span class="muted" style="font-size:13px;white-space:nowrap">${fmtDateSec(r.ts)}</span><span>${eventBadge(r.event_type)}</span>
|
|||
|
|
<span style="display:flex;gap:8px;align-items:baseline;min-width:0"><span>${esc(ENTITY_RU[r.entity_type] || r.entity_type)}</span>${["session", "journal"].includes(r.entity_type) ? "" : `<span class="mono muted ell" style="font-size:13px" title="${esc(r.entity_label)}">${esc(r.entity_label)}</span>`}</span>
|
|||
|
|
<span class="ell" title="${esc(r.message)}">${esc(r.message)}</span><span class="muted" style="font-size:13px">${esc(r.actor)}</span><span class="mono muted" style="font-size:13px">${esc(r.client_ip || "—")}</span><span class="mono muted" style="font-size:13px">${r.short_id}</span></div>`).join("");
|
|||
|
|
const n = sum.total;
|
|||
|
|
const rot = `ротация: ${sum.retention_days ? sum.retention_days + " " + plural(sum.retention_days, "день", "дня", "дней") : "без ограничения по сроку"} / ${sum.max_entries ? fmtNum(sum.max_entries) + " записей" : "без ограничения по количеству"}`;
|
|||
|
|
const act = btn("Обновить", "jr-refresh", { icon: I.refresh() }) + (isAdmin() ? btn("Настройки", "jr-settings", { icon: I.cog() }) + btn("Очистить журнал", "jr-clear", { cls: "danger", icon: I.trashJ() }) : "");
|
|||
|
|
const dateBox = (id, label, v) => `<label class="datebox"><span class="muted">${label}</span><input type="date" id="${id}" data-input="${id}" value="${esc(v || "")}" aria-label="${label === "с" ? "Период с" : "Период по"}"><span class="cal">${I.calendar()}</span></label>`;
|
|||
|
|
return shell("journal", `${header("Журнал", `${fmtNum(n)} ${plural(n, "запись", "записи", "записей")} · старейшая ${sum.oldest_ts ? fmtDate(sum.oldest_ts) : "—"} · ${rot}`, act)}
|
|||
|
|
<div class="card"><div class="filters">${filterBtn("jtype", "Тип", typeItems, S.jtype ?? "", 170)}${filterBtn("jactor", "Актор", actorItems, S.jactor ?? "", 170)}${filterBtn("jentity", "Сущность", entItems, S.jentity ?? "", 200)}${dateBox("jfrom", "с", S.jfrom)}${dateBox("jto", "по", S.jto)}${searchBox(S.q || "", "Сообщение, ID или IP", 240)}</div>
|
|||
|
|
<div class="tr th" style="--cols:${cols};--h:40px"><span>Время (UTC)</span><span>Тип</span><span>Сущность</span><span>Сообщение</span><span>Актор</span><span>IP-адрес</span><span>ID записи</span></div>
|
|||
|
|
${rows || '<div class="empty">Записей нет</div>'}
|
|||
|
|
${page.total > page.items.length ? `<div style="display:flex;justify-content:center;align-items:center;height:64px;border-bottom:1px solid var(--line)">${btn("Показать ещё 100", "more")}</div>` : ""}
|
|||
|
|
<div class="foot">Показано ${page.items.length} из ${fmtNum(page.total)} ${plural(page.total, "записи", "записей", "записей")}</div></div>`);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
async function copyText(text) {
|
|||
|
|
try { await navigator.clipboard.writeText(text); } catch {
|
|||
|
|
const ta = document.createElement("textarea"); // по http navigator.clipboard недоступен
|
|||
|
|
ta.value = text; ta.style.position = "fixed"; ta.style.opacity = "0"; document.body.append(ta); ta.select();
|
|||
|
|
try { document.execCommand("copy"); } finally { ta.remove(); }
|
|||
|
|
}
|
|||
|
|
toast("Скопировано");
|
|||
|
|
}
|
|||
|
|
const copyBtn = (text) => iconBtn(I.copy(), "copy", "Копировать", `data-text="${esc(text)}"`);
|
|||
|
|
function entryDialog(r) {
|
|||
|
|
const row = (label, inner) => `<div class="kv"><span class="muted" style="font-size:13px">${label}</span><div style="display:flex;align-items:center;gap:8px;min-width:0">${inner}</div></div>`;
|
|||
|
|
const mono = (v) => `<span class="mono" style="font-size:13px;overflow-wrap:anywhere">${esc(v)}</span>`;
|
|||
|
|
const entity = ["session", "journal"].includes(r.entity_type) ? esc(ENTITY_RU[r.entity_type]) : `${esc(ENTITY_RU[r.entity_type] || r.entity_type)} · ${mono(r.entity_label)}`;
|
|||
|
|
openDialog({
|
|||
|
|
title: "Запись журнала", width: 640,
|
|||
|
|
body: `<div class="dialog-body">${row("ID записи", mono("evt_" + r.uid) + copyBtn("evt_" + r.uid))}
|
|||
|
|
${row("Время", fmtDateSec(r.ts) + " UTC")}${row("Тип", eventBadge(r.event_type))}${row("Актор", esc(r.actor))}
|
|||
|
|
${row("IP-адрес", r.client_ip ? mono(r.client_ip) + copyBtn(r.client_ip) : '<span class="muted">—</span>')}${row("Сущность", entity)}${row("Сообщение", esc(r.message))}
|
|||
|
|
${r.meta?.method ? row("Запрос", mono(`${r.meta.method} ${r.meta.path}`)) : ""}${r.meta?.user_agent ? row("User-Agent", `<span class="muted" style="font-size:13px;overflow-wrap:anywhere">${esc(r.meta.user_agent)}</span>`) : ""}
|
|||
|
|
<div style="font:500 13px/1.3 var(--sans);margin-top:4px">Данные</div><pre class="json">${r.diff ? esc(JSON.stringify(r.diff, null, 2)) : "—"}</pre></div>`,
|
|||
|
|
foot: `<div class="dialog-foot">${btn("Закрыть", "close-dialog")}</div>`,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function journalSettingsDialog() {
|
|||
|
|
const sm = S.summary;
|
|||
|
|
const n = sm.total;
|
|||
|
|
S.dialog = async (v) => {
|
|||
|
|
const res = await api("/journal/settings", { method: "PUT", body: { retention_days: Number(v.retention_days), max_entries: Number(v.max_entries) } });
|
|||
|
|
toast(res.deleted ? `Настройки сохранены, удалено записей: ${res.deleted}` : "Настройки сохранены");
|
|||
|
|
S.limit = 100; await draw();
|
|||
|
|
};
|
|||
|
|
openDialog({
|
|||
|
|
title: "Настройки журнала",
|
|||
|
|
body: formBody(`<div class="statbox">Сейчас в журнале: <b>${fmtNum(n)} ${plural(n, "запись", "записи", "записей")}</b> · старейшая ${sm.oldest_ts ? fmtDate(sm.oldest_ts) : "—"}</div>
|
|||
|
|
${fInput("retention_days", "Хранить записи, дней", { value: sm.retention_days, type: "number", hint: "0 — без ограничения по сроку" }).replace("</span><input", `${opt("0 — без ограничения по сроку")}</span><input min="0" max="3650" step="1"`)}
|
|||
|
|
${fInput("max_entries", "Максимум записей", { value: sm.max_entries, type: "number" }).replace("</span><input", `${opt("0 — без ограничения по количеству")}</span><input min="0" max="10000000" step="1"`)}
|
|||
|
|
<div class="info">Ротация запускается раз в час и при сохранении настроек: удаляет самые старые записи сверх срока и лимита. Каждая ротация фиксируется записью в журнале.</div>`),
|
|||
|
|
foot: dlgFoot("Сохранить"),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function journalClearDialog(state = {}) {
|
|||
|
|
const n = S.summary.total;
|
|||
|
|
const locked = !!state.retry;
|
|||
|
|
const minutes = state.retry ? Math.max(1, Math.ceil(state.retry / 60)) : 0;
|
|||
|
|
openDialog({
|
|||
|
|
title: "Очистить журнал", width: 540,
|
|||
|
|
body: `<div class="dialog-body" id="clear-form"><div class="warn">Будет удалено <b>${fmtNum(n)} ${plural(n, "запись", "записи", "записей")}</b> без возможности восстановления. В журнале останется одна запись об очистке: кто и когда её выполнил.</div>
|
|||
|
|
<label class="field"><span>Пароль пользователя <b style="font-weight:600">${esc(user.username)}</b>${opt("подтверждение нужно только для этого действия")}</span>
|
|||
|
|
<input class="input${state.wrong ? " bad" : ""}" type="password" id="clear-pw" autocomplete="current-password" placeholder="${locked ? "" : "Введите пароль"}" ${locked ? "disabled" : ""} value=""></label>
|
|||
|
|
${state.wrong ? `<div style="font:500 13px/1.4 var(--sans);color:#a32020">Неверный пароль. Осталось попыток: ${state.left}</div>` : ""}
|
|||
|
|
${locked ? `<div class="err-banner">Слишком много неверных попыток. Повторите через ${minutes} мин.</div>` : ""}</div>`,
|
|||
|
|
foot: `<div class="dialog-foot">${btn("Отмена", "close-dialog", { cls: "ghost" })}<button type="button" class="btn danger" id="clear-go" data-action="jr-clear-do" disabled>${I.trashJ()}Очистить журнал</button></div>`,
|
|||
|
|
});
|
|||
|
|
$("#clear-pw")?.focus();
|
|||
|
|
}
|
|||
|
|
async function doClear() {
|
|||
|
|
const pw = $("#clear-pw").value;
|
|||
|
|
if (!pw) return;
|
|||
|
|
try {
|
|||
|
|
const res = await api("/journal/clear", { method: "POST", body: { password: pw } });
|
|||
|
|
closeDialog(); toast(`Журнал очищен, удалено записей: ${res.deleted}`); S.limit = 100; await draw();
|
|||
|
|
} catch (e) {
|
|||
|
|
if (!(e instanceof ApiError)) throw e;
|
|||
|
|
if (e.status === 429) journalClearDialog({ retry: e.body.retry_after_seconds });
|
|||
|
|
else if (e.status === 403) { journalClearDialog({ wrong: true, left: e.body.attempts_left }); }
|
|||
|
|
else toast(e.message, true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ---- login
|
|||
|
|
function loginScreen(err = "") {
|
|||
|
|
return `<div class="card login"><div class="brand"><span class="brand-logo">${I.globe()}</span>ipam_manager</div><h1>Вход</h1>
|
|||
|
|
<form id="login-form"><div class="err-banner" style="margin-top:12px" ${err ? "" : "hidden"}>${esc(err)}</div>
|
|||
|
|
<label class="field"><span>Логин</span><input class="input" name="username" autocomplete="username" autofocus></label>
|
|||
|
|
<label class="field"><span>Пароль</span><input class="input" type="password" name="password" autocomplete="current-password"></label>
|
|||
|
|
<button class="btn primary" type="submit">Войти</button></form></div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ------------------------------------------------------------------- routing */
|
|||
|
|
async function loadOrgs() {
|
|||
|
|
orgs = (await api("/organizations", { params: { limit: 500 } })).items;
|
|||
|
|
if (!orgs.some((o) => o.id === store.orgId) && orgs.length) store.orgId = orgs[0].id;
|
|||
|
|
}
|
|||
|
|
function route() {
|
|||
|
|
const [path, ...rest] = (location.hash.replace(/^#\/?/, "") || "overview").split("/");
|
|||
|
|
return { path, arg: rest[0] };
|
|||
|
|
}
|
|||
|
|
let current = "";
|
|||
|
|
async function draw() {
|
|||
|
|
const { path, arg } = route();
|
|||
|
|
const app = $("#app");
|
|||
|
|
if (path === "login" || !store.token) {
|
|||
|
|
if (path !== "login") { location.hash = "#/login"; return; }
|
|||
|
|
app.innerHTML = loginScreen();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const key = path + "/" + (arg || "");
|
|||
|
|
if (key !== current) { S = {}; current = key; menu = null; closeDialog(); }
|
|||
|
|
try {
|
|||
|
|
if (!user) { user = await api("/auth/me"); await loadOrgs(); }
|
|||
|
|
const fn = path === "prefixes" && arg ? () => screens.address(Number(arg)) : screens[path] || screens.overview;
|
|||
|
|
const active = document.activeElement;
|
|||
|
|
const focusId = active?.id, caret = active?.selectionStart;
|
|||
|
|
app.innerHTML = await fn();
|
|||
|
|
if (focusId) { const el = document.getElementById(focusId); if (el) { el.focus(); try { el.setSelectionRange(caret, caret); } catch { /* ignore */ } } }
|
|||
|
|
} catch (e) {
|
|||
|
|
if (e instanceof ApiError && e.status === 401) return;
|
|||
|
|
app.innerHTML = shell(path, `<div class="card" style="margin-top:24px"><div class="empty">Не удалось загрузить данные: ${esc(e.message)}</div></div>`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
window.addEventListener("hashchange", draw);
|
|||
|
|
|
|||
|
|
/* --------------------------------------------------------------------- events */
|
|||
|
|
const confirmDel = (what) => confirm(`Удалить ${what}?`);
|
|||
|
|
async function guarded(fn) {
|
|||
|
|
try { await fn(); } catch (e) { if (e instanceof ApiError) toast(e.message, true); else throw e; }
|
|||
|
|
}
|
|||
|
|
const rowById = (id) => S.rows?.find((r) => r.id === Number(id));
|
|||
|
|
|
|||
|
|
const rowActions = {
|
|||
|
|
"org-row": async (act, id) => {
|
|||
|
|
if (act === "open") { store.orgId = Number(id); location.hash = "#/prefixes"; }
|
|||
|
|
else if (act === "edit") orgDialog(rowById(id));
|
|||
|
|
else if (act === "del" && confirmDel("организацию")) await guarded(async () => { await api(`/organizations/${id}`, { method: "DELETE" }); await loadOrgs(); toast("Организация удалена"); await draw(); });
|
|||
|
|
},
|
|||
|
|
"isp-row": async (act, id) => {
|
|||
|
|
if (act === "edit") ispDialog(rowById(id));
|
|||
|
|
else if (act === "del" && confirmDel("оператора")) await guarded(async () => { await api(`/isps/${id}`, { method: "DELETE" }); toast("Оператор удалён"); await draw(); });
|
|||
|
|
},
|
|||
|
|
"dev-row": async (act, id) => {
|
|||
|
|
if (act === "edit") deviceDialog(rowById(id));
|
|||
|
|
else if (act === "del" && confirmDel("устройство")) await guarded(async () => { await api(`/devices/${id}`, { method: "DELETE" }); toast("Устройство удалено"); await draw(); });
|
|||
|
|
},
|
|||
|
|
"pfx-row": async (act, id) => {
|
|||
|
|
if (act === "open") location.hash = `#/prefixes/${id}`;
|
|||
|
|
else if (act === "edit") prefixDialog(S.prefixes.find((p) => p.id === Number(id)));
|
|||
|
|
else if (act === "del" && confirmDel("префикс")) await guarded(async () => {
|
|||
|
|
try { await api(`/prefixes/${id}`, { method: "DELETE" }); } catch (e) {
|
|||
|
|
if (e.status === 409 && confirm(`${e.message}. Удалить вместе с адресами?`)) await api(`/prefixes/${id}?force=true`, { method: "DELETE" }); else throw e;
|
|||
|
|
}
|
|||
|
|
toast("Префикс удалён"); await draw();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
"adr-row": async (act, id) => {
|
|||
|
|
if (act === "assign") addressDialog(null, id);
|
|||
|
|
else if (act === "edit") addressDialog(S.page.items.find((a) => a.id === Number(id)));
|
|||
|
|
else if (act === "del" && confirmDel("адрес")) await guarded(async () => { await api(`/addresses/${id}`, { method: "DELETE" }); toast("Адрес удалён"); await draw(); });
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const actions = {
|
|||
|
|
logout: () => { store.token = null; user = null; current = ""; location.hash = "#/login"; draw(); },
|
|||
|
|
menu: (d, el) => { menu = menu?.id === d.menu ? null : { id: d.menu }; draw(); },
|
|||
|
|
pick: async (d) => {
|
|||
|
|
const { menu: id, value } = d;
|
|||
|
|
menu = null;
|
|||
|
|
if (id === "org") { store.orgId = Number(value); S.vrf = 0; S.collapsed = null; }
|
|||
|
|
else if (id === "status") S.status = value;
|
|||
|
|
else if (id === "family") S.family = value;
|
|||
|
|
else if (id === "type") S.type = value;
|
|||
|
|
else if (id === "astatus") { S.astatus = value; S.limit = 100; }
|
|||
|
|
else if (id === "jtype") { S.jtype = value; S.limit = 100; }
|
|||
|
|
else if (id === "jactor") { S.jactor = value; S.limit = 100; }
|
|||
|
|
else if (id === "jentity") { S.jentity = value; S.limit = 100; }
|
|||
|
|
else {
|
|||
|
|
const key = Object.keys(rowActions).find((k) => id.startsWith(k + "-"));
|
|||
|
|
const [act, rid] = value.split(":");
|
|||
|
|
if (key) { document.querySelectorAll(".pop").forEach((el) => el.remove()); return rowActions[key](act, rid); }
|
|||
|
|
}
|
|||
|
|
draw();
|
|||
|
|
},
|
|||
|
|
"vrf-tab": (d) => { S.vrf = Number(d.id); draw(); },
|
|||
|
|
toggle: (d) => { const c = (S.collapsed ||= new Set()); c.has(Number(d.id)) ? c.delete(Number(d.id)) : c.add(Number(d.id)); draw(); },
|
|||
|
|
more: () => { S.limit = (S.limit || 100) + 100; draw(); },
|
|||
|
|
"dd-toggle": (d, el) => {
|
|||
|
|
const pop = el.parentElement.querySelector(".dd");
|
|||
|
|
const open = pop.hidden;
|
|||
|
|
closeDropdowns();
|
|||
|
|
pop.hidden = !open;
|
|||
|
|
if (open) (pop.querySelector(".sel") || pop.querySelector("button"))?.focus();
|
|||
|
|
},
|
|||
|
|
"dd-pick": (d, el) => {
|
|||
|
|
const box = el.closest(".cselect"), input = box.querySelector("input");
|
|||
|
|
input.value = d.value;
|
|||
|
|
box.querySelector(".v").textContent = el.textContent;
|
|||
|
|
box.querySelector(".select").classList.toggle("ph", d.empty === "1");
|
|||
|
|
box.querySelectorAll(".dd button").forEach((b) => b.classList.toggle("sel", b === el));
|
|||
|
|
closeDropdowns();
|
|||
|
|
box.querySelector(".select").focus();
|
|||
|
|
input.dispatchEvent(new Event("change", { bubbles: true }));
|
|||
|
|
},
|
|||
|
|
"pfx-open": (d) => { location.hash = `#/prefixes/${d.id}`; },
|
|||
|
|
"org-open": (d) => { store.orgId = Number(d.id); location.hash = "#/prefixes"; },
|
|||
|
|
"isp-edit": (d) => ispDialog(rowById(d.id)),
|
|||
|
|
"dev-edit": (d) => deviceDialog(rowById(d.id)),
|
|||
|
|
"adr-edit": (d) => addressDialog(S.page.items.find((x) => x.id === Number(d.id))),
|
|||
|
|
"adr-assign": (d) => addressDialog(null, d.ip),
|
|||
|
|
"jr-open": (d) => entryDialog(S.entries.find((r) => r.uid === d.uid)),
|
|||
|
|
"jr-refresh": () => draw(),
|
|||
|
|
"jr-settings": () => journalSettingsDialog(),
|
|||
|
|
"jr-clear": () => journalClearDialog(),
|
|||
|
|
"jr-clear-do": doClear,
|
|||
|
|
copy: (d) => copyText(d.text),
|
|||
|
|
"close-dialog": closeDialog,
|
|||
|
|
overlay: (d, el, e) => { if (e.target === el) closeDialog(); },
|
|||
|
|
"submit-form": submitDialog,
|
|||
|
|
"open-org": (d) => { store.orgId = Number(d.id); },
|
|||
|
|
"org-new": () => orgDialog(null),
|
|||
|
|
"isp-new": () => ispDialog(null),
|
|||
|
|
"dev-new": () => deviceDialog(null),
|
|||
|
|
"pfx-new": () => prefixDialog(null),
|
|||
|
|
"pfx-edit": () => prefixDialog(S.prefix),
|
|||
|
|
"adr-new": () => addressDialog(null),
|
|||
|
|
types: () => typesDialog(),
|
|||
|
|
vrfs: () => vrfsDialog(),
|
|||
|
|
"vrf-done": async () => { closeDialog(); S.vrfEdit = null; await draw(); },
|
|||
|
|
"vrf-add": () => guarded(async () => {
|
|||
|
|
const name = $("#new-vrf").value.trim();
|
|||
|
|
if (!name) return toast("Введите название VRF", true);
|
|||
|
|
await api("/vrfs", { method: "POST", body: { organization_id: store.orgId, name, route_target: $("#new-rt").value.trim() } });
|
|||
|
|
await vrfsDialog();
|
|||
|
|
}),
|
|||
|
|
"vrf-edit": (d) => { S.vrfEdit = Number(d.id); vrfsDialog(); },
|
|||
|
|
"vrf-cancel": () => { S.vrfEdit = null; vrfsDialog(); },
|
|||
|
|
"vrf-save": (d) => guarded(async () => {
|
|||
|
|
await api(`/vrfs/${d.id}`, { method: "PATCH", body: { name: $("#edit-name").value.trim(), route_target: $("#edit-rt").value.trim() } });
|
|||
|
|
S.vrfEdit = null; await vrfsDialog();
|
|||
|
|
}),
|
|||
|
|
"vrf-del": (d) => confirmDel("VRF") && guarded(async () => { await api(`/vrfs/${d.id}`, { method: "DELETE" }); await vrfsDialog(); }),
|
|||
|
|
"type-add": () => guarded(async () => {
|
|||
|
|
const name = $("#new-type").value.trim();
|
|||
|
|
if (!name) return toast("Введите название типа", true);
|
|||
|
|
await api("/device-types", { method: "POST", body: { name } });
|
|||
|
|
await typesDialog();
|
|||
|
|
}),
|
|||
|
|
"type-edit": (d) => { S.typeEdit = Number(d.id); typesDialog(); },
|
|||
|
|
"type-cancel": () => { S.typeEdit = null; typesDialog(); },
|
|||
|
|
"type-save": (d) => guarded(async () => {
|
|||
|
|
await api(`/device-types/${d.id}`, { method: "PATCH", body: { name: $("#edit-name").value.trim() } });
|
|||
|
|
S.typeEdit = null; await typesDialog();
|
|||
|
|
}),
|
|||
|
|
"type-del": (d) => confirmDel("тип") && guarded(async () => { await api(`/device-types/${d.id}`, { method: "DELETE" }); await typesDialog(); }),
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const closeDropdowns = () => document.querySelectorAll(".dd:not([hidden])").forEach((p) => { p.hidden = true; });
|
|||
|
|
document.addEventListener("click", (e) => {
|
|||
|
|
if (!e.target.closest(".cselect")) closeDropdowns();
|
|||
|
|
const el = e.target.closest("[data-action]");
|
|||
|
|
if (!el) {
|
|||
|
|
if (menu) { menu = null; draw(); }
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const a = el.dataset.action;
|
|||
|
|
if (el.dataset.row) {
|
|||
|
|
// действие всей строки: не мешаем ссылкам, кнопкам, меню, Ctrl/Shift-клику и выделению текста
|
|||
|
|
if (e.target.closest("a[href], button, input, label, select, textarea, .pop")) return;
|
|||
|
|
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || String(window.getSelection?.() ?? "")) return;
|
|||
|
|
if (menu) { menu = null; draw(); return; } // открытое меню: клик лишь закрывает его
|
|||
|
|
}
|
|||
|
|
if (menu && a !== "menu" && a !== "pick") { menu = null; if (!actions[a]) draw(); }
|
|||
|
|
if (el.tagName === "A" && el.getAttribute("href") === "#") e.preventDefault();
|
|||
|
|
if (actions[a]) actions[a](el.dataset, el, e);
|
|||
|
|
});
|
|||
|
|
let timer;
|
|||
|
|
document.addEventListener("input", (e) => {
|
|||
|
|
if (e.target.id === "clear-pw") { $("#clear-go").disabled = !e.target.value; return; }
|
|||
|
|
if (e.target.dataset.input !== "q") return;
|
|||
|
|
clearTimeout(timer);
|
|||
|
|
timer = setTimeout(() => { S.q = e.target.value; S.limit = 100; draw(); }, 250);
|
|||
|
|
});
|
|||
|
|
document.addEventListener("change", (e) => {
|
|||
|
|
if (e.target.id === "jfrom" || e.target.id === "jto") { S[e.target.id] = e.target.value; S.limit = 100; draw(); return; }
|
|||
|
|
const hint = $("#vrf-hint");
|
|||
|
|
if (hint && e.target.name === "vrf_id") hint.hidden = e.target.value === S.vrfHint?.original;
|
|||
|
|
});
|
|||
|
|
document.addEventListener("keydown", (e) => {
|
|||
|
|
if (e.key === "Escape" && document.querySelector(".dd:not([hidden])")) { closeDropdowns(); e.stopPropagation(); return; }
|
|||
|
|
if ((e.key === "ArrowDown" || e.key === "ArrowUp") && e.target.closest(".cselect")) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const box = e.target.closest(".cselect"), pop = box.querySelector(".dd");
|
|||
|
|
if (pop.hidden) { closeDropdowns(); pop.hidden = false; (pop.querySelector(".sel") || pop.querySelector("button")).focus(); return; }
|
|||
|
|
const items = [...pop.querySelectorAll("button")], i = items.indexOf(document.activeElement);
|
|||
|
|
items[Math.max(0, Math.min(items.length - 1, i + (e.key === "ArrowDown" ? 1 : -1)))].focus();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (e.key === "Escape") { if ($("#modal-root").innerHTML) closeDialog(); else if (menu) { menu = null; draw(); } }
|
|||
|
|
if (e.key === "Enter" && e.target.id === "clear-pw") { e.preventDefault(); doClear(); return; }
|
|||
|
|
if (e.key === "Enter" && e.target.dataset?.action === "jr-open") { e.preventDefault(); actions["jr-open"](e.target.dataset); return; }
|
|||
|
|
if (e.key === "Enter" && e.target.closest("#dlg-form") && e.target.tagName !== "TEXTAREA") { e.preventDefault(); submitDialog(); }
|
|||
|
|
});
|
|||
|
|
document.addEventListener("submit", async (e) => {
|
|||
|
|
if (e.target.id !== "login-form") return;
|
|||
|
|
e.preventDefault();
|
|||
|
|
const f = new FormData(e.target);
|
|||
|
|
try {
|
|||
|
|
const { access_token } = await api("/auth/login", { method: "POST", body: { username: f.get("username"), password: f.get("password") } });
|
|||
|
|
store.token = access_token;
|
|||
|
|
user = null; current = "";
|
|||
|
|
location.hash = "#/overview";
|
|||
|
|
draw();
|
|||
|
|
} catch (err) {
|
|||
|
|
$("#app").innerHTML = loginScreen(err.message);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
draw();
|