Skip to content

Conversation

@NeedleInAJayStack
Copy link
Owner

@NeedleInAJayStack NeedleInAJayStack commented Jun 30, 2025

This fixes an issue where the Variable page was not populating the variable options. Although a correct response was received, since the request was missing the refId, the response was not associated with the request.

It also refactors the variable support to a cleaner implementation.

This resolves #46

This ensures that variable queries have their `refId` set, which is required for Grafana to associate the response with the request. I can't seem to find documentation about this, but it's reflected in other custom variable support implementations: https://github.com/grafana/grafana/blob/15293a2ceb083108c0f15490933db523aa915c7d/public/app/plugins/datasource/loki/components/VariableQueryEditor.tsx#L71
@NeedleInAJayStack NeedleInAJayStack self-assigned this Jun 30, 2025
@NeedleInAJayStack NeedleInAJayStack changed the title Sets Variable query refId manually Sets variable query refId manually Jun 30, 2025
@github-actions
Copy link

github-actions bot commented Jun 30, 2025

Levitate is-compatible report:

🔍 Resolving @grafana/data@latest...
🔍 Resolving @grafana/ui@latest...
🔍 Resolving @grafana/runtime@latest...
🔍 Resolving @grafana/schema@latest...
🔍 Resolving @grafana/e2e-selectors@latest...
🔍 Resolving @grafana/experimental@latest...

🔬 Checking compatibility between ./src/module.ts and @grafana/[email protected]...
✔ Found @grafana/data version 11.5.0 locally

🔬 Checking compatibility between ./src/module.ts and @grafana/[email protected]...
✔ Found @grafana/ui version 11.5.0 locally

🔬 Checking compatibility between ./src/module.ts and @grafana/[email protected]...
✔ Found @grafana/runtime version 11.5.0 locally

🔬 Checking compatibility between ./src/module.ts and @grafana/[email protected]...
✔ Found @grafana/schema version 11.5.0 locally

🔬 Checking compatibility between ./src/module.ts and @grafana/[email protected]...
✔ Found @grafana/e2e-selectors version 10.4.15 locally

🔬 Checking compatibility between ./src/module.ts and @grafana/[email protected]...
Skipping package @grafana/experimental because it is not used in the project or not installed locally.
did you forget to run yarn install or npm install?

✔️ ./src/module.ts appears to be compatible with @grafana/data,@grafana/ui,@grafana/runtime,@grafana/schema,@grafana/e2e-selectors,@grafana/experimental

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes a missing refId on variable queries so that variable options populate correctly and refactors the variable support into a dedicated class.

  • Sets a constant refId on all variable query edits and on blur events to associate responses.
  • Moves HaystackVariableSupport out of datasource.ts into its own file with a cleaner implementation.
  • Updates the DataSource constructor to wire up the new HaystackVariableSupport.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
src/datasource.ts Replaced inline variable support with new class import and constructor wiring
src/components/VariableQueryEditor.tsx Added refId handling on change and blur; renamed exported component
src/HaystackVariableSupport.ts New file: encapsulates variable query logic from datasource.ts
Comments suppressed due to low confidence (4)

src/components/VariableQueryEditor.tsx:13

  • [nitpick] The file name VariableQueryEditor.tsx does not match the exported component name HaystackVariableQueryEditor. Consider renaming the file to HaystackVariableQueryEditor.tsx or aligning the component name with the file name for consistency.
export const HaystackVariableQueryEditor = ({ onChange, query }: Props) => {

src/HaystackVariableSupport.ts:26

  • The new query logic in HaystackVariableSupport processes frame data and handles isRef conversions—consider adding unit tests to cover both string and ref scenarios to ensure correct behavior.
  query(request: DataQueryRequest<HaystackVariableQuery>): Observable<DataQueryResponse> {

src/HaystackVariableSupport.ts:19

  • Check the generic parameters passed to CustomVariableSupport. The previous implementation included more type arguments for query and options—ensure this signature correctly enforces type safety for variable queries.
export class HaystackVariableSupport extends CustomVariableSupport<DataSource, HaystackVariableQuery> {

src/components/VariableQueryEditor.tsx:11

  • [nitpick] Using a constant refId for all variable queries may lead to collisions when multiple variables are evaluated. Consider generating a unique refId per instance or parameterizing it to avoid duplicates.
const refId = 'HaystackVariableQueryEditor-VariableQuery';

This reworks the HaystackVariableSupport to align with the Loki plugin's use of CustomVariableSupport: https://github.com/grafana/grafana/blob/15293a2ceb083108c0f15490933db523aa915c7d/public/app/plugins/datasource/loki/LokiVariableSupport.ts#L10

Since I didn't really use any source example when implementing it initially, it ended up being kinda messy.
@NeedleInAJayStack NeedleInAJayStack merged commit ebf28a7 into main Jun 30, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Query Variable Does Not Work

2 participants