mirror of
https://github.com/fabro-sh/fabro.git
synced 2026-09-06 08:18:58 +00:00
Add Insights page with SQL workbench UI
SQL query editor with line numbers, saved queries sidebar, history, SQL AI dialog, chart/table results toggle, and query stats bar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Helmkamp
parent
4c75f2b67f
commit
810e8b4227
1 changed files with 761 additions and 2 deletions
|
|
@ -1,9 +1,768 @@
|
|||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
DialogTitle,
|
||||
} from "@headlessui/react";
|
||||
import {
|
||||
PlayIcon,
|
||||
BookmarkIcon,
|
||||
SparklesIcon,
|
||||
TableCellsIcon,
|
||||
ChartBarIcon,
|
||||
XMarkIcon,
|
||||
ArrowPathIcon,
|
||||
PencilIcon,
|
||||
PlusIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import type { Route } from "./+types/insights";
|
||||
|
||||
export function meta({}: Route.MetaArgs) {
|
||||
return [{ title: "Insights — Arc" }];
|
||||
}
|
||||
|
||||
export default function Insights() {
|
||||
return null;
|
||||
export const handle = {
|
||||
wide: true,
|
||||
};
|
||||
|
||||
// ── Types ──
|
||||
|
||||
interface QueryResult {
|
||||
columns: string[];
|
||||
rows: Array<Record<string, string | number>>;
|
||||
elapsed: number;
|
||||
rowsRead: number;
|
||||
bytesRead: number;
|
||||
rowsReturned: number;
|
||||
}
|
||||
|
||||
interface SavedQuery {
|
||||
id: string;
|
||||
name: string;
|
||||
sql: string;
|
||||
}
|
||||
|
||||
interface HistoryEntry {
|
||||
id: string;
|
||||
sql: string;
|
||||
timestamp: string;
|
||||
elapsed: number;
|
||||
rowsReturned: number;
|
||||
}
|
||||
|
||||
type ResultView = "chart" | "table";
|
||||
|
||||
// ── Mock data ──
|
||||
|
||||
const savedQueries: SavedQuery[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Run duration by workflow",
|
||||
sql: "SELECT workflow_name, AVG(duration_seconds) as avg_duration,\n COUNT(*) as run_count\nFROM runs\nGROUP BY workflow_name\nORDER BY avg_duration DESC\nLIMIT 20",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Daily failure rate",
|
||||
sql: "SELECT date_trunc('day', created_at) as day,\n COUNT(*) FILTER (WHERE status = 'failed') as failures,\n COUNT(*) as total,\n ROUND(100.0 * COUNT(*) FILTER (WHERE status = 'failed') / COUNT(*), 1) as failure_rate\nFROM runs\nGROUP BY 1\nORDER BY 1 DESC\nLIMIT 30",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Top repos by activity",
|
||||
sql: "SELECT repo, COUNT(*) as runs, SUM(additions) as total_additions,\n SUM(deletions) as total_deletions\nFROM runs\nGROUP BY repo\nORDER BY runs DESC",
|
||||
},
|
||||
];
|
||||
|
||||
const historyEntries: HistoryEntry[] = [
|
||||
{ id: "h1", sql: "SELECT workflow_name, COUNT(*) FROM runs GROUP BY 1", timestamp: "2 min ago", elapsed: 0.342, rowsReturned: 6 },
|
||||
{ id: "h2", sql: "SELECT * FROM runs WHERE status = 'failed' LIMIT 100", timestamp: "8 min ago", elapsed: 0.127, rowsReturned: 23 },
|
||||
{ id: "h3", sql: "SELECT date_trunc('day', created_at) as d, COUNT(*) FROM runs GROUP BY 1 ORDER BY 1", timestamp: "15 min ago", elapsed: 0.531, rowsReturned: 30 },
|
||||
{ id: "h4", sql: "SELECT repo, AVG(duration_seconds) FROM runs GROUP BY repo", timestamp: "1 hr ago", elapsed: 0.089, rowsReturned: 12 },
|
||||
{ id: "h5", sql: "DESCRIBE runs", timestamp: "1 hr ago", elapsed: 0.003, rowsReturned: 18 },
|
||||
];
|
||||
|
||||
function generateMockResult(sql: string): QueryResult {
|
||||
const lowerSql = sql.toLowerCase();
|
||||
|
||||
if (lowerSql.includes("workflow_name") && lowerSql.includes("avg")) {
|
||||
return {
|
||||
columns: ["workflow_name", "avg_duration", "run_count"],
|
||||
rows: [
|
||||
{ workflow_name: "Expand Product", avg_duration: 342.5, run_count: 48 },
|
||||
{ workflow_name: "Implement Feature", avg_duration: 287.3, run_count: 156 },
|
||||
{ workflow_name: "Security Scan", avg_duration: 198.1, run_count: 312 },
|
||||
{ workflow_name: "Fix Build", avg_duration: 145.7, run_count: 482 },
|
||||
{ workflow_name: "Sync Drift", avg_duration: 89.2, run_count: 94 },
|
||||
{ workflow_name: "Dependency Audit", avg_duration: 67.4, run_count: 201 },
|
||||
],
|
||||
elapsed: 0.531,
|
||||
rowsRead: 5182366,
|
||||
bytesRead: 357780000,
|
||||
rowsReturned: 6,
|
||||
};
|
||||
}
|
||||
|
||||
if (lowerSql.includes("failure_rate") || lowerSql.includes("failed")) {
|
||||
return {
|
||||
columns: ["day", "failures", "total", "failure_rate"],
|
||||
rows: Array.from({ length: 14 }, (_, i) => {
|
||||
const d = new Date();
|
||||
d.setDate(d.getDate() - i);
|
||||
const total = 80 + Math.floor(Math.random() * 60);
|
||||
const failures = Math.floor(Math.random() * 15);
|
||||
return {
|
||||
day: d.toISOString().slice(0, 10),
|
||||
failures,
|
||||
total,
|
||||
failure_rate: Math.round((1000 * failures) / total) / 10,
|
||||
};
|
||||
}),
|
||||
elapsed: 0.287,
|
||||
rowsRead: 2841092,
|
||||
bytesRead: 198400000,
|
||||
rowsReturned: 14,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
columns: ["repo", "runs", "total_additions", "total_deletions"],
|
||||
rows: [
|
||||
{ repo: "arc-engine", runs: 482, total_additions: 28450, total_deletions: 12300 },
|
||||
{ repo: "arc-web", runs: 356, total_additions: 19200, total_deletions: 8900 },
|
||||
{ repo: "arc-cli", runs: 198, total_additions: 8700, total_deletions: 4200 },
|
||||
{ repo: "arc-docs", runs: 145, total_additions: 12100, total_deletions: 3400 },
|
||||
{ repo: "arc-sdk", runs: 89, total_additions: 5600, total_deletions: 2100 },
|
||||
{ repo: "arc-infra", runs: 67, total_additions: 3200, total_deletions: 1800 },
|
||||
{ repo: "arc-actions", runs: 42, total_additions: 2100, total_deletions: 980 },
|
||||
{ repo: "arc-proto", runs: 28, total_additions: 1400, total_deletions: 650 },
|
||||
],
|
||||
elapsed: 0.148,
|
||||
rowsRead: 1204588,
|
||||
bytesRead: 89200000,
|
||||
rowsReturned: 8,
|
||||
};
|
||||
}
|
||||
|
||||
// ── Formatting helpers ──
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes >= 1e9) return `${(bytes / 1e9).toFixed(2)} GB`;
|
||||
if (bytes >= 1e6) return `${(bytes / 1e6).toFixed(2)} MB`;
|
||||
if (bytes >= 1e3) return `${(bytes / 1e3).toFixed(2)} KB`;
|
||||
return `${bytes} B`;
|
||||
}
|
||||
|
||||
function formatNumber(n: number): string {
|
||||
return n.toLocaleString();
|
||||
}
|
||||
|
||||
// ── Chart component ──
|
||||
|
||||
const BAR_COLORS = [
|
||||
"rgba(90, 200, 168, 0.85)",
|
||||
"rgba(103, 178, 215, 0.85)",
|
||||
"rgba(181, 221, 239, 0.65)",
|
||||
"rgba(240, 164, 91, 0.75)",
|
||||
];
|
||||
|
||||
function BarChart({ result }: { result: QueryResult }) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [containerWidth, setContainerWidth] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const el = containerRef.current;
|
||||
if (!el) return;
|
||||
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
const entry = entries[0];
|
||||
if (entry) {
|
||||
setContainerWidth(entry.contentRect.width);
|
||||
}
|
||||
});
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const labelCol = result.columns[0];
|
||||
const valueCols = result.columns.slice(1).filter((col) => {
|
||||
const firstVal = result.rows[0]?.[col];
|
||||
return typeof firstVal === "number";
|
||||
});
|
||||
|
||||
if (valueCols.length === 0 || result.rows.length === 0) {
|
||||
return (
|
||||
<div className="flex h-64 items-center justify-center text-sm text-navy-600">
|
||||
No numeric columns to chart
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const valueCol = valueCols[0];
|
||||
const maxVal = Math.max(...result.rows.map((r) => {
|
||||
const v = r[valueCol];
|
||||
return typeof v === "number" ? v : 0;
|
||||
}));
|
||||
|
||||
const chartHeight = 260;
|
||||
const yAxisWidth = 52;
|
||||
const padding = { top: 12, bottom: 48, right: 16 };
|
||||
const plotHeight = chartHeight - padding.top - padding.bottom;
|
||||
const plotWidth = containerWidth - yAxisWidth - padding.right;
|
||||
const barCount = result.rows.length;
|
||||
const gap = Math.max(8, Math.min(16, plotWidth / barCount * 0.3));
|
||||
const barWidth = Math.max(12, (plotWidth - gap * (barCount + 1)) / barCount);
|
||||
|
||||
const tickCount = 5;
|
||||
const yTicks = Array.from({ length: tickCount }, (_, i) =>
|
||||
Math.round((maxVal * (tickCount - 1 - i)) / (tickCount - 1)),
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={containerRef}>
|
||||
{containerWidth > 0 && (
|
||||
<svg
|
||||
width={containerWidth}
|
||||
height={chartHeight}
|
||||
className="select-none"
|
||||
>
|
||||
{/* Y-axis gridlines + labels */}
|
||||
{yTicks.map((tick, i) => {
|
||||
const y = padding.top + (plotHeight * i) / (tickCount - 1);
|
||||
return (
|
||||
<g key={tick}>
|
||||
<line
|
||||
x1={yAxisWidth}
|
||||
y1={y}
|
||||
x2={containerWidth - padding.right}
|
||||
y2={y}
|
||||
stroke="rgba(255,255,255,0.04)"
|
||||
strokeDasharray="4,4"
|
||||
/>
|
||||
<text
|
||||
x={yAxisWidth - 8}
|
||||
y={y + 4}
|
||||
textAnchor="end"
|
||||
fill="rgba(75, 87, 104, 1)"
|
||||
fontSize="11"
|
||||
fontFamily="JetBrains Mono, monospace"
|
||||
>
|
||||
{tick >= 1000 ? `${(tick / 1000).toFixed(tick >= 10000 ? 0 : 1)}k` : tick}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Bars */}
|
||||
{result.rows.map((row, i) => {
|
||||
const val = row[valueCol];
|
||||
const numVal = typeof val === "number" ? val : 0;
|
||||
const barHeight = maxVal > 0 ? (numVal / maxVal) * plotHeight : 0;
|
||||
const x = yAxisWidth + gap + i * (barWidth + gap);
|
||||
const y = padding.top + plotHeight - barHeight;
|
||||
const label = String(row[labelCol]);
|
||||
const colorIndex = i % BAR_COLORS.length;
|
||||
const maxLabelLen = Math.floor(barWidth / 6);
|
||||
|
||||
return (
|
||||
<g key={label + i}>
|
||||
<rect
|
||||
x={x}
|
||||
y={y}
|
||||
width={barWidth}
|
||||
height={barHeight}
|
||||
rx={3}
|
||||
fill={BAR_COLORS[colorIndex]}
|
||||
className="transition-opacity hover:opacity-100"
|
||||
opacity={0.85}
|
||||
/>
|
||||
<title>
|
||||
{label}: {formatNumber(numVal)}
|
||||
</title>
|
||||
<text
|
||||
x={x + barWidth / 2}
|
||||
y={chartHeight - padding.bottom + 16}
|
||||
textAnchor="middle"
|
||||
fill="rgba(75, 87, 104, 1)"
|
||||
fontSize="10"
|
||||
fontFamily="JetBrains Mono, monospace"
|
||||
>
|
||||
{label.length > maxLabelLen
|
||||
? label.slice(0, Math.max(3, maxLabelLen - 1)) + "\u2026"
|
||||
: label}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
)}
|
||||
<div className="mt-1 flex items-center gap-4 px-2">
|
||||
<span className="font-mono text-[10px] uppercase tracking-wider text-navy-600">
|
||||
{valueCol.replace(/_/g, " ")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Table component ──
|
||||
|
||||
function ResultTable({ result }: { result: QueryResult }) {
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left">
|
||||
<thead>
|
||||
<tr className="border-b border-white/[0.06]">
|
||||
{result.columns.map((col) => (
|
||||
<th
|
||||
key={col}
|
||||
className="whitespace-nowrap px-3 py-2.5 font-mono text-[11px] font-semibold uppercase tracking-wider text-navy-600"
|
||||
>
|
||||
{col}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{result.rows.map((row, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
className="border-b border-white/[0.03] transition-colors hover:bg-white/[0.02]"
|
||||
>
|
||||
{result.columns.map((col) => {
|
||||
const val = row[col];
|
||||
const isNum = typeof val === "number";
|
||||
return (
|
||||
<td
|
||||
key={col}
|
||||
className={`whitespace-nowrap px-3 py-2 font-mono text-xs ${
|
||||
isNum ? "tabular-nums text-ice-100" : "text-ice-300"
|
||||
}`}
|
||||
>
|
||||
{isNum ? formatNumber(val) : String(val)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── SQL Editor with line numbers ──
|
||||
|
||||
function SqlEditor({
|
||||
value,
|
||||
onChange,
|
||||
onRun,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
onRun: () => void;
|
||||
}) {
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const lineNumbersRef = useRef<HTMLDivElement>(null);
|
||||
const lineCount = value.split("\n").length;
|
||||
|
||||
const syncScroll = useCallback(() => {
|
||||
if (textareaRef.current && lineNumbersRef.current) {
|
||||
lineNumbersRef.current.scrollTop = textareaRef.current.scrollTop;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
// Ctrl/Cmd + Enter to run
|
||||
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault();
|
||||
onRun();
|
||||
return;
|
||||
}
|
||||
// Tab inserts spaces
|
||||
if (e.key === "Tab") {
|
||||
e.preventDefault();
|
||||
const textarea = e.currentTarget;
|
||||
const start = textarea.selectionStart;
|
||||
const end = textarea.selectionEnd;
|
||||
const newValue = value.slice(0, start) + " " + value.slice(end);
|
||||
onChange(newValue);
|
||||
requestAnimationFrame(() => {
|
||||
textarea.selectionStart = start + 2;
|
||||
textarea.selectionEnd = start + 2;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative flex overflow-hidden rounded-md border border-white/[0.06] bg-navy-950/80 font-mono text-sm">
|
||||
{/* Line numbers */}
|
||||
<div
|
||||
ref={lineNumbersRef}
|
||||
className="pointer-events-none flex shrink-0 flex-col overflow-hidden border-r border-white/[0.04] bg-navy-950/60 px-3 py-3 text-right leading-[1.625rem] text-navy-600 select-none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{Array.from({ length: lineCount }, (_, i) => (
|
||||
<span key={i} className="text-[11px]">
|
||||
{i + 1}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{/* Textarea */}
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
onScroll={syncScroll}
|
||||
onKeyDown={handleKeyDown}
|
||||
spellCheck={false}
|
||||
autoCapitalize="off"
|
||||
autoCorrect="off"
|
||||
className="min-h-[7lh] w-full resize-y bg-transparent px-4 py-3 leading-[1.625rem] text-ice-100 placeholder-navy-600 outline-none"
|
||||
placeholder="SELECT * FROM runs LIMIT 10"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Main page ──
|
||||
|
||||
export default function Insights() {
|
||||
const defaultSql =
|
||||
"SELECT workflow_name, AVG(duration_seconds) as avg_duration,\n COUNT(*) as run_count\nFROM runs\nGROUP BY workflow_name\nORDER BY avg_duration DESC\nLIMIT 20";
|
||||
|
||||
const [sql, setSql] = useState(defaultSql);
|
||||
const [result, setResult] = useState<QueryResult | null>(null);
|
||||
const [resultView, setResultView] = useState<ResultView>("chart");
|
||||
const [isRunning, setIsRunning] = useState(false);
|
||||
const [queryName, setQueryName] = useState("Run duration by workflow");
|
||||
const [isEditingName, setIsEditingName] = useState(false);
|
||||
const nameInputRef = useRef<HTMLInputElement>(null);
|
||||
const [showAiDialog, setShowAiDialog] = useState(false);
|
||||
const [aiPrompt, setAiPrompt] = useState("");
|
||||
|
||||
const runQuery = useCallback(() => {
|
||||
setIsRunning(true);
|
||||
// Simulate query execution
|
||||
const delay = 200 + Math.random() * 400;
|
||||
setTimeout(() => {
|
||||
setResult(generateMockResult(sql));
|
||||
setIsRunning(false);
|
||||
}, delay);
|
||||
}, [sql]);
|
||||
|
||||
// Run default query on mount
|
||||
const hasRun = useRef(false);
|
||||
useEffect(() => {
|
||||
if (!hasRun.current) {
|
||||
hasRun.current = true;
|
||||
runQuery();
|
||||
}
|
||||
}, [runQuery]);
|
||||
|
||||
const loadSavedQuery = (query: SavedQuery) => {
|
||||
setSql(query.sql);
|
||||
};
|
||||
|
||||
const loadHistoryEntry = (entry: HistoryEntry) => {
|
||||
setSql(entry.sql);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex gap-6">
|
||||
{/* ── Sidebar ── */}
|
||||
<div className="w-56 shrink-0">
|
||||
<div className="sticky top-6 space-y-4">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex w-full items-center justify-center gap-1.5 rounded-md border border-white/[0.06] bg-navy-800/80 px-3 py-2 text-sm font-medium text-ice-300 transition-colors hover:border-white/[0.12] hover:bg-navy-800 hover:text-white"
|
||||
>
|
||||
<PlusIcon className="size-3.5" />
|
||||
New Query
|
||||
</button>
|
||||
|
||||
<div>
|
||||
<h3 className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-navy-600">
|
||||
Saved Queries
|
||||
</h3>
|
||||
<div className="space-y-0.5">
|
||||
{savedQueries.map((q) => (
|
||||
<button
|
||||
key={q.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
loadSavedQuery(q);
|
||||
setQueryName(q.name);
|
||||
}}
|
||||
className={`flex w-full flex-col gap-0.5 rounded-md px-2.5 py-2 text-left transition-colors hover:bg-white/[0.05] ${
|
||||
queryName === q.name
|
||||
? "bg-white/[0.05] text-white"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<span className="text-sm font-medium text-ice-100">
|
||||
{q.name}
|
||||
</span>
|
||||
<span className="truncate font-mono text-[10px] text-navy-600">
|
||||
{q.sql.split("\n")[0]}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-navy-600">
|
||||
History
|
||||
</h3>
|
||||
<div className="space-y-0.5">
|
||||
{historyEntries.map((entry) => (
|
||||
<button
|
||||
key={entry.id}
|
||||
type="button"
|
||||
onClick={() => loadHistoryEntry(entry)}
|
||||
className="flex w-full flex-col gap-0.5 rounded-md px-2.5 py-2 text-left transition-colors hover:bg-white/[0.05]"
|
||||
>
|
||||
<span className="truncate font-mono text-[10px] text-ice-300">
|
||||
{entry.sql}
|
||||
</span>
|
||||
<span className="font-mono text-[10px] text-navy-600">
|
||||
{entry.timestamp} · {entry.rowsReturned} rows
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Main content ── */}
|
||||
<div className="min-w-0 flex-1 space-y-4">
|
||||
{/* ── Toolbar + Editor ── */}
|
||||
<div>
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center gap-2 pb-3">
|
||||
{/* Query name */}
|
||||
{isEditingName ? (
|
||||
<input
|
||||
ref={nameInputRef}
|
||||
type="text"
|
||||
value={queryName}
|
||||
onChange={(e) => setQueryName(e.target.value)}
|
||||
onBlur={() => setIsEditingName(false)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === "Escape") {
|
||||
setIsEditingName(false);
|
||||
}
|
||||
}}
|
||||
placeholder="Untitled query"
|
||||
className="min-w-0 max-w-xs rounded border border-teal-500/40 bg-navy-950/60 px-2 py-0.5 text-sm font-medium text-ice-100 placeholder-navy-600 outline-none"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-sm font-medium text-ice-100">
|
||||
{queryName || "Untitled query"}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIsEditingName(true);
|
||||
requestAnimationFrame(() => nameInputRef.current?.select());
|
||||
}}
|
||||
className="rounded p-0.5 text-navy-600 transition-colors hover:bg-white/[0.05] hover:text-ice-300"
|
||||
>
|
||||
<PencilIcon className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Push buttons to the right */}
|
||||
<div className="ml-auto" />
|
||||
|
||||
{/* SQL AI */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAiDialog(true)}
|
||||
className="inline-flex items-center gap-1.5 rounded-md border border-white/[0.06] px-3 py-1.5 text-sm font-medium text-ice-300 transition-colors hover:border-teal-500/30 hover:bg-white/[0.03] hover:text-white"
|
||||
>
|
||||
<SparklesIcon className="size-3.5 text-teal-500" />
|
||||
SQL AI
|
||||
</button>
|
||||
|
||||
{/* Save */}
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1.5 rounded-md border border-white/[0.06] px-3 py-1.5 text-sm font-medium text-ice-300 transition-colors hover:border-white/[0.12] hover:bg-white/[0.03] hover:text-white"
|
||||
>
|
||||
<BookmarkIcon className="size-3.5" />
|
||||
Save
|
||||
</button>
|
||||
|
||||
{/* Run */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={runQuery}
|
||||
disabled={isRunning || sql.trim().length === 0}
|
||||
className="inline-flex items-center gap-1.5 rounded-md border border-mint/20 bg-mint/5 px-3.5 py-1.5 text-sm font-medium text-mint transition-all hover:border-mint/50 hover:bg-mint/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-mint/20 disabled:hover:bg-mint/5 disabled:hover:text-mint"
|
||||
>
|
||||
{isRunning ? (
|
||||
<ArrowPathIcon className="size-3.5 animate-spin" />
|
||||
) : (
|
||||
<PlayIcon className="size-3.5" />
|
||||
)}
|
||||
{isRunning ? "Running\u2026" : "Run"}
|
||||
<kbd className="ml-1 hidden rounded border border-white/[0.08] bg-white/[0.04] px-1 py-0.5 font-sans text-[10px] leading-none text-navy-600 sm:inline">
|
||||
{"⌘↵"}
|
||||
</kbd>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<SqlEditor value={sql} onChange={setSql} onRun={runQuery} />
|
||||
</div>
|
||||
|
||||
{/* ── Results bar + content ── */}
|
||||
{result && (
|
||||
<>
|
||||
{/* Results bar */}
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Query stats */}
|
||||
<div className="flex items-center gap-5 font-mono text-[11px] tabular-nums text-navy-600">
|
||||
<span>
|
||||
Elapsed:{" "}
|
||||
<span className="text-ice-300">
|
||||
{result.elapsed.toFixed(3)}s
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
Read:{" "}
|
||||
<span className="text-ice-300">
|
||||
{formatNumber(result.rowsRead)} rows
|
||||
</span>{" "}
|
||||
({formatBytes(result.bytesRead)})
|
||||
</span>
|
||||
<span>
|
||||
Returned:{" "}
|
||||
<span className="text-ice-300">
|
||||
{formatNumber(result.rowsReturned)} rows
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* View toggle */}
|
||||
<div className="flex items-center gap-1 rounded-md border border-white/[0.06] bg-navy-800/80 p-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setResultView("chart")}
|
||||
className={`inline-flex items-center gap-1.5 rounded px-2.5 py-1 text-xs font-medium transition-colors ${
|
||||
resultView === "chart"
|
||||
? "bg-white/[0.06] text-teal-500"
|
||||
: "text-navy-600 hover:text-ice-300"
|
||||
}`}
|
||||
>
|
||||
<ChartBarIcon className="size-3.5" />
|
||||
Chart
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setResultView("table")}
|
||||
className={`inline-flex items-center gap-1.5 rounded px-2.5 py-1 text-xs font-medium transition-colors ${
|
||||
resultView === "table"
|
||||
? "bg-white/[0.06] text-teal-500"
|
||||
: "text-navy-600 hover:text-ice-300"
|
||||
}`}
|
||||
>
|
||||
<TableCellsIcon className="size-3.5" />
|
||||
Table
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results content */}
|
||||
<div className="rounded-md border border-white/[0.06] bg-navy-800/60 p-4">
|
||||
{resultView === "chart" ? (
|
||||
<BarChart result={result} />
|
||||
) : (
|
||||
<ResultTable result={result} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ── Running overlay ── */}
|
||||
{isRunning && !result && (
|
||||
<div className="flex h-48 items-center justify-center rounded-md border border-white/[0.06] bg-navy-800/60">
|
||||
<div className="flex items-center gap-3 text-sm text-navy-600">
|
||||
<ArrowPathIcon className="size-5 animate-spin text-teal-500" />
|
||||
Executing query\u2026
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── AI Dialog ── */}
|
||||
<Dialog
|
||||
open={showAiDialog}
|
||||
onClose={() => setShowAiDialog(false)}
|
||||
className="relative z-50"
|
||||
>
|
||||
<div
|
||||
className="fixed inset-0 bg-black/60 backdrop-blur-sm"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="fixed inset-0 flex items-start justify-center pt-[15vh]">
|
||||
<DialogPanel className="w-full max-w-lg rounded-lg border border-white/[0.08] bg-navy-800 shadow-2xl shadow-black/40">
|
||||
<div className="flex items-center justify-between border-b border-white/[0.06] px-5 py-3.5">
|
||||
<DialogTitle className="flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<SparklesIcon className="size-4 text-teal-500" />
|
||||
SQL AI
|
||||
</DialogTitle>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAiDialog(false)}
|
||||
className="text-navy-600 transition-colors hover:text-ice-300"
|
||||
>
|
||||
<XMarkIcon className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<label className="mb-2 block text-xs font-medium text-ice-300">
|
||||
Describe what you want to query
|
||||
</label>
|
||||
<textarea
|
||||
value={aiPrompt}
|
||||
onChange={(e) => setAiPrompt(e.target.value)}
|
||||
placeholder="e.g. Show me the average build time per workflow over the last 30 days"
|
||||
className="w-full rounded-md border border-white/[0.06] bg-navy-950/60 px-3 py-2.5 text-sm text-ice-100 placeholder-navy-600 outline-none transition-colors focus:border-teal-500/40"
|
||||
rows={3}
|
||||
/>
|
||||
<div className="mt-4 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAiDialog(false)}
|
||||
className="rounded-md border border-white/[0.06] px-3 py-1.5 text-sm text-ice-300 transition-colors hover:bg-white/[0.03]"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSql(
|
||||
"-- AI-generated query based on: " +
|
||||
aiPrompt +
|
||||
"\nSELECT workflow_name,\n AVG(duration_seconds) as avg_duration,\n COUNT(*) as run_count\nFROM runs\nWHERE created_at >= CURRENT_DATE - INTERVAL '30 days'\nGROUP BY workflow_name\nORDER BY avg_duration DESC",
|
||||
);
|
||||
setAiPrompt("");
|
||||
setShowAiDialog(false);
|
||||
}}
|
||||
disabled={aiPrompt.trim().length === 0}
|
||||
className="inline-flex items-center gap-1.5 rounded-md border border-teal-500/30 bg-teal-500/10 px-3 py-1.5 text-sm font-medium text-teal-300 transition-all hover:border-teal-500/50 hover:bg-teal-500/20 hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
<SparklesIcon className="size-3.5" />
|
||||
Generate SQL
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>{/* end main content */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue