Skip to content

N
nexpie-grafana-theme
Commit 1609c07f by ryan
Options

use TableData, not interface

parent 2db4004d
Showing with 37 additions and 50 deletions
packages/grafana-ui/src/types/data.ts
...@@ -53,7 +53,7 @@ export interface TimeSeriesVMs { ...@@ -53,7 +53,7 @@ export interface TimeSeriesVMs {
length: number; length: number;
} }
interface Column { export interface Column {
text: string; text: string;
title?: string; title?: string;
type?: string; type?: string;
......
public/app/plugins/panel/table2/TablePanel.tsx
...@@ -3,19 +3,19 @@ import _ from 'lodash'; ...@@ -3,19 +3,19 @@ import _ from 'lodash';
import React, { Component, ReactNode } from 'react'; import React, { Component, ReactNode } from 'react';
// Types // Types
import { PanelProps, ThemeContext } from '@grafana/ui'; import { PanelProps, ThemeContext, TableData } from '@grafana/ui';
import { Options } from './types'; import { Options } from './types';
import { Table, SortDirectionType, SortIndicator, Column, TableHeaderProps, TableCellProps } from 'react-virtualized'; import { Table, SortDirectionType, SortIndicator, Column, TableHeaderProps, TableCellProps } from 'react-virtualized';
import { TableRenderer } from './renderer'; import { TableRenderer } from './renderer';
import { SortedTableData } from './sortable'; import { sortTableData } from './sortable';
interface Props extends PanelProps<Options> {} interface Props extends PanelProps<Options> {}
interface State { interface State {
sortBy?: number; sortBy?: number;
sortDirection?: SortDirectionType; sortDirection?: SortDirectionType;
data: SortedTableData; data: TableData;
} }
export class TablePanel extends Component<Props, State> { export class TablePanel extends Component<Props, State> {
...@@ -27,10 +27,10 @@ export class TablePanel extends Component<Props, State> { ...@@ -27,10 +27,10 @@ export class TablePanel extends Component<Props, State> {
const { panelData, options, replaceVariables } = this.props; const { panelData, options, replaceVariables } = this.props;
this.state = { this.state = {
data: new SortedTableData(panelData.tableData), data: panelData.tableData,
}; };
this.renderer = new TableRenderer(options.styles, this.state.data, this.rowGetter, replaceVariables); this.renderer = new TableRenderer(options.styles, this.state.data.columns, this.rowGetter, replaceVariables);
} }
componentDidUpdate(prevProps: Props, prevState: State) { componentDidUpdate(prevProps: Props, prevState: State) {
...@@ -39,18 +39,23 @@ export class TablePanel extends Component<Props, State> { ...@@ -39,18 +39,23 @@ export class TablePanel extends Component<Props, State> {
// Update the renderer if options change // Update the renderer if options change
if (options !== prevProps.options) { if (options !== prevProps.options) {
this.renderer = new TableRenderer(options.styles, this.state.data, this.rowGetter, this.props.replaceVariables); this.renderer = new TableRenderer(
options.styles,
this.state.data.columns,
this.rowGetter,
this.props.replaceVariables
);
} }
// Update the data when data or sort changes // Update the data when data or sort changes
if (panelData !== prevProps.panelData || sortBy !== prevState.sortBy || sortDirection !== prevState.sortDirection) { if (panelData !== prevProps.panelData || sortBy !== prevState.sortBy || sortDirection !== prevState.sortDirection) {
const data = new SortedTableData(panelData.tableData, sortBy, sortDirection === 'DESC'); const data = sortTableData(panelData.tableData, sortBy, sortDirection === 'DESC');
this.setState({ data }); this.setState({ data });
} }
} }
rowGetter = ({ index }) => { rowGetter = ({ index }) => {
return this.state.data.getRow(index); return this.state.data.rows[index];
}; };
doSort = ({ sortBy }) => { doSort = ({ sortBy }) => {
...@@ -63,16 +68,13 @@ export class TablePanel extends Component<Props, State> { ...@@ -63,16 +68,13 @@ export class TablePanel extends Component<Props, State> {
sortBy = null; sortBy = null;
} }
// This will trigger sort via properties
console.log('SORT', sortBy, typeof sortBy, sortDirection);
this.setState({ sortBy, sortDirection }); this.setState({ sortBy, sortDirection });
}; };
headerRenderer = (header: TableHeaderProps): ReactNode => { headerRenderer = (header: TableHeaderProps): ReactNode => {
const dataKey = header.dataKey as any; // types say string, but it is number! const dataKey = header.dataKey as any; // types say string, but it is number!
const { data, sortBy, sortDirection } = this.state; const { data, sortBy, sortDirection } = this.state;
const col = data.getInfo()[dataKey]; const col = data.columns[dataKey];
return ( return (
<div> <div>
...@@ -83,7 +85,7 @@ export class TablePanel extends Component<Props, State> { ...@@ -83,7 +85,7 @@ export class TablePanel extends Component<Props, State> {
cellRenderer = (cell: TableCellProps) => { cellRenderer = (cell: TableCellProps) => {
const { columnIndex, rowIndex } = cell; const { columnIndex, rowIndex } = cell;
const row = this.state.data.getRow(rowIndex); const row = this.state.data.rows[rowIndex];
const val = row[columnIndex]; const val = row[columnIndex];
return this.renderer.renderCell(columnIndex, rowIndex, val); return this.renderer.renderCell(columnIndex, rowIndex, val);
}; };
...@@ -110,11 +112,11 @@ export class TablePanel extends Component<Props, State> { ...@@ -110,11 +112,11 @@ export class TablePanel extends Component<Props, State> {
overscanRowCount={10} overscanRowCount={10}
rowHeight={30} rowHeight={30}
rowGetter={this.rowGetter} rowGetter={this.rowGetter}
rowCount={data.getCount()} rowCount={data.rows.length}
sort={this.doSort} sort={this.doSort}
width={width} width={width}
> >
{data.getInfo().map((col, index) => { {data.columns.map((col, index) => {
return ( return (
<Column <Column
key={index} key={index}
......
public/app/plugins/panel/table2/renderer.tsx
...@@ -7,9 +7,8 @@ import { sanitize } from 'app/core/utils/text'; ...@@ -7,9 +7,8 @@ import { sanitize } from 'app/core/utils/text';
// Types // Types
import kbn from 'app/core/utils/kbn'; import kbn from 'app/core/utils/kbn';
import { getValueFormat, getColorFromHexRgbOrName, GrafanaThemeType, InterpolateFunction } from '@grafana/ui'; import { getValueFormat, getColorFromHexRgbOrName, GrafanaThemeType, InterpolateFunction, Column } from '@grafana/ui';
import { Style } from './types'; import { Style } from './types';
import { SortedTableData } from './sortable';
import { Index } from 'react-virtualized'; import { Index } from 'react-virtualized';
type CellFormatter = (v: any, style: Style) => string; type CellFormatter = (v: any, style: Style) => string;
...@@ -32,18 +31,18 @@ export class TableRenderer { ...@@ -32,18 +31,18 @@ export class TableRenderer {
constructor( constructor(
styles: Style[], styles: Style[],
data: SortedTableData, schema: Column[],
private rowGetter: (info: Index) => any[], // matches the table rowGetter private rowGetter: (info: Index) => any[], // matches the table rowGetter
private replaceVariables: InterpolateFunction private replaceVariables: InterpolateFunction
) { ) {
this.colorState = {}; this.colorState = {};
if (!data) { if (!schema) {
this.columns = []; this.columns = [];
return; return;
} }
this.columns = data.getInfo().map((col, index) => { this.columns = schema.map((col, index) => {
let title = col.text; let title = col.text;
let style: Style = null; let style: Style = null;
......
public/app/plugins/panel/table2/sortable.tsx
// Libraries // Libraries
import _ from 'lodash'; import isNumber from 'lodash/isNumber';
import { TableData } from '@grafana/ui'; import { TableData } from '@grafana/ui';
export class SortedTableData { export function sortTableData(data: TableData, sortIndex?: number, reverse = false): TableData {
rows: any[]; if (isNumber(sortIndex)) {
const copy = {
constructor(private data: TableData, sortIndex?: number, reverse?: boolean) { ...data,
if (_.isNumber(sortIndex)) { rows: data.rows.map((row, index) => {
// Make a copy of all the rows
this.rows = this.data.rows.map((row, index) => {
return row; return row;
}); }),
this.rows.sort((a, b) => { };
copy.rows.sort((a, b) => {
a = a[sortIndex]; a = a[sortIndex];
b = b[sortIndex]; b = b[sortIndex];
// Sort null or undefined separately from comparable values // Sort null or undefined separately from comparable values
...@@ -20,22 +20,10 @@ export class SortedTableData { ...@@ -20,22 +20,10 @@ export class SortedTableData {
}); });
if (reverse) { if (reverse) {
this.rows.reverse(); copy.rows.reverse();
}
} else {
this.rows = data.rows;
}
}
getInfo(): any[] {
return this.data.columns;
}
getRow(index: number): any[] {
return this.rows[index];
} }
getCount(): number { return copy;
return this.rows.length;
} }
return data;
} }
public/app/plugins/panel/table2/specs/renderer.test.ts
...@@ -6,7 +6,6 @@ import { Options } from '../types'; ...@@ -6,7 +6,6 @@ import { Options } from '../types';
import { PanelProps, LoadingState } from '@grafana/ui/src/types'; import { PanelProps, LoadingState } from '@grafana/ui/src/types';
import moment from 'moment'; import moment from 'moment';
import { TableRenderer } from '../renderer'; import { TableRenderer } from '../renderer';
import { SortedTableData } from '../sortable';
// TODO: this is commented out with *x* describe! // TODO: this is commented out with *x* describe!
// Essentially all the elements need to replace the <td> with <div> // Essentially all the elements need to replace the <td> with <div>
...@@ -204,9 +203,8 @@ xdescribe('when rendering table', () => { ...@@ -204,9 +203,8 @@ xdescribe('when rendering table', () => {
renderCounter: 1, renderCounter: 1,
options: panel, options: panel,
}; };
const data = new SortedTableData(table); const rowGetter = ({ index }) => table.rows[index];
const rowGetter = ({ index }) => data.getRow(index); const renderer = new TableRenderer(panel.styles, table.columns, rowGetter, props.replaceVariables);
const renderer = new TableRenderer(panel.styles, data, rowGetter, props.replaceVariables);
renderer.setTheme(null); renderer.setTheme(null);
it('time column should be formated', () => { it('time column should be formated', () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment