feat: Add generated PromQL preview

[pulpdrew]

Summary

This PR adds a preview panel to the promql chart editor, similar to the existing Generated SQL preview panel. This allows the user to see the PromQL with variables substituted.

This PR also includes a couple of refactors to share parts of the preview component / accordion with the SQL version.

Screenshots or video

How to test

• Create a PromQL source, the default.metrics_ts timeseries table should exist after enabling promql
• Create a dashboard and add a variable that queries instance IDs ResourceAttributes['service.instance.id'] from the metrics gauge table
• Create a promql tile that references a variable, eg. http_client_duration_milliseconds_count{instance=~"$Instance"}

References

• Linear Issue: Closes HDX-4903
• Related PRs:

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview	Aug 26, 2026 6:29pm
hyperdx-storybook	Ready	Preview	Aug 26, 2026 6:29pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 25c63a1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@hyperdx/common-utils	Patch
@hyperdx/app	Patch
@hyperdx/api	Patch
@hyperdx/otel-collector	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[greptile-apps]

Greptile Summary

This PR adds a read-only Generated PromQL panel that previews the last submitted expression after dashboard-variable substitution.

• Shares preview accordion and copy-button components with the Generated SQL interface.
• Disables the PromQL preview before a query runs or when variable substitution fails.
• Adds component and Playwright coverage for preview state and variable formats.

Confidence Score: 5/5

The PR appears safe to merge because no blocking failure remains.

No blocking failure remains.

Important Files Changed

Filename	Overview
packages/app/src/components/DBEditTimeChartForm/utils.ts	Builds rendered PromQL with the same substitution helper used by query execution and returns an explicit error when expansion fails.
packages/app/src/components/DBEditTimeChartForm/ChartPreviewPanel.tsx	Adds the Generated PromQL accordion and derives its enabled state and content from the submitted chart configuration.
packages/app/src/components/PromQLEditor/PromQLPreview.tsx	Introduces a read-only, syntax-highlighted PromQL preview with clipboard support.
packages/app/src/components/DBEditTimeChartForm/tests/ChartPreviewPanel.test.tsx	Covers preview visibility, pre-run state, substitution results, empty selections, and substitution failures.
packages/app/tests/e2e/features/dashboard-filter-variables.spec.ts	Exercises generated PromQL against dashboard variable selections and explicit variable formats.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  Input[PromQL editor template] --> Run[Run query]
  Variables[Dashboard variables] --> Substitute[Substitute variables]
  Run --> Substitute
  Substitute -->|Success| Query[Send rendered PromQL to Prometheus]
  Substitute -->|Success| Preview[Generated PromQL preview]
  Substitute -->|Failure| Disabled[Disable preview and show reason]

Loading

_{Reviews (3): Last reviewed commit: "feat: Add generated PromQL preview" | Re-trigger Greptile}

[greptile-apps]

Copied state uses unapproved variant

The extracted copy button selects the unapproved light variant after copying, so both SQL and PromQL previews bypass the application's Button styling contract and can render inconsistently with the design system.

Context Used: CLAUDE.md (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

[greptile-apps]

That makes sense for the HDX_XXX placeholder behavior, but it appears to address a different review thread. This comment is specifically about PreviewCopyButton.tsx: variant="light" is not an approved Button variant in this repo. The copied state should use an approved variant such as default or subtle.

[github-actions]

E2E Test Results

✅ All tests passed • 320 passed • 1 skipped • 1410s

Status	Count
✅ Passed	320
❌ Failed	0
⚠️ Flaky	0
⏭️ Skipped	1

Tests ran across 4 shards in parallel.

View full report →

[github-actions]

🟡 Tier 3 — Standard

Introduces new logic, modifies core functionality, or touches areas with non-trivial risk.

Why this tier:

• Diff size: 288 production lines changed (Tier 2 max: < 250)

Review process: Full human review — logic, architecture, edge cases.
SLA: First-pass feedback within 1 business day.

Stats

• Production files changed: 7
• Production lines changed: 288 (+ 319 in test files, excluded from tier calculation)
• Branch: drew/promql-variable-preview
• Author: pulpdrew

To override this classification, remove the review/tier-3 label and apply a different review/tier-* label. Manual overrides are preserved on subsequent pushes.

[github-actions]

Deep Review

✅ No critical issues found. This PR adds a read-only "Generated PromQL" preview accordion and extracts two shared components (PreviewCopyButton, QueryPreviewAccordion). The diff is scoped to UI preview code with no auth, data-mutation, or migration surface. Error handling for failed variable substitution is correct and tested, and the prior P1 review comment has been resolved.

🟡 P2 — recommended

• packages/app/src/components/PreviewCopyButton.tsx:16 — the copied state latches to true on first copy and never resets, so after the user edits the query the button keeps reading "Copied!" and the stale label now also affects the new PromQL preview; the behavior is inherited verbatim from the pre-existing CopyButton, so it is pre-existing rather than introduced here.
  • Fix: reset copied back to false on a short timer after copy, or key it to the current text so a changed expression clears the copied state.

🔵 P3 nitpicks (2)

• packages/app/src/components/PromQLEditor/PromQLPreview.tsx:19 — enableCopy defaults to true here while the analogous SQLPreview defaults it to false, an inconsistency between the two sibling preview components that is easy to trip over later.
  • Fix: align the default with SQLPreview (or document why the previews differ) so the shared preview surface behaves predictably.
• packages/app/src/components/DBEditTimeChartForm/utils.ts:184 — buildRenderedPromqlExpression is only exercised indirectly through ChartPreviewPanel tests; all branches (success, empty selection, error, non-PromQL, undefined) are covered there, but a direct unit test would pin the discriminated-union contract independently of the panel.
  • Fix: add a focused unit test for buildRenderedPromqlExpression covering the expression and error variants.

Resolved from prior review: The earlier P1 "substitution failure shown as generated query" is fixed — buildRenderedPromqlExpression catches the substitution throw and returns an error, and ChartPreviewPanel disables the accordion (showing the error as the tooltip) instead of rendering the raw template, covered by the is disabled when substitution throws unit test. The earlier P2 variant="light" comment does not reproduce: light is a standard Mantine variant used throughout the app with no repo rule against it, and the line was moved unchanged from the pre-existing copy button.

---

Reviewers (7): correctness, testing, maintainability, project-standards, kieran-typescript, julik-frontend-races, previous-comments.

Testing gaps: buildRenderedPromqlExpression lacks a direct unit test (covered indirectly via ChartPreviewPanel); the PreviewCopyButton copy/reset interaction is not asserted.