Консоль запросов (Query Console) — это неотъемлемый инструмент разработчика, аналитика данных и администратора баз данных. Она позволяет выполнять код (SQL, GraphQL, REST, Cypher и др.), просматривать результаты, анализировать планы выполнения и отлаживать производительность. В этой статье мы разберем ключевые этапы создания собственной консоли запросов: от проектирования архитектуры до нюансов UX и безопасности.

Определение области применения и стека

Прежде чем писать код, нужно четко определить, какие языки запросов и какие источники данных будет поддерживать консоль.

• SQL-консоли: PostgreSQL, MySQL, ClickHouse, SQL Server, SQLite. Требуют управления пулами соединений, транзакциями и пониманием диалектов.
• NoSQL / NewSQL: MongoDB (MQL), Redis (RESP), Cassandra (CQL), Elasticsearch (DSL).
• API-консоли: GraphQL (интроспекция, переменные), REST (коллекции запросов, окружения), gRPC (рефлексия).
• OLAP / HTAP: ClickHouse, Apache Druid, Trino/Presto — требуют особого внимания к асинхронному выполнению и стримингу больших результатов.

Выбор технологий

• Backend: Go (высокая производительность, нативные драйверы БД), Node.js (обширная экосистема драйверов, удобно для GraphQL/REST), Python (FastAPI + SQLAlchemy/asyncpg), Java/Kotlin (Spring Boot, корпоративный стандарт).
• Frontend: React / Vue / Svelte + TypeScript. Для редактора кода практически стандарт де-факто, Monaco Editor (ядро VS Code) или CodeMirror 6.
• Real-time: WebSockets или Server-Sent Events (SSE) для стриминга результатов и логов выполнения.

Архитектура Backend: Безопасность и Масштабируемость

Это самая критичная часть. Никогда не доверяйте входящему коду пользователя.

Песочница и изоляция выполнения

Запуск произвольного кода на основной БД — риск блокировок, утечек данных и DoS.

1. Read-only реплики: Направляйте SELECT-запросы на реплики. Запретите DDL/DML (DROP, TRUNCATE, UPDATE, DELETE) на уровне прав пользователя БД, под которым коннектится бэкенд.
2. Лимиты ресурсов (Resource Governance):
   • Statement Timeout: Жесткий лимит времени выполнения (например, 30–60 сек).
   • Row Limit: Жесткое ограничение возвращаемых строк (LIMIT 1000/10000) на уровне парсера или прокси.
   • Memory/CPU Quotas: Использование cgroups (Linux) или встроенных механизмов БД (Resource Groups в MySQL/PostgreSQL, Resource Pools в ClickHouse).
3. Парсинг и AST-анализ: Прежде чем отправлять запрос в БД, распарсьте его (библиотеки вроде sqlparser-rs, pg_query, antlr4).
   • Блокировка опасных ключевых слов.
   • Автоматическое добавление LIMIT, если его нет.
   • Извлечение метаданных (список таблиц, колонок) для автодополнения.

Управление соединениями (Connection Pooling)

Не создавайте новое соединение на каждый запрос. Используйте пулеры:

• PgBouncer / PgPool-II для PostgreSQL.
• ProxySQL для MySQL.
• Встроенные пулы в драйверах (HikariCP для Java, database/sql для Go, node-postgres пул для Node.js).

Настройте max_connections, idle_timeout, max_lifetime исходя из нагрузки.

Асинхронное выполнение и стриминг

Для долгих запросов (OLAP) синхронный HTTP-ответ приведет к таймаутам прокси (nginx, ALB — обычно 60с).

Паттерн: Polling / WebSocket / SSE
Client -> POST /api/query/execute { sql: "..." }
Server -> 202 Accepted { query_id: "uuid", status: "running" }
Server выполняет запрос, пишет результат во временное хранилище (Redis, S3, Temp Table, файл).
Client -> GET /api/query/status/{query_id} (Polling) или слушает WS/SSE.
Server -> Стримит чанки данных (JSON/Arrow/CSV) по мере готовности.
Client рендерит таблицу инкрементально (Virtual Scroll).

Frontend: Редактор и Рендеринг результатов

Редактор кода (Monaco Editor / CodeMirror 6)

Ключевые фичи, которые отличают проф. консоль от <textarea>:

• Language Server Protocol (LSP): Реализуйте LSP-сервер для вашего диалекта SQL (или используйте готовые: sql-language-server, postgresql-language-server). Это даст: автодополнение (IntelliSense), подсветку ошибок (диагностику), «Go to Definition» для таблиц/колонок, ховеры с типами данных.
• Сниппеты и шаблоны: Шаблоны для SELECT * FROM ..., JOIN, оконных функций, CTE.
• Мультикурсор и форматирование: Интеграция с sql-formatter (Prettier для SQL) по нажатию Shift+Alt+F.
• История и вкладки: Сохранение состояния вкладок в localStorage / IndexedDB / Backend.

Визуализация данных (Data Grid)

• Библиотеки: AG Grid (лучший для Enterprise), TanStack Table (React Table) + кастомный виртуализатор, Grid.js, DataTables (простые кейсы).
• Фичи:
  • Резайз колонок, закрепление (pinned), реордер.
  • Копирование в Excel/CSV (с сохранением типов).
  • Рендеринг типов: JSON (сворачиваемое дерево), Arrays, Images (base64/URL), Links, Boolean (чекбоксы), Geography (WKT/GeoJSON на карте).
  • Фильтрация и сортировка на клиенте (для маленьких датасетов) и сервере (для больших).

План выполнения (Explain Analyze)

Интегрируйте визуализатор планов запросов.

• Парсинг JSON/XML плана (EXPLAIN (ANALYZE, BUFFERS, FORMAT JSON)).
• Деревовидный UI с подсветкой «узких мест» (Seq Scan, высокие cost, потерянные индексы, spill to disk).
• Инструменты: pg-plan-visualizer, explain.dalibo.com (встраиваемый iframe или свой рендерер на D3.js / Cytoscape.js).

Контекст и Метаданные (Schema Browser)

Консоль бесполезна, если пользователь не знает названия таблиц и колонок.

• Дерево схемы (Schema Explorer): БД -> Схемы -> Таблицы/Views -> Колонки (тип, nullable, default, комментарий).
• Drag & Drop: Перетаскивание имени таблицы в редактор -> вставка "schema"."table" или SELECT * FROM "schema"."table".
• Поиск (Cmd+P / Ctrl+P): Нечеткий поиск по именам таблиц, колонок, функций, сохраненных сниппетах.
• Кэширование метаданных: Не дергайте information_schema на каждый кик. Кэшируйте в Redis/In-memory с TTL или инвалидацией по DDL-событиям (LISTEN/NOTIFY в PG);

Продвинутые фичи «Pro-уровня»

Переменные и Окружения (Parameterization)

Поддержка синтаксиса переменных для повторного использования:

-- Синтаксис зависит от БД/инструмента
SELECT * FROM orders 
WHERE user_id = {{user_id}} 
 AND created_at > '{{start_date}}'::timestamp;

UI: Панель справа/снизу для ввода значений переменных перед запуском. История значений.

Версионирование и Сниппеты (Git-like / Gist)

• Сохранение скриптов в БД бэкенда или Git-репозитории.
• Версионирование изменений запроса (Diff view).
• Папки, теги, шаринг ссылкой (Read-only / Read-Write).

Экспорт и Интеграции

• Экспорт: CSV, Excel (xlsx), JSON, Parquet, Arrow (для больших данных), Markdown Table, INSERT statements.
• Копирование как: JSON, CSV, TSV, Python List/Dict, Go Slice, Rust Vec.
• Webhooks / API для запуска запросов по расписанию (Cron) и отправки отчетов в Slack/Telegram/Email.

Ключевая безопасность: Audit Log & RBAC

• RBAC: Роли: Admin (управление источниками), Developer (SELECT на dev/staging), Analyst (SELECT на prod репликах, только сохраненные отчеты).
• Audit Log: Кто, когда, какой запрос, сколько вернул строк, сколько длился, ошибка/успех. Незаменимо для SOC2/PCI DSS/152-ФЗ.
• Data Masking: Динамическое маскирование чувствительных колонок (PII, карты, паспорта) в результатах для ролей без привилегии UNMASK.

Пример минимального MVP (Концептуальный стек: Go + React + Monaco)

Backend (Go — псевдокод)

// main.go
func main {
 // 1. Пул соединений к Read-Only реплике
 pool := pgxpool.MustNew(ctx, "postgres://ro_user:pass@replica/db?pool_max_conns=20")

 // 2. HTTP Handler
 http.HandleFunc("/api/execute", func(w http.ResponseWriter, r *http.Request) {
 var req ExecuteRequest
 json.NewDecoder(r.Body).Decode(&req)

 // 3. Валидация (Парсинг AST)
 if !isSafeQuery(req.SQL) { // Проверка на DDL/DML, наличие LIMIT
 http.Error(w, "Unsafe query", 400)
 return
 }

 // 4. Контекст с таймаутом
 ctx, cancel := context.WithTimeout(r.Context, 30*time.Second)
 defer cancel

 // 5. Выполнение
 rows, err := pool.Query(ctx, req.SQL)
 if err != nil {
 json.NewEncoder(w).Encode(ExecuteResponse{Error: err.Error})
 return
 } defer rows.Close

 // 6. Стриминг результата (JSON Lines или массив)
 w.Header;Set("Content-Type", "application/x-ndjson")
 encoder := json.NewEncoder(w)

 cols := rows.FieldDescriptions // Метаданные колонок
 encoder.Encode(map[string]interface{}{"type": "meta", "columns": cols})

 for rows.Next {
 vals, _ := rows.Values
 encoder.Encode(map[string]interface{}{"type": "row", "data": vals})
 }
 encoder.Encode(map[string]string{"type": "done"})
 })
 http.ListenAndServe(":8080", nil)
}

Frontend (React + Monaco — ключевые моменты)

// Editor.tsx
import Editor from '@monaco-editor/react';
import { useEffect, useRef } from 'react';

export default function SQLEditor({ onExecute }) {
 const editorRef = useRef(null);

 // Регистрация LSP / автодополнения (упрощенно)
 useEffect( => {
 if (!editorRef.current) return;
 const monaco = editorRef.current.getMonaco;
 
 // Регистрация компиляции/валидации при вводе (debounced)
 // monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions...
 }, []);

 return (
 <Editor
 ref={editorRef}
 height="90vh"
 language="sql"
 theme="vs-dark"
 options={{
 minimap: { enabled: true },
 fontSize: 14,
 tabSize: 4,
 formatOnPaste: true,
 suggestOnTriggerCharacters: true,
 // Кастомные сниппеты
 snippets: [{ label: 'sel', body: 'SELECT * FROM ${1:table}', documentation: 'Select all' }]
 }} onMount={(editor, monaco) => {
 // Горячая клавиша запуска
 editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,  => {
 onExecute(editor.getValue);
 });
 }}
 />
 );
}

Чек-лист перед релизом (Production Readiness)

Написание качественной консоли запросов — это баланс между безопасностью (защита данных и доступности БД), производительностью (обработка больших датасетов без фризов UI) и Developer Experience (умный редактор, мгновенная обратная связь).

Начинайте с MVP: Read-only доступ + Monaco Editor + Виртуальная таблица + Жесткие таймауты. Затем итеративно добавляйте LSP, визуализацию планов, переменные, шаринг и аудит. Используйте проверенные библиотеки для парсинга SQL и рендеринга гридов — не пишите их с нуля, если только это не ваш основной продукт.