Added Daemon system and fixed interface

frontend/src/components/Daemons.jsx

@@ -0,0 +1,382 @@
+import { useState, useEffect } from 'react';
+import { Server, Plus, Trash2, Edit, RefreshCw, CheckCircle, XCircle, Activity } from 'lucide-react';
+import axios from 'axios';
+import { API_URL } from '../config';
+import { notify } from './NotificationSystem';
+
+export default function Daemons({ token }) {
+  const [daemons, setDaemons] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [editingDaemon, setEditingDaemon] = useState(null);
+
+  const [formData, setFormData] = useState({
+    name: '',
+    address: '',
+    port: 24444,
+    key: '',
+    remarks: ''
+  });
+
+  useEffect(() => {
+    loadDaemons();
+    const interval = setInterval(loadDaemons, 10000); // Обновляем каждые 10 секунд
+    return () => clearInterval(interval);
+  }, []);
+
+  const loadDaemons = async () => {
+    try {
+      const { data } = await axios.get(`${API_URL}/api/daemons`, {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      setDaemons(data);
+      setLoading(false);
+    } catch (error) {
+      console.error('Ошибка загрузки демонов:', error);
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      if (editingDaemon) {
+        await axios.put(
+          `${API_URL}/api/daemons/${editingDaemon.id}`,
+          formData,
+          { headers: { Authorization: `Bearer ${token}` } }
+        );
+        notify('success', 'Демон обновлен', 'Демон успешно обновлен');
+      } else {
+        await axios.post(
+          `${API_URL}/api/daemons`,
+          formData,
+          { headers: { Authorization: `Bearer ${token}` } }
+        );
+        notify('success', 'Демон добавлен', 'Демон успешно добавлен');
+      }
+
+      setShowAddModal(false);
+      setEditingDaemon(null);
+      setFormData({ name: '', address: '', port: 24444, key: '', remarks: '' });
+      loadDaemons();
+    } catch (error) {
+      notify('error', 'Ошибка', error.response?.data?.detail || 'Не удалось сохранить демон');
+    }
+  };
+
+  const handleDelete = async (daemonId) => {
+    if (!confirm('Вы уверены, что хотите удалить этот демон?')) return;
+
+    try {
+      await axios.delete(`${API_URL}/api/daemons/${daemonId}`, {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      notify('success', 'Демон удален', 'Демон успешно удален');
+      loadDaemons();
+    } catch (error) {
+      notify('error', 'Ошибка удаления', error.response?.data?.detail || 'Не удалось удалить демон');
+    }
+  };
+
+  const handleEdit = (daemon) => {
+    setEditingDaemon(daemon);
+    setFormData({
+      name: daemon.name,
+      address: daemon.address,
+      port: daemon.port,
+      key: daemon.key,
+      remarks: daemon.remarks || ''
+    });
+    setShowAddModal(true);
+  };
+
+  const formatBytes = (bytes) => {
+    if (!bytes) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-gray-400">Загрузка демонов...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-3">
+          <Server className="w-8 h-8 text-blue-400" />
+          <div>
+            <h2 className="text-2xl font-bold text-white">Демоны</h2>
+            <p className="text-gray-400">Управление удаленными серверами</p>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={loadDaemons}
+            className="btn-secondary flex items-center gap-2"
+          >
+            <RefreshCw className="w-4 h-4" />
+            Обновить
+          </button>
+          <button
+            onClick={() => {
+              setEditingDaemon(null);
+              setFormData({ name: '', address: '', port: 24444, key: '', remarks: '' });
+              setShowAddModal(true);
+            }}
+            className="btn-primary flex items-center gap-2"
+          >
+            <Plus className="w-4 h-4" />
+            Добавить демон
+          </button>
+        </div>
+      </div>
+
+      {daemons.length === 0 ? (
+        <div className="card p-12 text-center">
+          <Server className="w-16 h-16 mx-auto mb-4 text-gray-500 opacity-50" />
+          <p className="text-lg font-medium mb-2">Нет демонов</p>
+          <p className="text-sm text-gray-400 mb-4">
+            Добавьте первый демон для управления удаленными серверами
+          </p>
+          <button
+            onClick={() => setShowAddModal(true)}
+            className="btn-primary"
+          >
+            Добавить демон
+          </button>
+        </div>
+      ) : (
+        <div className="grid gap-4">
+          {daemons.map((daemon) => (
+            <div key={daemon.id} className="card p-6">
+              <div className="flex items-start justify-between mb-4">
+                <div className="flex items-center gap-4">
+                  <div className={`p-3 rounded-xl ${daemon.status === 'online' ? 'bg-green-500/20' : 'bg-red-500/20'}`}>
+                    <Server className={`w-6 h-6 ${daemon.status === 'online' ? 'text-green-400' : 'text-red-400'}`} />
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <h3 className="text-lg font-semibold text-white">{daemon.name}</h3>
+                      {daemon.status === 'online' ? (
+                        <span className="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded flex items-center gap-1">
+                          <CheckCircle className="w-3 h-3" />
+                          Онлайн
+                        </span>
+                      ) : (
+                        <span className="px-2 py-1 bg-red-500/20 text-red-400 text-xs rounded flex items-center gap-1">
+                          <XCircle className="w-3 h-3" />
+                          Оффлайн
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-sm text-gray-400 mt-1">
+                      {daemon.address}:{daemon.port}
+                    </p>
+                    {daemon.remarks && (
+                      <p className="text-sm text-gray-500 mt-1">{daemon.remarks}</p>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => handleEdit(daemon)}
+                    className="p-2 bg-dark-700 hover:bg-dark-600 rounded transition"
+                    title="Редактировать"
+                  >
+                    <Edit className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(daemon.id)}
+                    className="p-2 bg-dark-700 hover:bg-dark-600 rounded text-red-400 transition"
+                    title="Удалить"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+
+              {daemon.status === 'online' && daemon.system && (
+                <div className="grid grid-cols-3 gap-4 mt-4 pt-4 border-t border-gray-700">
+                  <div>
+                    <div className="flex items-center gap-2 mb-2">
+                      <Activity className="w-4 h-4 text-blue-400" />
+                      <span className="text-sm text-gray-400">CPU</span>
+                    </div>
+                    <div className="text-xl font-bold text-white">{daemon.system.cpu_usage?.toFixed(1)}%</div>
+                    <div className="w-full bg-dark-700 rounded-full h-2 mt-2">
+                      <div
+                        className="bg-blue-500 h-2 rounded-full transition-all"
+                        style={{ width: `${Math.min(daemon.system.cpu_usage || 0, 100)}%` }}
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <div className="flex items-center gap-2 mb-2">
+                      <Activity className="w-4 h-4 text-green-400" />
+                      <span className="text-sm text-gray-400">ОЗУ</span>
+                    </div>
+                    <div className="text-xl font-bold text-white">{daemon.system.memory_percent?.toFixed(1)}%</div>
+                    <div className="text-xs text-gray-500">
+                      {formatBytes(daemon.system.memory_used)} / {formatBytes(daemon.system.memory_total)}
+                    </div>
+                    <div className="w-full bg-dark-700 rounded-full h-2 mt-2">
+                      <div
+                        className="bg-green-500 h-2 rounded-full transition-all"
+                        style={{ width: `${Math.min(daemon.system.memory_percent || 0, 100)}%` }}
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <div className="flex items-center gap-2 mb-2">
+                      <Activity className="w-4 h-4 text-purple-400" />
+                      <span className="text-sm text-gray-400">Диск</span>
+                    </div>
+                    <div className="text-xl font-bold text-white">{daemon.system.disk_percent?.toFixed(1)}%</div>
+                    <div className="text-xs text-gray-500">
+                      {formatBytes(daemon.system.disk_used)} / {formatBytes(daemon.system.disk_total)}
+                    </div>
+                    <div className="w-full bg-dark-700 rounded-full h-2 mt-2">
+                      <div
+                        className="bg-purple-500 h-2 rounded-full transition-all"
+                        style={{ width: `${Math.min(daemon.system.disk_percent || 0, 100)}%` }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {daemon.status === 'online' && daemon.servers && (
+                <div className="mt-4 pt-4 border-t border-gray-700">
+                  <div className="flex items-center gap-2 text-sm text-gray-400">
+                    <Server className="w-4 h-4" />
+                    <span>Серверов: {daemon.servers.total || 0}</span>
+                    <span className="text-gray-600">•</span>
+                    <span className="text-green-400">Запущено: {daemon.servers.running || 0}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Модальное окно добавления/редактирования */}
+      {showAddModal && (
+        <div className="modal-overlay" onClick={() => setShowAddModal(false)}>
+          <div className="modal-content max-w-2xl" onClick={(e) => e.stopPropagation()}>
+            <h2 className="text-xl font-bold text-white mb-6">
+              {editingDaemon ? 'Редактировать демон' : 'Добавить демон'}
+            </h2>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-2 text-white">
+                  Название
+                </label>
+                <input
+                  type="text"
+                  required
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="input"
+                  placeholder="Main Server"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium mb-2 text-white">
+                    IP адрес
+                  </label>
+                  <input
+                    type="text"
+                    required
+                    value={formData.address}
+                    onChange={(e) => setFormData({ ...formData, address: e.target.value })}
+                    className="input"
+                    placeholder="192.168.1.100"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium mb-2 text-white">
+                    Порт
+                  </label>
+                  <input
+                    type="number"
+                    required
+                    value={formData.port}
+                    onChange={(e) => setFormData({ ...formData, port: parseInt(e.target.value) })}
+                    className="input"
+                    placeholder="24444"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2 text-white">
+                  Ключ демона
+                </label>
+                <input
+                  type="text"
+                  required
+                  value={formData.key}
+                  onChange={(e) => setFormData({ ...formData, key: e.target.value })}
+                  className="input"
+                  placeholder="your-secret-key"
+                />
+                <p className="text-xs text-gray-400 mt-1">
+                  Ключ должен совпадать с DAEMON_KEY в .env файле демона
+                </p>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2 text-white">
+                  Примечания (необязательно)
+                </label>
+                <textarea
+                  value={formData.remarks}
+                  onChange={(e) => setFormData({ ...formData, remarks: e.target.value })}
+                  className="w-full bg-dark-800 border-gray-700 border rounded-xl px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 transition resize-none"
+                  rows={3}
+                  placeholder="Дополнительная информация о демоне"
+                />
+              </div>
+
+              <div className="flex gap-2 pt-4">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowAddModal(false);
+                    setEditingDaemon(null);
+                  }}
+                  className="flex-1 btn-secondary"
+                >
+                  Отмена
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 btn-primary"
+                >
+                  {editingDaemon ? 'Сохранить' : 'Добавить'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}