267 lines
8.9 KiB
TypeScript
267 lines
8.9 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { Link } from "react-router";
|
|
import {
|
|
Server,
|
|
CheckCircle,
|
|
XCircle,
|
|
Clock,
|
|
TrendingUp,
|
|
AlertTriangle,
|
|
Activity,
|
|
} from "lucide-react";
|
|
|
|
interface ServerStatus {
|
|
id: string;
|
|
name: string;
|
|
url: string;
|
|
status: "online" | "offline" | "warning";
|
|
responseTime: number;
|
|
uptime: number;
|
|
lastCheck: string;
|
|
checkType: string;
|
|
}
|
|
|
|
export function Dashboard() {
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
const [servers,setServers] = useState<ServerStatus[]>([
|
|
{
|
|
id: "1",
|
|
name: "Production APIs",
|
|
url: "https://api.example.com",
|
|
status: "online",
|
|
responseTime: 142,
|
|
uptime: 99.9,
|
|
lastCheck: "2 min ago",
|
|
checkType: "HTTPS",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Database Server",
|
|
url: "db.example.com:5432",
|
|
status: "online",
|
|
responseTime: 45,
|
|
uptime: 100,
|
|
lastCheck: "1 min ago",
|
|
checkType: "TCP",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "CDN Edge Node",
|
|
url: "https://cdn.example.com",
|
|
status: "warning",
|
|
responseTime: 890,
|
|
uptime: 98.5,
|
|
lastCheck: "30 sec ago",
|
|
checkType: "HTTPS",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Mail Server",
|
|
url: "mail.example.com",
|
|
status: "offline",
|
|
responseTime: 0,
|
|
uptime: 95.2,
|
|
lastCheck: "5 min ago",
|
|
checkType: "SMTP",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Analytics Service",
|
|
url: "https://analytics.example.com",
|
|
status: "online",
|
|
responseTime: 210,
|
|
uptime: 99.7,
|
|
lastCheck: "3 min ago",
|
|
checkType: "HTTPS",
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "Backup Server",
|
|
url: "backup.example.com:22",
|
|
status: "online",
|
|
responseTime: 78,
|
|
uptime: 99.95,
|
|
lastCheck: "1 min ago",
|
|
checkType: "SSH",
|
|
},
|
|
]);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await fetch('https://bitrix.tavres.ru/rest/1/2jkuss1wwr0vnkkt/iblock.servers');
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
const result = await response.json();
|
|
setServers([...servers, ...result['result']]);
|
|
setError(null);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
fetchData();
|
|
const intervalId = setInterval(fetchData, 5000);
|
|
return () => clearInterval(intervalId);
|
|
},[])
|
|
|
|
const onlineCount = servers.filter((s) => s.status === "online").length;
|
|
const offlineCount = servers.filter((s) => s.status === "offline").length;
|
|
const warningCount = servers.filter((s) => s.status === "warning").length;
|
|
const avgResponseTime = Math.round(
|
|
servers.reduce((acc, s) => acc + s.responseTime, 0) / servers.length
|
|
);
|
|
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case "online":
|
|
return "bg-emerald-100 text-emerald-700 border-emerald-200";
|
|
case "offline":
|
|
return "bg-rose-100 text-rose-700 border-rose-200";
|
|
case "warning":
|
|
return "bg-amber-100 text-amber-700 border-amber-200";
|
|
default:
|
|
return "bg-gray-100 text-gray-700 border-gray-200";
|
|
}
|
|
};
|
|
|
|
const getStatusIcon = (status: string) => {
|
|
switch (status) {
|
|
case "online":
|
|
return <CheckCircle className="w-5 h-5" />;
|
|
case "offline":
|
|
return <XCircle className="w-5 h-5" />;
|
|
case "warning":
|
|
return <AlertTriangle className="w-5 h-5" />;
|
|
default:
|
|
return <Clock className="w-5 h-5" />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-6 py-8">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">System Overview</h1>
|
|
<p className="text-gray-600">Real-time monitoring of all servers and services</p>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<div className="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="bg-emerald-100 p-3 rounded-xl">
|
|
<CheckCircle className="w-6 h-6 text-emerald-600" />
|
|
</div>
|
|
<span className="text-3xl font-bold text-emerald-600">{onlineCount}</span>
|
|
</div>
|
|
<h3 className="text-gray-600 font-medium">Online</h3>
|
|
<p className="text-sm text-gray-500">Servers running</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="bg-rose-100 p-3 rounded-xl">
|
|
<XCircle className="w-6 h-6 text-rose-600" />
|
|
</div>
|
|
<span className="text-3xl font-bold text-rose-600">{offlineCount}</span>
|
|
</div>
|
|
<h3 className="text-gray-600 font-medium">Offline</h3>
|
|
<p className="text-sm text-gray-500">Servers down</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="bg-amber-100 p-3 rounded-xl">
|
|
<AlertTriangle className="w-6 h-6 text-amber-600" />
|
|
</div>
|
|
<span className="text-3xl font-bold text-amber-600">{warningCount}</span>
|
|
</div>
|
|
<h3 className="text-gray-600 font-medium">Warning</h3>
|
|
<p className="text-sm text-gray-500">Need attention</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="bg-blue-100 p-3 rounded-xl">
|
|
<TrendingUp className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<span className="text-3xl font-bold text-blue-600">{avgResponseTime}ms</span>
|
|
</div>
|
|
<h3 className="text-gray-600 font-medium">Avg Response</h3>
|
|
<p className="text-sm text-gray-500">Time</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Server List */}
|
|
<div className="bg-white rounded-2xl shadow-md border border-gray-100 overflow-hidden">
|
|
<div className="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Server className="w-5 h-5 text-blue-600" />
|
|
<h2 className="text-xl font-bold text-gray-900">Server Status</h2>
|
|
</div>
|
|
<Link
|
|
to="/servers"
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
|
|
>
|
|
View All
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="divide-y divide-gray-100">
|
|
{servers.map((server) => (
|
|
<Link
|
|
key={server.id}
|
|
to={`/servers/${server.id}`}
|
|
className="block px-6 py-4 hover:bg-gray-50 transition-colors"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4 flex-1">
|
|
<div className={`p-2 rounded-lg ${getStatusColor(server.status)}`}>
|
|
{getStatusIcon(server.status)}
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-gray-900">{server.name}</h3>
|
|
<p className="text-sm text-gray-500">{server.url}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-8">
|
|
<div className="text-right">
|
|
<p className="text-sm font-medium text-gray-900">
|
|
{server.responseTime > 0 ? `${server.responseTime}ms` : "N/A"}
|
|
</p>
|
|
<p className="text-xs text-gray-500">Response Time</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-sm font-medium text-gray-900">{server.uptime}%</p>
|
|
<p className="text-xs text-gray-500">Uptime</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs font-medium">
|
|
{server.checkType}
|
|
</span>
|
|
</div>
|
|
<div className="text-right min-w-[80px]">
|
|
<div className="flex items-center gap-1 text-gray-500">
|
|
<Activity className="w-3 h-3" />
|
|
<p className="text-xs">{server.lastCheck}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|