feat(NetworkMapDashboard, NetworkMapUnifi): enhance network visualization with tunnel interface connections and draggable node layout functionality

frontend/src/NetworkMapUnifi.jsx

@@ -1,4 +1,5 @@
 import { useMemo, useCallback, useState, useRef, useEffect } from 'react';
+import { IconRefresh } from '@tabler/icons-react';
 
 const UNIFI_BG = '#0f172a';
 const UNIFI_CARD_BG = '#1e293b';
@@ -9,16 +10,35 @@ const UNIFI_TEXT_MUTED = '#94a3b8';
 const NODE_WIDTH = 88;
 const NODE_HEIGHT = 52;
 const CIRCLE_RADIUS = 240;
+const STORAGE_KEY = 'network-map-unifi-positions';
+
+function computeCircleLayout(servers, size) {
+  const n = servers.length;
+  if (n === 0) return {};
+  const cx = size.w / 2;
+  const cy = size.h / 2;
+  const r = Math.min(CIRCLE_RADIUS, Math.min(size.w, size.h) * 0.4);
+  const positions = {};
+  servers.forEach((s, i) => {
+    const angle = (2 * Math.PI * i) / n - Math.PI / 2;
+    positions[String(s.ip)] = {
+      x: cx + r * Math.cos(angle),
+      y: cy + r * Math.sin(angle),
+    };
+  });
+  return positions;
+}
 
 /**
  * Карта сети в стиле UNIFI: тёмный фон, простые иконки узлов, зелёные линии, пинг на рёбрах.
- * @param {Array} servers - список серверов { ip, dns, ... }
- * @param {Array} connections - связи { from, to, tunnelType? }
- * @param {Object} pingMap - ключ "fromIp:toIp" -> число (мс)
+ * Узлы можно перетаскивать; раскладка сохраняется в localStorage. Круг — только начальная раскладка.
  */
 export default function NetworkMapUnifi({ servers = [], connections = [], pingMap = {} }) {
   const containerRef = useRef(null);
+  const svgRef = useRef(null);
   const [size, setSize] = useState({ w: 800, h: 520 });
+  const [positions, setPositions] = useState({});
+  const [drag, setDrag] = useState(null);
 
   useEffect(() => {
     const el = containerRef.current;
@@ -31,23 +51,90 @@ export default function NetworkMapUnifi({ servers = [], connections = [], pingMa
     return () => ro.disconnect();
   }, []);
 
-  const { positions } = useMemo(() => {
-    const n = servers.length;
-    if (n === 0) return { positions: {} };
-    const cx = size.w / 2;
-    const cy = size.h / 2;
-    const r = Math.min(CIRCLE_RADIUS, (Math.min(size.w, size.h) * 0.4));
-    const positions = {};
+  // Инициализация позиций: из localStorage или по кругу
+  useEffect(() => {
+    if (servers.length === 0) {
+      setPositions({});
+      return;
+    }
+    let saved = {};
+    try {
+      const raw = window.localStorage.getItem(STORAGE_KEY);
+      if (raw) saved = JSON.parse(raw) || {};
+    } catch {}
+    const circle = computeCircleLayout(servers, size);
+    const merged = {};
     servers.forEach((s, i) => {
-      const angle = (2 * Math.PI * i) / n - Math.PI / 2;
-      positions[String(s.ip)] = {
-        x: cx + r * Math.cos(angle),
-        y: cy + r * Math.sin(angle),
-      };
+      const ip = String(s.ip);
+      if (saved[ip] && typeof saved[ip].x === 'number' && typeof saved[ip].y === 'number') {
+        merged[ip] = { x: saved[ip].x, y: saved[ip].y };
+      } else {
+        merged[ip] = circle[ip] ?? { x: size.w / 2, y: size.h / 2 };
+      }
     });
-    return { positions };
+    setPositions(merged);
+  }, [servers.length, size.w, size.h]);
+
+  const savePositions = useCallback((next) => {
+    setPositions(next);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+    } catch {}
+  }, []);
+
+  const getSvgCoords = useCallback((clientX, clientY) => {
+    const svg = svgRef.current;
+    if (!svg) return null;
+    const pt = svg.createSVGPoint();
+    pt.x = clientX;
+    pt.y = clientY;
+    const p = pt.matrixTransform(svg.getScreenCTM().inverse());
+    return { x: p.x, y: p.y };
+  }, []);
+
+  useEffect(() => {
+    if (!drag) return;
+    const onMove = (e) => {
+      const p = getSvgCoords(e.clientX, e.clientY);
+      if (!p) return;
+      setPositions((prev) => {
+        const pos = prev[drag.nodeId];
+        if (!pos) return prev;
+        const next = { ...prev, [drag.nodeId]: { x: drag.startX + (p.x - drag.mouseX), y: drag.startY + (p.y - drag.mouseY) } };
+        try {
+          window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+        } catch {}
+        return next;
+      });
+    };
+    const onUp = () => setDrag(null);
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, [drag, getSvgCoords]);
+
+  const resetLayout = useCallback(() => {
+    const circle = computeCircleLayout(servers, size);
+    setPositions(circle);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(circle));
+    } catch {}
   }, [servers, size]);
 
+  const onNodeMouseDown = useCallback(
+    (e, ip) => {
+      e.preventDefault();
+      const p = getSvgCoords(e.clientX, e.clientY);
+      const pos = positions[ip];
+      if (!p || !pos) return;
+      setDrag({ nodeId: ip, startX: pos.x, startY: pos.y, mouseX: p.x, mouseY: p.y });
+    },
+    [getSvgCoords, positions]
+  );
+
   const edgesWithPing = useMemo(() => {
     return (connections || []).map((c) => {
       const from = String(c.from);
@@ -116,9 +203,11 @@ export default function NetworkMapUnifi({ servers = [], connections = [], pingMa
         borderRadius: 12,
         overflow: 'hidden',
         position: 'relative',
+        userSelect: 'none',
       }}
     >
       <svg
+        ref={svgRef}
         width="100%"
         height="100%"
         viewBox={`0 0 ${size.w} ${size.h}`}
@@ -162,15 +251,18 @@ export default function NetworkMapUnifi({ servers = [], connections = [], pingMa
           ))}
         </g>
 
-        {/* Узлы: карточки серверов в стиле UNIFI */}
+        {/* Узлы: карточки серверов в стиле UNIFI (перетаскиваемые) */}
         {servers.map((s) => {
           const pos = positions[String(s.ip)];
           if (!pos) return null;
           const label = s.dns?.split('.')[0] || s.ip || '?';
+          const isDragging = drag?.nodeId === s.ip;
           return (
             <g
               key={s.ip}
               transform={`translate(${pos.x - NODE_WIDTH / 2}, ${pos.y - NODE_HEIGHT / 2})`}
+              onMouseDown={(e) => onNodeMouseDown(e, s.ip)}
+              style={{ cursor: isDragging ? 'grabbing' : 'grab' }}
             >
               <rect
                 width={NODE_WIDTH}
@@ -212,6 +304,29 @@ export default function NetworkMapUnifi({ servers = [], connections = [], pingMa
           );
         })}
       </svg>
+      <div
+        style={{
+          position: 'absolute',
+          right: 12,
+          top: 12,
+          zIndex: 10,
+        }}
+      >
+        <button
+          type="button"
+          className="btn btn-sm"
+          onClick={resetLayout}
+          style={{
+            background: 'rgba(30,41,59,0.95)',
+            color: UNIFI_TEXT_MUTED,
+            border: `1px solid ${UNIFI_CARD_BORDER}`,
+          }}
+          title="Вернуть узлы в круговую раскладку"
+        >
+          <IconRefresh size={14} className="me-1" />
+          Сбросить раскладку
+        </button>
+      </div>
     </div>
   );
 }