diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 39c5b09dc6c..9aa7bc1904b 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -410,7 +410,7 @@ export class Explore extends PureComponent { } renderTablePanel(width: number) { - const { exploreId, timeZone } = this.props; + const { exploreId, timeZone, eventBus } = this.props; return ( { onCellFilterAdded={this.onCellFilterAdded} timeZone={timeZone} splitOpenFn={this.onSplitOpen('table')} + eventBus={eventBus} /> ); diff --git a/public/app/features/explore/Table/TableContainer.test.tsx b/public/app/features/explore/Table/TableContainer.test.tsx index af987261ead..bb579840017 100644 --- a/public/app/features/explore/Table/TableContainer.test.tsx +++ b/public/app/features/explore/Table/TableContainer.test.tsx @@ -1,22 +1,11 @@ -import { render, screen, within } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { DataFrame, FieldType, getDefaultTimeRange, InternalTimeZones, toDataFrame } from '@grafana/data'; import { TableContainerWithTheme } from './TableContainer'; -function getTables(): HTMLElement[] { - return screen.getAllByRole('table'); -} - -function getRowsData(rows: HTMLElement[]): Object[] { - let content = []; - for (let i = 1; i < rows.length; i++) { - content.push({ - time: within(rows[i]).getByText(/2021*/).textContent, - text: within(rows[i]).getByText(/test_string_*/).textContent, - }); - } - return content; +function getPanels(): HTMLElement[] { + return screen.getAllByText(/PanelRenderer/); } const dataFrame = toDataFrame({ @@ -60,17 +49,9 @@ describe('TableContainerWithTheme', () => { describe('With one main frame', () => { it('should render component', () => { render(); - const tables = getTables(); + const tables = getPanels(); expect(tables.length).toBe(1); expect(tables[0]).toBeInTheDocument(); - const rows = within(tables[0]).getAllByRole('row'); - expect(rows).toHaveLength(5); - expect(getRowsData(rows)).toEqual([ - { time: '2021-01-01 00:00:00', text: 'test_string_1' }, - { time: '2021-01-01 03:00:00', text: 'test_string_2' }, - { time: '2021-01-01 01:00:00', text: 'test_string_3' }, - { time: '2021-01-01 02:00:00', text: 'test_string_4' }, - ]); }); it('should render 0 series returned on no items', () => { @@ -85,26 +66,6 @@ describe('TableContainerWithTheme', () => { expect(screen.getByText('0 series returned')).toBeInTheDocument(); }); - it('should update time when timezone changes', () => { - const { rerender } = render(); - const rowsBeforeChange = within(getTables()[0]).getAllByRole('row'); - expect(getRowsData(rowsBeforeChange)).toEqual([ - { time: '2021-01-01 00:00:00', text: 'test_string_1' }, - { time: '2021-01-01 03:00:00', text: 'test_string_2' }, - { time: '2021-01-01 01:00:00', text: 'test_string_3' }, - { time: '2021-01-01 02:00:00', text: 'test_string_4' }, - ]); - - rerender(); - const rowsAfterChange = within(getTables()[0]).getAllByRole('row'); - expect(getRowsData(rowsAfterChange)).toEqual([ - { time: '2020-12-31 19:00:00', text: 'test_string_1' }, - { time: '2020-12-31 22:00:00', text: 'test_string_2' }, - { time: '2020-12-31 20:00:00', text: 'test_string_3' }, - { time: '2020-12-31 21:00:00', text: 'test_string_4' }, - ]); - }); - it('should render table title with Prometheus query', () => { const dataFrames = [{ ...dataFrame, name: 'metric{label="value"}' }]; const tableProps = { ...defaultProps, tableResult: dataFrames }; @@ -118,7 +79,7 @@ describe('TableContainerWithTheme', () => { const dataFrames = [dataFrame, dataFrame]; const multiDefaultProps = { ...defaultProps, tableResult: dataFrames }; render(); - const tables = getTables(); + const tables = getPanels(); expect(tables.length).toBe(2); expect(tables[0]).toBeInTheDocument(); expect(tables[1]).toBeInTheDocument(); diff --git a/public/app/features/explore/Table/TableContainer.tsx b/public/app/features/explore/Table/TableContainer.tsx index b0a203bd22a..2c1614e539d 100644 --- a/public/app/features/explore/Table/TableContainer.tsx +++ b/public/app/features/explore/Table/TableContainer.tsx @@ -2,11 +2,20 @@ import { css } from '@emotion/css'; import { PureComponent } from 'react'; import { connect, ConnectedProps } from 'react-redux'; -import { applyFieldOverrides, SplitOpen, DataFrame, LoadingState, FieldType } from '@grafana/data'; +import { + applyFieldOverrides, + SplitOpen, + DataFrame, + LoadingState, + FieldType, + DataLinksContext, + EventBus, + EventBusSrv, +} from '@grafana/data'; import { Trans, t } from '@grafana/i18n'; -import { getTemplateSrv } from '@grafana/runtime'; +import { getTemplateSrv, PanelRenderer } from '@grafana/runtime'; import { TimeZone } from '@grafana/schema'; -import { Table, AdHocFilterItem, PanelChrome, withTheme2, Themeable2 } from '@grafana/ui'; +import { AdHocFilterItem, PanelChrome, withTheme2, Themeable2, PanelContextProvider } from '@grafana/ui'; import { config } from 'app/core/config'; import { hasDeprecatedParentRowIndex, @@ -23,12 +32,13 @@ import { exploreDataLinkPostProcessorFactory } from '../utils/links'; const MAX_NUMBER_OF_COLUMNS = 20; interface TableContainerProps extends Themeable2 { - ariaLabel?: string; exploreId: string; width: number; timeZone: TimeZone; onCellFilterAdded?: (filter: AdHocFilterItem) => void; splitOpenFn: SplitOpen; + eventBus?: EventBus; + ariaLabel?: string; } function mapStateToProps(state: StoreState, { exploreId }: TableContainerProps) { @@ -79,7 +89,7 @@ export class TableContainer extends PureComponent { } render() { - const { loading, onCellFilterAdded, tableResult, width, splitOpenFn, range, ariaLabel, timeZone, theme } = + const { loading, onCellFilterAdded, tableResult, width, splitOpenFn, range, timeZone, theme, eventBus } = this.props; const { showAll } = this.state; @@ -153,13 +163,28 @@ export class TableContainer extends PureComponent { loadingState={loading ? LoadingState.Loading : undefined} > {(innerWidth, innerHeight) => ( - + + + + + )} ))}