92 lines
3.2 KiB
JavaScript
92 lines
3.2 KiB
JavaScript
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>
|
||
);
|
||
}
|