arkonsadter
d188cec1f0
All checks were successful
continuous-integration/drone/push Build is passing
588 lines
23 KiB
JavaScript
588 lines
23 KiB
JavaScript
import { useState, useEffect } from 'react';
|
||
import {
|
||
Server, Play, Square, Terminal, FolderOpen, Settings, Plus,
|
||
Users as UsersIcon, LogOut, Menu, X, MessageSquare, UserCircle,
|
||
Shield, Activity, HardDrive, Cpu, BarChart3, Home
|
||
} from 'lucide-react';
|
||
import Console from './components/Console';
|
||
import FileManager from './components/FileManager';
|
||
import Stats from './components/Stats';
|
||
import ServerSettings from './components/ServerSettings';
|
||
import CreateServerModal from './components/CreateServerModal';
|
||
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';
|
||
import axios from 'axios';
|
||
import { API_URL } from './config';
|
||
|
||
function App() {
|
||
const [token, setToken] = useState(localStorage.getItem('token'));
|
||
const [user, setUser] = useState(null);
|
||
const [servers, setServers] = useState([]);
|
||
const [selectedServer, setSelectedServer] = useState(null);
|
||
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);
|
||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||
const [currentView, setCurrentView] = useState('dashboard');
|
||
|
||
useEffect(() => {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const callbackToken = urlParams.get('token');
|
||
const callbackUsername = urlParams.get('username');
|
||
|
||
if (callbackToken && callbackUsername) {
|
||
localStorage.setItem('token', callbackToken);
|
||
setToken(callbackToken);
|
||
setUser({ username: callbackUsername });
|
||
window.history.replaceState({}, document.title, window.location.pathname);
|
||
return;
|
||
}
|
||
|
||
if (token) {
|
||
loadUser();
|
||
loadServers();
|
||
const interval = setInterval(loadServers, 5000);
|
||
return () => clearInterval(interval);
|
||
}
|
||
}, [token]);
|
||
|
||
const loadUser = async () => {
|
||
try {
|
||
const { data } = await axios.get(`${API_URL}/api/auth/me`, {
|
||
headers: { Authorization: `Bearer ${token}` }
|
||
});
|
||
setUser(data);
|
||
} catch (error) {
|
||
console.error('Ошибка загрузки пользователя:', error);
|
||
handleLogout();
|
||
}
|
||
};
|
||
|
||
const loadServers = async () => {
|
||
try {
|
||
const { data } = await axios.get(`${API_URL}/api/servers`, {
|
||
headers: { Authorization: `Bearer ${token}` }
|
||
});
|
||
setServers(data);
|
||
setConnectionError(false);
|
||
} catch (error) {
|
||
console.error('Ошибка загрузки серверов:', error);
|
||
if (error.response?.status === 401) {
|
||
handleLogout();
|
||
} else {
|
||
setConnectionError(true);
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleLogin = async (username, password, isLogin) => {
|
||
const endpoint = isLogin ? '/api/auth/login' : '/api/auth/register';
|
||
const { data } = await axios.post(`${API_URL}${endpoint}`, {
|
||
username,
|
||
password
|
||
});
|
||
|
||
localStorage.setItem('token', data.access_token);
|
||
setToken(data.access_token);
|
||
setUser({ username: data.username, role: data.role });
|
||
notify.success(`Добро пожаловать, ${data.username}!`);
|
||
};
|
||
|
||
const handleLogout = () => {
|
||
localStorage.removeItem('token');
|
||
setToken(null);
|
||
setUser(null);
|
||
setServers([]);
|
||
setSelectedServer(null);
|
||
notify.info('Вы вышли из системы');
|
||
};
|
||
|
||
const handleServerAction = async (serverName, action) => {
|
||
try {
|
||
await axios.post(
|
||
`${API_URL}/api/servers/${serverName}/${action}`,
|
||
{},
|
||
{ headers: { Authorization: `Bearer ${token}` } }
|
||
);
|
||
notify.success(`Сервер ${action === 'start' ? 'запущен' : 'остановлен'}`);
|
||
loadServers();
|
||
} catch (error) {
|
||
notify.error(`Ошибка: ${error.response?.data?.detail || error.message}`);
|
||
}
|
||
};
|
||
|
||
if (!token) {
|
||
return (
|
||
<ErrorBoundary>
|
||
<Auth onLogin={handleLogin} />
|
||
<NotificationSystem />
|
||
</ErrorBoundary>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<ErrorBoundary>
|
||
<div className="flex h-screen bg-dark-900 overflow-hidden">
|
||
{/* Sidebar */}
|
||
<aside className={`${sidebarOpen ? 'w-64' : 'w-20'} bg-dark-850 border-r border-dark-700 transition-all duration-300 flex flex-col`}>
|
||
{/* Logo */}
|
||
<div className="h-16 flex items-center justify-between px-4 border-b border-dark-700">
|
||
{sidebarOpen && (
|
||
<div className="flex items-center gap-2">
|
||
<Server className="w-8 h-8 text-primary-500" />
|
||
<span className="text-xl font-bold bg-gradient-to-r from-primary-400 to-blue-500 bg-clip-text text-transparent">
|
||
MC Panel
|
||
</span>
|
||
</div>
|
||
)}
|
||
<button
|
||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||
className="btn-icon"
|
||
>
|
||
{sidebarOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Navigation */}
|
||
<nav className="flex-1 p-4 space-y-2 overflow-y-auto">
|
||
<button
|
||
onClick={() => {
|
||
setCurrentView('dashboard');
|
||
setSelectedServer(null);
|
||
}}
|
||
className={currentView === 'dashboard' ? 'sidebar-item-active w-full' : 'sidebar-item w-full'}
|
||
>
|
||
<Home className="w-5 h-5 flex-shrink-0" />
|
||
{sidebarOpen && <span>Главная</span>}
|
||
</button>
|
||
|
||
{sidebarOpen && (
|
||
<div className="pt-4 pb-2">
|
||
<div className="flex items-center justify-between px-4 mb-2">
|
||
<span className="text-xs font-semibold text-gray-500 uppercase">Серверы</span>
|
||
<button
|
||
onClick={() => setShowCreateModal(true)}
|
||
className="p-1 rounded hover:bg-dark-700 text-primary-500"
|
||
>
|
||
<Plus className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{servers.map((server) => (
|
||
<button
|
||
key={server.name}
|
||
onClick={() => {
|
||
setSelectedServer(server);
|
||
setCurrentView('server');
|
||
setActiveTab('console');
|
||
}}
|
||
className={selectedServer?.name === server.name ? 'sidebar-item-active w-full' : 'sidebar-item w-full'}
|
||
>
|
||
<div className={`w-2 h-2 rounded-full flex-shrink-0 ${
|
||
server.status === 'running' ? 'bg-green-500 shadow-glow' : 'bg-gray-600'
|
||
}`} />
|
||
{sidebarOpen && (
|
||
<div className="flex-1 text-left truncate">
|
||
<div className="text-sm font-medium">{server.displayName}</div>
|
||
<div className="text-xs text-gray-500">{server.status === 'running' ? 'Запущен' : 'Остановлен'}</div>
|
||
</div>
|
||
)}
|
||
</button>
|
||
))}
|
||
|
||
{sidebarOpen && servers.length === 0 && (
|
||
<div className="text-center py-8 text-gray-500 text-sm">
|
||
<Server className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
||
<p>Нет серверов</p>
|
||
<button
|
||
onClick={() => setShowCreateModal(true)}
|
||
className="btn-primary mt-2 text-xs"
|
||
>
|
||
Создать сервер
|
||
</button>
|
||
</div>
|
||
)}
|
||
</nav>
|
||
|
||
{/* Bottom section */}
|
||
<div className="p-4 border-t border-dark-700 space-y-2">
|
||
{(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
|
||
onClick={() => {
|
||
setShowTickets(true);
|
||
setCurrentView('tickets');
|
||
}}
|
||
className="sidebar-item w-full"
|
||
>
|
||
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
||
{sidebarOpen && <span>Тикеты</span>}
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => {
|
||
setShowProfile(true);
|
||
setCurrentView('profile');
|
||
}}
|
||
className="sidebar-item w-full"
|
||
>
|
||
<UserCircle className="w-5 h-5 flex-shrink-0" />
|
||
{sidebarOpen && <span>Профиль</span>}
|
||
</button>
|
||
|
||
<button
|
||
onClick={handleLogout}
|
||
className="sidebar-item w-full text-red-400 hover:text-red-300 hover:bg-red-600/10"
|
||
>
|
||
<LogOut className="w-5 h-5 flex-shrink-0" />
|
||
{sidebarOpen && <span>Выход</span>}
|
||
</button>
|
||
|
||
{sidebarOpen && user && (
|
||
<div className="pt-2 border-t border-dark-700">
|
||
<div className="text-xs text-gray-500">
|
||
<div className="font-medium text-gray-300">{user.username}</div>
|
||
<div className="capitalize">{user.role}</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</aside>
|
||
|
||
{/* Main content */}
|
||
<main className="flex-1 flex flex-col overflow-hidden">
|
||
{/* Header */}
|
||
<header className="h-16 bg-dark-850 border-b border-dark-700 flex items-center justify-between px-6">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-100">
|
||
{currentView === 'dashboard' && 'Панель управления'}
|
||
{currentView === 'server' && selectedServer?.displayName}
|
||
{currentView === 'management' && 'Управление пользователями'}
|
||
{currentView === 'daemons' && 'Управление демонами'}
|
||
{currentView === 'tickets' && 'Тикеты поддержки'}
|
||
{currentView === 'profile' && 'Профиль'}
|
||
</h1>
|
||
{currentView === 'server' && selectedServer && (
|
||
<p className="text-sm text-gray-500">
|
||
{selectedServer.name} • {selectedServer.status === 'running' ? 'Запущен' : 'Остановлен'}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{currentView === 'server' && selectedServer && (
|
||
<div className="flex items-center gap-2">
|
||
{selectedServer.status === 'stopped' ? (
|
||
<button
|
||
onClick={() => handleServerAction(selectedServer.name, 'start')}
|
||
className="btn-success flex items-center gap-2"
|
||
>
|
||
<Play className="w-4 h-4" />
|
||
Запустить
|
||
</button>
|
||
) : (
|
||
<button
|
||
onClick={() => handleServerAction(selectedServer.name, 'stop')}
|
||
className="btn-danger flex items-center gap-2"
|
||
>
|
||
<Square className="w-4 h-4" />
|
||
Остановить
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</header>
|
||
|
||
{/* Content area */}
|
||
<div className="flex-1 overflow-auto p-6">
|
||
{connectionError && (
|
||
<div className="card p-4 mb-4 bg-red-600/10 border-red-600/30">
|
||
<p className="text-red-400">⚠️ Ошибка подключения к серверу</p>
|
||
</div>
|
||
)}
|
||
|
||
{currentView === 'dashboard' && (
|
||
<div className="space-y-6 animate-fade-in">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
<div className="stat-card">
|
||
<div className="stat-icon">
|
||
<Server className="w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<div className="text-2xl font-bold">{servers.length}</div>
|
||
<div className="text-sm text-gray-500">Всего серверов</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="stat-card">
|
||
<div className="stat-icon bg-green-600/20 text-green-400">
|
||
<Activity className="w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<div className="text-2xl font-bold text-green-400">
|
||
{servers.filter(s => s.status === 'running').length}
|
||
</div>
|
||
<div className="text-sm text-gray-500">Запущено</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="stat-card">
|
||
<div className="stat-icon bg-gray-600/20 text-gray-400">
|
||
<Square className="w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<div className="text-2xl font-bold text-gray-400">
|
||
{servers.filter(s => s.status === 'stopped').length}
|
||
</div>
|
||
<div className="text-sm text-gray-500">Остановлено</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="stat-card">
|
||
<div className="stat-icon bg-purple-600/20 text-purple-400">
|
||
<UserCircle className="w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<div className="text-2xl font-bold text-purple-400">{user?.username}</div>
|
||
<div className="text-sm text-gray-500 capitalize">{user?.role}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-xl font-bold">Ваши серверы</h2>
|
||
<button
|
||
onClick={() => setShowCreateModal(true)}
|
||
className="btn-primary flex items-center gap-2"
|
||
>
|
||
<Plus className="w-4 h-4" />
|
||
Создать сервер
|
||
</button>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{servers.map((server) => (
|
||
<div
|
||
key={server.name}
|
||
onClick={() => {
|
||
setSelectedServer(server);
|
||
setCurrentView('server');
|
||
}}
|
||
className="server-card"
|
||
>
|
||
<div className="flex items-start justify-between mb-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className={`p-3 rounded-lg ${
|
||
server.status === 'running'
|
||
? 'bg-green-600/20 text-green-400'
|
||
: 'bg-gray-600/20 text-gray-400'
|
||
}`}>
|
||
<Server className="w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-lg">{server.displayName}</h3>
|
||
<p className="text-sm text-gray-500">{server.name}</p>
|
||
</div>
|
||
</div>
|
||
<span className={server.status === 'running' ? 'badge-success' : 'badge-danger'}>
|
||
{server.status === 'running' ? 'Запущен' : 'Остановлен'}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
{server.status === 'stopped' ? (
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleServerAction(server.name, 'start');
|
||
}}
|
||
className="btn-success flex-1 flex items-center justify-center gap-2"
|
||
>
|
||
<Play className="w-4 h-4" />
|
||
Запустить
|
||
</button>
|
||
) : (
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleServerAction(server.name, 'stop');
|
||
}}
|
||
className="btn-danger flex-1 flex items-center justify-center gap-2"
|
||
>
|
||
<Square className="w-4 h-4" />
|
||
Остановить
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setSelectedServer(server);
|
||
setCurrentView('server');
|
||
}}
|
||
className="btn-secondary"
|
||
>
|
||
<Terminal className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{servers.length === 0 && (
|
||
<div className="card p-12 text-center">
|
||
<Server className="w-16 h-16 mx-auto mb-4 text-gray-600" />
|
||
<h3 className="text-xl font-semibold mb-2">Нет серверов</h3>
|
||
<p className="text-gray-500 mb-4">Создайте свой первый сервер</p>
|
||
<button
|
||
onClick={() => setShowCreateModal(true)}
|
||
className="btn-primary"
|
||
>
|
||
<Plus className="w-4 h-4 inline mr-2" />
|
||
Создать сервер
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{currentView === 'server' && selectedServer && (
|
||
<div className="space-y-4 animate-fade-in">
|
||
{/* Tabs */}
|
||
<div className="card p-2 flex gap-2 overflow-x-auto">
|
||
<button
|
||
onClick={() => setActiveTab('console')}
|
||
className={activeTab === 'console' ? 'tab-active' : 'tab'}
|
||
>
|
||
<Terminal className="w-4 h-4 inline mr-2" />
|
||
Консоль
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab('files')}
|
||
className={activeTab === 'files' ? 'tab-active' : 'tab'}
|
||
>
|
||
<FolderOpen className="w-4 h-4 inline mr-2" />
|
||
Файлы
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab('stats')}
|
||
className={activeTab === 'stats' ? 'tab-active' : 'tab'}
|
||
>
|
||
<BarChart3 className="w-4 h-4 inline mr-2" />
|
||
Статистика
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab('settings')}
|
||
className={activeTab === 'settings' ? 'tab-active' : 'tab'}
|
||
>
|
||
<Settings className="w-4 h-4 inline mr-2" />
|
||
Настройки
|
||
</button>
|
||
</div>
|
||
|
||
{/* Tab content */}
|
||
<div className="card p-6">
|
||
{activeTab === 'console' && <Console serverName={selectedServer.name} token={token} />}
|
||
{activeTab === 'files' && <FileManager serverName={selectedServer.name} token={token} />}
|
||
{activeTab === 'stats' && <Stats serverName={selectedServer.name} token={token} />}
|
||
{activeTab === 'settings' && (
|
||
<ServerSettings
|
||
serverName={selectedServer.name}
|
||
token={token}
|
||
onUpdate={loadServers}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</main>
|
||
|
||
{/* Modals */}
|
||
{showCreateModal && (
|
||
<CreateServerModal
|
||
token={token}
|
||
onClose={() => setShowCreateModal(false)}
|
||
onSuccess={() => {
|
||
setShowCreateModal(false);
|
||
loadServers();
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{showUserManagement && (
|
||
<div className="modal-overlay" onClick={() => setShowUserManagement(false)}>
|
||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
||
<UserManagement token={token} currentUser={user} />
|
||
</div>
|
||
</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()}>
|
||
<Tickets token={token} user={user} onClose={() => setShowTickets(false)} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showProfile && (
|
||
<div className="modal-overlay" onClick={() => setShowProfile(false)}>
|
||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
||
<Profile token={token} user={user} onClose={() => setShowProfile(false)} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<NotificationSystem />
|
||
</div>
|
||
</ErrorBoundary>
|
||
);
|
||
}
|
||
|
||
export default App;
|