public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Table: Styling from field (#110991)

Browse Source 
* Table: Styling from field

* fix mistake with gdev

* e2e for kitchen sink

* add counter-example in e2e for completeness

* unit tests for utils

* update to store style field per-column, replace util

* optimize branches column-level variables
This commit is contained in:
Paul Marbach
2025-09-15 10:34:12 -05:00
committed by GitHub
parent c61624ad3c
commit bb9b890e8c
9 changed files with 149 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e-playwright/panels-suite/table-kitchenSink.spec.ts
+44
View File
@@ -406,6 +406,50 @@ test.describe('Panels test: Table - Kitchen Sink', { tag: ['@panels', '@table']
).not.toBeVisible();
});
test('Styling overrides with styling from field', async ({ gotoDashboardPage, selectors, page }) => {
const dashboardPage = await gotoDashboardPage({
uid: DASHBOARD_UID,
queryParams: new URLSearchParams({ editPanel: '1' }),
});
await expect(
dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('Table - Kitchen Sink'))
).toBeVisible();
await waitForTableLoad(page);
const infoColumnIdx = await getColumnIdx(page, 'Info');
const dataLinkColumnIdx = await getColumnIdx(page, 'Data Link');
const stateColumnHeader = page.getByRole('columnheader').nth(infoColumnIdx);
// filter to only "Up," which we have a style override on.
await stateColumnHeader.getByTestId(selectors.components.Panels.Visualization.TableNG.Filters.HeaderButton).click();
const filterContainer = dashboardPage.getByGrafanaSelector(
selectors.components.Panels.Visualization.TableNG.Filters.Container
);
await expect(filterContainer).toBeVisible();
await filterContainer.getByTitle('up', { exact: true }).locator('label').click();
await filterContainer.getByRole('button', { name: 'Ok' }).click();
const cell = await getCell(page, 1, dataLinkColumnIdx);
await expect(cell).toBeVisible();
await expect(cell).toHaveCSS('text-decoration', /line-through/);
// now filter out "up," and confirm that the style override isn't present.
await stateColumnHeader.getByTestId(selectors.components.Panels.Visualization.TableNG.Filters.HeaderButton).click();
await expect(filterContainer).toBeVisible();
// select all, then click the first value to unselect it, filtering it out.
await filterContainer.getByTestId(selectors.components.Panels.Visualization.TableNG.Filters.SelectAll).click();
await filterContainer.getByTitle('up', { exact: true }).locator('label').click();
await filterContainer.getByRole('button', { name: 'Ok' }).click();
await expect(cell).toBeVisible();
await expect(cell).not.toHaveCSS('text-decoration', /line-through/);
});
test('Empty Table panel', async ({ gotoDashboardPage, selectors }) => {
const dashboardPage = await gotoDashboardPage({
uid: DASHBOARD_UID,