移除HTTP详情请求日志
This commit is contained in:
yml2213
@@ -1,316 +0,0 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
Card, Table, Tag, Space, Button, Input, Select, Tooltip, Drawer,
|
||||
Typography, message, Popconfirm, Empty, Segmented,
|
||||
} from 'antd';
|
||||
import {
|
||||
ReloadOutlined, DeleteOutlined, SearchOutlined, EyeOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { logApi, type HttpLogEntry } from '../api/modules';
|
||||
import { usePermissions } from '../hooks/usePermissions';
|
||||
import { getErrorMessage } from '../utils/error';
|
||||
|
||||
const { Text, Paragraph } = Typography;
|
||||
|
||||
const CATEGORY_LABELS: Record<string, string> = {
|
||||
douyu_login: '斗鱼登录',
|
||||
geetest: '极验',
|
||||
proxy_verify: '代理验证',
|
||||
whitelist: '白名单',
|
||||
};
|
||||
|
||||
const LEVEL_COLORS: Record<string, string> = {
|
||||
info: 'green',
|
||||
warning: 'orange',
|
||||
error: 'red',
|
||||
};
|
||||
|
||||
export default function HttpLogsPage() {
|
||||
const [logs, setLogs] = useState<HttpLogEntry[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(50);
|
||||
const [category, setCategory] = useState<string | undefined>(undefined);
|
||||
const [level, setLevel] = useState<string | undefined>(undefined);
|
||||
const [keyword, setKeyword] = useState('');
|
||||
const [detailEntry, setDetailEntry] = useState<HttpLogEntry | null>(null);
|
||||
const { canAny } = usePermissions();
|
||||
|
||||
const fetchLogs = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await logApi.listHttp({
|
||||
limit: pageSize,
|
||||
offset: (page - 1) * pageSize,
|
||||
category,
|
||||
level,
|
||||
keyword: keyword || undefined,
|
||||
});
|
||||
setLogs(res.items || []);
|
||||
setTotal(res.total || 0);
|
||||
} catch (e: unknown) {
|
||||
message.error(getErrorMessage(e) || '获取日志失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [page, pageSize, category, level, keyword]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchLogs();
|
||||
}, [fetchLogs]);
|
||||
|
||||
// 自动刷新
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
if (!detailEntry) fetchLogs();
|
||||
}, 5000);
|
||||
return () => clearInterval(timer);
|
||||
}, [fetchLogs, detailEntry]);
|
||||
|
||||
const handleClear = async () => {
|
||||
try {
|
||||
const res = await logApi.clearHttp();
|
||||
message.success(`已清空 ${res.cleared} 条日志`);
|
||||
fetchLogs();
|
||||
} catch (e: unknown) {
|
||||
message.error(getErrorMessage(e) || '清空失败');
|
||||
}
|
||||
};
|
||||
|
||||
const canManage = canAny(['audit:view', 'login:batch']);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'timestamp',
|
||||
width: 180,
|
||||
render: (v: string) => <Text style={{ fontSize: 12 }}>{v}</Text>,
|
||||
},
|
||||
{
|
||||
title: '级别',
|
||||
dataIndex: 'level',
|
||||
width: 70,
|
||||
render: (v: string) => <Tag color={LEVEL_COLORS[v] || 'default'}>{v}</Tag>,
|
||||
},
|
||||
{
|
||||
title: '分类',
|
||||
dataIndex: 'category',
|
||||
width: 100,
|
||||
render: (v: string) => CATEGORY_LABELS[v] || v,
|
||||
},
|
||||
{
|
||||
title: '方法',
|
||||
dataIndex: 'method',
|
||||
width: 60,
|
||||
render: (v: string) => <Tag>{v}</Tag>,
|
||||
},
|
||||
{
|
||||
title: 'URL',
|
||||
dataIndex: 'url',
|
||||
ellipsis: true,
|
||||
render: (v: string) => (
|
||||
<Tooltip title={v}>
|
||||
<Text style={{ fontSize: 12 }} ellipsis>{v}</Text>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: ['response', 'status_code'],
|
||||
width: 70,
|
||||
render: (v: number | null) => v ? (
|
||||
<Tag color={v < 300 ? 'green' : v < 400 ? 'blue' : 'red'}>{v}</Tag>
|
||||
) : <Tag>-</Tag>,
|
||||
},
|
||||
{
|
||||
title: '耗时',
|
||||
dataIndex: 'duration_ms',
|
||||
width: 80,
|
||||
render: (v: number | null) => v != null ? (
|
||||
<Text style={{ fontSize: 12, color: v > 5000 ? 'red' : v > 2000 ? 'orange' : undefined }}>
|
||||
{v > 1000 ? `${(v / 1000).toFixed(1)}s` : `${v}ms`}
|
||||
</Text>
|
||||
) : '-',
|
||||
},
|
||||
{
|
||||
title: '代理',
|
||||
dataIndex: 'proxy',
|
||||
width: 140,
|
||||
ellipsis: true,
|
||||
render: (v: string | null) => v ? (
|
||||
<Text style={{ fontSize: 12 }} type="secondary">{v}</Text>
|
||||
) : null,
|
||||
},
|
||||
{
|
||||
title: '标签',
|
||||
dataIndex: 'tag',
|
||||
width: 100,
|
||||
ellipsis: true,
|
||||
render: (v: string) => v ? <Text style={{ fontSize: 12 }}>{v}</Text> : null,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 60,
|
||||
render: (_: unknown, record: HttpLogEntry) => (
|
||||
<Button type="link" size="small" icon={<EyeOutlined />} onClick={() => setDetailEntry(record)} />
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (!canManage) {
|
||||
return <Empty description="无权限查看" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card
|
||||
title="请求日志"
|
||||
extra={
|
||||
<Space>
|
||||
<Segmented
|
||||
options={[
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '信息', value: 'info' },
|
||||
{ label: '警告', value: 'warning' },
|
||||
{ label: '错误', value: 'error' },
|
||||
]}
|
||||
value={level || ''}
|
||||
onChange={(v) => { setLevel(v as string || undefined); setPage(1); }}
|
||||
/>
|
||||
<Select
|
||||
placeholder="分类"
|
||||
allowClear
|
||||
style={{ width: 130 }}
|
||||
value={category}
|
||||
onChange={(v) => { setCategory(v); setPage(1); }}
|
||||
options={Object.entries(CATEGORY_LABELS).map(([k, v]) => ({ value: k, label: v }))}
|
||||
/>
|
||||
<Input
|
||||
placeholder="搜索关键词"
|
||||
allowClear
|
||||
style={{ width: 180 }}
|
||||
prefix={<SearchOutlined />}
|
||||
value={keyword}
|
||||
onChange={(e) => setKeyword(e.target.value)}
|
||||
onPressEnter={() => { setPage(1); fetchLogs(); }}
|
||||
/>
|
||||
<Button icon={<ReloadOutlined />} onClick={fetchLogs} loading={loading}>刷新</Button>
|
||||
<Popconfirm title="确定清空所有日志？" onConfirm={handleClear}>
|
||||
<Button danger icon={<DeleteOutlined />}>清空</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Table
|
||||
dataSource={logs}
|
||||
columns={columns}
|
||||
rowKey={(r) => `${r.ts}-${r.url}`}
|
||||
size="small"
|
||||
loading={loading}
|
||||
pagination={{
|
||||
current: page,
|
||||
pageSize,
|
||||
total,
|
||||
showSizeChanger: true,
|
||||
showTotal: (t) => `共 ${t} 条`,
|
||||
onChange: (p, ps) => { setPage(p); setPageSize(ps); },
|
||||
}}
|
||||
scroll={{ x: 1000 }}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Drawer
|
||||
title="请求详情"
|
||||
open={!!detailEntry}
|
||||
onClose={() => setDetailEntry(null)}
|
||||
width={700}
|
||||
>
|
||||
{detailEntry && (
|
||||
<Space direction="vertical" style={{ width: '100%' }} size="middle">
|
||||
<div>
|
||||
<Text strong>时间: </Text>
|
||||
<Text>{detailEntry.timestamp}</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text strong>级别: </Text>
|
||||
<Tag color={LEVEL_COLORS[detailEntry.level]}>{detailEntry.level}</Tag>
|
||||
<Text strong style={{ marginLeft: 16 }}>分类: </Text>
|
||||
<Tag>{CATEGORY_LABELS[detailEntry.category] || detailEntry.category}</Tag>
|
||||
</div>
|
||||
<div>
|
||||
<Text strong>请求: </Text>
|
||||
<Tag color="blue">{detailEntry.method}</Tag>
|
||||
<Text copyable style={{ fontSize: 13 }}>{detailEntry.url}</Text>
|
||||
</div>
|
||||
{detailEntry.proxy && (
|
||||
<div>
|
||||
<Text strong>代理: </Text>
|
||||
<Text code>{detailEntry.proxy}</Text>
|
||||
</div>
|
||||
)}
|
||||
{detailEntry.tag && (
|
||||
<div>
|
||||
<Text strong>标签: </Text>
|
||||
<Text>{detailEntry.tag}</Text>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<Text strong>耗时: </Text>
|
||||
<Text>{detailEntry.duration_ms != null ? `${detailEntry.duration_ms}ms` : '-'}</Text>
|
||||
</div>
|
||||
|
||||
{detailEntry.error ? (
|
||||
<Card title="错误" size="small" style={{ borderColor: '#ff4d4f' }}>
|
||||
<Paragraph type="danger" style={{ margin: 0, whiteSpace: 'pre-wrap', fontSize: 13 }}>
|
||||
{detailEntry.error}
|
||||
</Paragraph>
|
||||
</Card>
|
||||
) : (
|
||||
<Card title="响应" size="small">
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<Text strong>状态码: </Text>
|
||||
{detailEntry.response.status_code ? (
|
||||
<Tag color={detailEntry.response.status_code < 300 ? 'green' : 'red'}>
|
||||
{detailEntry.response.status_code}
|
||||
</Tag>
|
||||
) : <Text type="secondary">-</Text>}
|
||||
</div>
|
||||
<div>
|
||||
<Text strong>响应体:</Text>
|
||||
<Paragraph style={{ background: 'rgba(0,0,0,0.04)', padding: 8, borderRadius: 4, whiteSpace: 'pre-wrap', fontSize: 12, margin: '4px 0 0' }}>
|
||||
{detailEntry.response.body || '(空)'}
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card title="请求头" size="small">
|
||||
<pre style={{ fontSize: 12, margin: 0, maxHeight: 200, overflow: 'auto' }}>
|
||||
{JSON.stringify(detailEntry.request.headers, null, 2)}
|
||||
</pre>
|
||||
</Card>
|
||||
|
||||
{detailEntry.request.body && (
|
||||
<Card title="请求体" size="small">
|
||||
<Paragraph style={{ background: 'rgba(0,0,0,0.04)', padding: 8, borderRadius: 4, whiteSpace: 'pre-wrap', fontSize: 12, margin: 0 }}>
|
||||
{typeof detailEntry.request.body === 'object'
|
||||
? JSON.stringify(detailEntry.request.body, null, 2)
|
||||
: detailEntry.request.body}
|
||||
</Paragraph>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{Object.keys(detailEntry.response.headers || {}).length > 0 && (
|
||||
<Card title="响应头" size="small">
|
||||
<pre style={{ fontSize: 12, margin: 0, maxHeight: 200, overflow: 'auto' }}>
|
||||
{JSON.stringify(detailEntry.response.headers, null, 2)}
|
||||
</pre>
|
||||
</Card>
|
||||
)}
|
||||
</Space>
|
||||
)}
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user