feat(k8s): 事件页补全时间/次数/来源等字段
- 后端解析 source/reportingComponent 与 object_kind/name - 新增 EventTable 统一展示：最后/首次时间、次数、重复跨度、类型、原因、对象、来源、消息 - Deployment 事件 Tab 与事件中心共用表格组件
This commit is contained in:
Logan.Li committed
1 parent
ee2588fb52
commit
b2939470f4
8 files changed
+323
-176
No files matched your search
@@ -0,0 +1,124 @@
|
||||
// EventTable — K8s 事件列表（时间/次数/类型/原因/对象/来源/消息）// Logan.Li
|
||||
import { useState } from 'react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import {
|
||||
type NormalizedEvent,
|
||||
formatEventRepeatSpan,
|
||||
formatEventTimeCell,
|
||||
} from './k8s-event-utils';
|
||||
|
||||
interface EventTableProps {
|
||||
events: NormalizedEvent[];
|
||||
loading?: boolean | string;
|
||||
emptyText?: string;
|
||||
maxRows?: number;
|
||||
showNamespace?: boolean;
|
||||
}
|
||||
|
||||
export function EventTable({
|
||||
events,
|
||||
loading = false,
|
||||
emptyText = '暂无事件',
|
||||
maxRows,
|
||||
showNamespace = false,
|
||||
}: EventTableProps) {
|
||||
const [expandedRow, setExpandedRow] = useState<string | null>(null);
|
||||
const isLoading = loading === true || loading === 'events';
|
||||
const rows = maxRows ? events.slice(0, maxRows) : events;
|
||||
const colSpan = showNamespace ? 10 : 9;
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
|
||||
<TableHead className="text-[var(--dg-text-muted)] w-[148px]">最后时间</TableHead>
|
||||
<TableHead className="text-[var(--dg-text-muted)] w-[148px]">首次时间</TableHead>
|
||||
<TableHead className="text-[var(--dg-text-muted)] w-16 text-center">次数</TableHead>
|
||||
<TableHead className="text-[var(--dg-text-muted)] w-20">重复</TableHead>
|
||||
<TableHead className="text-[var(--dg-text-muted)] w-20">类型</TableHead>
|
||||
<TableHead className="text-[var(--dg-text-muted)] w-28">原因</TableHead>
|
||||
<TableHead className="text-[var(--dg-text-muted)] min-w-[120px]">对象</TableHead>
|
||||
{showNamespace && <TableHead className="text-[var(--dg-text-muted)] w-24">命名空间</TableHead>}
|
||||
<TableHead className="text-[var(--dg-text-muted)] w-28">来源</TableHead>
|
||||
<TableHead className="text-[var(--dg-text-muted)] min-w-[200px]">消息</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{isLoading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={colSpan} className="text-center py-10">
|
||||
<Loader2 className="h-5 w-5 animate-spin mx-auto text-[var(--dg-text-muted)]" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : rows.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={colSpan} className="text-center text-[var(--dg-text-muted)] py-10">{emptyText}</TableCell>
|
||||
</TableRow>
|
||||
) : rows.map((e, i) => {
|
||||
const rowKey = `${e.name || e.object}-${i}`;
|
||||
const isExpanded = expandedRow === rowKey;
|
||||
const isWarning = e.type === 'Warning';
|
||||
const last = formatEventTimeCell(e.lastTime);
|
||||
const first = formatEventTimeCell(e.firstTime);
|
||||
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 className="text-xs text-[var(--dg-text-muted)]">
|
||||
<div>{last.absolute}</div>
|
||||
<div className="text-[10px]">{last.relative}</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-[var(--dg-text-muted)]">
|
||||
<div>{first.absolute}</div>
|
||||
<div className="text-[10px]">{first.relative}</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-center tabular-nums text-[var(--dg-text-secondary)]">{e.count}</TableCell>
|
||||
<TableCell className="text-xs text-[var(--dg-text-muted)]">{formatEventRepeatSpan(e.firstTime, e.lastTime, e.count)}</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={isWarning
|
||||
? 'text-[var(--dg-warning)] border-[var(--dg-warning)]/30 text-[10px]'
|
||||
: 'text-[var(--dg-text-muted)] border-[var(--dg-border)] text-[10px]'}
|
||||
>
|
||||
{e.type}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-xs font-medium text-[var(--dg-text-secondary)]">{e.reason}</TableCell>
|
||||
<TableCell className="text-xs font-mono text-[var(--dg-text-muted)]">
|
||||
{e.objectKind ? (
|
||||
<span><span className="text-[var(--dg-text-secondary)]">{e.objectKind}</span>/{e.objectName || e.object.split('/').pop()}</span>
|
||||
) : e.object}
|
||||
</TableCell>
|
||||
{showNamespace && <TableCell className="text-xs text-[var(--dg-text-muted)]">{e.namespace || '-'}</TableCell>}
|
||||
<TableCell className="text-xs text-[var(--dg-text-muted)] font-mono">{e.source}</TableCell>
|
||||
<TableCell className="text-xs text-[var(--dg-text-secondary)] max-w-[360px]">
|
||||
<div className={`${isExpanded ? 'whitespace-normal break-words' : 'truncate'}`} title={!isExpanded ? e.message : undefined}>
|
||||
{e.message}
|
||||
</div>
|
||||
{isExpanded && e.name && (
|
||||
<div className="mt-1 pt-1 border-t border-[var(--dg-border)] text-[10px] text-[var(--dg-text-muted)]">
|
||||
事件名: {e.name}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
{maxRows && events.length > maxRows && (
|
||||
<div className="text-center py-2 text-xs text-[var(--dg-text-muted)] border-t border-[var(--dg-border)]">
|
||||
仅显示前 {maxRows} 条，共 {events.length} 条
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user