Skip to content

Commit 345f804

Browse files
phacopsclaude
andcommitted
feat(admin): Add terminal-style SQL Shell for ClickHouse tracing
Add a new SQL Shell page to snuba-admin that provides a terminal-style interface for executing ClickHouse queries with tracing. Features include: - Dark terminal aesthetic with monospace font - Shell commands: USE, SHOW STORAGES, PROFILE ON/OFF, TRACE RAW/FORMATTED - SQL query execution with full tracing support - Command history with up/down arrow navigation (persisted to localStorage) - Keyboard shortcuts: Enter to execute, Ctrl+L to clear - Query results displayed in table format with trace summaries - Prominent link in nav bar for easy access Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent 20c63fe commit 345f804

File tree

7 files changed

+1019
-1
lines changed

7 files changed

+1019
-1
lines changed

snuba/admin/static/data.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import AuditLog from "SnubaAdmin/runtime_config/auditlog";
44
import ClickhouseMigrations from "SnubaAdmin/clickhouse_migrations";
55
import ClickhouseQueries from "SnubaAdmin/clickhouse_queries";
66
import TracingQueries from "SnubaAdmin/tracing";
7+
import SQLShellPage from "SnubaAdmin/sql_shell";
78
import SnQLToSQL from "SnubaAdmin/snql_to_sql";
89
import Kafka from "SnubaAdmin/kafka";
910
import QuerylogQueries from "SnubaAdmin/querylog";
@@ -63,6 +64,11 @@ const NAV_ITEMS = [
6364
display: "🔎 ClickHouse Tracing",
6465
component: TracingQueries,
6566
},
67+
{
68+
id: "sql-shell",
69+
display: "💻 SQL Shell",
70+
component: SQLShellPage,
71+
},
6672
{
6773
id: "rpc-endpoints",
6874
display: "🔌 RPC Endpoints",

snuba/admin/static/nav.tsx

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,17 @@ function Nav(props: NavProps) {
2828
return (
2929
<nav style={navStyle}>
3030
<ul style={ulStyle}>
31-
{NAV_ITEMS.map((item) =>
31+
<li key="sql-shell-featured">
32+
<a
33+
style={active === "sql-shell" ? { ...sqlShellLinkStyle, ...sqlShellActiveStyle } : sqlShellLinkStyle}
34+
className={active === "sql-shell" ? "nav-link-active" : "nav-link"}
35+
onClick={() => navigate("sql-shell")}
36+
>
37+
💻 SQL Shell
38+
</a>
39+
</li>
40+
<li style={dividerStyle} />
41+
{NAV_ITEMS.filter((item) => item.id !== "sql-shell").map((item) =>
3242
allowedTools?.includes(item.id) || allowedTools?.includes("all") ? (
3343
item.id === active ? (
3444
<li key={item.id} >
@@ -74,4 +84,24 @@ const linkStyle = {
7484
padding: 20,
7585
};
7686

87+
const sqlShellLinkStyle = {
88+
display: "block",
89+
textDecoration: "none",
90+
cursor: "pointer",
91+
padding: "16px 20px",
92+
backgroundColor: "#1a1a2e",
93+
color: "#00ff00",
94+
fontWeight: "bold" as const,
95+
borderLeft: "3px solid #00ff00",
96+
};
97+
98+
const sqlShellActiveStyle = {
99+
backgroundColor: "#0f3d0f",
100+
};
101+
102+
const dividerStyle = {
103+
borderBottom: `1px solid ${COLORS.NAV_BORDER}`,
104+
margin: "8px 0",
105+
};
106+
77107
export default Nav;
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from "react";
2+
import { Title } from "@mantine/core";
3+
import Client from "SnubaAdmin/api_client";
4+
import SQLShell from "SnubaAdmin/sql_shell/shell";
5+
6+
interface SQLShellPageProps {
7+
api: Client;
8+
}
9+
10+
function SQLShellPage({ api }: SQLShellPageProps) {
11+
return (
12+
<div>
13+
<Title order={2} style={{ marginBottom: "16px" }}>
14+
SQL Shell - ClickHouse Tracing
15+
</Title>
16+
<SQLShell api={api} />
17+
</div>
18+
);
19+
}
20+
21+
export default SQLShellPage;

0 commit comments

Comments
 (0)