IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-07-30 00:08:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: Explore -Tables missing vertical spacing (#78149)

Browse Source 
* fix: added vertical space to tables

* chore: used theme for spacing

* fix: extended themeable2

* test: fixed TableContainer test with theme
This commit is contained in:
Aditi Patel
2023-11-21 12:20:57 +00:00
committed by GitHub
parent f8a6380510
commit bd6f8e6ef7
2 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/explore/Table/TableContainer.test.tsx
+7 -7
View File
@@ -3,7 +3,7 @@ import React from 'react';
import { DataFrame, FieldType, getDefaultTimeRange, InternalTimeZones, toDataFrame } from '@grafana/data';
import { TableContainer } from './TableContainer';
import { TableContainerWithTheme } from './TableContainer';
function getTables(): HTMLElement[] {
return screen.getAllByRole('table');
@@ -57,10 +57,10 @@ const defaultProps = {
timeZone: InternalTimeZones.utc,
};
describe('TableContainer', () => {
describe('TableContainerWithTheme', () => {
describe('With one main frame', () => {
it('should render component', () => {
render(<TableContainer {...defaultProps} />);
render(<TableContainerWithTheme {...defaultProps} />);
const tables = getTables();
expect(tables.length).toBe(1);
expect(tables[0]).toBeInTheDocument();
@@ -82,12 +82,12 @@ describe('TableContainer', () => {
length: 0,
},
];
render(<TableContainer {...defaultProps} tableResult={emptyFrames} />);
render(<TableContainerWithTheme {...defaultProps} tableResult={emptyFrames} />);
expect(screen.getByText('0 series returned')).toBeInTheDocument();
});
it('should update time when timezone changes', () => {
const { rerender } = render(<TableContainer {...defaultProps} />);
const { rerender } = render(<TableContainerWithTheme {...defaultProps} />);
const rowsBeforeChange = within(getTables()[0]).getAllByRole('row');
expect(getRowsData(rowsBeforeChange)).toEqual([
{ time: '2021-01-01 00:00:00', text: 'test_string_1' },
@@ -96,7 +96,7 @@ describe('TableContainer', () => {
{ time: '2021-01-01 02:00:00', text: 'test_string_4' },
]);
rerender(<TableContainer {...defaultProps} timeZone="cest" />);
rerender(<TableContainerWithTheme {...defaultProps} timeZone="cest" />);
const rowsAfterChange = within(getTables()[0]).getAllByRole('row');
expect(getRowsData(rowsAfterChange)).toEqual([
{ time: '2020-12-31 19:00:00', text: 'test_string_1' },
@@ -110,7 +110,7 @@ describe('TableContainer', () => {
it('should render multiple tables for multiple frames', () => {
const dataFrames = [dataFrame, dataFrame];
const multiDefaultProps = { ...defaultProps, tableResult: dataFrames };
render(<TableContainer {...multiDefaultProps} />);
render(<TableContainerWithTheme {...multiDefaultProps} />);
const tables = getTables();
expect(tables.length).toBe(2);
expect(tables[0]).toBeInTheDocument();
public/app/features/explore/Table/TableContainer.tsx
+31 -25
View File
@@ -1,9 +1,10 @@
import { css } from '@emotion/css';
import React, { PureComponent } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { applyFieldOverrides, TimeZone, SplitOpen, DataFrame, LoadingState, FieldType } from '@grafana/data';
import { getTemplateSrv } from '@grafana/runtime';
import { Table, AdHocFilterItem, PanelChrome } from '@grafana/ui';
import { Table, AdHocFilterItem, PanelChrome, withTheme2, Themeable2 } from '@grafana/ui';
import { config } from 'app/core/config';
import { t } from 'app/core/internationalization';
import {
@@ -17,7 +18,7 @@ import { MetaInfoText } from '../MetaInfoText';
import { selectIsWaitingForData } from '../state/query';
import { exploreDataLinkPostProcessorFactory } from '../utils/links';
interface TableContainerProps {
interface TableContainerProps extends Themeable2 {
ariaLabel?: string;
exploreId: string;
width: number;
@@ -61,7 +62,8 @@ export class TableContainer extends PureComponent<Props> {
}
render() {
const { loading, onCellFilterAdded, tableResult, width, splitOpenFn, range, ariaLabel, timeZone } = this.props;
const { loading, onCellFilterAdded, tableResult, width, splitOpenFn, range, ariaLabel, timeZone, theme } =
this.props;
let dataFrames = hasDeprecatedParentRowIndex(tableResult)
? migrateFromParentRowIndexToNestedFrames(tableResult)
@@ -93,30 +95,34 @@ export class TableContainer extends PureComponent<Props> {
{() => <MetaInfoText metaItems={[{ value: t('explore.table.no-data', '0 series returned') }]} />}
</PanelChrome>
)}
{frames &&
frames.length > 0 &&
frames.map((data, i) => (
<PanelChrome
key={data.refId || `table-${i}`}
title={this.getTableTitle(dataFrames, data, i)}
width={width}
height={this.getTableHeight(data.length, this.hasSubFrames(data))}
loadingState={loading ? LoadingState.Loading : undefined}
>
{(innerWidth, innerHeight) => (
<Table
ariaLabel={ariaLabel}
data={data}
width={innerWidth}
height={innerHeight}
onCellFilterAdded={onCellFilterAdded}
/>
)}
</PanelChrome>
))}
{frames && frames.length > 0 && (
<div className={css({ display: 'flex', flexDirection: 'column', gap: theme.spacing(1) })}>
{frames.map((data, i) => (
<PanelChrome
key={data.refId || `table-${i}`}
title={this.getTableTitle(dataFrames, data, i)}
width={width}
height={this.getTableHeight(data.length, this.hasSubFrames(data))}
loadingState={loading ? LoadingState.Loading : undefined}
>
{(innerWidth, innerHeight) => (
<Table
ariaLabel={ariaLabel}
data={data}
width={innerWidth}
height={innerHeight}
onCellFilterAdded={onCellFilterAdded}
/>
)}
</PanelChrome>
))}
</div>
)}
</>
);
}
}
export default connector(TableContainer);
export const TableContainerWithTheme = withTheme2(TableContainer);
export default withTheme2(connector(TableContainer));