From ba1312169abc6e0a4c151a76c8e772c51e0e6fc6 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Tue, 13 Mar 2018 14:45:01 -0700 Subject: [PATCH 1/7] add logic for renaming table columns in tableoptiomns --- .../GraphOptionsCustomizableColumn.js | 54 +++++---- .../GraphOptionsCustomizeColumns.js | 8 +- ui/src/dashboards/components/TableOptions.js | 60 +++++++--- ui/src/shared/components/InputClickToEdit.js | 108 ------------------ 4 files changed, 80 insertions(+), 150 deletions(-) delete mode 100644 ui/src/shared/components/InputClickToEdit.js diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableColumn.js b/ui/src/dashboards/components/GraphOptionsCustomizableColumn.js index e2ad8a95f..bf570ec4a 100644 --- a/ui/src/dashboards/components/GraphOptionsCustomizableColumn.js +++ b/ui/src/dashboards/components/GraphOptionsCustomizableColumn.js @@ -1,33 +1,45 @@ -import React from 'react' +import React, {Component} from 'react' import PropTypes from 'prop-types' import InputClickToEdit from 'shared/components/InputClickToEdit' -const GraphOptionsCustomizableColumn = ({ - originalColumnName, - newColumnName, - onColumnRename, -}) => { - return ( -
-
- {originalColumnName} +class GraphOptionsCustomizableColumn extends Component { + constructor(props) { + super(props) + + this.handleColumnRename = this.handleColumnRename.bind(this) + } + + handleColumnRename(rename) { + const {onColumnRename, internalName} = this.props + onColumnRename({internalName, displayName: rename}) + } + + render() { + const {internalName, displayName} = this.props + + return ( +
+
+ {internalName} +
+
- -
- ) + ) + } } + const {func, string} = PropTypes GraphOptionsCustomizableColumn.propTypes = { - originalColumnName: string, - newColumnName: string, + internalName: string, + displayName: string, onColumnRename: func, } diff --git a/ui/src/dashboards/components/GraphOptionsCustomizeColumns.js b/ui/src/dashboards/components/GraphOptionsCustomizeColumns.js index 510f9a06a..152e73425 100644 --- a/ui/src/dashboards/components/GraphOptionsCustomizeColumns.js +++ b/ui/src/dashboards/components/GraphOptionsCustomizeColumns.js @@ -12,8 +12,8 @@ const GraphOptionsCustomizeColumns = ({columns, onColumnRename}) => { return ( ) @@ -26,8 +26,8 @@ const {arrayOf, func, shape, string} = PropTypes GraphOptionsCustomizeColumns.propTypes = { columns: arrayOf( shape({ - name: string, - newName: string, + internalName: string, + displayName: string, }) ), onColumnRename: func, diff --git a/ui/src/dashboards/components/TableOptions.js b/ui/src/dashboards/components/TableOptions.js index 5113fc330..5411cb737 100644 --- a/ui/src/dashboards/components/TableOptions.js +++ b/ui/src/dashboards/components/TableOptions.js @@ -28,7 +28,34 @@ const formatColor = color => { } class TableOptions extends Component { - state = {TimeAxis: 'VERTICAL', TimeFormat: 'mm/dd/yyyy HH:mm:ss.ss'} + constructor(props) { + super(props) + + this.state = { + TimeAxis: 'VERTICAL', + TimeFormat: 'mm/dd/yyyy HH:mm:ss.ss', + columns: [], + } + } + + componentWillMount() { + const {queries} = this.props + let columns = [{internalName: 'time', displayName: ''}] + + for (let i = 0; i < queries.length; i++) { + const q = queries[i] + const measurement = q.queryConfig.measurement + const fields = q.queryConfig.fields + for (let j = 0; j < fields.length; j++) { + columns = [ + ...columns, + {internalName: `${measurement}.${fields[j].alias}`, displayName: ''}, + ] + } + } + + this.setState({columns}) + } handleToggleSingleStatType = () => {} @@ -46,7 +73,13 @@ class TableOptions extends Component { handleToggleTextWrapping = () => {} - handleColumnRename = () => {} + handleColumnRename = column => { + // NOTE: should use redux state instead of component state + const columns = this.state.columns.map( + op => (op.internalName === column.internalName ? column : op) + ) + this.setState({columns}) + } handleUpdateColorValue = () => {} @@ -59,27 +92,18 @@ class TableOptions extends Component { // axes: {y: {prefix, suffix}}, } = this.props - const {TimeFormat, TimeAxis} = this.state + const {TimeFormat, TimeAxis, columns} = this.state - const disableAddThreshold = singleStatColors.length > MAX_THRESHOLDS - - const sortedColors = _.sortBy(singleStatColors, color => color.value) - - const columns = [ - 'cpu.mean_usage_system', - 'cpu.mean_usage_idle', - 'cpu.mean_usage_user', - ].map(col => ({ - text: col, - name: col, - newName: '', - })) const tableSortByOptions = [ 'cpu.mean_usage_system', 'cpu.mean_usage_idle', 'cpu.mean_usage_user', ].map(col => ({text: col})) + const disableAddThreshold = singleStatColors.length > MAX_THRESHOLDS + + const sortedColors = _.sortBy(singleStatColors, color => color.value) + return ( ({ singleStatType, singleStatColors, axes, + queries, }) const mapDispatchToProps = dispatch => ({ diff --git a/ui/src/shared/components/InputClickToEdit.js b/ui/src/shared/components/InputClickToEdit.js deleted file mode 100644 index 6d6daa169..000000000 --- a/ui/src/shared/components/InputClickToEdit.js +++ /dev/null @@ -1,108 +0,0 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' - -class InputClickToEdit extends Component { - constructor(props) { - super(props) - - this.state = { - isEditing: null, - value: this.props.value, - } - } - - handleCancel = () => { - this.setState({ - isEditing: false, - value: this.props.value, - }) - } - - handleInputClick = () => { - this.setState({isEditing: true}) - } - - handleInputBlur = e => { - const {onUpdate, value} = this.props - - if (value !== e.target.value) { - onUpdate(e.target.value) - } - - this.setState({isEditing: false, value: e.target.value}) - } - - handleKeyDown = e => { - if (e.key === 'Enter') { - this.handleInputBlur(e) - } - if (e.key === 'Escape') { - this.handleCancel() - } - } - - handleFocus = e => { - e.target.select() - } - - render() { - const {isEditing, value} = this.state - const { - wrapperClass: wrapper, - disabled, - tabIndex, - placeholder, - appearAsNormalInput, - } = this.props - - const wrapperClass = `${wrapper}${appearAsNormalInput - ? ' input-cte__normal' - : ''}` - const defaultStyle = value ? 'input-cte' : 'input-cte__empty' - - return disabled - ?
-
- {value} -
-
- :
- {isEditing - ? (this.inputRef = r)} - tabIndex={tabIndex} - spellCheck={false} - /> - :
- {value || placeholder} - {appearAsNormalInput || } -
} -
- } -} - -const {func, bool, number, string} = PropTypes - -InputClickToEdit.propTypes = { - wrapperClass: string.isRequired, - value: string, - onUpdate: func.isRequired, - disabled: bool, - tabIndex: number, - placeholder: string, - appearAsNormalInput: bool, -} - -export default InputClickToEdit From 5b62395e6552a46724944077ed48e89c5651169f Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Tue, 13 Mar 2018 16:02:07 -0700 Subject: [PATCH 2/7] update GraphOptionsCustomizableColumn to typescript and create component test for it --- ....js => GraphOptionsCustomizableColumn.tsx} | 26 ++++---- .../GraphOptionsCustomizableColumn.test.tsx | 62 +++++++++++++++++++ 2 files changed, 76 insertions(+), 12 deletions(-) rename ui/src/dashboards/components/{GraphOptionsCustomizableColumn.js => GraphOptionsCustomizableColumn.tsx} (68%) create mode 100644 ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableColumn.js b/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx similarity index 68% rename from ui/src/dashboards/components/GraphOptionsCustomizableColumn.js rename to ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx index bf570ec4a..cfed2453a 100644 --- a/ui/src/dashboards/components/GraphOptionsCustomizableColumn.js +++ b/ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx @@ -1,9 +1,19 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' +import React, {PureComponent} from 'react' -import InputClickToEdit from 'shared/components/InputClickToEdit' +import InputClickToEdit from 'src/shared/components/InputClickToEdit' -class GraphOptionsCustomizableColumn extends Component { +type Column = { + internalName: string + displayName: string +} + +interface Props { + internalName: string + displayName: string + onColumnRename: (column: Column) => void +} + +class GraphOptionsCustomizableColumn extends PureComponent { constructor(props) { super(props) @@ -35,12 +45,4 @@ class GraphOptionsCustomizableColumn extends Component { } } -const {func, string} = PropTypes - -GraphOptionsCustomizableColumn.propTypes = { - internalName: string, - displayName: string, - onColumnRename: func, -} - export default GraphOptionsCustomizableColumn diff --git a/ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx b/ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx new file mode 100644 index 000000000..477807e29 --- /dev/null +++ b/ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx @@ -0,0 +1,62 @@ +import React from 'react' + +import GraphOptionsCustomizableColumn from 'src/dashboards/components/GraphOptionsCustomizableColumn' +import InputClickToEdit from 'src/shared/components/InputClickToEdit' + +import {shallow} from 'enzyme' + +const setup = (override = {}) => { + const props = { + internalName: '', + displayName: '', + onColumnRename: () => {}, + ...override, + } + + const wrapper = shallow() + const instance = wrapper.instance() as GraphOptionsCustomizableColumn + + return {wrapper, props, instance} +} + +describe('Dashboards.Components.GraphOptionsCustomizableColumn', () => { + describe('rendering', () => { + it('displays both label div and InputClickToEdit', () => { + const {wrapper} = setup() + const label = wrapper.find('div').last() + const input = wrapper.find(InputClickToEdit) + + expect(label.exists()).toBe(true) + expect(input.exists()).toBe(true) + }) + + describe('when there is an internalName', () => { + it('displays the value', () => { + const internalName = 'test' + const {wrapper} = setup({internalName}) + const label = wrapper.find('div').last() + expect(label.exists()).toBe(true) + expect(label.children().contains(internalName)).toBe(true) + }) + }) + }) + + describe('instance methods', () => { + describe('#handleColumnRename', () => { + it('calls onColumnRename once', () => { + const onColumnRename = jest.fn() + const internalName = 'test' + const {instance} = setup({onColumnRename, internalName}) + const rename = 'TEST' + + instance.handleColumnRename(rename) + + expect(onColumnRename).toHaveBeenCalledTimes(1) + expect(onColumnRename).toHaveBeenCalledWith({ + internalName, + displayName: rename, + }) + }) + }) + }) +}) From cc7422ad93529f06957b319a778c51698f9bc5e1 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Wed, 14 Mar 2018 17:46:42 -0700 Subject: [PATCH 3/7] update columnNames in the redux store and connect them to TableGraphs --- ui/src/dashboards/components/TableOptions.tsx | 37 ++++++++++--------- ui/src/shared/components/TableGraph.js | 18 ++++++++- ui/src/shared/constants/tableGraph.js | 6 ++- .../components/TableOptions.test.tsx | 1 - 4 files changed, 39 insertions(+), 23 deletions(-) diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index d5c04eb0b..b6622731c 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -18,6 +18,7 @@ import { updateSingleStatColors, updateTableOptions, } from 'src/dashboards/actions/cellEditorOverlay' +import {TIME_COLUMN_DEFAULT} from 'src/shared/constants/tableGraph' type Color = { type: string @@ -60,40 +61,40 @@ interface Props { tableOptions: Options } -interface State { - columns: TableColumn[] -} - const formatColor = color => { const {hex, name} = color return {hex, name} } -export class TableOptions extends PureComponent { +export class TableOptions extends PureComponent { constructor(props) { super(props) - - this.state = { - columns: [], - } } componentWillMount() { - const {queryConfigs} = this.props - let columns = [{internalName: 'time', displayName: ''}] + const {queryConfigs, handleUpdateTableOptions, tableOptions} = this.props + const {columnNames} = tableOptions + const timeColumn = + columnNames.find(c => c.internalName === 'time') || TIME_COLUMN_DEFAULT + let columns = [timeColumn] for (let i = 0; i < queryConfigs.length; i++) { const q = queryConfigs[i] const measurement = q.measurement const fields = q.fields for (let j = 0; j < fields.length; j++) { + const internalName = `${measurement}.${fields[j].alias}` + const existingColumn = columnNames.find( + c => c.internalName === internalName + ) columns = [ ...columns, - {internalName: `${measurement}.${fields[j].alias}`, displayName: ''}, + existingColumn || {internalName, displayName: ''}, ] } } - this.setState({columns}) + + handleUpdateTableOptions({...tableOptions, columnNames: columns}) } handleToggleSingleStatType = () => {} @@ -116,11 +117,12 @@ export class TableOptions extends PureComponent { handleToggleTextWrapping = () => {} handleColumnRename = column => { - const {columns} = this.state - const updatedColumns = columns.map( + const {handleUpdateTableOptions, tableOptions} = this.props + const {columnNames} = tableOptions + const updatedColumns = columnNames.map( op => (op.internalName === column.internalName ? column : op) ) - this.setState({columns: updatedColumns}) + handleUpdateTableOptions({...tableOptions, columnNames: updatedColumns}) } handleUpdateColorValue = () => {} @@ -131,10 +133,9 @@ export class TableOptions extends PureComponent { const { singleStatColors, singleStatType, - tableOptions: {timeFormat}, + tableOptions: {timeFormat, columnNames: columns}, } = this.props - const {columns} = this.state const disableAddThreshold = singleStatColors.length > MAX_THRESHOLDS const TimeAxis = 'vertical' const sortedColors = _.sortBy(singleStatColors, color => color.value) diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index d3a400b4c..ed31ed787 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -9,6 +9,7 @@ import { NULL_ROW_INDEX, NULL_HOVER_TIME, TIME_FORMAT_DEFAULT, + TIME_COLUMN_DEFAULT, } from 'src/shared/constants/tableGraph' import {MultiGrid} from 'react-virtualized' @@ -71,6 +72,9 @@ class TableGraph extends Component { const timeFormat = tableOptions ? tableOptions.timeFormat : TIME_FORMAT_DEFAULT + const columnNames = tableOptions + ? tableOptions.columnNames + : [TIME_COLUMN_DEFAULT] const isFixedRow = rowIndex === 0 && columnIndex > 0 const isFixedColumn = rowIndex > 0 && columnIndex === 0 @@ -94,6 +98,13 @@ class TableGraph extends Component { 'table-graph-cell__numerical': dataIsNumerical, }) + const cellData = data[rowIndex][columnIndex] + const foundColumn = columnNames.find( + column => column.internalName === cellData + ) + const columnName = + foundColumn && (foundColumn.displayName || foundColumn.internalName) + return (
{isTimeData - ? `${moment(data[rowIndex][columnIndex]).format(timeFormat)}` - : `${data[rowIndex][columnIndex]}`} + ? `${moment(cellData).format(timeFormat)}` + : columnName || `${cellData}`}
) } @@ -141,6 +152,9 @@ class TableGraph extends Component { timeFormat={ tableOptions ? tableOptions.timeFormat : TIME_FORMAT_DEFAULT } + columnNames={ + tableOptions ? tableOptions.columnNames : [TIME_COLUMN_DEFAULT] + } scrollToRow={hoverTimeRow} cellRenderer={this.cellRenderer} hoveredColumnIndex={hoveredColumnIndex} diff --git a/ui/src/shared/constants/tableGraph.js b/ui/src/shared/constants/tableGraph.js index ebf97a769..9c87cc65e 100644 --- a/ui/src/shared/constants/tableGraph.js +++ b/ui/src/shared/constants/tableGraph.js @@ -6,6 +6,8 @@ export const NULL_HOVER_TIME = '0' export const TIME_FORMAT_DEFAULT = 'MM/DD/YYYY HH:mm:ss.ss' export const TIME_FORMAT_CUSTOM = 'Custom' +export const TIME_COLUMN_DEFAULT = {internalName: 'time', displayName: ''} + export const FORMAT_OPTIONS = [ {text: TIME_FORMAT_DEFAULT}, {text: 'MM/DD/YYYY HH:mm'}, @@ -21,9 +23,9 @@ export const FORMAT_OPTIONS = [ export const DEFAULT_TABLE_OPTIONS = { timeFormat: 'MM/DD/YYYY HH:mm:ss.ss', verticalTimeAxis: true, - sortBy: {internalName: 'time', displayName: ''}, + sortBy: TIME_COLUMN_DEFAULT, wrapping: 'truncate', - columnNames: [{internalName: 'time', displayName: ''}], + columnNames: [TIME_COLUMN_DEFAULT], } export const initializeOptions = cellType => { diff --git a/ui/test/dashboards/components/TableOptions.test.tsx b/ui/test/dashboards/components/TableOptions.test.tsx index ab79760c9..df68271f9 100644 --- a/ui/test/dashboards/components/TableOptions.test.tsx +++ b/ui/test/dashboards/components/TableOptions.test.tsx @@ -28,7 +28,6 @@ const setup = (override = {}) => { wrapping: '', columnNames: [], }, - queries: [], ...override, } From 5f13493e9b1931adcf3b69c993b49983a5a89952 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Wed, 14 Mar 2018 18:03:31 -0700 Subject: [PATCH 4/7] convert GraphOptionsCustomizeColumns to typescript --- ...ns.js => GraphOptionsCustomizeColumns.tsx} | 29 ++++++++++--------- ui/src/dashboards/components/TableOptions.tsx | 3 +- 2 files changed, 17 insertions(+), 15 deletions(-) rename ui/src/dashboards/components/{GraphOptionsCustomizeColumns.js => GraphOptionsCustomizeColumns.tsx} (62%) diff --git a/ui/src/dashboards/components/GraphOptionsCustomizeColumns.js b/ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx similarity index 62% rename from ui/src/dashboards/components/GraphOptionsCustomizeColumns.js rename to ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx index 152e73425..3d4e44759 100644 --- a/ui/src/dashboards/components/GraphOptionsCustomizeColumns.js +++ b/ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx @@ -1,10 +1,22 @@ -import React from 'react' -import PropTypes from 'prop-types' +import React, {SFC} from 'react' import GraphOptionsCustomizableColumn from 'src/dashboards/components/GraphOptionsCustomizableColumn' import uuid from 'uuid' -const GraphOptionsCustomizeColumns = ({columns, onColumnRename}) => { +type Column = { + internalName: string + displayName: string +} + +interface Props { + columns: Column[] + onColumnRename: (column: Column) => void +} + +const GraphOptionsCustomizeColumns: SFC = ({ + columns, + onColumnRename, +}) => { return (
@@ -21,16 +33,5 @@ const GraphOptionsCustomizeColumns = ({columns, onColumnRename}) => {
) } -const {arrayOf, func, shape, string} = PropTypes - -GraphOptionsCustomizeColumns.propTypes = { - columns: arrayOf( - shape({ - internalName: string, - displayName: string, - }) - ), - onColumnRename: func, -} export default GraphOptionsCustomizeColumns diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index b6622731c..8756bd3f6 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -75,7 +75,8 @@ export class TableOptions extends PureComponent { const {queryConfigs, handleUpdateTableOptions, tableOptions} = this.props const {columnNames} = tableOptions const timeColumn = - columnNames.find(c => c.internalName === 'time') || TIME_COLUMN_DEFAULT + (columnNames && columnNames.find(c => c.internalName === 'time')) || + TIME_COLUMN_DEFAULT let columns = [timeColumn] for (let i = 0; i < queryConfigs.length; i++) { From 9d9525e8217fc088d03d2c271073d2db3c6199e4 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Wed, 14 Mar 2018 18:17:32 -0700 Subject: [PATCH 5/7] create component test for GraphOptionsCustomizeColumns --- .../GraphOptionsCustomizeColumns.test.tsx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx diff --git a/ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx b/ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx new file mode 100644 index 000000000..a21e6140d --- /dev/null +++ b/ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +import GraphOptionsCustomizeColumns from 'src/dashboards/components/GraphOptionsCustomizeColumns' +import GraphOptionsCustomizableColumn from 'src/dashboards/components/GraphOptionsCustomizableColumn' +import {TIME_COLUMN_DEFAULT} from 'src/shared/constants/tableGraph' + +import {shallow} from 'enzyme' + +const setup = (override = {}) => { + const props = { + columns: [], + onColumnRename: () => {}, + ...override, + } + + const wrapper = shallow() + + return {wrapper, props} +} + +describe('Dashboards.Components.GraphOptionsCustomizeColumns', () => { + describe('rendering', () => { + it('displays label and all columns passed in', () => { + const columns = [TIME_COLUMN_DEFAULT] + const {wrapper} = setup(columns) + const label = wrapper.find('label') + const customizableColumns = wrapper.find(GraphOptionsCustomizableColumn) + + expect(label.exists()).toBe(true) + expect(customizableColumns.exists()).toBe(true) + expect(customizableColumns.length).toBe(columns.length) + }) + }) +}) From a7e820f03807d8f5d1d1feb415350385f817bc8b Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Wed, 14 Mar 2018 18:21:53 -0700 Subject: [PATCH 6/7] fix typo in CustomizeColumns test --- .../dashboards/components/GraphOptionsCustomizeColumns.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx b/ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx index a21e6140d..23dee525e 100644 --- a/ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx +++ b/ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx @@ -22,7 +22,7 @@ describe('Dashboards.Components.GraphOptionsCustomizeColumns', () => { describe('rendering', () => { it('displays label and all columns passed in', () => { const columns = [TIME_COLUMN_DEFAULT] - const {wrapper} = setup(columns) + const {wrapper} = setup({columns}) const label = wrapper.find('label') const customizableColumns = wrapper.find(GraphOptionsCustomizableColumn) From fbdeaee42d84dd9fdc47fe23049e9d16c74fcbe0 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Thu, 15 Mar 2018 11:19:24 -0700 Subject: [PATCH 7/7] update constructing column names --- ui/src/dashboards/components/TableOptions.tsx | 31 +++++++++---------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index 8756bd3f6..65bf0f56a 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -77,23 +77,22 @@ export class TableOptions extends PureComponent { const timeColumn = (columnNames && columnNames.find(c => c.internalName === 'time')) || TIME_COLUMN_DEFAULT - let columns = [timeColumn] - for (let i = 0; i < queryConfigs.length; i++) { - const q = queryConfigs[i] - const measurement = q.measurement - const fields = q.fields - for (let j = 0; j < fields.length; j++) { - const internalName = `${measurement}.${fields[j].alias}` - const existingColumn = columnNames.find( - c => c.internalName === internalName - ) - columns = [ - ...columns, - existingColumn || {internalName, displayName: ''}, - ] - } - } + 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: ''} + }) + }) + ), + ] handleUpdateTableOptions({...tableOptions, columnNames: columns}) }