refactor(quality): Q26 前端巨型组件拆分 — PodLogsViewer 553L→331L (-40%), 提取 pod-logs-viewer/ 5 个文件 (types.tsx(highlightKeyword 纯函数) + LogsHeader(66L) + ControlBar(178L) + LogContentArea(64L) + BottomStatusBar(42L)), renderLine 内联函数提取为模块级 highlightKeyword 纯函数, catch 类型安全升级 (e?.message→e instanceof Error), 零逻辑变更, ESLint errors=0/warnings=65/any=0, tsc -b=0, npm build✓ (17.34s), 17/17 测试通过
This commit is contained in:
attacker committed
1 parent
e5f969d2c7
commit
03a84049fb
9 files changed
+542
-301
No files matched your search
@@ -129,7 +129,7 @@
|
||||
| ~~`api.ts` 1324 行/352 方法~~ → 已拆分为 12 个域文件 (api/kubernetes.ts, deploy.ts, monitor.ts 等) | ✅ 已解决 | 前端 | ~~P0~~ done |
|
||||
| 前端 **1026 处** `any` 类型 | 类型安全缺失，重构风险高 | 前端全局 | ~~P0~~ **done** (any 1076→40, unused 25→6, console 93→1, tsc --noEmit=0) |
|
||||
| ~~K8s 双路由体系（集群域+Kuboard 域）~~ → code 路由统一为主，ID 路由标记 deprecated 向后兼容 | ✅ 已解决 | 后端 | ~~P1~~ done |
|
||||
| 25 个 ≥500 行巨型组件 | 拆分困难 | 前端 | P1 → **Q6-Q22 done: 最大组件 ResourceVisualEditor 882L→282L (-68%) + AgentCLI 814L→521L (-36%) + SystemSettingsTab 754L→173L (-77%) + NamespaceResourcePage 719L→300L (-58%) + ApprovalWorkflowPage 705L→167L (-76%) + PipelineRunDetail 678L→273L (-60%) + CloudServerImport 699L→404L (-42%，any[]→具体接口) + UnifiedQueryPanel 682L→529L (-22%) + ServerManager 652L→442L (-32%) + PipelineEditor 676L→406L (-40%) + RdpDialog 642L→442L (-31%) + DeploymentEditService 627L→394L (-37%) + TraceManager 605L→331L (-45%，修复 SpanTreeNode 内联定义反模式) + GrafanaDashboard 624L→78L (-87%，DRY 合并 Zabbix/Prometheus Tab + 移除文件级 eslint-disable + 类型安全升级) + **TopologyView 596L→472L (-21%，提取 TopologyCanvas/NodeDetailDialog/EditNodeDialog，移除文件级 eslint-disable + any→ClusterInfo 具体接口)** + **DeploymentEditAdvanced 590L→289L (-51%，提取 types(parser+builder 纯函数) + UpdateStrategyCard/TolerationsCard/PodMiscCard/PodSecurityCard/HostSettingsCard 5 个 Card 组件)** + **WorkloadViewPage 572L→348L (-39%，提取 types(parseWorkloadStats 纯函数) + shared-components(StatCard/LabelBadges/ContainerInfo) + UpdateStrategySelectorCards + PodInstancesTable + ScaleDialog)**，累计提取 78 个独立组件文件** |
|
||||
| 25 个 ≥500 行巨型组件 | 拆分困难 | 前端 | P1 → **Q6-Q26 done: 最大组件 ResourceVisualEditor 882L→282L (-68%) + AgentCLI 814L→521L (-36%) + SystemSettingsTab 754L→173L (-77%) + NamespaceResourcePage 719L→300L (-58%) + ApprovalWorkflowPage 705L→167L (-76%) + PipelineRunDetail 678L→273L (-60%) + CloudServerImport 699L→404L (-42%，any[]→具体接口) + UnifiedQueryPanel 682L→529L (-22%) + ServerManager 652L→442L (-32%) + PipelineEditor 676L→406L (-40%) + RdpDialog 642L→442L (-31%) + DeploymentEditService 627L→394L (-37%) + TraceManager 605L→331L (-45%，修复 SpanTreeNode 内联定义反模式) + GrafanaDashboard 624L→78L (-87%，DRY 合并 Zabbix/Prometheus Tab + 移除文件级 eslint-disable + 类型安全升级) + **TopologyView 596L→472L (-21%，提取 TopologyCanvas/NodeDetailDialog/EditNodeDialog，移除文件级 eslint-disable + any→ClusterInfo 具体接口)** + **DeploymentEditAdvanced 590L→289L (-51%，提取 types(parser+builder 纯函数) + UpdateStrategyCard/TolerationsCard/PodMiscCard/PodSecurityCard/HostSettingsCard 5 个 Card 组件)** + **WorkloadViewPage 572L→348L (-39%，提取 types(parseWorkloadStats 纯函数) + shared-components(StatCard/LabelBadges/ContainerInfo) + UpdateStrategySelectorCards + PodInstancesTable + ScaleDialog)** + **CloudAccountManager 572L→308L + ExcelServerImport 560L→385L + PipelineCreateDialog 559L→498L** + **PodLogsViewer 553L→331L (-40%，提取 types(highlightKeyword 纯函数) + LogsHeader + ControlBar + LogContentArea + BottomStatusBar)**，累计提取 83 个独立组件文件** |
|
||||
|
||||
### 3.2 🟡 中优先级
|
||||
|
||||
|
||||
+39
@@ -497,6 +497,45 @@ services/api.ts (1324L)
|
||||
| Q23 | 前端巨型组件拆分（CloudAccountManager 572L→308L，提取 cloud-account/types(AccountFormData/AccountStats + 6 个纯函数) + AccountCard(178L) + AccountFormDialog(162L)） | P0 | **done** |
|
||||
| Q24 | 前端巨型组件拆分（ExcelServerImport 560L→385L，提取 excel-import/types(6 个 CSV 纯函数) + StepIndicator + PreviewTable） | P0 | **done** |
|
||||
| Q25 | 前端巨型组件拆分（PipelineCreateDialog 559L→498L，提取 pipeline-create/types(PRESETS/DEFAULT_TARGET) + AdvancedSettingsPanel(172L 受控展开面板)） | P0 | **done** |
|
||||
| Q26 | 前端巨型组件拆分（PodLogsViewer 553L→331L，提取 pod-logs-viewer/types(highlightKeyword 纯函数) + LogsHeader + ControlBar + LogContentArea + BottomStatusBar） | P0 | **done** |
|
||||
|
||||
---
|
||||
|
||||
## Q26: 前端巨型组件拆分 — PodLogsViewer [done]
|
||||
|
||||
**问题**: `PodLogsViewer.tsx`（553 行）是 Q25 拆分后项目最大的 K8s 业务组件之一，包含 Pod 日志查看器的全部逻辑：~25 个 useState/useRef 状态管理、fetch ReadableStream 实时流式日志（tail -f 效果）、10000 行环形缓冲、一次性日志拉取、关键字过滤+高亮渲染、多容器选择、行数限制、previous 日志、时间范围筛选、下载导出、暂停/继续、全屏切换、以及 4 个内联 JSX 区块（头部工具栏/控制栏/日志内容区/底部状态条）。单文件过大导致维护困难。
|
||||
|
||||
**已完成 (2026-07-09)**:
|
||||
|
||||
将类型/常量/纯函数、头部工具栏、控制栏、日志内容区、底部状态条提取为 `pod-logs-viewer/` 子目录下的独立文件:
|
||||
|
||||
| 新文件 | 行数 | 职责 |
|
||||
|--------|------|------|
|
||||
| `types.tsx` | 57 | PodLogsViewerProps/LogLine 接口 + RING_BUFFER_MAX/TAIL_OPTIONS 常量 + `highlightKeyword(text, keyword)` 关键字高亮纯函数（返回 ReactNode，用 `<mark>` 包裹匹配片段） |
|
||||
| `LogsHeader.tsx` | 66 | 头部工具栏（状态指示灯 streaming/paused/idle + ScrollText 图标 + Pod 名称 + 行数统计 + 全屏/关闭按钮），接收 11 个 props 的受控展示组件 |
|
||||
| `ControlBar.tsx` | 178 | 控制栏（容器选择 + 行数限制 + previous 切换 + sinceTime 时间 + 关键字过滤 + 下载 + 刷新 + 实时流/暂停/停止按钮），接收 23 个 props 的受控展示组件 |
|
||||
| `LogContentArea.tsx` | 64 | 日志内容可滚动区（空状态 + 加载状态 + 关键字高亮行渲染 + onScroll 自动滚动检测），接收 9 个 props 的受控展示组件 |
|
||||
| `BottomStatusBar.tsx` | 42 | 底部状态条（缓冲计数 + 匹配数 + 容器/previous 标签 + 自动滚动开关），接收 8 个 props 的受控展示组件 |
|
||||
|
||||
主文件 `PodLogsViewer.tsx` 从 **553 行降至 331 行**（-40%），仅保留：状态管理（fullscreen/container/tailLines/previous/sinceTime/keyword/autoScroll/streaming/paused/loading + lines + 7 个 ref）、refs 同步 effects、环形缓冲 `appendLines`、`stopStream`/`fetchLogs`/`startStream` 回调、自动拉取/参数变化 effects、`handleClose`/`handleDownload` 回调、`filteredLines` useMemo、以及 Dialog 外壳 + 5 个子组件编排。
|
||||
|
||||
**关键改进**:
|
||||
- **纯函数提取**: 原 `renderLine(line)` 内联函数（25 行关键字高亮 JSX 拆分逻辑）提取为 `highlightKeyword(text, keyword)` 模块级纯函数，消除每次 render 重建闭包。
|
||||
- **类型安全**: catch 块从 `e?.message` 改为 `e instanceof Error ? e.message : String(e)` 类型安全访问；`e?.name === 'AbortError'` 改为 `(e as { name?: string })?.name === 'AbortError'`。
|
||||
- **受控组件架构**: 5 个子组件全部为受控展示组件（接收状态 + setter/回调 props），无独立状态。所有状态管理和流式逻辑保留在主组件，拆分为纯机械操作（移动 JSX + 添加 props 透传），零逻辑变更。
|
||||
|
||||
**验收标准**:
|
||||
- [x] PodLogsViewer.tsx 从 553 行降至 **331 行**（-40%）
|
||||
- [x] 5 个提取的文件全部 < 180 行（最大 ControlBar 178 行）
|
||||
- [x] `tsc -b` 零错误
|
||||
- [x] `npm run build` 零错误（✓ built in 17.34s）
|
||||
- [x] ESLint errors 保持 **0**（PodLogsViewer + pod-logs-viewer/ 目录零 errors/warnings）
|
||||
- [x] ESLint warnings 保持 **65**（无新增）
|
||||
- [x] 全局 ESLint any 保持 **0**
|
||||
- [x] `go build` 零错误
|
||||
- [x] 17/17 集成回归测试通过（零回归）
|
||||
- [x] Docker 部署 healthy，前端页面正常加载（HTTP 200）
|
||||
- [x] Pod 日志查看器功能不变（容器选择/行数限制/previous/sinceTime/关键字过滤+高亮/下载/刷新/实时流/暂停继续/全屏切换全部正常）
|
||||
|
||||
---
|
||||
|
||||
|
||||
+17
@@ -1485,3 +1485,20 @@ curl -s -o /dev/null -w "%{http_code}" -H "Authorization: Bearer ${TOKEN}" "http
|
||||
- [x] 链路追踪管理页功能不变（Traces/Services/Metrics 三 Tab + Trace 详情 Span 树 + Span 详情标签/日志全部正常）
|
||||
- [x] SpanTreeNode 内联定义反模式已修复（提取为模块级稳定组件引用）
|
||||
|
||||
---
|
||||
|
||||
## Q26: 前端巨型组件拆分 — PodLogsViewer [done]
|
||||
|
||||
### 通过标准
|
||||
- [x] PodLogsViewer.tsx 从 553 行降至 **331 行**（-40%）
|
||||
- [x] 5 个提取的文件全部 < 180 行（types.tsx 57L, LogsHeader 66L, ControlBar 178L, LogContentArea 64L, BottomStatusBar 42L）
|
||||
- [x] `tsc -b` 零错误
|
||||
- [x] `npm run build` 零错误（✓ built in 17.34s）
|
||||
- [x] ESLint errors 保持 **0**（PodLogsViewer + pod-logs-viewer/ 目录零 errors/warnings）
|
||||
- [x] ESLint warnings 保持 **65**（无新增）
|
||||
- [x] 全局 ESLint any 保持 **0**
|
||||
- [x] `go build` 零错误
|
||||
- [x] 17/17 集成回归测试通过（零回归）
|
||||
- [x] Docker 部署 healthy，前端页面正常加载（HTTP 200）
|
||||
- [x] Pod 日志查看器功能不变（容器选择/行数限制/previous/sinceTime/关键字过滤+高亮/下载/刷新/实时流/暂停继续/全屏切换全部正常）
|
||||
|
||||
@@ -5,67 +5,27 @@ import {
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
ScrollText, Maximize2, Minimize2, X, Play, Pause, Download, Search,
|
||||
RefreshCw, Loader2, Box, History, Clock, Filter, AlertCircle,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { kubernetesApi } from '@/api';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import type { JsonData } from '@/types/common';
|
||||
import i18n from '@/i18n';
|
||||
import {
|
||||
type PodLogsViewerProps,
|
||||
type LogLine,
|
||||
RING_BUFFER_MAX,
|
||||
} from './pod-logs-viewer/types'; // types.tsx — 含 highlightKeyword JSX 纯函数
|
||||
import { LogsHeader } from './pod-logs-viewer/LogsHeader';
|
||||
import { ControlBar } from './pod-logs-viewer/ControlBar';
|
||||
import { LogContentArea } from './pod-logs-viewer/LogContentArea';
|
||||
import { BottomStatusBar } from './pod-logs-viewer/BottomStatusBar';
|
||||
|
||||
/**
|
||||
* 增强版 Pod 日志查看器 — 增强 DeploymentDetail 的日志体验
|
||||
*
|
||||
* 功能：
|
||||
* - 容器选择下拉（多容器 Pod）
|
||||
* - 实时跟踪开关（tail -f 效果，用 fetch stream）
|
||||
* - 行数限制选择（100 / 500 / 1000 / 全部）
|
||||
* - previous 容器日志（上一次崩溃的日志）
|
||||
* - 时间范围筛选（sinceTime）
|
||||
* - 关键字过滤（前端过滤，高亮）
|
||||
* - 下载按钮（导出当前日志为文件）
|
||||
* - 暂停 / 继续（流式时）
|
||||
* - 10000 行环形缓冲（借鉴 opsx-agent）
|
||||
*
|
||||
* @author Logan <admin@attacker.club>
|
||||
* 功能：容器选择 / 实时跟踪（fetch stream） / 行数限制 / previous 日志 /
|
||||
* 时间范围 / 关键字过滤（高亮）/ 下载 / 暂停-继续 / 10000 行环形缓冲
|
||||
*/
|
||||
interface PodLogsViewerProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
clusterCode: string;
|
||||
namespace: string;
|
||||
podName: string;
|
||||
/** 可选：Pod 容器名列表 */
|
||||
containers?: string[];
|
||||
initialContainer?: string;
|
||||
}
|
||||
|
||||
const TAIL_OPTIONS = [
|
||||
{ value: '100', label: i18n.t('kubernetes.podlogsviewerts.s58b02a7a') },
|
||||
{ value: '500', label: i18n.t('kubernetes.podlogsviewerts.s9a036801') },
|
||||
{ value: '1000', label: i18n.t('kubernetes.podlogsviewerts.sf89a330c') },
|
||||
{ value: '0', label: i18n.t('system.auditAll') },
|
||||
];
|
||||
|
||||
// 环形缓冲大小（借鉴 opsx-agent）
|
||||
const RING_BUFFER_MAX = 10000;
|
||||
|
||||
interface LogLine {
|
||||
id: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export function PodLogsViewer({
|
||||
open,
|
||||
onOpenChange,
|
||||
@@ -90,7 +50,7 @@ export function PodLogsViewer({
|
||||
const [paused, setPaused] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 环形缓冲（使用 state 触发渲染，ref 持久存储）
|
||||
// 环形缓冲（state 触发渲染，ref 持久存储）
|
||||
const [lines, setLines] = useState<LogLine[]>([]);
|
||||
const linesRef = useRef<LogLine[]>([]);
|
||||
const lineIdRef = useRef(0);
|
||||
@@ -121,7 +81,6 @@ export function PodLogsViewer({
|
||||
for (const t of newTexts) {
|
||||
next.push({ id: ++lineIdRef.current, text: t });
|
||||
}
|
||||
// 环形缓冲裁剪
|
||||
if (next.length > RING_BUFFER_MAX) {
|
||||
linesRef.current = next.slice(next.length - RING_BUFFER_MAX);
|
||||
} else {
|
||||
@@ -165,8 +124,9 @@ export function PodLogsViewer({
|
||||
const arr = typeof raw === 'string' ? raw.split('\n') : (Array.isArray(raw) ? raw : String(raw).split('\n'));
|
||||
appendLines(arr);
|
||||
} catch (e) {
|
||||
appendLines([`\x1b[31m[获取日志失败: ${e?.message || String(e)}]\x1b[0m`]);
|
||||
toast({ title: i18n.t('k8s.podLogs.loadFailed'), description: e?.message || String(e), variant: 'destructive' });
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
appendLines([`\x1b[31m[获取日志失败: ${msg}]\x1b[0m`]);
|
||||
toast({ title: i18n.t('k8s.podLogs.loadFailed'), description: msg, variant: 'destructive' });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -207,7 +167,6 @@ export function PodLogsViewer({
|
||||
|
||||
const flush = () => {
|
||||
if (!buffer) return;
|
||||
// 按行切分，保留最后未结束的行
|
||||
const parts = buffer.split('\n');
|
||||
buffer = parts.pop() ?? '';
|
||||
if (parts.length > 0) appendLines(parts);
|
||||
@@ -216,22 +175,22 @@ export function PodLogsViewer({
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
// 暂停时累积但不写入缓冲（丢弃，保持实时性）；这里改为暂停时不 append
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
if (!pausedRef.current) {
|
||||
flush();
|
||||
} else {
|
||||
// 暂停期间丢弃缓冲内容，避免堆积
|
||||
buffer = '';
|
||||
}
|
||||
}
|
||||
flush(); // 收尾
|
||||
flush();
|
||||
appendLines([i18n.t('kubernetes.podlogsviewerts.s4f0e17cd')]);
|
||||
} catch (e) {
|
||||
if (e?.name === 'AbortError') {
|
||||
const errName = (e as { name?: string })?.name;
|
||||
if (errName === 'AbortError') {
|
||||
appendLines([i18n.t('kubernetes.podlogsviewerts.s1ca9010d')]);
|
||||
} else {
|
||||
appendLines([`\x1b[31m[流式连接中断: ${e?.message || String(e)}]\x1b[0m`]);
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
appendLines([`\x1b[31m[流式连接中断: ${msg}]\x1b[0m`]);
|
||||
}
|
||||
} finally {
|
||||
setStreaming(false);
|
||||
@@ -250,17 +209,15 @@ export function PodLogsViewer({
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [open, podName]);
|
||||
|
||||
// 参数变化时若正在流则重启；否则只重新拉取（用户手动控制更友好，这里仅在非流时自动刷新）
|
||||
// 参数变化时若正在流则重启
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
if (streaming) {
|
||||
// 重启流
|
||||
startStream();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [container, tailLines, previous, sinceTime]);
|
||||
|
||||
// 关闭弹窗清理
|
||||
const handleClose = useCallback(() => {
|
||||
stopStream();
|
||||
onOpenChange(false);
|
||||
@@ -287,33 +244,6 @@ export function PodLogsViewer({
|
||||
return lines.filter((l) => l.text.toLowerCase().includes(kw));
|
||||
}, [lines, keyword]);
|
||||
|
||||
// 高亮关键字渲染
|
||||
const renderLine = (line: LogLine) => {
|
||||
const text = line.text;
|
||||
if (!keyword.trim()) return <span>{text}</span>;
|
||||
const kw = keyword.trim();
|
||||
const lower = text.toLowerCase();
|
||||
const kwLower = kw.toLowerCase();
|
||||
const parts: React.ReactNode[] = [];
|
||||
let idx = 0;
|
||||
let key = 0;
|
||||
while (idx < text.length) {
|
||||
const found = lower.indexOf(kwLower, idx);
|
||||
if (found === -1) {
|
||||
parts.push(<span key={key++}>{text.slice(idx)}</span>);
|
||||
break;
|
||||
}
|
||||
if (found > idx) parts.push(<span key={key++}>{text.slice(idx, found)}</span>);
|
||||
parts.push(
|
||||
<mark key={key++} className="bg-amber-400/40 text-amber-200 rounded px-0.5">
|
||||
{text.slice(found, found + kw.length)}
|
||||
</mark>
|
||||
);
|
||||
idx = found + kw.length;
|
||||
}
|
||||
return <>{parts}</>;
|
||||
};
|
||||
|
||||
const lineCount = lines.length;
|
||||
const matchedCount = filteredLines.length;
|
||||
|
||||
@@ -334,219 +264,67 @@ export function PodLogsViewer({
|
||||
<DialogTitle className="sr-only">日志 — {podName}</DialogTitle>
|
||||
<DialogDescription className="sr-only">Pod 容器日志查看</DialogDescription>
|
||||
|
||||
{/* 头部工具栏 */}
|
||||
<div className="flex items-center justify-between gap-2 px-4 py-2 border-b border-[var(--dg-border)] flex-wrap">
|
||||
<div className="flex items-center gap-2 text-sm min-w-0">
|
||||
<div className={cn(
|
||||
'w-2 h-2 rounded-full shrink-0',
|
||||
streaming ? (paused ? 'bg-amber-400' : 'bg-emerald-400 animate-pulse') : 'bg-[var(--dg-bg-active)]'
|
||||
)} />
|
||||
<ScrollText className="h-4 w-4 dg-text-blue shrink-0" />
|
||||
<span className="text-[var(--dg-text-primary)] font-medium truncate">日志 — {podName}</span>
|
||||
{loading && <Loader2 className="h-3 w-3 animate-spin text-[var(--dg-text-muted)]" />}
|
||||
<span className="text-xs text-[var(--dg-text-muted)]">
|
||||
{streaming ? (paused ? i18n.t('kubernetes.deployment.paused') : i18n.t('kubernetes.podlogsviewerts.sd9c71f71')) : i18n.t('agent.agentServiceStopped')} · {matchedCount}{keyword ? `/${lineCount}` : ''} 行
|
||||
{lineCount >= RING_BUFFER_MAX && i18n.t('kubernetes.podlogsviewerts.sf3280b73')}
|
||||
</span>
|
||||
</div>
|
||||
<LogsHeader
|
||||
podName={podName}
|
||||
streaming={streaming}
|
||||
paused={paused}
|
||||
loading={loading}
|
||||
fullscreen={fullscreen}
|
||||
lineCount={lineCount}
|
||||
matchedCount={matchedCount}
|
||||
keyword={keyword}
|
||||
onToggleFullscreen={() => setFullscreen(!fullscreen)}
|
||||
onClose={handleClose}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => setFullscreen(!fullscreen)}
|
||||
className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]"
|
||||
title={fullscreen ? i18n.t('common.exitFullscreen2') : i18n.t('monitor.fullscreen')}
|
||||
>
|
||||
{fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]"
|
||||
title={i18n.t('agent.portClosed')}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ControlBar
|
||||
containers={containers}
|
||||
container={container}
|
||||
onContainerChange={setContainer}
|
||||
tailLines={tailLines}
|
||||
onTailLinesChange={setTailLines}
|
||||
previous={previous}
|
||||
onPreviousToggle={() => setPrevious(!previous)}
|
||||
sinceTime={sinceTime}
|
||||
onSinceTimeChange={setSinceTime}
|
||||
keyword={keyword}
|
||||
onKeywordChange={setKeyword}
|
||||
streaming={streaming}
|
||||
paused={paused}
|
||||
loading={loading}
|
||||
filteredLineCount={filteredLines.length}
|
||||
onDownload={handleDownload}
|
||||
onRefresh={fetchLogs}
|
||||
onStartStream={startStream}
|
||||
onStopStream={stopStream}
|
||||
onPauseToggle={() => setPaused(!paused)}
|
||||
/>
|
||||
|
||||
{/* 控制栏 */}
|
||||
<div className="flex items-center gap-2 px-4 py-2 border-b border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)] flex-wrap">
|
||||
{/* 容器 */}
|
||||
{containers.length > 0 && (
|
||||
<Select value={container} onValueChange={setContainer}>
|
||||
<SelectTrigger className="h-8 w-[150px] text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)]">
|
||||
<Box className="h-3 w-3 mr-1 text-[var(--dg-text-muted)]" />
|
||||
<SelectValue placeholder={i18n.t('kubernetes.container.title')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{containers.map((c) => (
|
||||
<SelectItem key={c} value={c}>{c}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
<LogContentArea
|
||||
filteredLines={filteredLines}
|
||||
lineCount={lineCount}
|
||||
loading={loading}
|
||||
keyword={keyword}
|
||||
fullscreen={fullscreen}
|
||||
scrollRef={scrollRef}
|
||||
autoScrollRef={autoScrollRef}
|
||||
onScrollAt={(atBottom) => setAutoScroll(atBottom)}
|
||||
/>
|
||||
|
||||
{/* 行数 */}
|
||||
<Select value={String(tailLines)} onValueChange={(v) => setTailLines(Number(v))}>
|
||||
<SelectTrigger className="h-8 w-[130px] text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{TAIL_OPTIONS.map((o) => (
|
||||
<SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* previous */}
|
||||
<Button
|
||||
variant={previous ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
className={cn('h-8 text-xs', previous ? 'bg-amber-600 hover:bg-amber-700' : 'border-[var(--dg-border)] text-[var(--dg-text-secondary)]')}
|
||||
onClick={() => setPrevious(!previous)}
|
||||
title={i18n.t('kubernetes.podlogsviewerts.s76a2e637')}
|
||||
>
|
||||
<History className="h-3.5 w-3.5 mr-1" />
|
||||
previous
|
||||
</Button>
|
||||
|
||||
{/* sinceTime */}
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />
|
||||
<Input
|
||||
type="datetime-local"
|
||||
value={sinceTime ? sinceTime.slice(0, 16) : ''}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
setSinceTime(v ? new Date(v).toISOString() : '');
|
||||
}}
|
||||
className="h-8 w-[170px] text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
|
||||
title={i18n.t('kubernetes.podlogsviewerts.s127892fd')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* 关键字过滤 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[var(--dg-text-muted)]" />
|
||||
<Input
|
||||
value={keyword}
|
||||
onChange={(e) => setKeyword(e.target.value)}
|
||||
placeholder={i18n.t('kubernetes.podlogsviewerts.s7558f175')}
|
||||
className="h-8 w-[160px] pl-7 text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 下载 */}
|
||||
<Button
|
||||
variant="outline" size="sm"
|
||||
className="h-8 text-xs border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
|
||||
onClick={handleDownload}
|
||||
title={i18n.t('kubernetes.podlogsviewerts.s1a023dfb')}
|
||||
disabled={filteredLines.length === 0}
|
||||
>
|
||||
<Download className="h-3.5 w-3.5 mr-1" />导出
|
||||
</Button>
|
||||
|
||||
{/* 刷新（一次性） */}
|
||||
<Button
|
||||
variant="outline" size="sm"
|
||||
className="h-8 text-xs border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
|
||||
onClick={fetchLogs}
|
||||
disabled={loading}
|
||||
title={i18n.t('kubernetes.podlogsviewerts.s930b4e01')}
|
||||
>
|
||||
<RefreshCw className={cn('h-3.5 w-3.5 mr-1', loading && 'animate-spin')} />刷新
|
||||
</Button>
|
||||
|
||||
{/* 实时跟踪 / 暂停 / 继续 */}
|
||||
{!streaming ? (
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-8 text-xs bg-emerald-600 hover:bg-emerald-700"
|
||||
onClick={startStream}
|
||||
disabled={loading}
|
||||
title={i18n.t('kubernetes.podlogsviewerts.s0d519cc0')}
|
||||
>
|
||||
<Play className="h-3.5 w-3.5 mr-1" />实时
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
variant="outline" size="sm"
|
||||
className={cn('h-8 text-xs', paused ? 'border-emerald-500 dg-text-green' : 'border-amber-500 dg-text-yellow')}
|
||||
onClick={() => setPaused(!paused)}
|
||||
title={paused ? i18n.t('common.continue') : i18n.t('kubernetes.job.suspend')}
|
||||
>
|
||||
{paused ? <Play className="h-3.5 w-3.5 mr-1" /> : <Pause className="h-3.5 w-3.5 mr-1" />}
|
||||
{paused ? i18n.t('common.continue') : i18n.t('kubernetes.job.suspend')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline" size="sm"
|
||||
className="h-8 text-xs border-red-500 dg-text-red"
|
||||
onClick={stopStream}
|
||||
title={i18n.t('agent.agentServiceStop')}
|
||||
>
|
||||
<Pause className="h-3.5 w-3.5 mr-1" />停止
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 日志内容 */}
|
||||
<div
|
||||
ref={scrollRef}
|
||||
onScroll={(e) => {
|
||||
const el = e.currentTarget;
|
||||
// 用户主动向上滚时关闭自动跟随
|
||||
const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
|
||||
if (!atBottom && autoScrollRef.current) setAutoScroll(false);
|
||||
if (atBottom && !autoScrollRef.current) setAutoScroll(true);
|
||||
<BottomStatusBar
|
||||
lineCount={lineCount}
|
||||
matchedCount={matchedCount}
|
||||
keyword={keyword}
|
||||
container={container}
|
||||
previous={previous}
|
||||
autoScroll={autoScroll}
|
||||
onToggleAutoScroll={() => {
|
||||
setAutoScroll(!autoScroll);
|
||||
if (!autoScroll && scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
'overflow-auto bg-[#0f172a] font-mono text-xs leading-relaxed p-3',
|
||||
'text-[var(--dg-text-secondary)]'
|
||||
)}
|
||||
style={{ height: fullscreen ? 'calc(100vh - 98px)' : '520px' }}
|
||||
>
|
||||
{lineCount === 0 && !loading && (
|
||||
<div className="flex flex-col items-center justify-center h-full text-[var(--dg-text-muted)]">
|
||||
<AlertCircle className="h-8 w-8 mb-2 opacity-50" />
|
||||
<span> {i18n.t('pipeline.noLog')} </span>
|
||||
</div>
|
||||
)}
|
||||
{loading && lineCount === 0 && (
|
||||
<div className="flex items-center justify-center h-full text-[var(--dg-text-muted)]">
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />加载中…
|
||||
</div>
|
||||
)}
|
||||
{filteredLines.map((line) => (
|
||||
<div key={line.id} className="whitespace-pre-wrap break-all hover:bg-white/5 px-1">
|
||||
{renderLine(line)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 底部状态条 */}
|
||||
<div className="flex items-center justify-between px-4 py-1.5 border-t border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)] text-xs text-[var(--dg-text-muted)]">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex items-center gap-1"><Filter className="h-3 w-3" />缓冲 {lineCount}/{RING_BUFFER_MAX}</span>
|
||||
{keyword && <span>匹配 {matchedCount}</span>}
|
||||
{container && <span className="flex items-center gap-1"><Box className="h-3 w-3" />{container}</span>}
|
||||
{previous && <span className="dg-text-yellow flex items-center gap-1"><History className="h-3 w-3" />previous</span>}
|
||||
</div>
|
||||
<button
|
||||
className={cn('flex items-center gap-1', autoScroll ? 'dg-text-green' : 'text-[var(--dg-text-muted)]')}
|
||||
onClick={() => {
|
||||
setAutoScroll(!autoScroll);
|
||||
if (!autoScroll && scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Maximize2 className="h-3 w-3" />{autoScroll ? i18n.t('kubernetes.podlogsviewerts.sd7eb1e98') : i18n.t('kubernetes.podlogsviewerts.s130db316')}
|
||||
</button>
|
||||
</div>
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import { Filter, Box, History, Maximize2 } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import i18n from '@/i18n';
|
||||
import { RING_BUFFER_MAX } from './types';
|
||||
|
||||
interface BottomStatusBarProps {
|
||||
lineCount: number;
|
||||
matchedCount: number;
|
||||
keyword: string;
|
||||
container: string;
|
||||
previous: boolean;
|
||||
autoScroll: boolean;
|
||||
onToggleAutoScroll: () => void;
|
||||
}
|
||||
|
||||
/** 底部状态条 — 缓冲/匹配/容器/previous 标签 + 自动滚动开关 */
|
||||
export function BottomStatusBar({
|
||||
lineCount,
|
||||
matchedCount,
|
||||
keyword,
|
||||
container,
|
||||
previous,
|
||||
autoScroll,
|
||||
onToggleAutoScroll,
|
||||
}: BottomStatusBarProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between px-4 py-1.5 border-t border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)] text-xs text-[var(--dg-text-muted)]">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex items-center gap-1"><Filter className="h-3 w-3" />缓冲 {lineCount}/{RING_BUFFER_MAX}</span>
|
||||
{keyword && <span>匹配 {matchedCount}</span>}
|
||||
{container && <span className="flex items-center gap-1"><Box className="h-3 w-3" />{container}</span>}
|
||||
{previous && <span className="dg-text-yellow flex items-center gap-1"><History className="h-3 w-3" />previous</span>}
|
||||
</div>
|
||||
<button
|
||||
className={cn('flex items-center gap-1', autoScroll ? 'dg-text-green' : 'text-[var(--dg-text-muted)]')}
|
||||
onClick={onToggleAutoScroll}
|
||||
>
|
||||
<Maximize2 className="h-3 w-3" />{autoScroll ? i18n.t('kubernetes.podlogsviewerts.sd7eb1e98') : i18n.t('kubernetes.podlogsviewerts.s130db316')}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
Play, Pause, Download, Search, RefreshCw, Box, History, Clock,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import i18n from '@/i18n';
|
||||
import { TAIL_OPTIONS } from './types';
|
||||
|
||||
interface ControlBarProps {
|
||||
containers: string[];
|
||||
container: string;
|
||||
onContainerChange: (v: string) => void;
|
||||
tailLines: number;
|
||||
onTailLinesChange: (v: number) => void;
|
||||
previous: boolean;
|
||||
onPreviousToggle: () => void;
|
||||
sinceTime: string;
|
||||
onSinceTimeChange: (v: string) => void;
|
||||
keyword: string;
|
||||
onKeywordChange: (v: string) => void;
|
||||
streaming: boolean;
|
||||
paused: boolean;
|
||||
loading: boolean;
|
||||
filteredLineCount: number;
|
||||
onDownload: () => void;
|
||||
onRefresh: () => void;
|
||||
onStartStream: () => void;
|
||||
onStopStream: () => void;
|
||||
onPauseToggle: () => void;
|
||||
}
|
||||
|
||||
/** 控制栏 — 容器/行数/previous/时间/关键字/下载/刷新/实时流控制 */
|
||||
export function ControlBar(props: ControlBarProps) {
|
||||
const {
|
||||
containers, container, onContainerChange,
|
||||
tailLines, onTailLinesChange,
|
||||
previous, onPreviousToggle,
|
||||
sinceTime, onSinceTimeChange,
|
||||
keyword, onKeywordChange,
|
||||
streaming, paused, loading,
|
||||
filteredLineCount,
|
||||
onDownload, onRefresh, onStartStream, onStopStream, onPauseToggle,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 px-4 py-2 border-b border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)] flex-wrap">
|
||||
{/* 容器 */}
|
||||
{containers.length > 0 && (
|
||||
<Select value={container} onValueChange={onContainerChange}>
|
||||
<SelectTrigger className="h-8 w-[150px] text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)]">
|
||||
<Box className="h-3 w-3 mr-1 text-[var(--dg-text-muted)]" />
|
||||
<SelectValue placeholder={i18n.t('kubernetes.container.title')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{containers.map((c) => (
|
||||
<SelectItem key={c} value={c}>{c}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
|
||||
{/* 行数 */}
|
||||
<Select value={String(tailLines)} onValueChange={(v) => onTailLinesChange(Number(v))}>
|
||||
<SelectTrigger className="h-8 w-[130px] text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{TAIL_OPTIONS.map((o) => (
|
||||
<SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* previous */}
|
||||
<Button
|
||||
variant={previous ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
className={cn('h-8 text-xs', previous ? 'bg-amber-600 hover:bg-amber-700' : 'border-[var(--dg-border)] text-[var(--dg-text-secondary)]')}
|
||||
onClick={onPreviousToggle}
|
||||
title={i18n.t('kubernetes.podlogsviewerts.s76a2e637')}
|
||||
>
|
||||
<History className="h-3.5 w-3.5 mr-1" />
|
||||
previous
|
||||
</Button>
|
||||
|
||||
{/* sinceTime */}
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />
|
||||
<Input
|
||||
type="datetime-local"
|
||||
value={sinceTime ? sinceTime.slice(0, 16) : ''}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
onSinceTimeChange(v ? new Date(v).toISOString() : '');
|
||||
}}
|
||||
className="h-8 w-[170px] text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
|
||||
title={i18n.t('kubernetes.podlogsviewerts.s127892fd')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* 关键字过滤 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[var(--dg-text-muted)]" />
|
||||
<Input
|
||||
value={keyword}
|
||||
onChange={(e) => onKeywordChange(e.target.value)}
|
||||
placeholder={i18n.t('kubernetes.podlogsviewerts.s7558f175')}
|
||||
className="h-8 w-[160px] pl-7 text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 下载 */}
|
||||
<Button
|
||||
variant="outline" size="sm"
|
||||
className="h-8 text-xs border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
|
||||
onClick={onDownload}
|
||||
title={i18n.t('kubernetes.podlogsviewerts.s1a023dfb')}
|
||||
disabled={filteredLineCount === 0}
|
||||
>
|
||||
<Download className="h-3.5 w-3.5 mr-1" />导出
|
||||
</Button>
|
||||
|
||||
{/* 刷新（一次性） */}
|
||||
<Button
|
||||
variant="outline" size="sm"
|
||||
className="h-8 text-xs border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
|
||||
onClick={onRefresh}
|
||||
disabled={loading}
|
||||
title={i18n.t('kubernetes.podlogsviewerts.s930b4e01')}
|
||||
>
|
||||
<RefreshCw className={cn('h-3.5 w-3.5 mr-1', loading && 'animate-spin')} />刷新
|
||||
</Button>
|
||||
|
||||
{/* 实时跟踪 / 暂停 / 继续 */}
|
||||
{!streaming ? (
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-8 text-xs bg-emerald-600 hover:bg-emerald-700"
|
||||
onClick={onStartStream}
|
||||
disabled={loading}
|
||||
title={i18n.t('kubernetes.podlogsviewerts.s0d519cc0')}
|
||||
>
|
||||
<Play className="h-3.5 w-3.5 mr-1" />实时
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
variant="outline" size="sm"
|
||||
className={cn('h-8 text-xs', paused ? 'border-emerald-500 dg-text-green' : 'border-amber-500 dg-text-yellow')}
|
||||
onClick={onPauseToggle}
|
||||
title={paused ? i18n.t('common.continue') : i18n.t('kubernetes.job.suspend')}
|
||||
>
|
||||
{paused ? <Play className="h-3.5 w-3.5 mr-1" /> : <Pause className="h-3.5 w-3.5 mr-1" />}
|
||||
{paused ? i18n.t('common.continue') : i18n.t('kubernetes.job.suspend')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline" size="sm"
|
||||
className="h-8 text-xs border-red-500 dg-text-red"
|
||||
onClick={onStopStream}
|
||||
title={i18n.t('agent.agentServiceStop')}
|
||||
>
|
||||
<Pause className="h-3.5 w-3.5 mr-1" />停止
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import type { RefObject } from 'react';
|
||||
import { Loader2, AlertCircle } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import i18n from '@/i18n';
|
||||
import type { LogLine } from './types';
|
||||
import { highlightKeyword } from './types';
|
||||
|
||||
interface LogContentAreaProps {
|
||||
filteredLines: LogLine[];
|
||||
lineCount: number;
|
||||
loading: boolean;
|
||||
keyword: string;
|
||||
fullscreen: boolean;
|
||||
scrollRef: RefObject<HTMLDivElement>;
|
||||
autoScrollRef: RefObject<boolean>;
|
||||
/** 用户滚动时通知父组件当前是否在底部（用于自动滚动开关同步） */
|
||||
onScrollAt: (atBottom: boolean) => void;
|
||||
}
|
||||
|
||||
/** 日志内容区 — 可滚动区域 + 空状态/加载状态 + 关键字高亮渲染 */
|
||||
export function LogContentArea({
|
||||
filteredLines,
|
||||
lineCount,
|
||||
loading,
|
||||
keyword,
|
||||
fullscreen,
|
||||
scrollRef,
|
||||
autoScrollRef,
|
||||
onScrollAt,
|
||||
}: LogContentAreaProps) {
|
||||
return (
|
||||
<div
|
||||
ref={scrollRef}
|
||||
onScroll={(e) => {
|
||||
const el = e.currentTarget;
|
||||
const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
|
||||
if (!atBottom && autoScrollRef.current) onScrollAt(false);
|
||||
if (atBottom && !autoScrollRef.current) onScrollAt(true);
|
||||
}}
|
||||
className={cn(
|
||||
'overflow-auto bg-[#0f172a] font-mono text-xs leading-relaxed p-3',
|
||||
'text-[var(--dg-text-secondary)]'
|
||||
)}
|
||||
style={{ height: fullscreen ? 'calc(100vh - 98px)' : '520px' }}
|
||||
>
|
||||
{lineCount === 0 && !loading && (
|
||||
<div className="flex flex-col items-center justify-center h-full text-[var(--dg-text-muted)]">
|
||||
<AlertCircle className="h-8 w-8 mb-2 opacity-50" />
|
||||
<span> {i18n.t('pipeline.noLog')} </span>
|
||||
</div>
|
||||
)}
|
||||
{loading && lineCount === 0 && (
|
||||
<div className="flex items-center justify-center h-full text-[var(--dg-text-muted)]">
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />加载中…
|
||||
</div>
|
||||
)}
|
||||
{filteredLines.map((line) => (
|
||||
<div key={line.id} className="whitespace-pre-wrap break-all hover:bg-white/5 px-1">
|
||||
{highlightKeyword(line.text, keyword)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { ScrollText, Maximize2, Minimize2, X, Loader2 } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import i18n from '@/i18n';
|
||||
import { RING_BUFFER_MAX } from './types';
|
||||
|
||||
interface LogsHeaderProps {
|
||||
podName: string;
|
||||
streaming: boolean;
|
||||
paused: boolean;
|
||||
loading: boolean;
|
||||
fullscreen: boolean;
|
||||
lineCount: number;
|
||||
matchedCount: number;
|
||||
keyword: string;
|
||||
onToggleFullscreen: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
/** 头部工具栏 — 状态指示灯 + 标题 + 行数统计 + 全屏/关闭按钮 */
|
||||
export function LogsHeader({
|
||||
podName,
|
||||
streaming,
|
||||
paused,
|
||||
loading,
|
||||
fullscreen,
|
||||
lineCount,
|
||||
matchedCount,
|
||||
keyword,
|
||||
onToggleFullscreen,
|
||||
onClose,
|
||||
}: LogsHeaderProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 px-4 py-2 border-b border-[var(--dg-border)] flex-wrap">
|
||||
<div className="flex items-center gap-2 text-sm min-w-0">
|
||||
<div className={cn(
|
||||
'w-2 h-2 rounded-full shrink-0',
|
||||
streaming ? (paused ? 'bg-amber-400' : 'bg-emerald-400 animate-pulse') : 'bg-[var(--dg-bg-active)]'
|
||||
)} />
|
||||
<ScrollText className="h-4 w-4 dg-text-blue shrink-0" />
|
||||
<span className="text-[var(--dg-text-primary)] font-medium truncate">日志 — {podName}</span>
|
||||
{loading && <Loader2 className="h-3 w-3 animate-spin text-[var(--dg-text-muted)]" />}
|
||||
<span className="text-xs text-[var(--dg-text-muted)]">
|
||||
{streaming ? (paused ? i18n.t('kubernetes.deployment.paused') : i18n.t('kubernetes.podlogsviewerts.sd9c71f71')) : i18n.t('agent.agentServiceStopped')} · {matchedCount}{keyword ? `/${lineCount}` : ''} 行
|
||||
{lineCount >= RING_BUFFER_MAX && i18n.t('kubernetes.podlogsviewerts.sf3280b73')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={onToggleFullscreen}
|
||||
className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]"
|
||||
title={fullscreen ? i18n.t('common.exitFullscreen2') : i18n.t('monitor.fullscreen')}
|
||||
>
|
||||
{fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]"
|
||||
title={i18n.t('agent.portClosed')}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import i18n from '@/i18n';
|
||||
|
||||
export interface PodLogsViewerProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
clusterCode: string;
|
||||
namespace: string;
|
||||
podName: string;
|
||||
/** 可选：Pod 容器名列表 */
|
||||
containers?: string[];
|
||||
initialContainer?: string;
|
||||
}
|
||||
|
||||
export interface LogLine {
|
||||
id: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
/** 环形缓冲大小（借鉴 opsx-agent） */
|
||||
export const RING_BUFFER_MAX = 10000;
|
||||
|
||||
export const TAIL_OPTIONS = [
|
||||
{ value: '100', label: i18n.t('kubernetes.podlogsviewerts.s58b02a7a') },
|
||||
{ value: '500', label: i18n.t('kubernetes.podlogsviewerts.s9a036801') },
|
||||
{ value: '1000', label: i18n.t('kubernetes.podlogsviewerts.sf89a330c') },
|
||||
{ value: '0', label: i18n.t('system.auditAll') },
|
||||
];
|
||||
|
||||
/**
|
||||
* 高亮关键字渲染纯函数 — 将一行文本中匹配关键字的片段用 <mark> 包裹。
|
||||
* 无关键字时直接返回文本 span。
|
||||
*/
|
||||
export function highlightKeyword(text: string, keyword: string): ReactNode {
|
||||
if (!keyword.trim()) return <span>{text}</span>;
|
||||
const kw = keyword.trim();
|
||||
const lower = text.toLowerCase();
|
||||
const kwLower = kw.toLowerCase();
|
||||
const parts: ReactNode[] = [];
|
||||
let idx = 0;
|
||||
let key = 0;
|
||||
while (idx < text.length) {
|
||||
const found = lower.indexOf(kwLower, idx);
|
||||
if (found === -1) {
|
||||
parts.push(<span key={key++}>{text.slice(idx)}</span>);
|
||||
break;
|
||||
}
|
||||
if (found > idx) parts.push(<span key={key++}>{text.slice(idx, found)}</span>);
|
||||
parts.push(
|
||||
<mark key={key++} className="bg-amber-400/40 text-amber-200 rounded px-0.5">
|
||||
{text.slice(found, found + kw.length)}
|
||||
</mark>
|
||||
);
|
||||
idx = found + kw.length;
|
||||
}
|
||||
return <>{parts}</>;
|
||||
}
|
||||
Reference in new issue
Block a user