80 lines
3.4 KiB
TypeScript
80 lines
3.4 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { Activity } from 'lucide-react';
|
|
import { Breadcrumb, Button, Table, Tag, type TableColumn } from '@/components/ui';
|
|
import { adminApi, type AdminChannel } from '@/api/adminApi';
|
|
|
|
const columns: Array<TableColumn<AdminChannel>> = [
|
|
{ key: 'id', title: '通道编号', render: (record) => record.id },
|
|
{ key: 'name', title: '通道名称', render: (record) => record.name },
|
|
{ key: 'carrier', title: '运营商', render: (record) => record.carrier ?? '-' },
|
|
{ key: 'gatewayHost', title: '网关地址', render: (record) => `${record.gatewayHost}:${record.gatewayPort}` },
|
|
{ key: 'rateLimitPerSecond', title: '限速', render: (record) => `${record.rateLimitPerSecond} 条/秒` },
|
|
{
|
|
key: 'status',
|
|
title: '状态',
|
|
render: (record) => <Tag tone={record.status === 'active' ? 'success' : 'danger'}>{record.status === 'active' ? '运行中' : '已停用'}</Tag>,
|
|
},
|
|
];
|
|
|
|
export function AdminMonitorPage() {
|
|
const [channels, setChannels] = useState<AdminChannel[]>([]);
|
|
const [monitor, setMonitor] = useState<Record<string, unknown>>({});
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState('');
|
|
|
|
function loadData() {
|
|
setLoading(true);
|
|
Promise.all([adminApi.listChannels(), adminApi.listMonitor()])
|
|
.then(([channelItems, monitorData]) => {
|
|
setChannels(channelItems.filter((item) => item.status !== 'deleted'));
|
|
setMonitor(monitorData);
|
|
setError('');
|
|
})
|
|
.catch((reason: Error) => setError(reason.message || '监控数据加载失败'))
|
|
.finally(() => setLoading(false));
|
|
}
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, []);
|
|
|
|
const enabledChannels = channels.filter((item) => item.status === 'active').length;
|
|
const statusGroups = Array.isArray(monitor.byStatus) ? monitor.byStatus as Array<{ status: string; _count: { _all: number } }> : [];
|
|
const totalMessages = useMemo(() => statusGroups.reduce((sum, item) => sum + (item._count?._all ?? 0), 0), [statusGroups]);
|
|
const deliveredMessages = useMemo(() => statusGroups.filter((item) => item.status === 'delivered').reduce((sum, item) => sum + (item._count?._all ?? 0), 0), [statusGroups]);
|
|
const successRate = totalMessages > 0 ? ((deliveredMessages / totalMessages) * 100).toFixed(1) : '0.0';
|
|
|
|
return (
|
|
<section className="page-stack">
|
|
<div className="page-heading">
|
|
<div>
|
|
<Breadcrumb items={['发送监控']} />
|
|
</div>
|
|
<Button icon={<Activity size={16} />} onClick={loadData} variant="ghost">实时刷新</Button>
|
|
</div>
|
|
{loading ? <p className="muted">正在加载监控数据...</p> : null}
|
|
{error ? <p className="form-error">{error}</p> : null}
|
|
<div className="dashboard-grid">
|
|
<div className="surface metric-card">
|
|
<span>运行通道</span>
|
|
<strong>{enabledChannels}</strong>
|
|
<small>共 {channels.length} 条通道</small>
|
|
</div>
|
|
<div className="surface metric-card">
|
|
<span>平均成功率</span>
|
|
<strong>{successRate}%</strong>
|
|
<small>真实消息记录</small>
|
|
</div>
|
|
<div className="surface metric-card">
|
|
<span>消息总量</span>
|
|
<strong>{totalMessages.toLocaleString('zh-CN')}</strong>
|
|
<small>按当前查询聚合</small>
|
|
</div>
|
|
</div>
|
|
<div className="surface">
|
|
<Table columns={columns} data={channels} rowKey="id" />
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|