1.18升级
This commit is contained in:
dengqichen
parent
38b6e873c8
commit
eebd3240b3
@ -0,0 +1,570 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import type { EChartsOption } from 'echarts';
|
||||
import { Loader2, TrendingUp, Activity, HardDrive, Network as NetworkIcon } from 'lucide-react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogBody,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { useToast } from '@/components/ui/use-toast';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import type { ServerResponse, ServerMonitorResponse, TimeRange, MetricType } from '../types';
|
||||
import { TimeRangeLabels, MetricTypeLabels } from '../types';
|
||||
import { getServerMonitorMetrics } from '../service';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
interface ServerMonitorDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
server: ServerResponse | null;
|
||||
}
|
||||
|
||||
export const ServerMonitorDialog: React.FC<ServerMonitorDialogProps> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
server,
|
||||
}) => {
|
||||
const { toast } = useToast();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [monitorData, setMonitorData] = useState<ServerMonitorResponse | null>(null);
|
||||
const [selectedTimeRange, setSelectedTimeRange] = useState<TimeRange>('LAST_1_HOUR' as TimeRange);
|
||||
const [autoRefresh, setAutoRefresh] = useState(true);
|
||||
|
||||
// 加载监控数据
|
||||
const loadMonitorData = async () => {
|
||||
if (!server) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await getServerMonitorMetrics(server.id, selectedTimeRange);
|
||||
setMonitorData(response);
|
||||
} catch (error: any) {
|
||||
console.error('加载监控数据失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 初始加载和时间范围变化时加载数据
|
||||
useEffect(() => {
|
||||
if (open && server) {
|
||||
loadMonitorData();
|
||||
}
|
||||
}, [open, server, selectedTimeRange]);
|
||||
|
||||
// 自动刷新（仅最近1小时）
|
||||
useEffect(() => {
|
||||
if (!open || !autoRefresh || selectedTimeRange !== 'LAST_1_HOUR') {
|
||||
return;
|
||||
}
|
||||
|
||||
const timer = setInterval(() => {
|
||||
loadMonitorData();
|
||||
}, 30000); // 30秒刷新一次
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [open, autoRefresh, selectedTimeRange]);
|
||||
|
||||
// CPU 图表配置
|
||||
const getCpuChartOption = (): EChartsOption => {
|
||||
if (!monitorData?.metrics.cpu || monitorData.metrics.cpu.length === 0) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const cpuData = monitorData.metrics.cpu;
|
||||
const statistics = monitorData.statistics.cpu;
|
||||
|
||||
return {
|
||||
title: {
|
||||
text: 'CPU 使用率',
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 14, fontWeight: 'bold' },
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params: any) => {
|
||||
const param = params[0];
|
||||
const dataItem = cpuData[param.dataIndex];
|
||||
return `${dayjs(param.name).format('MM-DD HH:mm')}<br/>
|
||||
CPU: ${param.value}%<br/>
|
||||
状态: ${dataItem.status === 'SUCCESS' ? '正常' : '失败'}`;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
top: '20%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: cpuData.map(item => item.time),
|
||||
axisLabel: {
|
||||
formatter: (value: string) => dayjs(value).format('HH:mm'),
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: 'CPU (%)',
|
||||
max: 100,
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'CPU使用率',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: cpuData.map(item => item.value),
|
||||
lineStyle: {
|
||||
color: MetricTypeLabels.CPU.color,
|
||||
width: 2,
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: `${MetricTypeLabels.CPU.color}40` },
|
||||
{ offset: 1, color: `${MetricTypeLabels.CPU.color}10` },
|
||||
],
|
||||
},
|
||||
},
|
||||
markLine: statistics
|
||||
? {
|
||||
data: [
|
||||
{ yAxis: statistics.avg, name: '平均值', lineStyle: { type: 'dashed', color: '#666' } },
|
||||
],
|
||||
label: {
|
||||
formatter: '平均: {c}%',
|
||||
},
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
// 内存图表配置
|
||||
const getMemoryChartOption = (): EChartsOption => {
|
||||
if (!monitorData?.metrics.memory || monitorData.metrics.memory.length === 0) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const memoryData = monitorData.metrics.memory;
|
||||
const statistics = monitorData.statistics.memory;
|
||||
|
||||
return {
|
||||
title: {
|
||||
text: '内存使用率',
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 14, fontWeight: 'bold' },
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params: any) => {
|
||||
const param = params[0];
|
||||
const dataItem = memoryData[param.dataIndex];
|
||||
return `${dayjs(param.name).format('MM-DD HH:mm')}<br/>
|
||||
内存: ${param.value}%<br/>
|
||||
已用: ${dataItem.usedGB}GB<br/>
|
||||
状态: ${dataItem.status === 'SUCCESS' ? '正常' : '失败'}`;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
top: '20%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: memoryData.map(item => item.time),
|
||||
axisLabel: {
|
||||
formatter: (value: string) => dayjs(value).format('HH:mm'),
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '内存 (%)',
|
||||
max: 100,
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '内存使用率',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: memoryData.map(item => item.usagePercent),
|
||||
lineStyle: {
|
||||
color: MetricTypeLabels.MEMORY.color,
|
||||
width: 2,
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: `${MetricTypeLabels.MEMORY.color}40` },
|
||||
{ offset: 1, color: `${MetricTypeLabels.MEMORY.color}10` },
|
||||
],
|
||||
},
|
||||
},
|
||||
markLine: statistics
|
||||
? {
|
||||
data: [
|
||||
{ yAxis: statistics.avgPercent, name: '平均值', lineStyle: { type: 'dashed', color: '#666' } },
|
||||
],
|
||||
label: {
|
||||
formatter: '平均: {c}%',
|
||||
},
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
// 网络流量图表配置
|
||||
const getNetworkChartOption = (): EChartsOption => {
|
||||
if (!monitorData?.metrics.network || monitorData.metrics.network.length === 0) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const networkData = monitorData.metrics.network;
|
||||
|
||||
return {
|
||||
title: {
|
||||
text: '网络流量',
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 14, fontWeight: 'bold' },
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params: any) => {
|
||||
const dataItem = networkData[params[0].dataIndex];
|
||||
return `${dayjs(params[0].name).format('MM-DD HH:mm')}<br/>
|
||||
接收: ${dataItem.rxMBps.toFixed(2)} MB/s<br/>
|
||||
发送: ${dataItem.txMBps.toFixed(2)} MB/s`;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['接收', '发送'],
|
||||
top: '8%',
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
top: '20%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: networkData.map(item => item.time),
|
||||
axisLabel: {
|
||||
formatter: (value: string) => dayjs(value).format('HH:mm'),
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '流量 (MB/s)',
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '接收',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: networkData.map(item => item.rxMBps),
|
||||
lineStyle: {
|
||||
color: '#3b82f6',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '发送',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: networkData.map(item => item.txMBps),
|
||||
lineStyle: {
|
||||
color: '#8b5cf6',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
// 磁盘使用情况卡片
|
||||
const renderDiskInfo = () => {
|
||||
if (!monitorData?.metrics.disk) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64 text-muted-foreground">
|
||||
暂无磁盘数据
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const disk = monitorData.metrics.disk;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold">磁盘使用情况</h3>
|
||||
<Badge variant="outline">
|
||||
最大使用率: {disk.maxUsagePercent.toFixed(2)}% ({disk.maxUsagePartition})
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{disk.partitions.map((partition, index) => (
|
||||
<Card key={index}>
|
||||
<CardContent className="pt-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<HardDrive className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-mono font-medium">{partition.mountPoint}</span>
|
||||
</div>
|
||||
<Badge
|
||||
variant={partition.usagePercent > 80 ? 'destructive' : 'outline'}
|
||||
>
|
||||
{partition.usagePercent.toFixed(2)}%
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{partition.fileSystem}
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">
|
||||
已用 {partition.usedSizeGB}GB / 总计 {partition.totalSizeGB}GB
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-secondary rounded-full h-2">
|
||||
<div
|
||||
className={`h-2 rounded-full ${
|
||||
partition.usagePercent > 80
|
||||
? 'bg-destructive'
|
||||
: partition.usagePercent > 60
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-primary'
|
||||
}`}
|
||||
style={{ width: `${partition.usagePercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 统计信息卡片
|
||||
const renderStatistics = () => {
|
||||
if (!monitorData) return null;
|
||||
|
||||
const stats = [];
|
||||
|
||||
if (monitorData.statistics.cpu) {
|
||||
stats.push({
|
||||
icon: <Activity className="h-5 w-5" />,
|
||||
label: 'CPU',
|
||||
avg: `${monitorData.statistics.cpu.avg.toFixed(2)}%`,
|
||||
max: `${monitorData.statistics.cpu.max.toFixed(2)}%`,
|
||||
min: `${monitorData.statistics.cpu.min.toFixed(2)}%`,
|
||||
color: 'text-blue-600',
|
||||
});
|
||||
}
|
||||
|
||||
if (monitorData.statistics.memory) {
|
||||
stats.push({
|
||||
icon: <TrendingUp className="h-5 w-5" />,
|
||||
label: '内存',
|
||||
avg: `${monitorData.statistics.memory.avgPercent.toFixed(2)}%`,
|
||||
max: `${monitorData.statistics.memory.maxPercent.toFixed(2)}%`,
|
||||
min: `${monitorData.statistics.memory.minPercent.toFixed(2)}%`,
|
||||
color: 'text-green-600',
|
||||
});
|
||||
}
|
||||
|
||||
if (monitorData.statistics.network) {
|
||||
const network = monitorData.statistics.network;
|
||||
const totalRxMB = (network.totalRxBytes / 1024 / 1024).toFixed(2);
|
||||
const totalTxMB = (network.totalTxBytes / 1024 / 1024).toFixed(2);
|
||||
|
||||
stats.push({
|
||||
icon: <NetworkIcon className="h-5 w-5" />,
|
||||
label: '网络',
|
||||
avg: `接收 ${totalRxMB}MB`,
|
||||
max: `发送 ${totalTxMB}MB`,
|
||||
min: '',
|
||||
color: 'text-purple-600',
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
{stats.map((stat, index) => (
|
||||
<Card key={index}>
|
||||
<CardContent className="pt-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`${stat.color}`}>{stat.icon}</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-sm font-medium text-muted-foreground">{stat.label}</div>
|
||||
<div className="text-xs text-muted-foreground mt-1 space-y-0.5">
|
||||
<div>平均: {stat.avg}</div>
|
||||
<div>最大: {stat.max}</div>
|
||||
{stat.min && <div>最小: {stat.min}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
服务器监控 - {server?.serverName} ({server?.hostIp})
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogBody className="flex-1 overflow-y-auto">
|
||||
<div className="space-y-4">
|
||||
{/* 时间范围选择器 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{Object.entries(TimeRangeLabels).map(([key, value]) => (
|
||||
<Button
|
||||
key={key}
|
||||
variant={selectedTimeRange === key ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setSelectedTimeRange(key as TimeRange)}
|
||||
>
|
||||
{value.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{selectedTimeRange === 'LAST_1_HOUR' && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setAutoRefresh(!autoRefresh)}
|
||||
>
|
||||
{autoRefresh ? '停止自动刷新' : '开启自动刷新'}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={loadMonitorData}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : '刷新'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading && !monitorData ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
</div>
|
||||
) : monitorData ? (
|
||||
<>
|
||||
{/* 统计信息 */}
|
||||
{renderStatistics()}
|
||||
|
||||
{/* 图表标签页 */}
|
||||
<Tabs defaultValue="cpu" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-4">
|
||||
<TabsTrigger value="cpu">CPU</TabsTrigger>
|
||||
<TabsTrigger value="memory">内存</TabsTrigger>
|
||||
<TabsTrigger value="network">网络</TabsTrigger>
|
||||
<TabsTrigger value="disk">磁盘</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="cpu" className="space-y-4">
|
||||
{monitorData.metrics.cpu && monitorData.metrics.cpu.length > 0 ? (
|
||||
<ReactECharts
|
||||
option={getCpuChartOption()}
|
||||
style={{ height: '400px', width: '100%' }}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-64 text-muted-foreground">
|
||||
暂无CPU数据
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="memory" className="space-y-4">
|
||||
{monitorData.metrics.memory && monitorData.metrics.memory.length > 0 ? (
|
||||
<ReactECharts
|
||||
option={getMemoryChartOption()}
|
||||
style={{ height: '400px', width: '100%' }}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-64 text-muted-foreground">
|
||||
暂无内存数据
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="network" className="space-y-4">
|
||||
{monitorData.metrics.network && monitorData.metrics.network.length > 0 ? (
|
||||
<ReactECharts
|
||||
option={getNetworkChartOption()}
|
||||
style={{ height: '400px', width: '100%' }}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-64 text-muted-foreground">
|
||||
暂无网络数据
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="disk" className="space-y-4">
|
||||
{renderDiskInfo()}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-64 text-muted-foreground">
|
||||
暂无数据
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user