Initial commit

frontend/src/components/Stats.jsx

@@ -0,0 +1,91 @@
+import { useState, useEffect } from 'react';
+import { Cpu, HardDrive, Activity } from 'lucide-react';
+import axios from 'axios';
+import { API_URL } from '../config';
+
+export default function Stats({ serverName, token }) {
+  const [stats, setStats] = useState({
+    status: 'stopped',
+    cpu: 0,
+    memory: 0,
+    disk: 0
+  });
+
+  useEffect(() => {
+    loadStats();
+    const interval = setInterval(loadStats, 2000);
+    return () => clearInterval(interval);
+  }, [serverName]);
+
+  const loadStats = async () => {
+    try {
+      const { data } = await axios.get(`${API_URL}/api/servers/${serverName}/stats`, {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      setStats(data);
+    } catch (error) {
+      console.error('Ошибка загрузки статистики:', error);
+    }
+  };
+
+  return (
+    <div className="p-8 bg-gray-900">
+      <h2 className="text-2xl font-bold mb-6">Статистика сервера</h2>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-semibold">CPU</h3>
+            <Cpu className="w-6 h-6 text-blue-400" />
+          </div>
+          <div className="text-3xl font-bold mb-2">{stats.cpu}%</div>
+          <div className="w-full bg-gray-700 rounded-full h-2">
+            <div
+              className="bg-blue-500 h-2 rounded-full transition-all"
+              style={{ width: `${Math.min(stats.cpu, 100)}%` }}
+            />
+          </div>
+        </div>
+
+        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-semibold">ОЗУ</h3>
+            <Activity className="w-6 h-6 text-green-400" />
+          </div>
+          <div className="text-3xl font-bold mb-2">{stats.memory} МБ</div>
+          <div className="w-full bg-gray-700 rounded-full h-2">
+            <div
+              className="bg-green-500 h-2 rounded-full transition-all"
+              style={{ width: `${Math.min((stats.memory / 2048) * 100, 100)}%` }}
+            />
+          </div>
+        </div>
+
+        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-semibold">Диск</h3>
+            <HardDrive className="w-6 h-6 text-purple-400" />
+          </div>
+          <div className="text-3xl font-bold mb-2">{stats.disk} МБ</div>
+          <div className="text-sm text-gray-400 mt-2">
+            Использовано на диске
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-8 bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <h3 className="text-lg font-semibold mb-4">Статус</h3>
+        <div className="flex items-center gap-3">
+          <div
+            className={`w-4 h-4 rounded-full ${
+              stats.status === 'running' ? 'bg-green-500' : 'bg-red-500'
+            }`}
+          />
+          <span className="text-xl">
+            {stats.status === 'running' ? 'Запущен' : 'Остановлен'}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}