-
-
OSPF Interface Template (HOME)
-
- Только для HOME роутеров. Источник данных — MikroTik, группировка по Area. Чем меньше cost, тем выше приоритет.
-
+
+
+ Настройки OSPF вынесены в отдельный раздел проекта.
-
-
- {config.ospfInterfaceTemplates?.length || 0}
-
-
-
-
-
-
- {ospfTemplatesByRouter.length === 0 ? (
-
- OSPF Interface Template не найдены на HOME роутерах.
-
- ) : (
-
- {ospfTemplatesByRouter.map((group) => {
- const areas = group.areas || [];
- return (
-
-
-
-
- {areas.length === 0 ? (
-
- Нет доступных интерфейсов для OSPF шаблонов.
-
- ) : (
- areas.map((areaGroup) => (
-
-
- Area: {areaGroup.area}
-
-
- {areaGroup.items.map((template) => (
-
- setOspfDraggingItem({
- routerKey: group.routerKey,
- area: areaGroup.area,
- key: template.key,
- })
- }
- onDragOver={(e) => e.preventDefault()}
- onDrop={() =>
- handleDropOspfTemplate(group.routerKey, areaGroup.area, template.key)
- }
- onDragEnd={() => setOspfDraggingItem(null)}
- style={{ cursor: 'grab' }}
- >
-
- ::
- {template.interfaceName}
-
- {template.active ? 'Активен' : 'Неактивен'}
-
-
-
- cost {template.cost}
-
-
- ))}
-
-
- ))
- )}
-
-
-
- );
- })}
-
- )}
+
+ Открыть Инструменты OSPF
+
diff --git a/frontend/src/OspfToolsPage.jsx b/frontend/src/OspfToolsPage.jsx
new file mode 100644
index 0000000..e53f517
--- /dev/null
+++ b/frontend/src/OspfToolsPage.jsx
@@ -0,0 +1,307 @@
+import { useEffect, useMemo, useState } from 'react';
+import { IconDatabase, IconRefresh, IconRoute2 } from '@tabler/icons-react';
+import PageHeader from './components/PageHeader.jsx';
+import api from './lib/api.js';
+import { useNotify } from './components/NotifyProvider.jsx';
+
+const OSPF_COST_STEP = 10;
+
+function moveInArray(arr, fromIndex, toIndex) {
+ if (fromIndex < 0 || toIndex < 0 || fromIndex >= arr.length || toIndex >= arr.length) return arr;
+ const copy = [...arr];
+ const [moved] = copy.splice(fromIndex, 1);
+ copy.splice(toIndex, 0, moved);
+ return copy;
+}
+
+function isUnknownOspfInterfaceName(name) {
+ const value = String(name || '').trim();
+ if (!value) return true;
+ if (value.startsWith('*')) return true;
+ if (value.toLowerCase() === 'unknown') return true;
+ return false;
+}
+
+function getOspfRouterIdentity(server) {
+ if (!server || typeof server !== 'object') {
+ return { key: 'unknown', label: 'Unknown router' };
+ }
+ const host = String(server.mikrotikHost || server.ip || server.dns || server.id || '').trim();
+ const port = String(server.mikrotikPort || 80).trim();
+ const user = String(server.mikrotikUser || 'admin').trim();
+ const key = `${host}::${port}::${user}`;
+ const label = host || String(server.dns || server.ip || server.id || 'Unknown router');
+ return { key, label };
+}
+
+function buildOspfTemplatesFromRouterResults(routerResults = [], servers = []) {
+ const serverById = new Map((servers || []).map((s) => [String(s.id || s.ip || s.dns || ''), s]));
+ const byComposite = new Map();
+
+ (routerResults || []).forEach((result) => {
+ const serverId = String(result?.serverId || '').trim();
+ if (!serverId) return;
+ const server = serverById.get(serverId) || {
+ id: serverId,
+ ip: String(result?.serverLabel || serverId),
+ dns: String(result?.serverLabel || ''),
+ };
+ const identity = getOspfRouterIdentity(server);
+ const templates = Array.isArray(result?.templates) ? result.templates : [];
+
+ templates.forEach((tpl) => {
+ const interfaceName = String(tpl?.interfaceName || '').trim();
+ if (isUnknownOspfInterfaceName(interfaceName)) return;
+ const area = String(tpl?.area || '').trim() || 'backbone';
+ const numericCost = Number(tpl?.cost);
+ const cost = Number.isFinite(numericCost) && numericCost >= 0 ? numericCost : OSPF_COST_STEP;
+
+ const compositeKey = `${identity.key}::${area.toLowerCase()}::${interfaceName.toUpperCase()}`;
+ if (byComposite.has(compositeKey)) return;
+
+ byComposite.set(compositeKey, {
+ key: compositeKey,
+ rosId: tpl?.id || null,
+ serverId,
+ routerKey: identity.key,
+ routerLabel: identity.label,
+ interfaceName,
+ area,
+ cost,
+ active: !Boolean(tpl?.disabled),
+ });
+ });
+ });
+
+ return Array.from(byComposite.values());
+}
+
+export default function OspfToolsPage() {
+ const notify = useNotify();
+ const [servers, setServers] = useState([]);
+ const [templates, setTemplates] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [saving, setSaving] = useState(false);
+ const [dragging, setDragging] = useState(null);
+
+ const groupedByRouter = useMemo(() => {
+ const grouped = {};
+ (templates || []).forEach((item) => {
+ const sid = String(item?.serverId || '');
+ const server = servers.find((s) => String(s.id || s.ip || s.dns || '') === sid);
+ const identity = getOspfRouterIdentity(server || { id: sid, ip: sid });
+ if (!grouped[identity.key]) {
+ grouped[identity.key] = {
+ routerKey: identity.key,
+ routerLabel: identity.label,
+ representativeServerId: sid,
+ areas: {},
+ };
+ }
+ if (!grouped[identity.key].areas[item.area]) grouped[identity.key].areas[item.area] = [];
+ grouped[identity.key].areas[item.area].push(item);
+ });
+
+ return Object.values(grouped).map((group) => ({
+ ...group,
+ areas: Object.entries(group.areas)
+ .map(([area, areaItems]) => ({
+ area,
+ items: [...areaItems].sort((a, b) => Number(a?.cost || 0) - Number(b?.cost || 0)),
+ }))
+ .sort((a, b) => a.area.localeCompare(b.area)),
+ }));
+ }, [templates, servers]);
+
+ const loadServers = async () => {
+ try {
+ const response = await api.get('/servers');
+ setServers(Array.isArray(response.data) ? response.data : []);
+ } catch (error) {
+ console.error('Failed to load servers:', error);
+ setServers([]);
+ }
+ };
+
+ const loadOspf = async ({ silent = false } = {}) => {
+ setLoading(true);
+ try {
+ const response = await api.get('/mikrotik/ospf-interface-templates');
+ const results = Array.isArray(response.data?.results) ? response.data.results : [];
+ const errors = Array.isArray(response.data?.errors) ? response.data.errors : [];
+ setTemplates(buildOspfTemplatesFromRouterResults(results, servers));
+
+ if (!silent) {
+ if (results.length > 0) notify.success(`OSPF загружен: ${results.length} роутер(ов)`);
+ else notify.warning('OSPF Interface Template не найдены');
+ if (errors.length > 0) notify.warning(`Ошибки чтения OSPF: ${errors.length}`);
+ }
+ } catch (error) {
+ console.error('Failed to load OSPF:', error);
+ if (!silent) notify.error('Не удалось загрузить OSPF с MikroTik');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ loadServers();
+ }, []);
+
+ useEffect(() => {
+ if (servers.length === 0) return;
+ loadOspf({ silent: true });
+ }, [servers.length]);
+
+ const onDrop = (routerKey, area, targetKey) => {
+ if (!dragging || dragging.routerKey !== routerKey || dragging.area !== area) return;
+ if (dragging.key === targetKey) {
+ setDragging(null);
+ return;
+ }
+
+ setTemplates((prev) => {
+ const current = prev
+ .filter((item) => item.routerKey === routerKey && String(item.area) === String(area))
+ .sort((a, b) => Number(a?.cost || 0) - Number(b?.cost || 0));
+ const fromIndex = current.findIndex((item) => item.key === dragging.key);
+ const toIndex = current.findIndex((item) => item.key === targetKey);
+ if (fromIndex < 0 || toIndex < 0) return prev;
+
+ const reordered = moveInArray(current, fromIndex, toIndex).map((item, idx) => ({
+ ...item,
+ cost: (idx + 1) * OSPF_COST_STEP,
+ }));
+
+ const other = prev.filter(
+ (item) => !(item.routerKey === routerKey && String(item.area) === String(area))
+ );
+ return [...other, ...reordered];
+ });
+ setDragging(null);
+ };
+
+ const saveOspf = async () => {
+ if (groupedByRouter.length === 0) {
+ notify.warning('Нет OSPF данных для сохранения');
+ return;
+ }
+ setSaving(true);
+ try {
+ const payload = {
+ servers: groupedByRouter.map((group) => ({
+ serverId: group.representativeServerId,
+ templates: group.areas.flatMap((areaGroup) =>
+ areaGroup.items.map((item) => ({
+ rosId: item.rosId || null,
+ interfaceName: item.interfaceName,
+ area: item.area,
+ cost: item.cost,
+ }))
+ ),
+ })),
+ };
+
+ const response = await api.post('/mikrotik/ospf-interface-templates/apply', payload);
+ const summary = response.data?.summary || {};
+ notify.success(`OSPF сохранен: обновлено ${summary.updated || 0}, пропущено ${summary.skipped || 0}`);
+ } catch (error) {
+ console.error('Failed to save OSPF:', error);
+ notify.error('Не удалось сохранить OSPF в MikroTik');
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ return (
+
+
}
+ actions={(
+
+
+
+
+ )}
+ />
+
+
+
+
+ Данные OSPF берутся напрямую с MikroTik. Группировка: роутер → Area → интерфейсы.
+ Чем меньше cost, тем выше приоритет.
+
+
+
+ {groupedByRouter.length === 0 ? (
+
OSPF Interface Template не найдены.
+ ) : (
+
+ {groupedByRouter.map((routerGroup) => (
+
+
+
{routerGroup.routerLabel}
+
+ {routerGroup.areas.map((areaGroup) => (
+
+
+ Area: {areaGroup.area}
+
+
+ {areaGroup.items.map((item) => (
+
setDragging({
+ routerKey: routerGroup.routerKey,
+ area: areaGroup.area,
+ key: item.key,
+ })}
+ onDragOver={(e) => e.preventDefault()}
+ onDrop={() => onDrop(routerGroup.routerKey, areaGroup.area, item.key)}
+ onDragEnd={() => setDragging(null)}
+ style={{ cursor: 'grab' }}
+ >
+
+ ::
+ {item.interfaceName}
+
+ {item.active ? 'Активен' : 'Неактивен'}
+
+
+
cost {item.cost}
+
+ ))}
+
+
+ ))}
+
+
+
+ ))}
+
+ )}
+
+
+
+ );
+}
+