From a46fcfc0c61b0a76e64ad9c94d6355c5afcfa135 Mon Sep 17 00:00:00 2001 From: "grafana-delivery-bot[bot]" <132647405+grafana-delivery-bot[bot]@users.noreply.github.com> Date: Thu, 23 Oct 2025 08:59:28 -0400 Subject: [PATCH] [release-12.2.2] Table: Update ad-hoc filter to use name instead of displayName (#112817) --- .../adhoc-filter-from-panel.spec.ts | 21 ++++++++++++++++++- .../dashboards/AdHocFilterTest.json | 15 ++++++++++++- .../TableNG/components/TableCellActions.tsx | 4 ++-- 3 files changed, 36 insertions(+), 4 deletions(-) diff --git a/e2e-playwright/dashboards-suite/adhoc-filter-from-panel.spec.ts b/e2e-playwright/dashboards-suite/adhoc-filter-from-panel.spec.ts index 181aadb36cd..4e008fc3b5f 100644 --- a/e2e-playwright/dashboards-suite/adhoc-filter-from-panel.spec.ts +++ b/e2e-playwright/dashboards-suite/adhoc-filter-from-panel.spec.ts @@ -48,10 +48,17 @@ test.describe( }) => { // Handle query and query_range API calls await page.route(/\/api\/ds\/query/, async (route) => { + const fixture = require('../fixtures/prometheus-response.json'); + // during the test, we select the "inner_eval" slice to filter; this simulates the behavior + // of prometheus applying that filter and removing dataframes from the response. + if (route.request().postData()?.includes('{slice=\\\"inner_eval\\\"}')) { + delete fixture.results.A.frames[1]; + } + await route.fulfill({ status: 200, contentType: 'application/json', - body: JSON.stringify(require('../fixtures/prometheus-response.json')), + body: JSON.stringify(fixture), }); }); @@ -73,6 +80,11 @@ test.describe( const labelValue = await labelValueCell.textContent(); expect(labelValue).toBeTruthy(); + const otherValueCell = await getCell(panel, 2, 1); + const otherValueLabel = await otherValueCell.textContent(); + expect(otherValueLabel).toBeTruthy(); + expect(otherValueLabel).not.toBe(labelValue); + // Hover over the first cell to trigger the appearance of filter actions await labelValueCell.hover(); @@ -92,6 +104,9 @@ test.describe( const hasFilterValue = await submenuItems.filter({ hasText: labelValue! }).count(); expect(hasFilterValue).toBeGreaterThan(0); + const hasOtherValue = await submenuItems.filter({ hasText: otherValueLabel! }).count(); + expect(hasOtherValue).toBe(0); + // Check if the URL contains the var-PromAdHoc parameter with the filtered value const currentUrl = page.url(); expect(currentUrl).toContain('var-PromAdHoc'); @@ -101,6 +116,10 @@ test.describe( const promAdHocParam = urlParams.get('var-PromAdHoc'); expect(promAdHocParam).toBeTruthy(); expect(promAdHocParam).toContain(labelValue!); + expect(promAdHocParam).not.toContain(otherValueLabel!); + + // finally, let's check that the table was updated and that the value was filtered out when the query was re-run + await expect(otherValueCell).toBeHidden(); }); } ); diff --git a/e2e-playwright/dashboards/AdHocFilterTest.json b/e2e-playwright/dashboards/AdHocFilterTest.json index 28db6228d67..7ac8289399a 100644 --- a/e2e-playwright/dashboards/AdHocFilterTest.json +++ b/e2e-playwright/dashboards/AdHocFilterTest.json @@ -55,7 +55,20 @@ ] } }, - "overrides": [] + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slice" + }, + "properties": [ + { + "id": "displayName", + "value": "Slice" + } + ] + } + ] }, "gridPos": { "h": 8, diff --git a/packages/grafana-ui/src/components/Table/TableNG/components/TableCellActions.tsx b/packages/grafana-ui/src/components/Table/TableNG/components/TableCellActions.tsx index 2f0181672cc..de9333718d6 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/components/TableCellActions.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/components/TableCellActions.tsx @@ -59,7 +59,7 @@ export const TableCellActions = memo( aria-label={t('grafana-ui.table.cell-filter-on', 'Filter for value')} onClick={() => { onCellFilterAdded?.({ - key: displayName, + key: field.name, operator: FILTER_FOR_OPERATOR, value: String(value ?? ''), }); @@ -70,7 +70,7 @@ export const TableCellActions = memo( aria-label={t('grafana-ui.table.cell-filter-out', 'Filter out value')} onClick={() => { onCellFilterAdded?.({ - key: displayName, + key: field.name, operator: FILTER_OUT_OPERATOR, value: String(value ?? ''), });