mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-09-28 05:46:36 +08:00
fix(access-logs): 修复状态码自定义
This commit is contained in:
@@ -19,7 +19,7 @@ sidebar: false
|
||||
## [Unreleased]
|
||||
|
||||
### 新增
|
||||
- 访问日志「日志明细」支持按 HTTP 状态码筛选:状态码下拉含常用 2xx/3xx/4xx/5xx 快捷选项,也可手动输入任意状态码,筛选条件贯穿 ClickHouse 与 PostgreSQL/SQLite 日志库。
|
||||
- 访问日志「日志明细」支持按 HTTP 状态码筛选:直接输入任意状态码(100-599),筛选条件贯穿 ClickHouse 与 PostgreSQL/SQLite 日志库。
|
||||
- 访问日志「日志明细」支持自定义时间范围筛选:内置 shadcn 日期+时间选择器,可指定起止时间(RFC3339,需成对提供)。
|
||||
- 首页看板改版:24 小时请求趋势拆分展示请求总量与 2xx/4xx/5xx 状态码类请求量并独占一行;移除宿主机磁盘指标,24 小时容量趋势(CPU/内存)并入业务流量卡片展示。
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ import {
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import type { SearchDraft } from './access-log-utils';
|
||||
import { PAGE_SIZE_OPTIONS, STATUS_CODE_OPTIONS } from './access-log-utils';
|
||||
import { PAGE_SIZE_OPTIONS } from './access-log-utils';
|
||||
|
||||
interface AccessLogFiltersProps {
|
||||
draft: SearchDraft;
|
||||
@@ -36,7 +36,6 @@ interface AccessLogFiltersProps {
|
||||
onReset: () => void;
|
||||
}
|
||||
|
||||
const CUSTOM_STATUS_CODE = '__custom__';
|
||||
const HOUR_OPTIONS = Array.from({ length: 24 }, (_, i) =>
|
||||
String(i).padStart(2, '0'),
|
||||
);
|
||||
@@ -127,11 +126,7 @@ function DateTimePicker({
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className='w-auto p-0' align='start'>
|
||||
<Calendar
|
||||
mode='single'
|
||||
selected={current}
|
||||
onSelect={applyDate}
|
||||
/>
|
||||
<Calendar mode='single' selected={current} onSelect={applyDate} />
|
||||
<div className='flex items-center gap-1.5 border-t p-2'>
|
||||
<TimeSelect
|
||||
value={hour}
|
||||
@@ -159,15 +154,6 @@ export function AccessLogFilters({
|
||||
onReset,
|
||||
}: AccessLogFiltersProps) {
|
||||
const [moreOpen, setMoreOpen] = useState(false);
|
||||
const isPresetStatus = STATUS_CODE_OPTIONS.some(
|
||||
(option) => option.value === draft.statusCode,
|
||||
);
|
||||
const statusSelectValue =
|
||||
draft.statusCode === ''
|
||||
? ''
|
||||
: isPresetStatus
|
||||
? draft.statusCode
|
||||
: CUSTOM_STATUS_CODE;
|
||||
|
||||
return (
|
||||
<div className='space-y-3'>
|
||||
@@ -188,9 +174,7 @@ export function AccessLogFilters({
|
||||
<FilterField label='访问域名'>
|
||||
<Input
|
||||
value={draft.host}
|
||||
onChange={(e) =>
|
||||
onDraftChange({ ...draft, host: e.target.value })
|
||||
}
|
||||
onChange={(e) => onDraftChange({ ...draft, host: e.target.value })}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') onSearch();
|
||||
}}
|
||||
@@ -199,33 +183,6 @@ export function AccessLogFilters({
|
||||
/>
|
||||
</FilterField>
|
||||
<FilterField label='状态码'>
|
||||
<div className='flex flex-col gap-1.5'>
|
||||
<Select
|
||||
value={statusSelectValue}
|
||||
onValueChange={(value) => {
|
||||
if (value === CUSTOM_STATUS_CODE) {
|
||||
onDraftChange({
|
||||
...draft,
|
||||
statusCode: isPresetStatus ? '' : draft.statusCode,
|
||||
});
|
||||
} else {
|
||||
onDraftChange({ ...draft, statusCode: value });
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className='h-9 text-xs'>
|
||||
<SelectValue placeholder='全部状态码' />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{STATUS_CODE_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
<SelectItem value={CUSTOM_STATUS_CODE}>自定义…</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{statusSelectValue === CUSTOM_STATUS_CODE ? (
|
||||
<Input
|
||||
value={draft.statusCode}
|
||||
onChange={(e) =>
|
||||
@@ -237,12 +194,9 @@ export function AccessLogFilters({
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') onSearch();
|
||||
}}
|
||||
placeholder='输入状态码,如 201'
|
||||
autoFocus
|
||||
placeholder='输入状态码,如 404'
|
||||
className='h-9 text-xs'
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</FilterField>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -17,23 +17,6 @@ export type RateLimitRangeHours = 24 | 72;
|
||||
|
||||
export const PAGE_SIZE_OPTIONS = [20, 50, 100, 200];
|
||||
|
||||
/** 状态码快捷筛选项(空值表示全部,由 Select placeholder 兜底)。 */
|
||||
export const STATUS_CODE_OPTIONS: { value: string; label: string }[] = [
|
||||
{ value: '200', label: '200 OK' },
|
||||
{ value: '301', label: '301 永久重定向' },
|
||||
{ value: '302', label: '302 临时重定向' },
|
||||
{ value: '304', label: '304 未修改' },
|
||||
{ value: '400', label: '400 请求错误' },
|
||||
{ value: '401', label: '401 未授权' },
|
||||
{ value: '403', label: '403 禁止访问' },
|
||||
{ value: '404', label: '404 未找到' },
|
||||
{ value: '429', label: '429 请求过多' },
|
||||
{ value: '500', label: '500 服务器错误' },
|
||||
{ value: '502', label: '502 网关错误' },
|
||||
{ value: '503', label: '503 服务不可用' },
|
||||
{ value: '504', label: '504 网关超时' },
|
||||
];
|
||||
|
||||
export const OVERVIEW_RANGE_OPTIONS: {
|
||||
value: OverviewRangeHours;
|
||||
label: string;
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Globe2 } from 'lucide-react';
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import type { DistributionItem } from '@/lib/services/openflare';
|
||||
|
||||
import { formatCompactNumber } from './dashboard-utils';
|
||||
|
||||
export function GeoDistributionList({ items }: { items: DistributionItem[] }) {
|
||||
const sortedItems = [...items]
|
||||
.sort((left, right) => right.value - left.value)
|
||||
.slice(0, 8);
|
||||
const maxValue = sortedItems[0]?.value ?? 0;
|
||||
|
||||
return (
|
||||
<Card className='border-dashed shadow-none'>
|
||||
<CardHeader>
|
||||
<CardTitle className='text-sm font-semibold flex items-center gap-1.5'>
|
||||
<Globe2 className='size-4 text-primary' />
|
||||
来源国家分布
|
||||
</CardTitle>
|
||||
<CardDescription className='text-xs'>
|
||||
聚合最近 24 小时主要来源国家。
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{sortedItems.length === 0 ? (
|
||||
<div className='flex min-h-[180px] items-center justify-center text-xs text-muted-foreground'>
|
||||
暂无来源分布数据
|
||||
</div>
|
||||
) : (
|
||||
<div className='space-y-3'>
|
||||
{sortedItems.map((item) => {
|
||||
const ratio = maxValue > 0 ? (item.value / maxValue) * 100 : 0;
|
||||
return (
|
||||
<div key={item.key} className='space-y-1.5'>
|
||||
<div className='flex items-center justify-between text-xs'>
|
||||
<span className='font-medium'>{item.key || '未知'}</span>
|
||||
<span className='font-mono tabular-nums text-muted-foreground'>
|
||||
{formatCompactNumber(item.value)}
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={ratio} className='h-1.5' />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -7,11 +7,7 @@ import type {
|
||||
NetworkTrendPoint,
|
||||
} from '@/lib/services/openflare';
|
||||
|
||||
import {
|
||||
formatBytes,
|
||||
formatPercent,
|
||||
formatTrendHour,
|
||||
} from './dashboard-utils';
|
||||
import { formatBytes, formatPercent, formatTrendHour } from './dashboard-utils';
|
||||
|
||||
/** 业务流量(来自访问日志)与容量趋势(节点 Agent 宿主机指标)合并展示。 */
|
||||
export function TrafficCapacityTrendChart({
|
||||
|
||||
@@ -5,11 +5,12 @@ package observability
|
||||
|
||||
import (
|
||||
"errors"
|
||||
"net/http"
|
||||
"strconv"
|
||||
|
||||
"github.com/Rain-kl/Wavelet/internal/apps/openflare/apiutil"
|
||||
"github.com/Rain-kl/Wavelet/internal/shared/response"
|
||||
"github.com/gin-gonic/gin"
|
||||
"net/http"
|
||||
"strconv"
|
||||
)
|
||||
|
||||
// GetAccessLogOverviewHandler 获取访问日志概览。
|
||||
|
||||
Reference in New Issue
Block a user