feat: Enhance GraphView and ServerManager components by adding node highlighting and a modal for quick connection creation, improving user interaction and visual feedback in the graph interface.

2025-12-01 16:36:32 +07:00
parent e73d5e2721
commit 840865e074
2 changed files with 142 additions and 18 deletions
@@ -12,12 +12,14 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { IconZoomIn, IconZoomOut, IconMaximize, IconMinimize } from '@tabler/icons-react';
+import Tooltip from './components/Tooltip.jsx';

 function GraphView({ servers, connections, onCreateConnection }) {
  const flowRef = useRef(null);
  const instanceRef = useRef(null);
  const containerRef = useRef(null);
  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [highlightedNodeId, setHighlightedNodeId] = useState(null);

  const getTunnelStyle = useCallback((tunnelType) => {
    const map = {
@@ -68,12 +70,25 @@ function GraphView({ servers, connections, onCreateConnection }) {
  const initialEdgesData = useMemo(() => {
    return (connections || []).map((c, idx) => {
      const style = getTunnelStyle(c.tunnelType);
+      const baseLabel = c.tunnelType || 'TUNNEL';
+      const ipLabel = c.ipA && c.ipB ? `${c.ipA} ⇄ ${c.ipB}` : '';
      return {
        id: `${c.from}-${c.to}-${idx}`,
        source: String(c.from),
        target: String(c.to),
-        label: c.ipA && c.ipB ? `${c.tunnelType}  ${c.ipA} ⇄ ${c.ipB}` : c.tunnelType,
-        style: { stroke: style.color, strokeWidth: style.width, strokeDasharray: style.dash },
+        label: ipLabel ? `${baseLabel} · ${ipLabel}` : baseLabel,
+        style: {
+          stroke: style.color,
+          strokeWidth: style.width,
+          strokeDasharray: style.dash,
+        },
+        labelBgPadding: [6, 4],
+        labelBgBorderRadius: 999,
+        labelStyle: {
+          fontSize: 11,
+          fontWeight: 500,
+          fill: '#0f172a',
+        },
        markerEnd: { type: MarkerType.ArrowClosed, color: style.color, width: 20, height: 20 },
        animated: false,
      };
@@ -99,7 +114,7 @@ function GraphView({ servers, connections, onCreateConnection }) {

  const nodeTypes = useMemo(
    () => ({
-      server: ({ data }) => {
+      server: ({ id, data }) => {
        const s = data.server || {};
        const countryColor = getCountryColor(s.country);
        const getFlagEmoji = (code) => {
@@ -111,16 +126,24 @@ function GraphView({ servers, connections, onCreateConnection }) {
          return cc.replace(/./g, (ch) => String.fromCodePoint(127397 + ch.charCodeAt()));
        };
        const flag = getFlagEmoji(s.country);
+        const isHighlighted = highlightedNodeId === id;
        return (
          <div
-            className="card shadow-sm"
+            className={`card shadow-sm${isHighlighted ? ' border-primary' : ''}`}
            style={{
              width: 200,
              borderRadius: 12,
-              border: `2px solid ${countryColor}`,
+              border: `2px solid ${isHighlighted ? '#206bc4' : countryColor}`,
              overflow: 'hidden',
              background: '#fff',
+              boxShadow: isHighlighted
+                ? '0 0 0 1px rgba(32,107,196,0.15), 0 10px 24px rgba(15,23,42,0.25)'
+                : '0 4px 12px rgba(15,23,42,0.12)',
+              transform: isHighlighted ? 'translateY(-2px)' : 'translateY(0)',
+              transition: 'box-shadow 120ms ease-out, transform 120ms ease-out, border-color 120ms ease-out',
            }}
+            onMouseEnter={() => setHighlightedNodeId(id)}
+            onMouseLeave={() => setHighlightedNodeId((prev) => (prev === id ? null : prev))}
          >
            {/* Точка входа соединений */}
            <Handle type="target" position={Position.Left} style={{ background: countryColor }} />
@@ -95,6 +95,7 @@ function ServerManager() {
    // { from: '192.168.1.1', to: '192.168.1.2', tunnelType: 'GRE', ipA: '10.10.100.1', ipB: '10.10.100.2' }
  ]);
  const [newConnection, setNewConnection] = useState({ from: '', to: '', tunnelType: 'GRE', ipA: '', ipB: '' });
+  const [graphConnectionModalOpen, setGraphConnectionModalOpen] = useState(false);

  // Фильтры графа
  const [graphTunnelFilters, setGraphTunnelFilters] = useState({ GRE: true, IPSec: true, WireGuard: true, OpenVPN: true });
@@ -475,21 +476,38 @@ function ServerManager() {
      );
  }

-  // Добавление новой связи
-  const handleAddConnection = () => {
-    if (!newConnection.from || !newConnection.to || !newConnection.tunnelType || !newConnection.ipA || !newConnection.ipB) {
+  // Валидация и добавление связи (общая функция для формы и модального окна графа)
+  const addConnectionInternal = (draft) => {
+    if (!draft.from || !draft.to || !draft.tunnelType || !draft.ipA || !draft.ipB) {
      setError('Все поля для связи должны быть заполнены.');
-      return;
+      return false;
    }
-    if (newConnection.from === newConnection.to) {
+    if (draft.from === draft.to) {
      setError('Сервер A и сервер B не могут быть одинаковыми.');
-      return;
+      return false;
    }
-    setConnections([...connections, newConnection]);
-    setNewConnection({ from: '', to: '', tunnelType: 'GRE', ipA: '', ipB: '' });
-    setError('');
+    const next = { ...draft };
+    setConnections((prev) => [...prev, next]);
    setSuccess('Связь успешно добавлена!');
    setTimeout(() => setSuccess(''), 3000);
+    return true;
+  };
+
+  // Добавление новой связи из нижней формы
+  const handleAddConnection = () => {
+    const ok = addConnectionInternal(newConnection);
+    if (!ok) return;
+    setNewConnection({ from: '', to: '', tunnelType: 'GRE', ipA: '', ipB: '' });
+    setError('');
+  };
+
+  // Подтверждение связи, созданной через граф (модальное окно)
+  const handleConfirmGraphConnection = () => {
+    const ok = addConnectionInternal(newConnection);
+    if (!ok) return;
+    setGraphConnectionModalOpen(false);
+    setNewConnection({ from: '', to: '', tunnelType: 'GRE', ipA: '', ipB: '' });
+    setError('');
  };

  // Удаление связи
@@ -961,10 +979,19 @@ function ServerManager() {
            servers={servers.filter(s => (!graphCountryFilter || s.country === graphCountryFilter) && (!graphProviderFilter || s.provider === graphProviderFilter))} 
            connections={connections.filter(c => graphTunnelFilters[c.tunnelType])}
            onCreateConnection={({ from, to }) => {
-              // Открываем модал добавления связи и проставляем выбранные узлы
-              setNewConnection(prev => ({ ...prev, from, to }));
-              const el = document.querySelector('#add-connection-anchor');
-              if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+              // Открываем современный флоу создания связи прямо поверх графа
+              setNewConnection(prev => ({
+                ...prev,
+                from,
+                to,
+                // Если серверы уже имеют тип туннеля, предлагаем его по умолчанию
+                tunnelType:
+                  prev.tunnelType ||
+                  servers.find(s => s.ip === from)?.tunnel ||
+                  servers.find(s => s.ip === to)?.tunnel ||
+                  'GRE',
+              }));
+              setGraphConnectionModalOpen(true);
            }} 
          />
          <div className="mt-3">
@@ -977,6 +1004,80 @@ function ServerManager() {
          </div>
        </div>
      </div>
+      {/* Модальное окно для быстрого создания связи после соединения узлов на графе */}
+      <FormModal
+        show={graphConnectionModalOpen}
+        onClose={() => {
+          setGraphConnectionModalOpen(false);
+          setNewConnection({ from: '', to: '', tunnelType: 'GRE', ipA: '', ipB: '' });
+          setError('');
+        }}
+        onSubmit={handleConfirmGraphConnection}
+        title="Создать связь между серверами"
+        submitLabel="Создать связь"
+        submitIcon={IconPlus}
+        size="md"
+      >
+        {error && (
+          <div className="alert alert-danger mb-3" role="alert">
+            {error}
+          </div>
+        )}
+        <div className="mb-3">
+          <div className="text-muted small mb-1">Вы выбрали связь между:</div>
+          <div className="d-flex flex-wrap align-items-center gap-2">
+            <span className="badge bg-blue-lt text-blue">
+              {newConnection.from || 'Сервер A'}
+            </span>
+            <span className="text-muted">⇄</span>
+            <span className="badge bg-blue-lt text-blue">
+              {newConnection.to || 'Сервер B'}
+            </span>
+          </div>
+        </div>
+        <div className="row g-3">
+          <div className="col-md-4">
+            <FormField
+              label="Тип туннеля"
+              name="tunnelType"
+              type="select"
+              value={newConnection.tunnelType}
+              onChange={(val) => setNewConnection({ ...newConnection, tunnelType: val })}
+              required
+              options={[
+                { value: 'GRE', label: 'GRE' },
+                { value: 'IPSec', label: 'IPSec' },
+                { value: 'WireGuard', label: 'WireGuard' },
+                { value: 'OpenVPN', label: 'OpenVPN' },
+              ]}
+            />
+          </div>
+          <div className="col-md-4">
+            <FormField
+              label="IP адрес сервера A"
+              name="ipA"
+              value={newConnection.ipA}
+              onChange={(val) => setNewConnection({ ...newConnection, ipA: val })}
+              placeholder="10.10.100.1"
+              required
+            />
+          </div>
+          <div className="col-md-4">
+            <FormField
+              label="IP адрес сервера B"
+              name="ipB"
+              value={newConnection.ipB}
+              onChange={(val) => setNewConnection({ ...newConnection, ipB: val })}
+              placeholder="10.10.100.2"
+              required
+            />
+          </div>
+        </div>
+        <div className="mt-2 text-muted small">
+          Протяните линию между серверами в графе — здесь вы только уточняете параметры туннеля. Это делает
+          построение схемы максимально быстрым и наглядным.
+        </div>
+      </FormModal>
      <div id="add-connection-anchor" className="card w-100 mb-4">
        <div className="card-header">
          <h3 className="card-title mb-0">Добавить связь между серверами</h3>