Added Daemon system and fixed interface

frontend/src/App.jsx

@@ -13,6 +13,7 @@ import Users from './components/Users';
 import UserManagement from './components/UserManagement';
 import Tickets from './components/Tickets';
 import Profile from './components/Profile';
+import Daemons from './components/Daemons';
 import Auth from './components/Auth';
 import ErrorBoundary from './components/ErrorBoundary';
 import NotificationSystem, { notify } from './components/NotificationSystem';
@@ -27,6 +28,7 @@ function App() {
   const [activeTab, setActiveTab] = useState('console');
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showUserManagement, setShowUserManagement] = useState(false);
+  const [showDaemons, setShowDaemons] = useState(false);
   const [showTickets, setShowTickets] = useState(false);
   const [showProfile, setShowProfile] = useState(false);
   const [connectionError, setConnectionError] = useState(false);
@@ -216,17 +218,30 @@ function App() {
 
           {/* Bottom section */}
           <div className="p-4 border-t border-dark-700 space-y-2">
-            {user?.role === 'owner' && (
-              <button
-                onClick={() => {
-                  setShowUserManagement(true);
-                  setCurrentView('management');
-                }}
-                className="sidebar-item w-full"
-              >
-                <Shield className="w-5 h-5 flex-shrink-0 text-yellow-500" />
-                {sidebarOpen && <span>Управление</span>}
-              </button>
+            {(user?.role === 'owner' || user?.role === 'admin') && (
+              <>
+                <button
+                  onClick={() => {
+                    setShowUserManagement(true);
+                    setCurrentView('management');
+                  }}
+                  className="sidebar-item w-full"
+                >
+                  <Shield className="w-5 h-5 flex-shrink-0 text-yellow-500" />
+                  {sidebarOpen && <span>Управление</span>}
+                </button>
+                
+                <button
+                  onClick={() => {
+                    setShowDaemons(true);
+                    setCurrentView('daemons');
+                  }}
+                  className="sidebar-item w-full"
+                >
+                  <Server className="w-5 h-5 flex-shrink-0 text-blue-500" />
+                  {sidebarOpen && <span>Демоны</span>}
+                </button>
+              </>
             )}
 
             <button
@@ -279,6 +294,7 @@ function App() {
                 {currentView === 'dashboard' && 'Панель управления'}
                 {currentView === 'server' && selectedServer?.displayName}
                 {currentView === 'management' && 'Управление пользователями'}
+                {currentView === 'daemons' && 'Управление демонами'}
                 {currentView === 'tickets' && 'Тикеты поддержки'}
                 {currentView === 'profile' && 'Профиль'}
               </h1>
@@ -538,6 +554,14 @@ function App() {
           </div>
         )}
 
+        {showDaemons && (
+          <div className="modal-overlay" onClick={() => setShowDaemons(false)}>
+            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+              <Daemons token={token} />
+            </div>
+          </div>
+        )}
+
         {showTickets && (
           <div className="modal-overlay" onClick={() => setShowTickets(false)}>
             <div className="modal-content" onClick={(e) => e.stopPropagation()}>

frontend/src/components/CreateServerModal.jsx

@@ -1,16 +1,36 @@
-import { useState } from 'react';
-import { X } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { X, Server } from 'lucide-react';
 import axios from 'axios';
 import { API_URL } from '../config';
 import { notify } from './NotificationSystem';
 
-export default function CreateServerModal({ token, theme, onClose, onCreated }) {
+export default function CreateServerModal({ token, onClose, onSuccess }) {
   const [formData, setFormData] = useState({
     name: '',
     displayName: '',
-    startCommand: 'java -Xmx2G -Xms1G -jar server.jar nogui'
+    startCommand: 'java -Xmx2G -Xms1G -jar server.jar nogui',
+    daemonId: 'local' // По умолчанию локальный
   });
   const [loading, setLoading] = useState(false);
+  const [daemons, setDaemons] = useState([]);
+  const [loadingDaemons, setLoadingDaemons] = useState(true);
+
+  useEffect(() => {
+    loadDaemons();
+  }, []);
+
+  const loadDaemons = async () => {
+    try {
+      const { data } = await axios.get(`${API_URL}/api/daemons`, {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      setDaemons(data.filter(d => d.status === 'online')); // Только онлайн демоны
+    } catch (error) {
+      console.error('Ошибка загрузки демонов:', error);
+    } finally {
+      setLoadingDaemons(false);
+    }
+  };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -23,11 +43,10 @@ export default function CreateServerModal({ token, theme, onClose, onCreated })
         { headers: { Authorization: `Bearer ${token}` } }
       );
       notify('success', 'Сервер создан', `Сервер "${formData.displayName}" успешно создан`);
-      onCreated();
+      if (onSuccess) onSuccess();
       onClose();
     } catch (error) {
       notify('error', 'Ошибка создания', error.response?.data?.detail || 'Не удалось создать сервер');
-      alert(error.response?.data?.detail || 'Ошибка создания сервера');
     } finally {
       setLoading(false);
     }
@@ -35,12 +54,12 @@ export default function CreateServerModal({ token, theme, onClose, onCreated })
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <div className={`${theme.secondary} rounded-2xl p-6 w-full max-w-md shadow-2xl ${theme.border} border`}>
+      <div className="bg-dark-800 rounded-2xl p-6 w-full max-w-md shadow-2xl border border-gray-700">
         <div className="flex items-center justify-between mb-6">
-          <h2 className={`text-xl font-bold ${theme.text}`}>Создать сервер</h2>
+          <h2 className="text-xl font-bold text-white">Создать сервер</h2>
           <button
             onClick={onClose}
-            className={`${theme.textSecondary} hover:${theme.text} transition`}
+            className="text-gray-400 hover:text-white transition"
           >
             <X className="w-6 h-6" />
           </button>
@@ -48,7 +67,34 @@ export default function CreateServerModal({ token, theme, onClose, onCreated })
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
+            <label className="block text-sm font-medium mb-2 text-white">
+              Демон
+            </label>
+            {loadingDaemons ? (
+              <div className="input text-gray-400">Загрузка демонов...</div>
+            ) : (
+              <select
+                value={formData.daemonId}
+                onChange={(e) => setFormData({ ...formData, daemonId: e.target.value })}
+                className="w-full bg-dark-700 border border-gray-600 rounded-xl px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+              >
+                <option value="local">Локальный (эта машина)</option>
+                {daemons.map((daemon) => (
+                  <option key={daemon.id} value={daemon.id}>
+                    {daemon.name} ({daemon.address}:{daemon.port})
+                  </option>
+                ))}
+              </select>
+            )}
+            <p className="text-xs text-gray-400 mt-1">
+              {formData.daemonId === 'local' 
+                ? 'Сервер будет создан на этой машине' 
+                : 'Сервер будет создан на удаленном демоне'}
+            </p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2 text-white">
               Имя папки (только латиница, цифры, _ и -)
             </label>
             <input
@@ -56,13 +102,13 @@ export default function CreateServerModal({ token, theme, onClose, onCreated })
               required
               value={formData.name}
               onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-2 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+              className="input"
               placeholder="my_server"
             />
           </div>
 
           <div>
-            <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
+            <label className="block text-sm font-medium mb-2 text-white">
               Отображаемое имя
             </label>
             <input
@@ -70,13 +116,13 @@ export default function CreateServerModal({ token, theme, onClose, onCreated })
               required
               value={formData.displayName}
               onChange={(e) => setFormData({ ...formData, displayName: e.target.value })}
-              className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-2 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+              className="input"
               placeholder="Мой сервер"
             />
           </div>
 
           <div>
-            <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
+            <label className="block text-sm font-medium mb-2 text-white">
               Команда запуска
             </label>
             <input
@@ -84,7 +130,7 @@ export default function CreateServerModal({ token, theme, onClose, onCreated })
               required
               value={formData.startCommand}
               onChange={(e) => setFormData({ ...formData, startCommand: e.target.value })}
-              className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-2 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+              className="input"
             />
           </div>
 
@@ -92,14 +138,14 @@ export default function CreateServerModal({ token, theme, onClose, onCreated })
             <button
               type="button"
               onClick={onClose}
-              className={`flex-1 ${theme.card} ${theme.hover} px-4 py-2 rounded-xl transition`}
+              className="flex-1 bg-dark-700 hover:bg-dark-600 px-4 py-2 rounded-xl transition text-white"
             >
               Отмена
             </button>
             <button
               type="submit"
               disabled={loading}
-              className={`flex-1 ${theme.accent} ${theme.accentHover} px-4 py-2 rounded-xl disabled:opacity-50 transition text-white`}
+              className="flex-1 btn-primary disabled:opacity-50"
             >
               {loading ? 'Создание...' : 'Создать'}
             </button>

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>
+  );
+}