Query builder template mode

[arturminchukov]

Related issue: #578

Describe Your Changes

Introduces a segment-based template builder as an alternative to the code editor.
Users construct queries by adding typed pipes (filter, stream, aggregate, modify, sort, limit)
through an interactive UI with field name/value dropdowns, keyboard navigation,
and real-time query serialization to LogsQL.

Key components:

• Segment model: Pipe[] → serialization → LogsQL string
• Template registry with configurable pipe types and optional extensions (by, if, as)
• Unified popup manager ensuring mutual exclusivity of dropdowns
• Insertable separators for adding pipes at any position
• Field name quoting for names with special characters
• Each stream pipe serialized as individual {…} block

Demo link

Checklist

The following checks are mandatory:

• My change adheres to VictoriaMetrics contributing guidelines.
• My change adheres to VictoriaMetrics development goals.

---

Summary by cubic

Adds a new template-based query builder that lets users build LogsQL with guided pipes and placeholders, as an alternative to the code editor. This improves discoverability, adds keyboard-driven editing, and keeps the query in sync with the editor state. Addresses #578.

• New Features

  • Segment model for pipes with real-time serialization to LogsQL; stream pipes render as {...} blocks and field names auto-quote when needed.
  • Template registry for stream, filter, modify, aggregate, sort, limit, with optional extensions like by, if, as, partition by, limit, offset; searchable add-pipe menu with keyboard navigation.
  • Insertable separators to add pipes anywhere; unified popup manager and floating, portal-based dropdowns for conflict-free menus.
  • Placeholder chips with dropdowns, multi-select, grouped option sections with improved styling, and tab/arrow-key navigation across placeholders.
  • Per-pipe field/stream loaders with LRU caching, template variable support, time range–aware keys, and server-side filter for field endpoints.
  • Code and builder modes stay in sync via a header toggle; builder state is stored on the query as templateBuilder.
  • Minor DX: stable lint:fix script, @grafana/ui bumped to 12.4.2, added @types/react-dom.

• Bug Fixes

  • Prevent duplicate sort/order by pipes from being appended when any sort exists.
  • Avoid losing queries when switching between Code and Builder; skip confirmation when expression matches the “all” filter; re-sync expr from templateBuilder when needed.
  • Stats warning now reflects the builder model, not stale expr.
  • Stream/field option loading respects template variables and server-side filtering; fixed stale caches, debounce cross-cancellation, and cleared options when dependencies are missing.

^{Written for commit f7831a8. Summary will update on new commits.}

[cubic-dev-ai]

9 issues found across 81 files

Note: This PR contains a large number of files. cubic only reviews up to 75 files per PR, so some files may not have been reviewed. cubic prioritises the most important files to review.

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/utils/LRUCache.ts">

<violation number="1" location="src/utils/LRUCache.ts:16">
P2: `get` uses value comparison instead of key existence, which breaks LRU promotion for cached `undefined` values.</violation>
</file>

<file name="src/components/QueryEditor/TemplateBuilder/hooks/useTabNavigation.ts">

<violation number="1" location="src/components/QueryEditor/TemplateBuilder/hooks/useTabNavigation.ts:21">
P2: Handle `activeId` values that are no longer present in `allIds` before advancing; otherwise Tab can jump to the first placeholder unexpectedly.</violation>
</file>

<file name="src/components/QueryEditor/TemplateBuilder/PlaceholderChip/useOptionLoading.ts">

<violation number="1" location="src/components/QueryEditor/TemplateBuilder/PlaceholderChip/useOptionLoading.ts:109">
P2: Clear options when `dependencyValue` is missing to avoid showing stale field values after the dependent field is removed.</violation>

<violation number="2" location="src/components/QueryEditor/TemplateBuilder/PlaceholderChip/useOptionLoading.ts:121">
P2: Reset stream field value options when `dependencyValue` is empty; otherwise stale options remain visible.</violation>
</file>

<file name="src/components/QueryEditor/shared/useFetchStreamFilters.ts">

<violation number="1" location="src/components/QueryEditor/shared/useFetchStreamFilters.ts:43">
P1: Interpolated query/filter values can become stale because `useMemo` dependencies do not track template variable value changes.</violation>

<violation number="2" location="src/components/QueryEditor/shared/useFetchStreamFilters.ts:52">
P2: Field-name cache key does not include time range, so options can become stale after time-range changes.</violation>
</file>

<file name="src/components/QueryEditor/shared/useFieldFetch.ts">

<violation number="1" location="src/components/QueryEditor/shared/useFieldFetch.ts:54">
P2: Field-name cache key omits `timeRange`, so changing time range can serve stale field suggestions.</violation>

<violation number="2" location="src/components/QueryEditor/shared/useFieldFetch.ts:138">
P1: A single shared debounced function is reused across different loaders, so concurrent typing in different fields can cancel each other’s requests and leave pending Promises unresolved.</violation>
</file>

<file name="src/components/QueryEditor/TemplateBuilder/TemplateQueryEditor.tsx">

<violation number="1" location="src/components/QueryEditor/TemplateBuilder/TemplateQueryEditor.tsx:140">
P2: Scope the global Shift+Enter shortcut to key events originating from this editor, otherwise it can trigger unintended query runs from unrelated UI elements.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review, or fix all with cubic.}

[arturminchukov]

Check failed cause there are vulnerabilities that will be fixed in the other pr.