diff --git a/packages/grafana-ui/src/components/Table/Table.story.tsx b/packages/grafana-ui/src/components/Table/Table.story.tsx index 8ab53a1ac77..71206af2b0a 100644 --- a/packages/grafana-ui/src/components/Table/Table.story.tsx +++ b/packages/grafana-ui/src/components/Table/Table.story.tsx @@ -4,7 +4,7 @@ import { Table } from './Table'; import { getTheme } from '../../themes'; import { migratedTestTable, migratedTestStyles, simpleTable } from './examples'; -import { ScopedVars, TableData, GrafanaThemeType } from '../../types/index'; +import { ScopedVars, SeriesData, GrafanaThemeType } from '../../types/index'; import { withFullSizeStory } from '../../utils/storybook/withFullSizeStory'; import { number, boolean } from '@storybook/addon-knobs'; @@ -29,11 +29,11 @@ export function columnIndexToLeter(column: number) { return String.fromCharCode(A + c2); } -export function makeDummyTable(columnCount: number, rowCount: number): TableData { +export function makeDummyTable(columnCount: number, rowCount: number): SeriesData { return { - columns: Array.from(new Array(columnCount), (x, i) => { + fields: Array.from(new Array(columnCount), (x, i) => { return { - text: columnIndexToLeter(i), + name: columnIndexToLeter(i), }; }), rows: Array.from(new Array(rowCount), (x, rowId) => { diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx index c32c46f8b88..f4010ae436a 100644 --- a/packages/grafana-ui/src/components/Table/Table.tsx +++ b/packages/grafana-ui/src/components/Table/Table.tsx @@ -12,9 +12,9 @@ import { } from 'react-virtualized'; import { Themeable } from '../../types/theme'; -import { sortTableData } from '../../utils/processTableData'; +import { sortSeriesData } from '../../utils/processTableData'; -import { TableData, InterpolateFunction } from '@grafana/ui'; +import { SeriesData, InterpolateFunction } from '@grafana/ui'; import { TableCellBuilder, ColumnStyle, @@ -25,7 +25,7 @@ import { import { stringToJsRegex } from '../../utils/index'; export interface Props extends Themeable { - data: TableData; + data: SeriesData; minColumnWidth: number; showHeader: boolean; @@ -43,7 +43,7 @@ export interface Props extends Themeable { interface State { sortBy?: number; sortDirection?: SortDirectionType; - data: TableData; + data: SeriesData; } interface ColumnRenderInfo { @@ -108,17 +108,17 @@ export class Table extends Component { // Update the data when data or sort changes if (dataChanged || sortBy !== prevState.sortBy || sortDirection !== prevState.sortDirection) { this.scrollToTop = true; - this.setState({ data: sortTableData(data, sortBy, sortDirection === 'DESC') }); + this.setState({ data: sortSeriesData(data, sortBy, sortDirection === 'DESC') }); } } /** Given the configuration, setup how each column gets rendered */ initColumns(props: Props): ColumnRenderInfo[] { const { styles, data, width, minColumnWidth } = props; - const columnWidth = Math.max(width / data.columns.length, minColumnWidth); + const columnWidth = Math.max(width / data.fields.length, minColumnWidth); - return data.columns.map((col, index) => { - let title = col.text; + return data.fields.map((col, index) => { + let title = col.name; let style: ColumnStyle | null = null; // ColumnStyle // Find the style based on the text @@ -159,7 +159,7 @@ export class Table extends Component { this.setState({ sortBy: sort, sortDirection: dir }); }; - /** Converts the grid coordinates to TableData coordinates */ + /** Converts the grid coordinates to SeriesData coordinates */ getCellRef = (rowIndex: number, columnIndex: number): DataIndex => { const { showHeader, rotate } = this.props; const rowOffset = showHeader ? -1 : 0; @@ -187,17 +187,17 @@ export class Table extends Component { const { columnIndex, rowIndex, style } = cell.props; const { column } = this.getCellRef(rowIndex, columnIndex); - let col = data.columns[column]; + let col = data.fields[column]; const sorting = sortBy === column; if (!col) { col = { - text: '??' + columnIndex + '???', + name: '??' + columnIndex + '???', }; } return (
this.onCellClick(rowIndex, columnIndex)}> - {col.text} + {col.name} {sorting && }
); @@ -217,7 +217,7 @@ export class Table extends Component { const { data } = this.state; const isHeader = row < 0; - const rowData = isHeader ? data.columns : data.rows[row]; + const rowData = isHeader ? data.fields : data.rows[row]; const value = rowData ? rowData[column] : ''; const builder = isHeader ? this.headerBuilder : this.getTableCellBuilder(column); @@ -226,7 +226,7 @@ export class Table extends Component { {builder({ value, row: rowData, - column: data.columns[column], + column: data.fields[column], table: this, props, })} @@ -242,7 +242,7 @@ export class Table extends Component { const { showHeader, fixedHeader, fixedColumns, rotate, width, height } = this.props; const { data } = this.state; - let columnCount = data.columns.length; + let columnCount = data.fields.length; let rowCount = data.rows.length + (showHeader ? 1 : 0); let fixedColumnCount = Math.min(fixedColumns, columnCount); diff --git a/packages/grafana-ui/src/components/Table/TableCellBuilder.tsx b/packages/grafana-ui/src/components/Table/TableCellBuilder.tsx index b8cb91053d8..2d11f10c8ce 100644 --- a/packages/grafana-ui/src/components/Table/TableCellBuilder.tsx +++ b/packages/grafana-ui/src/components/Table/TableCellBuilder.tsx @@ -6,12 +6,12 @@ import { Table, Props } from './Table'; import moment from 'moment'; import { ValueFormatter } from '../../utils/index'; import { GrafanaTheme } from '../../types/theme'; -import { getValueFormat, getColorFromHexRgbOrName, Column } from '@grafana/ui'; +import { getValueFormat, getColorFromHexRgbOrName, Field } from '@grafana/ui'; import { InterpolateFunction } from '../../types/panel'; export interface TableCellBuilderOptions { value: any; - column?: Column; + column?: Field; row?: any[]; table?: Table; className?: string; @@ -74,7 +74,7 @@ export interface ColumnStyle { // private replaceVariables: InterpolateFunction, // private fmt?:ValueFormatter) { -export function getCellBuilder(schema: Column, style: ColumnStyle | null, props: Props): TableCellBuilder { +export function getCellBuilder(schema: Field, style: ColumnStyle | null, props: Props): TableCellBuilder { if (!style) { return simpleCellBuilder; } @@ -154,12 +154,12 @@ class CellBuilderWithStyle { private mapper: ValueMapper, private style: ColumnStyle, private theme: GrafanaTheme, - private column: Column, + private column: Field, private replaceVariables: InterpolateFunction, private fmt?: ValueFormatter ) { // - console.log('COLUMN', column.text, theme); + console.log('COLUMN', column.name, theme); } getColorForValue = (value: any): string | null => { diff --git a/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx b/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx index 604eefca7a2..4e1c41dc022 100644 --- a/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx +++ b/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import TableInputCSV from './TableInputCSV'; import { action } from '@storybook/addon-actions'; -import { TableData } from '../../types/data'; +import { SeriesData } from '../../types/data'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; const TableInputStories = storiesOf('UI/Table/Input', module); @@ -15,7 +15,7 @@ TableInputStories.add('default', () => {
{ + onTableParsed={(table: SeriesData, text: string) => { console.log('Table', table, text); action('Table')(table, text); }} diff --git a/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx b/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx index 9e2dfbf80c3..c1e8100ec86 100644 --- a/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx +++ b/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import renderer from 'react-test-renderer'; import TableInputCSV from './TableInputCSV'; -import { TableData } from '../../types/data'; +import { SeriesData } from '../../types/data'; describe('TableInputCSV', () => { it('renders correctly', () => { @@ -10,7 +10,7 @@ describe('TableInputCSV', () => { .create( { + onTableParsed={(table: SeriesData, text: string) => { // console.log('Table:', table, 'from:', text); }} /> diff --git a/packages/grafana-ui/src/components/Table/TableInputCSV.tsx b/packages/grafana-ui/src/components/Table/TableInputCSV.tsx index 14bc68550c3..a6da6eb0209 100644 --- a/packages/grafana-ui/src/components/Table/TableInputCSV.tsx +++ b/packages/grafana-ui/src/components/Table/TableInputCSV.tsx @@ -1,18 +1,18 @@ import React from 'react'; import debounce from 'lodash/debounce'; import { parseCSV, TableParseOptions, TableParseDetails } from '../../utils/processTableData'; -import { TableData } from '../../types/data'; +import { SeriesData } from '../../types/data'; import { AutoSizer } from 'react-virtualized'; interface Props { options?: TableParseOptions; text: string; - onTableParsed: (table: TableData, text: string) => void; + onTableParsed: (table: SeriesData, text: string) => void; } interface State { text: string; - table: TableData; + table: SeriesData; details: TableParseDetails; } @@ -82,7 +82,7 @@ class TableInputCSV extends React.PureComponent {