From 6974f5ab471cec90aa1776fb3111904d10c9c1e2 Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Wed, 14 Mar 2018 19:03:03 -0700 Subject: [PATCH 01/10] Add timeAxis toggle to tableOptions --- .../components/GraphOptionsTimeAxis.js | 19 ++++++++++--------- ui/src/dashboards/components/TableOptions.tsx | 18 ++++++++---------- ui/src/dashboards/constants/gaugeColors.js | 17 ----------------- .../dashboards/reducers/cellEditorOverlay.js | 9 +++++++-- ui/src/shared/constants/tableGraph.js | 2 +- 5 files changed, 26 insertions(+), 39 deletions(-) diff --git a/ui/src/dashboards/components/GraphOptionsTimeAxis.js b/ui/src/dashboards/components/GraphOptionsTimeAxis.js index ac6090b00d..26e43570cb 100644 --- a/ui/src/dashboards/components/GraphOptionsTimeAxis.js +++ b/ui/src/dashboards/components/GraphOptionsTimeAxis.js @@ -1,29 +1,30 @@ import React from 'react' import PropTypes from 'prop-types' -const VERTICAL = 'VERTICAL' -const HORIZONTAL = 'HORIZONTAL' -const GraphOptionsTimeAxis = ({TimeAxis, onToggleTimeAxis}) => +const GraphOptionsTimeAxis = ({verticalTimeAxis, onToggleVerticalTimeAxis}) =>
-const {func, string} = PropTypes +const {bool, func} = PropTypes -GraphOptionsTimeAxis.propTypes = {TimeAxis: string, onToggleTimeAxis: func} +GraphOptionsTimeAxis.propTypes = { + verticalTimeAxis: bool, + onToggleVerticalTimeAxis: func, +} export default GraphOptionsTimeAxis diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index d88770de75..5c43bbf527 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -16,7 +16,7 @@ import {MAX_THRESHOLDS} from 'src/dashboards/constants/gaugeColors' import { updateSingleStatType, updateSingleStatColors, - updateTableOptions, + updateTableOptions } from 'src/dashboards/actions/cellEditorOverlay' const formatColor = color => { @@ -79,7 +79,10 @@ export class TableOptions extends PureComponent { handleUpdateTableOptions({...tableOptions, timeFormat}) } - handleToggleTimeAxis = () => {} + onToggleVerticalTimeAxis = verticalTimeAxis => () => { + const {tableOptions, handleUpdateTableOptions} = this.props + handleUpdateTableOptions({...tableOptions, verticalTimeAxis}) + } handleToggleTextWrapping = () => {} @@ -90,14 +93,9 @@ export class TableOptions extends PureComponent { handleValidateColorValue = () => {} render() { - const { - singleStatColors, - singleStatType, - tableOptions: {timeFormat}, - } = this.props + const {singleStatColors, singleStatType, tableOptions: {timeFormat, verticalTimeAxis}} = this.props const disableAddThreshold = singleStatColors.length > MAX_THRESHOLDS - const TimeAxis = 'vertical' const sortedColors = _.sortBy(singleStatColors, color => color.value) const columns = [ @@ -128,8 +126,8 @@ export class TableOptions extends PureComponent { onTimeFormatChange={this.handleTimeFormatChange} /> { if (!colors || colors.length === 0) { return DEFAULT_SINGLESTAT_COLORS @@ -196,15 +188,6 @@ export const validateGaugeColors = colors => { return formattedColors } -export const initializeOptions = cellType => { - switch (cellType) { - case 'table': - return DEFAULT_TABLE_OPTIONS - default: - return {} - } -} - export const stringifyColorValues = colors => { return colors.map(color => ({...color, value: `${color.value}`})) } diff --git a/ui/src/dashboards/reducers/cellEditorOverlay.js b/ui/src/dashboards/reducers/cellEditorOverlay.js index a551d831d3..7dbd622925 100644 --- a/ui/src/dashboards/reducers/cellEditorOverlay.js +++ b/ui/src/dashboards/reducers/cellEditorOverlay.js @@ -1,3 +1,5 @@ +import _ from 'lodash' + import { SINGLE_STAT_TEXT, DEFAULT_SINGLESTAT_COLORS, @@ -5,9 +7,10 @@ import { validateGaugeColors, validateSingleStatColors, getSingleStatType, - initializeOptions, } from 'src/dashboards/constants/gaugeColors' +import {initializeOptions} from 'src/shared/constants/tableGraph' + export const initialState = { cell: null, singleStatType: SINGLE_STAT_TEXT, @@ -24,7 +27,9 @@ export default function cellEditorOverlay(state = initialState, action) { const singleStatColors = validateSingleStatColors(colors, singleStatType) const gaugeColors = validateGaugeColors(colors) - const tableOptions = cell.tableOptions || initializeOptions('table') + const tableOptions = _.get(cell, ['tableOptions', 'timeFormat'], '') + ? cell.tableOptions + : initializeOptions('table') return { ...state, diff --git a/ui/src/shared/constants/tableGraph.js b/ui/src/shared/constants/tableGraph.js index ebf97a7695..f7a16cec08 100644 --- a/ui/src/shared/constants/tableGraph.js +++ b/ui/src/shared/constants/tableGraph.js @@ -19,8 +19,8 @@ export const FORMAT_OPTIONS = [ ] export const DEFAULT_TABLE_OPTIONS = { - timeFormat: 'MM/DD/YYYY HH:mm:ss.ss', verticalTimeAxis: true, + timeFormat: TIME_FORMAT_DEFAULT, sortBy: {internalName: 'time', displayName: ''}, wrapping: 'truncate', columnNames: [{internalName: 'time', displayName: ''}], From 4142def2e120c8063fb393356b77dc612feea177 Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Fri, 16 Mar 2018 17:01:47 -0700 Subject: [PATCH 02/10] Implement flip data array --- ui/src/dashboards/components/GraphOptionsTimeAxis.js | 4 ++-- ui/src/shared/components/TableGraph.js | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/ui/src/dashboards/components/GraphOptionsTimeAxis.js b/ui/src/dashboards/components/GraphOptionsTimeAxis.js index 26e43570cb..e92e3ac295 100644 --- a/ui/src/dashboards/components/GraphOptionsTimeAxis.js +++ b/ui/src/dashboards/components/GraphOptionsTimeAxis.js @@ -6,13 +6,13 @@ const GraphOptionsTimeAxis = ({verticalTimeAxis, onToggleVerticalTimeAxis}) =>
  • Vertical
  • Horizontal diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index 32203cd27b..5038bcc143 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -33,7 +33,11 @@ class TableGraph extends Component { componentWillUpdate(nextProps) { const {data} = timeSeriesToTableGraph(nextProps.data) - this._data = data + if (_.get(this, ['props', 'tableOptions', 'verticalTimeAxis'], true)) { + this._data = data + return + } + this._data = _.unzip(data) } calcHoverTimeRow = (data, hoverTime) => From 144fca0b595a4a66645da771521b951e8bf645a6 Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Fri, 16 Mar 2018 17:16:19 -0700 Subject: [PATCH 03/10] Calculate hoverTimeIndex instead of row --- ui/src/shared/components/TableGraph.js | 33 +++++++++++++++++++------- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index 5038bcc143..1eeae575e9 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -40,12 +40,17 @@ class TableGraph extends Component { this._data = _.unzip(data) } - calcHoverTimeRow = (data, hoverTime) => - !isEmpty(data) && hoverTime !== NULL_HOVER_TIME - ? data.findIndex( - row => row[0] && _.isNumber(row[0]) && row[0] >= hoverTime - ) - : undefined + calcHoverTimeIndex = (data, hoverTime, verticalTimeAxis) => { + if (isEmpty(data) || hoverTime === NULL_HOVER_TIME) { + return undefined + } + if (verticalTimeAxis) { + return data.findIndex( + row => row[0] && _.isNumber(row[0]) && row[0] >= hoverTime + ) + } + return data[0].findIndex(d => d >= hoverTime) + } handleHover = (columnIndex, rowIndex) => () => { if (this.props.onSetHoverTime) { @@ -84,7 +89,9 @@ class TableGraph extends Component { const isFixedRow = rowIndex === 0 && columnIndex > 0 const isFixedColumn = rowIndex > 0 && columnIndex === 0 - const isTimeData = isFixedColumn + const isTimeData = tableOptions.verticalTimeAxis + ? isFixedColumn + : isFixedRow const isFixedCorner = rowIndex === 0 && columnIndex === 0 const isLastRow = rowIndex === rowCount - 1 const isLastColumn = columnIndex === columnCount - 1 @@ -143,6 +150,8 @@ class TableGraph extends Component { render() { const {hoveredColumnIndex, hoveredRowIndex} = this.state const {hoverTime, tableOptions, colors} = this.props + + const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true) const data = this._data const columnCount = _.get(data, ['0', 'length'], 0) const rowCount = data.length @@ -150,7 +159,11 @@ class TableGraph extends Component { const ROW_HEIGHT = 30 const tableWidth = this.gridContainer ? this.gridContainer.clientWidth : 0 const tableHeight = this.gridContainer ? this.gridContainer.clientHeight : 0 - const hoverTimeRow = this.calcHoverTimeRow(data, hoverTime) + const hoverTimeIndex = this.calcHoverTimeIndex( + data, + hoverTime, + verticalTimeAxis + ) return (
    Date: Fri, 16 Mar 2018 18:31:33 -0700 Subject: [PATCH 04/10] Find time data in proper row or col --- ui/src/shared/components/TableGraph.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index 1eeae575e9..5ccf5129fd 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -54,7 +54,10 @@ class TableGraph extends Component { handleHover = (columnIndex, rowIndex) => () => { if (this.props.onSetHoverTime) { - this.props.onSetHoverTime(this._data[rowIndex][0].toString()) + const hoverTime = this.props.tableOptions.verticalTimeAxis + ? this._data[rowIndex][0] + : this._data[0][columnIndex] + this.props.onSetHoverTime(hoverTime.toString()) this.setState({ hoveredColumnIndex: columnIndex, hoveredRowIndex: rowIndex, @@ -97,6 +100,7 @@ class TableGraph extends Component { const isLastColumn = columnIndex === columnCount - 1 const isHighlighted = rowIndex === parent.props.scrollToRow || + columnIndex === parent.props.scrollToColumn || (rowIndex === hoveredRowIndex && hoveredRowIndex !== 0) || (columnIndex === hoveredColumnIndex && hoveredColumnIndex !== 0) const dataIsNumerical = _.isNumber(data[rowIndex][columnIndex]) @@ -189,8 +193,8 @@ class TableGraph extends Component { columnNames={ tableOptions ? tableOptions.columnNames : [TIME_COLUMN_DEFAULT] } - scrollToRow={verticalTimeAxis ? hoverTimeIndex : 0} - scrollToColumn={verticalTimeAxis ? 0 : hoverTimeIndex} + scrollToRow={verticalTimeAxis ? hoverTimeIndex : undefined} + scrollToColumn={verticalTimeAxis ? undefined : hoverTimeIndex} verticalTimeAxis={verticalTimeAxis} cellRenderer={this.cellRenderer} hoveredColumnIndex={hoveredColumnIndex} From c73a7f68ddd371544ce75e7f90c63d6f6062c304 Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Fri, 16 Mar 2018 18:52:30 -0700 Subject: [PATCH 05/10] Include table options in new default dashboard cell --- ui/src/dashboards/constants/index.js | 3 +++ ui/src/dashboards/reducers/cellEditorOverlay.js | 8 +++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/ui/src/dashboards/constants/index.js b/ui/src/dashboards/constants/index.js index 15ee95eed4..20404f3497 100644 --- a/ui/src/dashboards/constants/index.js +++ b/ui/src/dashboards/constants/index.js @@ -1,3 +1,5 @@ +import {DEFAULT_TABLE_OPTIONS} from 'src/shared/constants/tableGraph' + export const EMPTY_DASHBOARD = { id: 0, name: '', @@ -20,6 +22,7 @@ export const NEW_DEFAULT_DASHBOARD_CELL = { name: 'Untitled Cell', type: 'line', queries: [], + tableOptions: DEFAULT_TABLE_OPTIONS, } export const NEW_DASHBOARD = { diff --git a/ui/src/dashboards/reducers/cellEditorOverlay.js b/ui/src/dashboards/reducers/cellEditorOverlay.js index 0db0df0911..4629e89750 100644 --- a/ui/src/dashboards/reducers/cellEditorOverlay.js +++ b/ui/src/dashboards/reducers/cellEditorOverlay.js @@ -30,9 +30,11 @@ export default function cellEditorOverlay(state = initialState, action) { ) const gaugeColors = validateGaugeColors(colors) - const tableOptions = _.get(cell, ['tableOptions', 'timeFormat'], '') - ? cell.tableOptions - : initializeOptions('table') + const tableOptions = _.get( + cell, + 'tableOptions', + initializeOptions('table') + ) return { ...state, From 5102dac3c29a63ee61d272e656d2d7cb319d90f1 Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Fri, 16 Mar 2018 19:03:46 -0700 Subject: [PATCH 06/10] Fix column index finder --- ui/src/shared/components/TableGraph.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index 5ccf5129fd..23362d371c 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -49,7 +49,7 @@ class TableGraph extends Component { row => row[0] && _.isNumber(row[0]) && row[0] >= hoverTime ) } - return data[0].findIndex(d => d >= hoverTime) + return data[0].findIndex(d => _.isNumber(d) && d >= hoverTime) } handleHover = (columnIndex, rowIndex) => () => { From d9e3d0499d7483209692c70aaea2046c2f575eab Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Mon, 19 Mar 2018 11:15:05 -0700 Subject: [PATCH 07/10] Make unzipping data faster. --- ui/src/shared/components/TableGraph.js | 21 ++++++++++++--------- ui/src/utils/timeSeriesToDygraph.js | 6 ++++-- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index 23362d371c..64c8b8509f 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -32,12 +32,10 @@ class TableGraph extends Component { } componentWillUpdate(nextProps) { - const {data} = timeSeriesToTableGraph(nextProps.data) - if (_.get(this, ['props', 'tableOptions', 'verticalTimeAxis'], true)) { - this._data = data - return - } - this._data = _.unzip(data) + const {data, unzippedData} = timeSeriesToTableGraph(nextProps.data) + + this._data = data + this._unzippedData = unzippedData } calcHoverTimeIndex = (data, hoverTime, verticalTimeAxis) => { @@ -76,10 +74,11 @@ class TableGraph extends Component { } cellRenderer = ({columnIndex, rowIndex, key, parent, style}) => { - const data = this._data + const data = _.get(this.props, ['tableOptions', 'verticalTimeAxis'], true) + ? this._data + : this._unzippedData const {hoveredColumnIndex, hoveredRowIndex} = this.state const {colors} = this.props - const columnCount = _.get(data, ['0', 'length'], 0) const rowCount = data.length const {tableOptions} = this.props @@ -156,7 +155,11 @@ class TableGraph extends Component { const {hoverTime, tableOptions, colors} = this.props const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true) - const data = this._data + + const data = _.get(this.props, ['tableOptions', 'verticalTimeAxis'], true) + ? this._data + : this._unzippedData + const columnCount = _.get(data, ['0', 'length'], 0) const rowCount = data.length const COLUMN_WIDTH = 300 diff --git a/ui/src/utils/timeSeriesToDygraph.js b/ui/src/utils/timeSeriesToDygraph.js index a3a8b0f80a..b5d18c3cc9 100644 --- a/ui/src/utils/timeSeriesToDygraph.js +++ b/ui/src/utils/timeSeriesToDygraph.js @@ -177,9 +177,11 @@ export const timeSeriesToTableGraph = raw => { const labels = ['time', ...map(sortedLabels, ({label}) => label)] const tableData = map(sortedTimeSeries, ({time, values}) => [time, ...values]) - + const data = tableData.length ? [labels, ...tableData] : [[]] + const unzippedData = _.unzip(data) return { - data: tableData.length ? [labels, ...tableData] : [[]], + data, + unzippedData, } } From 55a0e1119fe0f4906a17281aff15592c5c7b4f23 Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Mon, 19 Mar 2018 11:49:23 -0700 Subject: [PATCH 08/10] More merge conflicts --- ui/src/dashboards/components/TableOptions.tsx | 62 ++----------------- 1 file changed, 6 insertions(+), 56 deletions(-) diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index fa9067a16f..b3cd59925e 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -50,34 +50,13 @@ export class TableOptions extends PureComponent { super(props) } -<<<<<<< HEAD - componentWillMount() { - const {queryConfigs, handleUpdateTableOptions, tableOptions} = this.props - const {columnNames} = tableOptions - const timeColumn = (columnNames && columnNames.find(c => c.internalName === 'time')) || TIME_COLUMN_DEFAULT - - const columns = [ - timeColumn, - ..._.flatten( - queryConfigs.map(qc => { - const {measurement, fields} = qc - return fields.map(f => { - const internalName = `${measurement}.${f.alias}` - const existing = columnNames.find(c => c.internalName === internalName) - return existing || {internalName, displayName: ''} - }) - }) - ) - ] -======= get columnNames() { const {tableOptions: {columnNames}} = this.props - return columnNames || [] } get timeColumn() { - return (this.columnNames.find(c => c.internalName === 'time')) || TIME_COLUMN_DEFAULT + return this.columnNames.find(c => c.internalName === 'time') || TIME_COLUMN_DEFAULT } get computedColumnNames() { @@ -87,30 +66,20 @@ export class TableOptions extends PureComponent { queryConfigs.map(({measurement, fields}) => { return fields.map(({alias}) => { const internalName = `${measurement}.${alias}` - const existing = this.columnNames.find( - c => c.internalName === internalName - ) + const existing = this.columnNames.find(c => c.internalName === internalName) return existing || {internalName, displayName: ''} }) - })) + }) + ) return [this.timeColumn, ...queryFields] } ->>>>>>> master componentWillMount() { const {handleUpdateTableOptions, tableOptions} = this.props handleUpdateTableOptions({...tableOptions, columnNames: this.computedColumnNames}) } - handleToggleSingleStatType = () => {} - - handleAddThreshold = () => {} - - handleDeleteThreshold = () => () => {} - - handleChooseColor = () => () => {} - handleChooseSortBy = option => { const {tableOptions, handleUpdateTableOptions} = this.props const sortBy = {displayName: option.text, internalName: option.key} @@ -138,24 +107,11 @@ export class TableOptions extends PureComponent { } render() { -<<<<<<< HEAD - const {tableOptions: {timeFormat, columnNames: columns, verticalTimeAxis}, onResetFocus} = this.props - - const tableSortByOptions = ['cpu.mean_usage_system', 'cpu.mean_usage_idle', 'cpu.mean_usage_user'].map(col => ({ - text: col -======= - const { - tableOptions: {timeFormat, columnNames: columns}, - onResetFocus, - tableOptions, - } = this.props - - const TimeAxis = 'vertical' + const {tableOptions: {timeFormat, columnNames: columns, verticalTimeAxis}, onResetFocus, tableOptions} = this.props const tableSortByOptions = this.computedColumnNames.map(col => ({ text: col.displayName || col.internalName, - key: col.internalName, ->>>>>>> master + key: col.internalName })) return ( @@ -165,20 +121,14 @@ export class TableOptions extends PureComponent {
    >>>>>> master /> - Date: Mon, 19 Mar 2018 14:38:21 -0700 Subject: [PATCH 09/10] Prettier changes --- ui/src/dashboards/components/TableOptions.tsx | 39 +++++++++++++++---- 1 file changed, 31 insertions(+), 8 deletions(-) diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index b3cd59925e..1a2da1067e 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -56,7 +56,10 @@ export class TableOptions extends PureComponent { } get timeColumn() { - return this.columnNames.find(c => c.internalName === 'time') || TIME_COLUMN_DEFAULT + return ( + this.columnNames.find(c => c.internalName === 'time') || + TIME_COLUMN_DEFAULT + ) } get computedColumnNames() { @@ -66,7 +69,9 @@ export class TableOptions extends PureComponent { queryConfigs.map(({measurement, fields}) => { return fields.map(({alias}) => { const internalName = `${measurement}.${alias}` - const existing = this.columnNames.find(c => c.internalName === internalName) + const existing = this.columnNames.find( + c => c.internalName === internalName + ) return existing || {internalName, displayName: ''} }) }) @@ -77,7 +82,10 @@ export class TableOptions extends PureComponent { componentWillMount() { const {handleUpdateTableOptions, tableOptions} = this.props - handleUpdateTableOptions({...tableOptions, columnNames: this.computedColumnNames}) + handleUpdateTableOptions({ + ...tableOptions, + columnNames: this.computedColumnNames + }) } handleChooseSortBy = option => { @@ -102,12 +110,18 @@ export class TableOptions extends PureComponent { handleColumnRename = column => { const {handleUpdateTableOptions, tableOptions} = this.props const {columnNames} = tableOptions - const updatedColumns = columnNames.map(op => (op.internalName === column.internalName ? column : op)) + const updatedColumns = columnNames.map( + op => (op.internalName === column.internalName ? column : op) + ) handleUpdateTableOptions({...tableOptions, columnNames: updatedColumns}) } render() { - const {tableOptions: {timeFormat, columnNames: columns, verticalTimeAxis}, onResetFocus, tableOptions} = this.props + const { + tableOptions: {timeFormat, columnNames: columns, verticalTimeAxis}, + onResetFocus, + tableOptions + } = this.props const tableSortByOptions = this.computedColumnNames.map(col => ({ text: col.displayName || col.internalName, @@ -115,11 +129,17 @@ export class TableOptions extends PureComponent { })) return ( - +
    Table Controls
    - + { onToggleTextWrapping={this.handleToggleTextWrapping} />
    - +
    From 29cce64b40f68c8a0adf78aa06767310ebd810a5 Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Mon, 19 Mar 2018 14:41:34 -0700 Subject: [PATCH 10/10] PR review changes --- ui/src/shared/components/TableGraph.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index f5b7925312..130e9b0af1 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -22,6 +22,7 @@ class TableGraph extends Component { super(props) this.state = { data: [[]], + unzippedData: [[]], hoveredColumnIndex: NULL_COLUMN_INDEX, hoveredRowIndex: NULL_ROW_INDEX, sortByColumnIndex: -1, @@ -55,17 +56,18 @@ class TableGraph extends Component { } handleHover = (columnIndex, rowIndex) => () => { - if (this.props.onSetHoverTime) { - const {data} = this.state - const hoverTime = this.props.tableOptions.verticalTimeAxis + const {onSetHoverTime, tableOptions} = this.props + const {data} = this.state + if (onSetHoverTime) { + const hoverTime = tableOptions.verticalTimeAxis ? data[rowIndex][0] : data[0][columnIndex] - this.props.onSetHoverTime(hoverTime.toString()) - this.setState({ - hoveredColumnIndex: columnIndex, - hoveredRowIndex: rowIndex, - }) + onSetHoverTime(hoverTime.toString()) } + this.setState({ + hoveredColumnIndex: columnIndex, + hoveredRowIndex: rowIndex, + }) } handleMouseOut = () => {