feat(k8s): 事件页补全时间/次数/来源等字段
- 后端解析 source/reportingComponent 与 object_kind/name - 新增 EventTable 统一展示:最后/首次时间、次数、重复跨度、类型、原因、对象、来源、消息 - Deployment 事件 Tab 与事件中心共用表格组件
This commit is contained in:
1 parent
ee2588fb52
commit
b2939470f4
8 files changed
+323
-176
No files matched your search
@@ -5,11 +5,10 @@ import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { RefreshCw, ChevronRight, Bell, AlertTriangle, X } from 'lucide-react';
|
||||
import { kubernetesApi } from '@/api';
|
||||
import { EventTable } from './EventTable';
|
||||
import { normalizeK8sEvent, formatEventRelative } from './k8s-event-utils';
|
||||
|
||||
interface RankItem { name: string; count: number }
|
||||
|
||||
@@ -87,7 +86,7 @@ export default function EventsPage() {
|
||||
const [summary, setSummary] = useState<any>(null);
|
||||
const [selectedReason, setSelectedReason] = useState('');
|
||||
const [selectedKind, setSelectedKind] = useState('');
|
||||
const [expandedRow, setExpandedRow] = useState<string | null>(null);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
kubernetesApi.getClusters().then((res: any) => {
|
||||
@@ -133,17 +132,18 @@ export default function EventsPage() {
|
||||
useEffect(() => { loadSummary(); }, [loadSummary]);
|
||||
|
||||
const displayEvents = useMemo(() => {
|
||||
let filtered = events;
|
||||
let filtered = events.map((e) => normalizeK8sEvent(e));
|
||||
const hours = parseInt(timeWindow, 10);
|
||||
if (hours > 0) {
|
||||
const since = Date.now() - hours * 3600 * 1000;
|
||||
filtered = filtered.filter((e) => {
|
||||
const ts = e.last_time || e.lastTime || e.last_timestamp;
|
||||
return !ts || new Date(ts).getTime() >= since;
|
||||
});
|
||||
filtered = filtered.filter((e) => !e.lastTime || new Date(e.lastTime).getTime() >= since);
|
||||
}
|
||||
if (selectedReason) filtered = filtered.filter((e) => e.reason === selectedReason);
|
||||
if (selectedKind) filtered = filtered.filter((e) => (e.object || '').startsWith(`${selectedKind}/`));
|
||||
if (selectedKind) {
|
||||
filtered = filtered.filter((e) =>
|
||||
e.objectKind === selectedKind || e.object.startsWith(`${selectedKind}/`),
|
||||
);
|
||||
}
|
||||
return filtered;
|
||||
}, [events, selectedReason, selectedKind, timeWindow]);
|
||||
|
||||
@@ -162,20 +162,6 @@ export default function EventsPage() {
|
||||
(summary?.by_kind || []).map((k: any) => ({ name: k.kind || 'Unknown', count: k.count })),
|
||||
[summary]);
|
||||
|
||||
const formatTime = (ts: string) => (ts ? ts.replace('T', ' ').substring(0, 19) : '-');
|
||||
|
||||
const formatRelative = (ts: string) => {
|
||||
if (!ts) return '';
|
||||
const diff = Date.now() - new Date(ts).getTime();
|
||||
if (diff < 0) return '';
|
||||
const mins = Math.floor(diff / 60000);
|
||||
if (mins < 1) return '刚刚';
|
||||
if (mins < 60) return `${mins}分钟前`;
|
||||
const hrs = Math.floor(mins / 60);
|
||||
if (hrs < 24) return `${hrs}小时前`;
|
||||
return `${Math.floor(hrs / 24)}天前`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
|
||||
@@ -280,8 +266,9 @@ export default function EventsPage() {
|
||||
<span className="shrink-0 font-mono text-[var(--dg-warning)]">{w.reason}</span>
|
||||
<span className="text-[var(--dg-text-muted)] font-mono truncate">{w.object}</span>
|
||||
<span className="text-[var(--dg-text-muted)]">{w.namespace}</span>
|
||||
{w.source && <span className="text-[var(--dg-text-muted)] font-mono">{w.source}</span>}
|
||||
<span className="text-[var(--dg-text-muted)]">×{w.count}</span>
|
||||
<span className="ml-auto text-[var(--dg-text-muted)]">{formatRelative(w.last_time)}</span>
|
||||
<span className="ml-auto text-[var(--dg-text-muted)]">{formatEventRelative(w.last_time)}</span>
|
||||
</div>
|
||||
<p className="text-[var(--dg-text-secondary)] truncate mt-0.5" title={w.message}>{w.message}</p>
|
||||
</div>
|
||||
@@ -304,70 +291,12 @@ export default function EventsPage() {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
|
||||
<TableHead className="text-[var(--dg-text-muted)] w-16">类型</TableHead>
|
||||
<TableHead className="text-[var(--dg-text-muted)] w-24">原因</TableHead>
|
||||
<TableHead className="text-[var(--dg-text-muted)]">对象</TableHead>
|
||||
<TableHead className="text-[var(--dg-text-muted)]">消息</TableHead>
|
||||
<TableHead className="text-[var(--dg-text-muted)] w-12">次数</TableHead>
|
||||
<TableHead className="text-[var(--dg-text-muted)] w-20">命名空间</TableHead>
|
||||
<TableHead className="text-[var(--dg-text-muted)] w-40">最后时间</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{displayEvents.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center text-[var(--dg-text-muted)] py-8">
|
||||
{loading ? <RefreshCw className="h-4 w-4 animate-spin mx-auto" /> : '暂无事件'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : displayEvents.slice(0, 200).map((e, i) => {
|
||||
const rowKey = `${e.name}-${i}`;
|
||||
const isExpanded = expandedRow === rowKey;
|
||||
const isWarning = e.type === 'Warning';
|
||||
return (
|
||||
<TableRow
|
||||
key={rowKey}
|
||||
className={`border-[var(--dg-border)] cursor-pointer hover:bg-[var(--dg-bg-tertiary)]/40 ${isExpanded ? 'bg-[var(--dg-bg-tertiary)]/30' : ''}`}
|
||||
onClick={() => setExpandedRow(isExpanded ? null : rowKey)}
|
||||
>
|
||||
<TableCell>
|
||||
<span className={`text-xs font-medium ${isWarning ? 'text-[var(--dg-warning)]' : 'text-[var(--dg-text-muted)]'}`}>
|
||||
{isWarning ? 'Warning' : 'Normal'}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-[var(--dg-text-secondary)] font-medium">{e.reason || '-'}</TableCell>
|
||||
<TableCell className="text-xs text-[var(--dg-text-muted)] font-mono">{e.object || '-'}</TableCell>
|
||||
<TableCell className="text-xs text-[var(--dg-text-secondary)] max-w-[400px]">
|
||||
<div className={`truncate ${isExpanded ? 'whitespace-normal' : ''}`} title={!isExpanded ? e.message : undefined}>
|
||||
{e.message || '-'}
|
||||
</div>
|
||||
{isExpanded && (
|
||||
<div className="mt-1 pt-1 border-t border-[var(--dg-border)] text-[10px] text-[var(--dg-text-muted)] space-y-0.5">
|
||||
<div>首次: {formatTime(e.first_time)} ({formatRelative(e.first_time)})</div>
|
||||
<div>最后: {formatTime(e.last_time)} ({formatRelative(e.last_time)})</div>
|
||||
<div>名称: {e.name}</div>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-[var(--dg-text-muted)] text-center tabular-nums">{e.count > 1 ? e.count : 1}</TableCell>
|
||||
<TableCell className="text-xs text-[var(--dg-text-muted)]">{e.namespace || '-'}</TableCell>
|
||||
<TableCell className="text-xs text-[var(--dg-text-muted)]">
|
||||
<div>{formatTime(e.last_time)}</div>
|
||||
<div className="text-[10px]">{formatRelative(e.last_time)}</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
{displayEvents.length > 200 && (
|
||||
<div className="text-center py-2 text-xs text-[var(--dg-text-muted)] border-t border-[var(--dg-border)]">
|
||||
仅显示前 200 条,共 {displayEvents.length} 条
|
||||
</div>
|
||||
)}
|
||||
<EventTable
|
||||
events={displayEvents}
|
||||
loading={loading}
|
||||
showNamespace
|
||||
maxRows={200}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user