446 lines
29 KiB
TypeScript
446 lines
29 KiB
TypeScript
// UnifiedQueryPanel.tsx — 统一查询面板（接入真实 API）// Logan.Li
|
||
import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
|
||
import { Play, Loader2, Clock, Save, ChevronDown, Bell } from 'lucide-react';
|
||
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
||
import { TimeRangePicker } from './TimeRangePicker';
|
||
import { LogFieldSidebar } from './LogFieldSidebar';
|
||
import { EnhancedLogResults, extractCommonLabels } from './EnhancedLogResults';
|
||
import { LogQueryToolbar } from './LogQueryToolbar';
|
||
import { StatChartPanel } from './StatChartPanel';
|
||
import { LogClusterPanel } from './LogClusterPanel';
|
||
import { SaveQueryDialog, SaveAlertDialog } from './SaveQueryDialog';
|
||
import { QueryHistoryPanel } from './QueryHistoryPanel';
|
||
import { LogAlertFromQueryDialog } from './LogAlertFromQueryDialog';
|
||
import { logCenterApi, type LogDataSource } from '@/api/monitor/log-center';
|
||
import type { LogEngine, TimeRange, ResultTab, ViewMode, LogEntry, StatTable, LogCluster, QueryHistoryItem } from './types-v3';
|
||
import { ENGINE_META, generateMockEntries, generateMockStatTable, generateMockClusters, extractFields, generateHistogramData, historyStorage } from './types-v3';
|
||
import { useToast } from '@/hooks/use-toast';
|
||
|
||
// 默认最近5分钟 // Logan.Li
|
||
const DEFAULT_TIME_RANGE: TimeRange = {
|
||
start: new Date(Date.now() - 5 * 60000).toISOString().replace('T', ' ').substring(0, 19),
|
||
end: new Date().toISOString().replace('T', ' ').substring(0, 19),
|
||
label: '最近5分钟',
|
||
type: 'relative',
|
||
};
|
||
|
||
// Demo 数据源（后端无数据源时的兜底）// Logan.Li
|
||
const DEMO_SOURCES: Record<'loki' | 'elasticsearch', LogDataSource[]> = {
|
||
loki: [{ id: -1, name: 'demo-loki', type: 'loki', url: '' }],
|
||
elasticsearch: [{ id: -2, name: 'demo-es', type: 'elasticsearch', url: '' }],
|
||
};
|
||
|
||
// 引擎默认查询语句 // Logan.Li
|
||
const DEFAULT_QUERIES: Record<'loki' | 'elasticsearch', string> = {
|
||
loki: '{app="cex-admin-api"} |= ""',
|
||
elasticsearch: 'app:cex-admin-api',
|
||
};
|
||
|
||
// 引擎徽标：左侧小圆点 + 语言标签 // Logan.Li
|
||
const ENGINE_BADGE: Record<'loki' | 'elasticsearch', { label: string; dotColor: string }> = {
|
||
loki: { label: 'LogQL', dotColor: '#06b6d4' },
|
||
elasticsearch: { label: 'Lucene', dotColor: '#22c55e' },
|
||
};
|
||
|
||
// 增强快捷查询模板（14+ 条/引擎） // Logan.Li
|
||
const ALL_TEMPLATES: Record<'loki' | 'elasticsearch', { label: string; query: string }[]> = {
|
||
loki: [
|
||
{ label: 'Nginx 错误', query: '{job="nginx"} |= "error"' },
|
||
{ label: 'JSON 过滤', query: '{namespace="prod"} | json | level="warn"' },
|
||
{ label: '超时搜索', query: '{app="api"} |= "timeout"' },
|
||
{ label: '级别统计', query: 'sum by(level) (count_over_time({job="app"}[5m]))' },
|
||
{ label: '正则多级别', query: '{container="frontend"} |~ "ERROR|WARN|FATAL"' },
|
||
{ label: '慢请求>1s', query: '{job="api"} | json | response_time > 1000' },
|
||
{ label: '错误率统计', query: 'sum by(level) (count_over_time({app="cex-admin-api"} |= "error" [5m]))' },
|
||
{ label: '追踪ID查询', query: '{app="cex-admin-api"} |= "trace_id" | json' },
|
||
{ label: '服务聚合', query: 'sum by(service_name) (count_over_time({namespace="astralx"}[5m]))' },
|
||
{ label: '高延迟筛选', query: '{app="cex-admin-api"} | json | response_time > 500' },
|
||
{ label: '异常堆栈', query: '{app="cex-admin-api"} |= "Exception"' },
|
||
{ label: '日志趋势', query: 'sum(count_over_time({app="cex-admin-api"}[1h]))' },
|
||
{ label: '正则提取', query: '{app="cex-admin-api"} | regexp "(?P<method>\\w+) (?P<path>\\S+)"' },
|
||
{ label: '格式输出', query: '{app="cex-admin-api"} | json | line_format "{{.level}} {{.message}}"' },
|
||
],
|
||
elasticsearch: [
|
||
{ label: 'API 5xx', query: 'status:500 AND path:"/api/*"' },
|
||
{ label: '错误超时', query: 'level:error AND message:*timeout*' },
|
||
{ label: '排除调试', query: 'host.name:server-* AND NOT level:debug' },
|
||
{ label: '慢请求', query: 'response_time:>1000 AND method:POST' },
|
||
{ label: '严重错误', query: '@timestamp:[now-1h TO now] AND level:critical' },
|
||
{ label: '服务错误', query: 'service:nginx AND (level:error OR level:fatal)' },
|
||
{ label: '组合查询', query: 'app:cex-admin-api AND (level:error OR level:warn)' },
|
||
{ label: '模糊匹配', query: 'message:*timeout* AND app:cex-admin-api' },
|
||
{ label: '范围查询', query: 'response_time:[1000 TO *] AND method:POST' },
|
||
{ label: '排除路径', query: 'app:cex-admin-api AND NOT path:/health' },
|
||
{ label: '时间过滤', query: '@timestamp:[now-1h TO now] AND level:error' },
|
||
{ label: 'IP段过滤', query: 'client_ip:172.36.* AND app:cex-admin-api' },
|
||
{ label: '聚合统计', query: 'app:cex-admin-api | STATS count(*) by level' },
|
||
{ label: '嵌套字段', query: 'labels.orgId:10001 AND app:cex-admin-api' },
|
||
],
|
||
};
|
||
|
||
// LogQL / Lucene 语法高亮 → HTML // Logan.Li
|
||
function highlightSyntax(query: string, engine: 'loki' | 'elasticsearch'): string {
|
||
if (!query) return '<span style="color:transparent">.</span>';
|
||
if (engine === 'loki') {
|
||
return query
|
||
.replace(/([a-zA-Z_][\w-]*)(?==)/g, '<s c="#f59e0b">$1</s>')
|
||
.replace(/("(?:[^"\\]|\\.)*")/g, '<s c="#22c55e">$1</s>')
|
||
.replace(/(\|=|\!=|=~|!~|=)/g, '<s c="#f43f5e">$1</s>')
|
||
.replace(/(\|json|\|regexp|\|line_format|\|unwrap|\|pattern|\|label_format)/g, '<s c="#8b5cf6">$1</s>')
|
||
.replace(/\b(count_over_time|sum|rate|avg|max|min|count|by|over)\b/g, '<s c="#06b6d4">$1</s>')
|
||
.replace(/(\{|\})/g, '<s c="#f59e0b">$1</s>')
|
||
.replace(/<s c=/g, '<span style="color=') + '<span style="color:transparent">.</span>';
|
||
}
|
||
return query
|
||
.replace(/\b(AND|OR|NOT)\b/g, '<s c="#f43f5e">$1</s>')
|
||
.replace(/([a-zA-Z_@][\w.-]*):/g, '<s c="#f59e0b">$1</s>:')
|
||
.replace(/("(?:[^"\\]|\\.)*")/g, '<s c="#22c55e">$1</s>')
|
||
.replace(/(\*|\?|\~|\^|\[|\]|\(|\))/g, '<s c="#8b5cf6">$1</s>')
|
||
.replace(/<s c=/g, '<span style="color=') + '<span style="color:transparent">.</span>';
|
||
}
|
||
|
||
// 语法高亮输入框：底层高亮 + 上层透明输入 // Logan.Li
|
||
function SyntaxHighlightInput({ value, onChange, engine, placeholder }: {
|
||
value: string; onChange: (v: string) => void; engine: 'loki' | 'elasticsearch'; placeholder?: string;
|
||
}) {
|
||
const taRef = useRef<HTMLTextAreaElement>(null);
|
||
const preRef = useRef<HTMLPreElement>(null);
|
||
const sync = useCallback(() => {
|
||
if (preRef.current && taRef.current) { preRef.current.scrollLeft = taRef.current.scrollLeft; preRef.current.scrollTop = taRef.current.scrollTop; }
|
||
}, []);
|
||
const onKey = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||
if (e.key === 'Tab') { e.preventDefault(); const t = e.currentTarget, s = t.selectionStart, ed = t.selectionEnd; onChange(value.slice(0, s) + ' ' + value.slice(ed)); requestAnimationFrame(() => { t.selectionStart = t.selectionEnd = s + 2; }); }
|
||
};
|
||
const html = useMemo(() => highlightSyntax(value, engine), [value, engine]);
|
||
return (
|
||
<div className="relative flex-1 min-w-[120px]" style={{ height: '40px' }}>
|
||
<pre ref={preRef} className="absolute inset-0 m-0 font-mono text-xs rounded pointer-events-none overflow-hidden whitespace-pre-wrap break-all px-3 py-2.5" style={{ background: 'transparent', border: '1px solid transparent', lineHeight: '20px', color: 'var(--dg-text-primary)', zIndex: 1 }} dangerouslySetInnerHTML={{ __html: html }} />
|
||
<textarea ref={taRef} value={value} onChange={e => onChange(e.target.value)} onScroll={sync} onKeyDown={onKey} spellCheck={false} autoComplete="off" rows={1}
|
||
className="absolute inset-0 w-full h-full font-mono text-xs rounded resize-none outline-none overflow-auto whitespace-pre-wrap break-all px-3 py-2.5"
|
||
style={{ background: 'var(--dg-bg-tertiary)', border: '1px solid var(--dg-border)', color: 'transparent', caretColor: 'var(--dg-text-primary)', lineHeight: '20px', zIndex: 2 }}
|
||
placeholder={placeholder} />
|
||
{!value && <div className="absolute inset-0 flex items-center px-3 pointer-events-none" style={{ zIndex: 1 }}><span className="text-xs font-mono" style={{ color: 'var(--dg-text-muted)' }}>{placeholder}</span></div>}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface Props { engine: LogEngine; onRuleCreated: () => void; }
|
||
|
||
export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
|
||
const { toast } = useToast();
|
||
const effEngine: 'loki' | 'elasticsearch' = engine === 'sls' ? 'loki' : engine;
|
||
const meta = ENGINE_META[effEngine];
|
||
const badge = ENGINE_BADGE[effEngine];
|
||
|
||
// 从后端加载真实数据源，同时保留 demo 兜底 // Logan.Li
|
||
const [sources, setSources] = useState<LogDataSource[]>(DEMO_SOURCES[effEngine]);
|
||
useEffect(() => {
|
||
logCenterApi.listDatasources(effEngine).then((res: any) => {
|
||
const list: LogDataSource[] = Array.isArray(res) ? res : (res?.list || []);
|
||
// 合并真实数据源 + demo 兜底（真实源在前） // Logan.Li
|
||
if (list.length > 0) setSources([...list, ...DEMO_SOURCES[effEngine]]);
|
||
else setSources(DEMO_SOURCES[effEngine]);
|
||
}).catch(() => setSources(DEMO_SOURCES[effEngine]));
|
||
}, [effEngine]);
|
||
|
||
const [query, setQuery] = useState(DEFAULT_QUERIES[effEngine]);
|
||
const [dsId, setDsId] = useState(String(sources[0]?.id || ''));
|
||
const [timeRange, setTimeRange] = useState<TimeRange>(DEFAULT_TIME_RANGE);
|
||
const [loading, setLoading] = useState(false);
|
||
const [entries, setEntries] = useState<LogEntry[]>([]);
|
||
const [statTable, setStatTable] = useState<StatTable | undefined>();
|
||
const [clusters, setClusters] = useState<LogCluster[]>([]);
|
||
const [histogramData, setHistogramData] = useState<{ timestamp: string; count: number }[]>([]);
|
||
const [totalCount, setTotalCount] = useState(0);
|
||
const [queryTime, setQueryTime] = useState(0);
|
||
const [resultTab, setResultTab] = useState<ResultTab>('logs');
|
||
const [viewMode, setViewMode] = useState<ViewMode>('raw');
|
||
const [wrapLines, setWrapLines] = useState(false);
|
||
const [truncate, setTruncate] = useState(true);
|
||
const [selectedFields, setSelectedFields] = useState<string[]>([]);
|
||
const [page, setPage] = useState(1);
|
||
const [perPage, setPerPage] = useState(20);
|
||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
||
const [saveQueryOpen, setSaveQueryOpen] = useState(false);
|
||
const [saveAlertOpen, setSaveAlertOpen] = useState(false);
|
||
const [historyPanelOpen, setHistoryPanelOpen] = useState(false);
|
||
const [alertDialogOpen, setAlertDialogOpen] = useState(false);
|
||
const [saveMenuOpen, setSaveMenuOpen] = useState(false);
|
||
const [hasQueried, setHasQueried] = useState(false);
|
||
|
||
// 数据源切换后更新 dsId // Logan.Li
|
||
useEffect(() => {
|
||
if (sources.length > 0) setDsId(String(sources[0].id));
|
||
}, [sources]);
|
||
|
||
const currentSource = sources.find(s => String(s.id) === dsId);
|
||
const isDemo = currentSource && (currentSource.id < 0 || !currentSource.url);
|
||
|
||
const fields = useMemo(() => extractFields(entries), [entries]);
|
||
const commonLabels = useMemo(() => extractCommonLabels(entries), [entries]);
|
||
const sortedEntries = useMemo(() => { const a = [...entries]; return sortDirection === 'asc' ? a.sort((x, y) => x.timestamp.localeCompare(y.timestamp)) : a.sort((x, y) => y.timestamp.localeCompare(x.timestamp)); }, [entries, sortDirection]);
|
||
const totalPages = Math.max(1, Math.ceil(sortedEntries.length / perPage));
|
||
const pagedEntries = useMemo(() => { const s = (page - 1) * perPage; return sortedEntries.slice(s, s + perPage); }, [sortedEntries, page, perPage]);
|
||
|
||
// 执行查询 — 接入真实 API（demo 源则使用 mock）// Logan.Li
|
||
const handleRun = useCallback(async () => {
|
||
if (!currentSource) return;
|
||
const dsIdNum = currentSource.id;
|
||
setLoading(true);
|
||
const t0 = performance.now();
|
||
|
||
// Demo 源：模拟数据
|
||
if (isDemo) {
|
||
setTimeout(() => {
|
||
const mock = generateMockEntries(effEngine as LogEngine, 120);
|
||
setEntries(mock); setHistogramData(generateHistogramData(mock)); setTotalCount(mock.length * 14);
|
||
setQueryTime(Math.round(performance.now() - t0)); setStatTable(generateMockStatTable(effEngine as LogEngine));
|
||
setClusters(generateMockClusters()); setPage(1); setLoading(false); setHasQueried(true);
|
||
historyStorage.add({ engine: effEngine as LogEngine, datasourceName: currentSource.name, query, timeRange: timeRange.label, resultCount: mock.length });
|
||
}, 300);
|
||
return;
|
||
}
|
||
|
||
// 真实 API 查询
|
||
try {
|
||
const startISO = timeRange.start + (timeRange.start.includes('T') ? '' : '.000Z').replace(' ', 'T');
|
||
const endISO = timeRange.end + (timeRange.end.includes('T') ? '' : '.000Z').replace(' ', 'T');
|
||
let result: any;
|
||
|
||
if (effEngine === 'loki') {
|
||
result = await logCenterApi.queryLoki({
|
||
datasource_id: dsIdNum,
|
||
query,
|
||
limit: 200,
|
||
start: startISO,
|
||
end: endISO,
|
||
direction: 'backward',
|
||
});
|
||
} else {
|
||
result = await logCenterApi.queryElasticsearch({
|
||
datasource_id: dsIdNum,
|
||
query,
|
||
size: 200,
|
||
start: startISO,
|
||
end: endISO,
|
||
});
|
||
}
|
||
|
||
const data = (result as any)?.data || result;
|
||
const rawEntries: any[] = data?.entries || [];
|
||
const mapped: LogEntry[] = rawEntries.map((e: any) => ({
|
||
timestamp: e.timestamp || '',
|
||
level: e.level || '',
|
||
message: e.message || '',
|
||
labels: e.labels || {},
|
||
raw: e.raw || e.message || '',
|
||
source: e.labels?.app || e.labels?.service_name || '',
|
||
}));
|
||
|
||
setEntries(mapped);
|
||
setHistogramData(generateHistogramData(mapped));
|
||
setTotalCount(data?.total || mapped.length);
|
||
setQueryTime(Math.round(performance.now() - t0));
|
||
setStatTable(generateMockStatTable(effEngine as LogEngine));
|
||
setClusters(generateMockClusters());
|
||
setPage(1);
|
||
setHasQueried(true);
|
||
historyStorage.add({ engine: effEngine as LogEngine, datasourceName: currentSource.name, query, timeRange: timeRange.label, resultCount: mapped.length });
|
||
} catch (e: any) {
|
||
toast({ title: '查询失败', description: e?.message || String(e), variant: 'destructive' });
|
||
setEntries([]); setTotalCount(0); setHasQueried(true);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [effEngine, query, currentSource, timeRange, isDemo, toast]);
|
||
|
||
const toggleField = useCallback((n: string) => setSelectedFields(p => p.includes(n) ? p.filter(f => f !== n) : [...p, n]), []);
|
||
const handleSaveMenu = (a: 'query' | 'alert') => { setSaveMenuOpen(false); a === 'query' ? setSaveQueryOpen(true) : setSaveAlertOpen(true); };
|
||
|
||
const handleChartClick = useCallback((st: any) => {
|
||
if (!st?.activeLabel) return;
|
||
const idx = histogramData.findIndex(d => d.timestamp === st.activeLabel);
|
||
if (idx < 0) return;
|
||
const sIdx = Math.max(0, idx - 1), eIdx = Math.min(histogramData.length - 1, idx + 1);
|
||
setTimeRange(p => ({ ...p, start: histogramData[sIdx].timestamp, end: histogramData[eIdx].timestamp, label: '自定义', type: 'absolute' as const }));
|
||
}, [histogramData]);
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
{/* ===== 查询控制行 ===== */}
|
||
<div className="flex items-center gap-2">
|
||
<div className="flex-1 flex items-center gap-2 min-w-0">
|
||
<div className="flex items-center gap-1.5 px-2.5 h-10 rounded flex-shrink-0" style={{ background: 'var(--dg-bg-tertiary)', border: '1px solid var(--dg-border)' }}>
|
||
<span className="w-2 h-2 rounded-full" style={{ background: badge.dotColor }} />
|
||
<span className="text-[11px] font-semibold" style={{ color: badge.dotColor }}>{badge.label}</span>
|
||
</div>
|
||
<SyntaxHighlightInput value={query} onChange={setQuery} engine={effEngine} placeholder={meta.queryPlaceholder} />
|
||
</div>
|
||
|
||
<TimeRangePicker value={timeRange} onChange={setTimeRange} />
|
||
|
||
<select value={dsId} onChange={e => setDsId(e.target.value)} className="h-10 px-2 text-xs rounded flex-shrink-0" style={{ background: 'var(--dg-bg-tertiary)', border: '1px solid var(--dg-border)', color: 'var(--dg-text-primary)' }}>
|
||
{sources.map(s => <option key={s.id} value={s.id}>{s.name}{(s.id < 0 || !s.url) ? ' (模拟)' : ''}</option>)}
|
||
</select>
|
||
|
||
<button onClick={handleRun} disabled={loading} className="h-10 px-4 rounded text-xs font-medium text-white flex items-center gap-1.5 flex-shrink-0 transition-opacity hover:opacity-90" style={{ background: '#22c55e' }}>
|
||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Play className="h-4 w-4" />} 查询
|
||
</button>
|
||
|
||
<div className="relative flex-shrink-0">
|
||
<button onClick={() => setSaveMenuOpen(!saveMenuOpen)} className="h-10 px-3 rounded text-xs flex items-center gap-1" style={{ border: '1px solid var(--dg-border)', color: 'var(--dg-text-secondary)', background: 'var(--dg-bg-tertiary)' }}>
|
||
<Save className="h-3.5 w-3.5" /> 另存为 <ChevronDown className="h-3 w-3" />
|
||
</button>
|
||
{saveMenuOpen && (<>
|
||
<div className="fixed inset-0 z-40" onClick={() => setSaveMenuOpen(false)} />
|
||
<div className="absolute right-0 top-full mt-1 z-50 rounded-lg border shadow-xl overflow-hidden" style={{ background: 'var(--dg-bg-secondary)', borderColor: 'var(--dg-border)' }}>
|
||
<button onClick={() => handleSaveMenu('query')} className="w-full text-left px-4 py-2 text-xs flex items-center gap-2 hover:opacity-80" style={{ color: 'var(--dg-text-secondary)' }}><Save className="h-3.5 w-3.5" /> 另存为查询</button>
|
||
<button onClick={() => handleSaveMenu('alert')} className="w-full text-left px-4 py-2 text-xs flex items-center gap-2 hover:opacity-80" style={{ color: 'var(--dg-text-secondary)', borderTop: '1px solid var(--dg-border)' }}><Bell className="h-3.5 w-3.5" /> 另存为告警</button>
|
||
</div>
|
||
</>)}
|
||
</div>
|
||
|
||
<button onClick={() => setHistoryPanelOpen(true)} className="h-10 w-10 flex items-center justify-center rounded flex-shrink-0" style={{ border: '1px solid var(--dg-border)', color: 'var(--dg-text-muted)', background: 'var(--dg-bg-tertiary)' }} title="查询历史">
|
||
<Clock className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* 快捷查询助手 */}
|
||
<QuickQueryBar engine={effEngine} templates={ALL_TEMPLATES[effEngine]} onSelect={setQuery} />
|
||
|
||
{/* 统计条 + 工具栏 */}
|
||
{entries.length > 0 && !loading && (
|
||
<LogQueryToolbar total={totalCount} queryTime={queryTime} perPage={perPage} onPerPageChange={n => { setPerPage(n); setPage(1); }} page={page} totalPages={totalPages} onPageChange={setPage} sortDirection={sortDirection} onSortToggle={() => setSortDirection(d => d === 'desc' ? 'asc' : 'desc')} onExport={() => { const t = sortedEntries.map(e => `${e.timestamp}\t${e.level || ''}\t${e.message}`).join('\n'); const b = new Blob([t], { type: 'text/plain' }); const u = URL.createObjectURL(b); const a = document.createElement('a'); a.href = u; a.download = `${effEngine}-logs-${Date.now()}.txt`; a.click(); URL.revokeObjectURL(u); }} onCopy={() => navigator.clipboard.writeText(pagedEntries.map(e => `${e.timestamp}\t${e.level || ''}\t${e.message}`).join('\n'))} onBellClick={() => setAlertDialogOpen(true)} />
|
||
)}
|
||
|
||
{/* Log Volume 面积图 */}
|
||
{entries.length > 0 && (
|
||
<div className="h-[120px] rounded-lg border cursor-crosshair" style={{ background: 'var(--dg-bg-secondary)', borderColor: 'var(--dg-border)' }}>
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<AreaChart data={histogramData} margin={{ top: 6, right: 8, bottom: 0, left: 0 }} onClick={handleChartClick}>
|
||
<defs>
|
||
<linearGradient id={`vol-${effEngine}`} x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stopColor={meta.color} stopOpacity={0.35} />
|
||
<stop offset="100%" stopColor={meta.color} stopOpacity={0.02} />
|
||
</linearGradient>
|
||
</defs>
|
||
<CartesianGrid strokeDasharray="3 3" stroke="var(--dg-border)" vertical={false} />
|
||
<XAxis dataKey="timestamp" tick={{ fontSize: 9, fill: 'var(--dg-text-muted)' }} axisLine={{ stroke: 'var(--dg-border)' }} tickLine={false} tickFormatter={(v: string) => v.slice(-5)} interval="preserveStartEnd" />
|
||
<YAxis tick={{ fontSize: 9, fill: 'var(--dg-text-muted)' }} axisLine={false} tickLine={false} width={30} />
|
||
<Tooltip contentStyle={{ background: 'var(--dg-bg-secondary)', border: '1px solid var(--dg-border)', borderRadius: '6px', fontSize: '11px', color: 'var(--dg-text-primary)' }} formatter={(v: number) => [`${v} 条日志`, '数量']} labelFormatter={(l: string) => `时间: ${l}`} />
|
||
<Area type="monotone" dataKey="count" stroke={meta.color} fill={`url(#vol-${effEngine})`} strokeWidth={1.5} dot={false} activeDot={{ r: 4, stroke: meta.color, strokeWidth: 2, fill: 'var(--dg-bg-secondary)' }} />
|
||
</AreaChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
)}
|
||
|
||
{/* 结果标签页 */}
|
||
{entries.length > 0 && (
|
||
<div className="rounded-lg border" style={{ background: 'var(--dg-bg-secondary)', borderColor: 'var(--dg-border)' }}>
|
||
<div className="flex items-center gap-0.5 px-2 pt-1.5" style={{ borderBottom: '1px solid var(--dg-border)' }}>
|
||
{(['logs', 'stats', 'cluster'] as ResultTab[]).map(tab => {
|
||
const labels: Record<ResultTab, string> = { logs: '原始日志', stats: '统计图表', cluster: '日志聚类' };
|
||
return (
|
||
<button key={tab} onClick={() => setResultTab(tab)} className="px-3 py-1.5 text-[11px] font-medium rounded-t-md transition-colors"
|
||
style={{ color: resultTab === tab ? meta.color : 'var(--dg-text-muted)', background: resultTab === tab ? 'var(--dg-bg-secondary)' : 'transparent', borderBottom: resultTab === tab ? `2px solid ${meta.color}` : '2px solid transparent', marginBottom: '-1px' }}>
|
||
{labels[tab]}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<div className="p-2">
|
||
{resultTab === 'logs' && (<>
|
||
<div className="flex gap-3">
|
||
<LogFieldSidebar fields={fields} selectedFields={selectedFields} onFieldClick={n => setQuery(p => `${p} ${n}=""`)} onToggleDisplayField={toggleField} loading={loading} />
|
||
<div className="flex-1 min-w-0">
|
||
<EnhancedLogResults entries={pagedEntries} loading={loading} viewMode={viewMode} wrapLines={wrapLines} truncate={truncate} commonLabels={commonLabels || undefined} />
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-3 py-2 px-1">
|
||
<div className="flex rounded border overflow-hidden" style={{ borderColor: 'var(--dg-border)' }}>
|
||
{(['raw', 'field', 'table'] as const).map(m => (
|
||
<button key={m} onClick={() => setViewMode(m)} className="px-3 py-1 text-[11px] transition-colors" style={{ background: viewMode === m ? meta.color : 'var(--dg-bg-tertiary)', color: viewMode === m ? '#fff' : 'var(--dg-text-muted)' }}>
|
||
{m === 'raw' ? '原始日志' : m === 'field' ? '字段视图' : '表格视图'}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<label className="flex items-center gap-1.5 text-[11px] cursor-pointer" style={{ color: 'var(--dg-text-muted)' }}><input type="checkbox" checked={truncate} onChange={e => setTruncate(e.target.checked)} className="h-3.5 w-3.5 rounded" /> 截断</label>
|
||
<label className="flex items-center gap-1.5 text-[11px] cursor-pointer" style={{ color: 'var(--dg-text-muted)' }}><input type="checkbox" checked={wrapLines} onChange={e => setWrapLines(e.target.checked)} className="h-3.5 w-3.5 rounded" /> 换行</label>
|
||
</div>
|
||
</>)}
|
||
{resultTab === 'stats' && <StatChartPanel statTable={statTable} engine={effEngine as LogEngine} query={query} onSaveAsAlert={() => setSaveAlertOpen(true)} onSaveAsQuery={() => setSaveQueryOpen(true)} />}
|
||
{resultTab === 'cluster' && <LogClusterPanel clusters={clusters} />}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 空状态：从未查询 vs 查询返回 0 结果 */}
|
||
{!loading && entries.length === 0 && !hasQueried && (
|
||
<div className="border rounded-lg flex flex-col items-center justify-center gap-2" style={{ borderColor: 'var(--dg-border)', minHeight: '300px' }}>
|
||
<span className="text-sm" style={{ color: 'var(--dg-text-muted)' }}>输入查询语句并点击「查询」查看结果</span>
|
||
<span className="text-xs font-mono px-3 py-1 rounded" style={{ color: 'var(--dg-text-muted)', background: 'var(--dg-bg-tertiary)' }}>{meta.queryPlaceholder}</span>
|
||
</div>
|
||
)}
|
||
{!loading && entries.length === 0 && hasQueried && (
|
||
<div className="border rounded-lg flex flex-col items-center justify-center gap-3" style={{ borderColor: 'var(--dg-border)', minHeight: '300px' }}>
|
||
<div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ background: 'var(--dg-bg-tertiary)' }}>
|
||
<svg className="h-6 w-6" style={{ color: 'var(--dg-text-muted)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
||
</svg>
|
||
</div>
|
||
<div className="text-center">
|
||
<p className="text-sm font-medium" style={{ color: 'var(--dg-text-primary)' }}>未找到匹配的日志记录</p>
|
||
<p className="text-xs mt-1" style={{ color: 'var(--dg-text-muted)' }}>
|
||
查询已执行（{queryTime}ms），但当前时间范围和筛选条件下无匹配结果
|
||
</p>
|
||
</div>
|
||
<button onClick={handleRun} className="px-4 py-1.5 rounded text-xs font-medium text-white transition-opacity hover:opacity-90" style={{ background: '#22c55e' }}>
|
||
<Play className="h-3.5 w-3.5 inline mr-1" />重新查询
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Loading */}
|
||
{loading && entries.length === 0 && (
|
||
<div className="border rounded-lg flex items-center justify-center" style={{ borderColor: 'var(--dg-border)', minHeight: '200px' }}>
|
||
<Loader2 className="h-6 w-6 animate-spin" style={{ color: 'var(--dg-text-muted)' }} />
|
||
</div>
|
||
)}
|
||
|
||
{/* 对话框 */}
|
||
<SaveQueryDialog open={saveQueryOpen} onClose={() => setSaveQueryOpen(false)} engine={effEngine as LogEngine} query={query} timeRange={timeRange} datasourceName={currentSource?.name} />
|
||
<SaveAlertDialog open={saveAlertOpen} onClose={() => setSaveAlertOpen(false)} engine={effEngine as LogEngine} query={query} datasourceName={currentSource?.name} />
|
||
<QueryHistoryPanel visible={historyPanelOpen} onClose={() => setHistoryPanelOpen(false)} onSelect={(it: QueryHistoryItem) => { setQuery(it.query); setHistoryPanelOpen(false); }} onCreateAlert={() => { setSaveAlertOpen(true); setHistoryPanelOpen(false); }} />
|
||
<LogAlertFromQueryDialog open={alertDialogOpen} onOpenChange={setAlertDialogOpen} ctx={{ engine: effEngine as LogEngine, datasourceId: currentSource?.id, datasourceName: currentSource?.name, query, timeRange: timeRange.label }} onSaved={onRuleCreated} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 内联紧凑版快捷查询助手
|
||
function QuickQueryBar({ engine, templates, onSelect }: { engine: 'loki' | 'elasticsearch'; templates: { label: string; query: string }[]; onSelect: (q: string) => void; }) {
|
||
const [open, setOpen] = useState(false);
|
||
const labels: Record<'loki' | 'elasticsearch', string> = { loki: 'LogQL', elasticsearch: 'Lucene' };
|
||
return (
|
||
<div>
|
||
<button onClick={() => setOpen(!open)} className="flex items-center gap-1 text-[11px] px-2 py-1 rounded transition-colors" style={{ color: 'var(--dg-blue)', background: open ? 'var(--dg-bg-tertiary)' : 'transparent' }}>
|
||
<span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--dg-blue)' }} />
|
||
{labels[engine]} 快捷查询模板
|
||
<ChevronDown className="h-3 w-3" style={{ transform: open ? 'rotate(0deg)' : 'rotate(-90deg)', transition: 'transform 0.2s' }} />
|
||
</button>
|
||
{open && (
|
||
<div className="mt-1.5 p-2.5 rounded-lg border" style={{ background: 'var(--dg-bg-secondary)', borderColor: 'var(--dg-border)' }}>
|
||
<div className="grid grid-cols-3 lg:grid-cols-4 gap-1.5">
|
||
{templates.map((t, i) => (
|
||
<button key={i} onClick={() => { onSelect(t.query); setOpen(false); }} className="text-left px-2 py-1.5 rounded border text-[11px] transition-all hover:opacity-80" style={{ background: 'var(--dg-bg-tertiary)', borderColor: 'var(--dg-border)', color: 'var(--dg-text-secondary)' }} title={t.query}>
|
||
<span className="font-medium block truncate" style={{ color: 'var(--dg-text-primary)' }}>{t.label}</span>
|
||
<span className="block truncate opacity-60 font-mono mt-0.5 text-[10px]">{t.query}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|