Add frontend real-time monitoring, snapshots, and configuration management

Co-authored-by: Ospab <189454929+Ospab@users.noreply.github.com>

ospabhost/frontend/src/hooks/useSocket.ts

@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react';
+import { io, Socket } from 'socket.io-client';
+
+const SOCKET_URL = 'http://localhost:5000';
+
+export function useSocket() {
+  const [socket, setSocket] = useState<Socket | null>(null);
+  const [connected, setConnected] = useState(false);
+
+  useEffect(() => {
+    const socketInstance = io(SOCKET_URL, {
+      transports: ['websocket', 'polling'],
+      reconnection: true,
+      reconnectionDelay: 1000,
+      reconnectionAttempts: 5
+    });
+
+    socketInstance.on('connect', () => {
+      console.log('WebSocket connected');
+      setConnected(true);
+    });
+
+    socketInstance.on('disconnect', () => {
+      console.log('WebSocket disconnected');
+      setConnected(false);
+    });
+
+    socketInstance.on('connect_error', (error) => {
+      console.error('WebSocket connection error:', error);
+    });
+
+    setSocket(socketInstance);
+
+    return () => {
+      socketInstance.close();
+    };
+  }, []);
+
+  return { socket, connected };
+}
+
+export function useServerStats(serverId: number | null) {
+  const { socket, connected } = useSocket();
+  const [stats, setStats] = useState<any>(null);
+  const [alerts, setAlerts] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (!socket || !connected || !serverId) return;
+
+    // Подписываемся на обновления сервера
+    socket.emit('subscribe-server', serverId);
+
+    // Обработчик обновлений статистики
+    socket.on('server-stats', (data: any) => {
+      if (data.serverId === serverId) {
+        setStats(data.stats);
+      }
+    });
+
+    // Обработчик алертов
+    socket.on('server-alerts', (data: any) => {
+      if (data.serverId === serverId) {
+        setAlerts(data.alerts);
+      }
+    });
+
+    // Отписываемся при размонтировании
+    return () => {
+      socket.emit('unsubscribe-server', serverId);
+      socket.off('server-stats');
+      socket.off('server-alerts');
+    };
+  }, [socket, connected, serverId]);
+
+  return { stats, alerts, connected };
+}

ospabhost/frontend/src/pages/dashboard/serverpanel.tsx

@@ -1,5 +1,9 @@
 
 import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import axios, { AxiosError } from 'axios';
+import { useServerStats } from '../../hooks/useSocket';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
 // Встроенная секция консоли
 function ConsoleSection({ serverId }: { serverId: number }) {
@@ -47,8 +51,264 @@ function ConsoleSection({ serverId }: { serverId: number }) {
     </div>
   );
 }
-import { useParams } from 'react-router-dom';
-import axios, { AxiosError } from 'axios';
+
+// Модальное окно для изменения конфигурации
+function ResizeModal({ serverId, onClose, onSuccess }: { serverId: number; onClose: () => void; onSuccess: () => void }) {
+  const [cores, setCores] = useState('');
+  const [memory, setMemory] = useState('');
+  const [disk, setDisk] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleResize = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const token = localStorage.getItem('access_token');
+      const headers = token ? { Authorization: `Bearer ${token}` } : {};
+      const data: any = {};
+      if (cores) data.cores = Number(cores);
+      if (memory) data.memory = Number(memory);
+      if (disk) data.disk = Number(disk);
+
+      const res = await axios.put(`http://localhost:5000/api/server/${serverId}/resize`, data, { headers });
+      if (res.data?.status === 'success') {
+        onSuccess();
+        onClose();
+      } else {
+        setError('Ошибка изменения конфигурации');
+      }
+    } catch (err) {
+      setError('Ошибка изменения конфигурации');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" onClick={onClose}>
+      <div className="bg-white rounded-3xl shadow-xl p-8 max-w-md w-full" onClick={(e) => e.stopPropagation()}>
+        <h2 className="text-2xl font-bold mb-6">Изменить конфигурацию</h2>
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-semibold mb-2">Количество ядер CPU</label>
+            <input
+              type="number"
+              value={cores}
+              onChange={(e) => setCores(e.target.value)}
+              className="w-full px-4 py-2 border rounded-lg"
+              placeholder="Оставьте пустым, чтобы не менять"
+              min="1"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-semibold mb-2">RAM (МБ)</label>
+            <input
+              type="number"
+              value={memory}
+              onChange={(e) => setMemory(e.target.value)}
+              className="w-full px-4 py-2 border rounded-lg"
+              placeholder="Например: 2048"
+              min="512"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-semibold mb-2">Диск (ГБ)</label>
+            <input
+              type="number"
+              value={disk}
+              onChange={(e) => setDisk(e.target.value)}
+              className="w-full px-4 py-2 border rounded-lg"
+              placeholder="Например: 40"
+              min="10"
+            />
+          </div>
+          {error && <div className="text-red-500">{error}</div>}
+          <div className="flex gap-4">
+            <button
+              onClick={handleResize}
+              disabled={loading}
+              className="flex-1 bg-ospab-primary text-white px-6 py-3 rounded-full font-bold disabled:opacity-50"
+            >
+              {loading ? 'Изменение...' : 'Применить'}
+            </button>
+            <button
+              onClick={onClose}
+              className="flex-1 bg-gray-300 text-gray-700 px-6 py-3 rounded-full font-bold"
+            >
+              Отмена
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Компонент для управления снэпшотами
+function SnapshotsSection({ serverId }: { serverId: number }) {
+  const [snapshots, setSnapshots] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [snapName, setSnapName] = useState('');
+  const [snapDesc, setSnapDesc] = useState('');
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    loadSnapshots();
+  }, [serverId]);
+
+  const loadSnapshots = async () => {
+    setLoading(true);
+    try {
+      const token = localStorage.getItem('access_token');
+      const headers = token ? { Authorization: `Bearer ${token}` } : {};
+      const res = await axios.get(`http://localhost:5000/api/server/${serverId}/snapshots`, { headers });
+      if (res.data?.status === 'success') {
+        setSnapshots(res.data.data || []);
+      }
+    } catch (err) {
+      console.error('Error loading snapshots:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreateSnapshot = async () => {
+    if (!snapName) {
+      setError('Введите имя снэпшота');
+      return;
+    }
+    setLoading(true);
+    setError('');
+    try {
+      const token = localStorage.getItem('access_token');
+      const headers = token ? { Authorization: `Bearer ${token}` } : {};
+      const res = await axios.post(
+        `http://localhost:5000/api/server/${serverId}/snapshots`,
+        { snapname: snapName, description: snapDesc },
+        { headers }
+      );
+      if (res.data?.status === 'success') {
+        setSnapName('');
+        setSnapDesc('');
+        loadSnapshots();
+      } else {
+        setError('Ошибка создания снэпшота');
+      }
+    } catch (err) {
+      setError('Ошибка создания снэпшота');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRollback = async (snapname: string) => {
+    if (!confirm(`Восстановить из снэпшота ${snapname}? Текущее состояние будет потеряно.`)) return;
+    setLoading(true);
+    try {
+      const token = localStorage.getItem('access_token');
+      const headers = token ? { Authorization: `Bearer ${token}` } : {};
+      await axios.post(
+        `http://localhost:5000/api/server/${serverId}/snapshots/rollback`,
+        { snapname },
+        { headers }
+      );
+      alert('Снэпшот восстановлен');
+    } catch (err) {
+      alert('Ошибка восстановления снэпшота');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (snapname: string) => {
+    if (!confirm(`Удалить снэпшот ${snapname}?`)) return;
+    setLoading(true);
+    try {
+      const token = localStorage.getItem('access_token');
+      const headers = token ? { Authorization: `Bearer ${token}` } : {};
+      await axios.delete(
+        `http://localhost:5000/api/server/${serverId}/snapshots`,
+        { data: { snapname }, headers }
+      );
+      loadSnapshots();
+    } catch (err) {
+      alert('Ошибка удаления снэпшота');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-gray-100 rounded-xl p-6">
+      <h3 className="text-xl font-bold mb-4">Управление снэпшотами</h3>
+      
+      <div className="bg-white rounded-lg p-4 mb-4">
+        <h4 className="font-semibold mb-3">Создать новый снэпшот</h4>
+        <div className="space-y-3">
+          <input
+            type="text"
+            value={snapName}
+            onChange={(e) => setSnapName(e.target.value)}
+            placeholder="Имя снэпшота (например: backup-2024)"
+            className="w-full px-4 py-2 border rounded-lg"
+          />
+          <input
+            type="text"
+            value={snapDesc}
+            onChange={(e) => setSnapDesc(e.target.value)}
+            placeholder="Описание (опционально)"
+            className="w-full px-4 py-2 border rounded-lg"
+          />
+          {error && <div className="text-red-500 text-sm">{error}</div>}
+          <button
+            onClick={handleCreateSnapshot}
+            disabled={loading}
+            className="bg-ospab-primary text-white px-6 py-2 rounded-full font-bold disabled:opacity-50"
+          >
+            {loading ? 'Создание...' : 'Создать снэпшот'}
+          </button>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg p-4">
+        <h4 className="font-semibold mb-3">Существующие снэпшоты</h4>
+        {snapshots.length === 0 ? (
+          <p className="text-gray-500">Снэпшотов пока нет</p>
+        ) : (
+          <div className="space-y-2">
+            {snapshots.map((snap) => (
+              <div key={snap.name} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                <div>
+                  <div className="font-semibold">{snap.name}</div>
+                  <div className="text-sm text-gray-600">{snap.description || 'Без описания'}</div>
+                </div>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => handleRollback(snap.name)}
+                    className="bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-semibold hover:bg-blue-600"
+                  >
+                    Восстановить
+                  </button>
+                  <button
+                    onClick={() => handleDelete(snap.name)}
+                    className="bg-red-500 text-white px-4 py-1 rounded-full text-sm font-semibold hover:bg-red-600"
+                  >
+                    Удалить
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
 
 interface Server {
   id: number;
@@ -73,6 +333,8 @@ const TABS = [
   { key: 'console', label: 'Консоль' },
   { key: 'stats', label: 'Статистика' },
   { key: 'manage', label: 'Управление' },
+  { key: 'snapshots', label: 'Снэпшоты' },
+  { key: 'resize', label: 'Конфигурация' },
   { key: 'security', label: 'Безопасность' },
 ];
 
@@ -86,6 +348,10 @@ const ServerPanel: React.FC = () => {
   const [newRoot, setNewRoot] = useState<string | null>(null);
   const [showRoot, setShowRoot] = useState(false);
   const [stats, setStats] = useState<ServerStats | null>(null);
+  const [showResizeModal, setShowResizeModal] = useState(false);
+  
+  // Real-time WebSocket stats
+  const { stats: realtimeStats, alerts, connected } = useServerStats(server?.id || null);
 
   useEffect(() => {
     const fetchServer = async () => {
@@ -210,16 +476,105 @@ const ServerPanel: React.FC = () => {
         )}
 
         {activeTab === 'stats' && (
-          <div className="bg-gray-100 rounded-xl p-6">
-            <div className="mb-2 font-bold">Графики нагрузки</div>
-            <div className="flex gap-6">
-              <div className="w-1/2 h-32 bg-white rounded-lg shadow-inner flex flex-col items-center justify-center">
-                <div className="font-bold text-gray-700">CPU</div>
-                <div className="text-2xl text-ospab-primary">{stats?.data?.cpu ? (stats.data.cpu * 100).toFixed(1) : '—'}%</div>
+          <div className="space-y-6">
+            {/* WebSocket connection status */}
+            <div className="flex items-center gap-2 mb-4">
+              <div className={`w-3 h-3 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`}></div>
+              <span className="text-sm text-gray-600">
+                {connected ? 'Подключено к live-мониторингу' : 'Нет подключения к мониторингу'}
+              </span>
+            </div>
+
+            {/* Alerts */}
+            {alerts.length > 0 && (
+              <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-4">
+                <h3 className="font-bold text-yellow-800 mb-2">⚠️ Предупреждения</h3>
+                <div className="space-y-1">
+                  {alerts.map((alert, idx) => (
+                    <div key={idx} className="text-yellow-700 text-sm">
+                      {alert.message}
+                    </div>
+                  ))}
+                </div>
               </div>
-              <div className="w-1/2 h-32 bg-white rounded-lg shadow-inner flex flex-col items-center justify-center">
-                <div className="font-bold text-gray-700">RAM</div>
-                <div className="text-2xl text-ospab-primary">{stats?.data?.memory?.usage ? stats.data.memory.usage.toFixed(1) : '—'}%</div>
+            )}
+
+            {/* Real-time stats cards */}
+            <div className="grid grid-cols-3 gap-4">
+              <div className="bg-white rounded-xl p-6 shadow-sm">
+                <div className="font-bold text-gray-700 mb-2">CPU</div>
+                <div className="text-3xl text-ospab-primary font-bold">
+                  {realtimeStats?.data?.cpu ? (realtimeStats.data.cpu * 100).toFixed(1) : stats?.data?.cpu ? (stats.data.cpu * 100).toFixed(1) : '—'}%
+                </div>
+              </div>
+              <div className="bg-white rounded-xl p-6 shadow-sm">
+                <div className="font-bold text-gray-700 mb-2">RAM</div>
+                <div className="text-3xl text-ospab-primary font-bold">
+                  {realtimeStats?.data?.memory?.usage?.toFixed(1) || stats?.data?.memory?.usage?.toFixed(1) || '—'}%
+                </div>
+              </div>
+              <div className="bg-white rounded-xl p-6 shadow-sm">
+                <div className="font-bold text-gray-700 mb-2">Disk</div>
+                <div className="text-3xl text-ospab-primary font-bold">
+                  {realtimeStats?.data?.disk?.usage?.toFixed(1) || '—'}%
+                </div>
+              </div>
+            </div>
+
+            {/* Charts */}
+            {realtimeStats?.data?.rrdData && realtimeStats.data.rrdData.length > 0 && (
+              <div className="bg-white rounded-xl p-6 shadow-sm">
+                <h3 className="font-bold text-gray-800 mb-4">История использования (последний час)</h3>
+                <ResponsiveContainer width="100%" height={300}>
+                  <LineChart data={realtimeStats.data.rrdData}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="time" hide />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Line type="monotone" dataKey="cpu" stroke="#8b5cf6" name="CPU %" />
+                    <Line type="monotone" dataKey="mem" stroke="#3b82f6" name="Memory (bytes)" />
+                  </LineChart>
+                </ResponsiveContainer>
+              </div>
+            )}
+
+            {/* Detailed stats */}
+            <div className="bg-gray-100 rounded-xl p-6">
+              <div className="mb-2 font-bold">Детальная статистика</div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="bg-white rounded-lg p-4">
+                  <div className="text-sm text-gray-600">Memory Used</div>
+                  <div className="text-lg font-semibold">
+                    {realtimeStats?.data?.memory?.used 
+                      ? `${(realtimeStats.data.memory.used / (1024 * 1024 * 1024)).toFixed(2)} GB`
+                      : '—'}
+                  </div>
+                </div>
+                <div className="bg-white rounded-lg p-4">
+                  <div className="text-sm text-gray-600">Memory Max</div>
+                  <div className="text-lg font-semibold">
+                    {realtimeStats?.data?.memory?.max
+                      ? `${(realtimeStats.data.memory.max / (1024 * 1024 * 1024)).toFixed(2)} GB`
+                      : '—'}
+                  </div>
+                </div>
+                <div className="bg-white rounded-lg p-4">
+                  <div className="text-sm text-gray-600">Network In</div>
+                  <div className="text-lg font-semibold">
+                    {realtimeStats?.data?.network?.in
+                      ? `${(realtimeStats.data.network.in / (1024 * 1024)).toFixed(2)} MB`
+                      : '—'}
+                  </div>
+                </div>
+                <div className="bg-white rounded-lg p-4">
+                  <div className="text-sm text-gray-600">Network Out</div>
+                  <div className="text-lg font-semibold">
+                    {realtimeStats?.data?.network?.out
+                      ? `${(realtimeStats.data.network.out / (1024 * 1024)).toFixed(2)} MB`
+                      : '—'}
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -233,6 +588,26 @@ const ServerPanel: React.FC = () => {
           </div>
         )}
 
+        {activeTab === 'snapshots' && (
+          <SnapshotsSection serverId={server.id} />
+        )}
+
+        {activeTab === 'resize' && (
+          <div className="bg-gray-100 rounded-xl p-6">
+            <h3 className="text-xl font-bold mb-4">Изменение конфигурации сервера</h3>
+            <p className="text-gray-600 mb-4">
+              Вы можете увеличить или уменьшить ресурсы вашего сервера (CPU, RAM, диск).
+              Изменения вступят в силу после перезапуска сервера.
+            </p>
+            <button
+              onClick={() => setShowResizeModal(true)}
+              className="bg-ospab-primary text-white px-6 py-3 rounded-full font-bold hover:bg-opacity-90"
+            >
+              Изменить конфигурацию
+            </button>
+          </div>
+        )}
+
         {activeTab === 'security' && (
           <div className="space-y-4">
             <button className="bg-ospab-primary text-white px-6 py-3 rounded-full font-bold" onClick={handleGenerateRoot}>Сгенерировать новый root-пароль</button>
@@ -246,6 +621,24 @@ const ServerPanel: React.FC = () => {
           </div>
         )}
       </div>
+
+      {/* Resize Modal */}
+      {showResizeModal && (
+        <ResizeModal
+          serverId={server.id}
+          onClose={() => setShowResizeModal(false)}
+          onSuccess={() => {
+            // Reload server data after resize
+            const fetchServer = async () => {
+              const token = localStorage.getItem('access_token');
+              const headers = token ? { Authorization: `Bearer ${token}` } : {};
+              const res = await axios.get(`http://localhost:5000/api/server/${id}`, { headers });
+              setServer(res.data);
+            };
+            fetchServer();
+          }}
+        />
+      )}
     </div>
   );
 };