65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
// QuickQueryHelper.tsx — 快捷查询语法助手 // Logan.Li
|
|
import { useState } from 'react';
|
|
import { ChevronDown, ChevronUp, Zap } from 'lucide-react';
|
|
import type { LogEngine } from './types-v3';
|
|
import { QUICK_TEMPLATES } from './types-v3';
|
|
|
|
interface Props {
|
|
engine: LogEngine;
|
|
onSelect: (query: string) => void;
|
|
}
|
|
|
|
const ENGINE_NAMES: Record<LogEngine, string> = {
|
|
loki: 'LogQL',
|
|
elasticsearch: 'Lucene',
|
|
sls: 'SQL/SPL',
|
|
};
|
|
|
|
export function QuickQueryHelper({ engine, onSelect }: Props) {
|
|
const [open, setOpen] = useState(false);
|
|
const templates = QUICK_TEMPLATES[engine];
|
|
|
|
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' }}
|
|
>
|
|
<Zap className="h-3 w-3" />
|
|
快捷查询
|
|
{open ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
|
|
</button>
|
|
|
|
{open && (
|
|
<div
|
|
className="mt-2 p-3 rounded-lg border animate-fade-in"
|
|
style={{ background: 'var(--dg-bg-secondary)', borderColor: 'var(--dg-border)' }}
|
|
>
|
|
<p className="text-[10px] mb-2" style={{ color: 'var(--dg-text-muted)' }}>
|
|
{ENGINE_NAMES[engine]} 常用查询模板，点击快速填充
|
|
</p>
|
|
<div className="grid grid-cols-2 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:border-blue-400"
|
|
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">{t.query}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|