Structured metadata: Changes to ad-hoc variable doesn't run detected_fields

package.json

@@ -99,11 +99,11 @@
   "dependencies": {
     "@bsull/augurs": "^0.3.1",
     "@emotion/css": "^11.10.6",
-    "@grafana/data": "^11.2.2",
+    "@grafana/data": "^11.3.0",
     "@grafana/lezer-logql": "^0.2.6",
-    "@grafana/runtime": "^11.2.2",
+    "@grafana/runtime": "^11.3.0",
     "@grafana/scenes": "5.14.7",
-    "@grafana/ui": "^11.2.2",
+    "@grafana/ui": "^11.3.0",
     "@hello-pangea/dnd": "^16.6.0",
     "@lezer/common": "^1.2.1",
     "@lezer/lr": "^1.4.1",

src/Components/IndexScene/IndexScene.tsx

@@ -87,7 +87,6 @@ export class IndexScene extends SceneObjectBase<IndexSceneState> {
       new SceneRefreshPicker({}),
     ];
 
-    //@ts-expect-error
     if (getDrilldownSlug() === 'explore' && config.featureToggles.exploreLogsAggregatedMetrics) {
       controls.push(
         new ToolbarScene({

src/Components/IndexScene/ToolbarScene.tsx

@@ -22,14 +22,13 @@ export interface ToolbarSceneState extends SceneObjectState {
 export class ToolbarScene extends SceneObjectBase<ToolbarSceneState> {
   constructor(state: Partial<ToolbarSceneState>) {
     const userOverride = localStorage.getItem(AGGREGATED_METRICS_USER_OVERRIDE_LOCALSTORAGE_KEY);
-    // @ts-expect-error
     const active = config.featureToggles.exploreLogsAggregatedMetrics && userOverride !== 'false';
 
     super({
       isOpen: false,
       options: {
         aggregatedMetrics: {
-          active,
+          active: active ?? false,
           userOverride: userOverride === 'true' ?? false,
           disabled: false,
         },

src/Components/ServiceScene/ServiceScene.tsx

@@ -41,6 +41,8 @@ import {
   getFieldsVariable,
   getLabelsVariable,
   getLevelsVariable,
+  getMetadataVariable,
+  getPatternsVariable,
 } from '../../services/variableGetters';
 import { logger } from '../../services/logger';
 import { IndexScene } from '../IndexScene/IndexScene';
@@ -266,12 +268,23 @@ export class ServiceScene extends SceneObjectBase<ServiceSceneState> {
     // Variable subscriptions
     this.setSubscribeToLabelsVariable();
     this._subs.add(this.subscribeToFieldsVariable());
+    this._subs.add(this.subscribeToMetadataVariable());
+    this._subs.add(this.subscribeToLevelsVariable());
     this._subs.add(this.subscribeToDataSourceVariable());
+    this._subs.add(this.subscribeToPatternsVariable());
 
     // Update query runner on manual time range change
     this._subs.add(this.subscribeToTimeRange());
   }
 
+  private subscribeToPatternsVariable() {
+    return getPatternsVariable(this).subscribeToState((newState, prevState) => {
+      if (newState.value !== prevState.value) {
+        this.state.$detectedFieldsData?.runQueries();
+      }
+    });
+  }
+
   private subscribeToDataSourceVariable() {
     return getDataSourceVariable(this).subscribeToState(() => {
       this.redirectToStart();
@@ -296,6 +309,22 @@ export class ServiceScene extends SceneObjectBase<ServiceSceneState> {
     });
   }
 
+  private subscribeToMetadataVariable() {
+    return getMetadataVariable(this).subscribeToState((newState, prevState) => {
+      if (!areArraysEqual(newState.filters, prevState.filters)) {
+        this.state.$detectedFieldsData?.runQueries();
+      }
+    });
+  }
+
+  private subscribeToLevelsVariable() {
+    return getLevelsVariable(this).subscribeToState((newState, prevState) => {
+      if (!areArraysEqual(newState.filters, prevState.filters)) {
+        this.state.$detectedFieldsData?.runQueries();
+      }
+    });
+  }
+
   private runQueries() {
     const slug = getDrilldownSlug();
     const parentSlug = getDrilldownValueSlug();

src/Components/ServiceSelectionScene/ServiceSelectionScene.tsx

@@ -75,7 +75,6 @@ import { FavoriteServiceHeaderActionScene } from './FavoriteServiceHeaderActionS
 import { pushUrlHandler } from '../../services/navigate';
 import { NoServiceVolume } from './NoServiceVolume';
 
-// @ts-expect-error
 const aggregatedMetricsEnabled: boolean | undefined = config.featureToggles.exploreLogsAggregatedMetrics;
 // Don't export AGGREGATED_SERVICE_NAME, we want to rename things so the rest of the application is agnostic to how we got the services
 const AGGREGATED_SERVICE_NAME = '__aggregated_metric__';

src/plugin.json

@@ -53,7 +53,7 @@
   ],
   "roles": [],
   "dependencies": {
-    "grafanaDependency": ">=11.2.0",
+    "grafanaDependency": ">=11.3.0",
     "plugins": []
   },
   "preload": true,

src/services/datasource.ts

@@ -139,7 +139,6 @@ export class WrappedLokiDatasource extends RuntimeDataSource<DataQuery> {
     ds: DataSourceWithBackend<LokiQuery>,
     subscriber: Subscriber<DataQueryResponse>
   ) {
-    // @ts-expect-error
     const shardingEnabled = config.featureToggles.exploreLogsShardSplitting;
 
     // Query the datasource and return either observable or promise

src/services/variableGetters.ts

@@ -32,6 +32,7 @@ import {
   VAR_PRIMARY_LABEL,
   VAR_PRIMARY_LABEL_SEARCH,
   VAR_METADATA_EXPR,
+  VAR_METADATA,
 } from './variables';
 import { AdHocVariableFilter } from '@grafana/data';
 import { logger } from './logger';
@@ -72,6 +73,10 @@ export function getFieldsVariable(scene: SceneObject) {
   return getAdHocFiltersVariable(VAR_FIELDS, scene);
 }
 
+export function getMetadataVariable(scene: SceneObject) {
+  return getAdHocFiltersVariable(VAR_METADATA, scene);
+}
+
 export function getLevelsVariable(scene: SceneObject) {
   return getAdHocFiltersVariable(VAR_LEVELS, scene);
 }

tests/exploreServices.spec.ts

@@ -154,6 +154,10 @@ test.describe('explore services page', () => {
           page.waitForResponse((resp) => resp.url().includes('ds/query')),
         ]);
       });
+      test.afterEach(async ({ page }) => {
+        await explorePage.unroute();
+        explorePage.echoConsoleLogsOnRetry();
+      });
 
       test('refreshing time range should request panel data once', async ({ page }) => {
         await page.waitForFunction(() => !document.querySelector('[title="Cancel query"]'));

tests/exploreServicesBreakDown.spec.ts

@@ -31,7 +31,7 @@ test.describe('explore services breakdown page', () => {
   test('should filter logs panel on search for broadcast field', async ({ page }) => {
     await explorePage.serviceBreakdownSearch.click();
     await explorePage.serviceBreakdownSearch.fill('broadcast');
-    await expect(page.getByRole('table').locator('tr').first().getByText('broadcast')).toBeVisible();
+    await expect(page.getByRole('table').locator('tr').first().getByText('broadcast').first()).toBeVisible();
     await expect(page).toHaveURL(/broadcast/);
   });
 
@@ -394,7 +394,6 @@ test.describe('explore services breakdown page', () => {
       const json = await response.json();
       return route.fulfill({ response, json });
     });
-
     // Navigate to fields tab
     await explorePage.goToFieldsTab();
     // Make sure the panels have started to render
@@ -403,19 +402,15 @@ test.describe('explore services breakdown page', () => {
     await explorePage.assertTabsNotLoading();
     // Fields on top should be loaded
     expect(requestCount).toEqual(6);
-
     await explorePage.scrollToBottom();
     // Panel on the bottom should be visible
     await expect(page.getByTestId(/data-testid Panel header/).last()).toBeInViewport();
-
     // Panel on the top should not
     await expect(page.getByTestId(/data-testid Panel header/).first()).not.toBeInViewport();
-
     // Wait for a bit for the requests to be made
     await page.waitForTimeout(250);
-
     // if this flakes we could just assert that it's greater then 3
-    expect(requestCount).toEqual(14);
+    expect(requestCount).toEqual(17);
   });
 
   test(`should select field ${fieldName}, update filters, open log panel`, async ({ page }) => {

tests/fixtures/explore.ts

@@ -44,7 +44,7 @@ export class ExplorePage {
   }
 
   async setDefaultViewportSize() {
-    await this.page.setViewportSize({ width: 1280, height: 720 });
+    await this.page.setViewportSize({ width: 1280, height: 680 });
   }
 
   async setExtraTallViewportSize() {
@@ -82,7 +82,7 @@ export class ExplorePage {
   }
 
   async scrollToBottom() {
-    const main = this.page.locator('main#pageContent');
+    const main = this.page.locator('html');
 
     // Scroll the page container to the bottom
     await main.evaluate((main) => main.scrollTo(0, main.scrollHeight));