Table: Update UX for uniform-reducer case in new footer and overflow (#110493)

* Table: Update UX for single-reducer use case in new footer

* all cases are working; unit tests pass

* style and code cleanup in SummaryCell

* remove e2e test for sum reducer label

* reorganize code, todo tests

* slight style cleanup

* one more little reorganization

* updates based on CI failures

* update tests and docs

* unused prop

* update table footer image

* alt text, lint issue

* update gdev to create footer dashboard and re-point e2es there, add a few new cases

* remove console.log
This commit is contained in:
Paul Marbach
2025-09-05 15:46:07 -04:00
committed by GitHub
parent f9e82aba9c
commit 7cbc55d615
12 changed files with 1922 additions and 234 deletions
@@ -4,7 +4,7 @@ import { test, expect } from '@grafana/plugin-e2e';
import { getColumnIdx } from './table-utils';
const DASHBOARD_UID = '1ea31838-e4e8-4aa0-9333-1d4c3fa95641';
const DASHBOARD_UID = '8100236d-603c-421e-a21b-2a0b0ea4eaa3';
const waitForTableLoad = async (loc: Page | Locator) => {
await expect(loc.locator('.rdg')).toBeVisible();
@@ -26,12 +26,6 @@ test.describe('Panels test: Table - Footer', { tag: ['@panels', '@table'] }, ()
const minColumnIdx = await getColumnIdx(page, 'Min');
// this is the footer cell for the "Min" column.
await expect(
dashboardPage
.getByGrafanaSelector(selectors.components.Panels.Visualization.TableNG.Footer.ReducerLabel)
.nth(minColumnIdx)
).toHaveText('Last *');
const minReducerValue = await dashboardPage
.getByGrafanaSelector(selectors.components.Panels.Visualization.TableNG.Footer.Value)
.nth(minColumnIdx)
@@ -75,12 +69,6 @@ test.describe('Panels test: Table - Footer', { tag: ['@panels', '@table'] }, ()
const minColumnIdx = await getColumnIdx(page, 'Min');
// this is the footer cell for the "Min" column.
await expect(
dashboardPage
.getByGrafanaSelector(selectors.components.Panels.Visualization.TableNG.Footer.ReducerLabel)
.nth(minColumnIdx)
).toHaveText('Last *');
const minReducerValue = await dashboardPage
.getByGrafanaSelector(selectors.components.Panels.Visualization.TableNG.Footer.Value)
.nth(minColumnIdx)
@@ -114,26 +102,6 @@ test.describe('Panels test: Table - Footer', { tag: ['@panels', '@table'] }, ()
).toHaveText(minReducerValue);
});
test('Single-sum reducer label is hidden', async ({ gotoDashboardPage, selectors, page }) => {
const dashboardPage = await gotoDashboardPage({
uid: DASHBOARD_UID,
queryParams: new URLSearchParams({ editPanel: '6' }),
});
await expect(
dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('Single sum reducer'))
).toBeVisible();
await waitForTableLoad(page);
await expect(
dashboardPage.getByGrafanaSelector(selectors.components.Panels.Visualization.TableNG.Footer.ReducerLabel)
).not.toBeVisible();
await expect(
dashboardPage.getByGrafanaSelector(selectors.components.Panels.Visualization.TableNG.Footer.Value)
).toBeVisible();
});
test('Count rows for normal case', async ({ gotoDashboardPage, selectors, page }) => {
const dashboardPage = await gotoDashboardPage({
uid: DASHBOARD_UID,