From 61b159f3580a023707ed6d8d972f4b9083159f65 Mon Sep 17 00:00:00 2001 From: Brandon Farmer Date: Wed, 14 Mar 2018 15:14:00 -0700 Subject: [PATCH 1/5] Make query configs available in table options on visualization tab --- ui/src/dashboards/components/DisplayOptions.js | 8 +++++--- ui/src/dashboards/components/TableOptions.tsx | 11 +++++++++++ ui/test/dashboards/components/TableOptions.test.tsx | 1 + 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/ui/src/dashboards/components/DisplayOptions.js b/ui/src/dashboards/components/DisplayOptions.js index 13f30ceb9c..8c08f21eca 100644 --- a/ui/src/dashboards/components/DisplayOptions.js +++ b/ui/src/dashboards/components/DisplayOptions.js @@ -42,7 +42,7 @@ class DisplayOptions extends Component { staticLegend, onToggleStaticLegend, onResetFocus, - dataLabels, + queryConfigs, } = this.props switch (type) { case 'gauge': @@ -51,7 +51,10 @@ class DisplayOptions extends Component { return case 'table': return ( - + ) default: return ( @@ -90,7 +93,6 @@ DisplayOptions.propTypes = { onToggleStaticLegend: func.isRequired, staticLegend: bool, onResetFocus: func.isRequired, - dataLabels: arrayOf(string), } const mapStateToProps = ({cellEditorOverlay: {cell, cell: {axes}}}) => ({ diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index f6433e9862..ff549258f7 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -36,7 +36,18 @@ interface Options { fixFirstColumn: boolean } +type QueryConfig = { + measurement: string + fields: [ + { + alias: string + value: string + } + ] +} + interface Props { + queryConfigs: QueryConfig[] handleUpdateTableOptions: (options: Options) => void tableOptions: Options onResetFocus: () => void diff --git a/ui/test/dashboards/components/TableOptions.test.tsx b/ui/test/dashboards/components/TableOptions.test.tsx index c016ceacf2..425af9564b 100644 --- a/ui/test/dashboards/components/TableOptions.test.tsx +++ b/ui/test/dashboards/components/TableOptions.test.tsx @@ -15,6 +15,7 @@ const defaultProps = { dataLabels: [], handleUpdateTableOptions: () => {}, onResetFocus: () => {}, + queryConfigs: [], tableOptions: { columnNames: [], fieldNames: [], From db03a3cd712deb148203c6105608bb710b66a41d Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Mon, 9 Apr 2018 12:07:33 -0700 Subject: [PATCH 2/5] Remove dataLabels and just use queryConfigs --- .../components/CellEditorOverlay.js | 8 - .../GraphOptionsCustomizableField.tsx | 20 +-- ui/src/dashboards/components/TableOptions.tsx | 158 +++++++++--------- ui/src/dashboards/components/Visualization.js | 3 - ui/src/shared/components/RefreshingGraph.js | 3 - ui/src/shared/components/TableGraph.js | 10 +- ui/src/utils/timeSeriesTransformers.js | 1 - .../components/TableOptions.test.tsx | 41 ----- 8 files changed, 88 insertions(+), 156 deletions(-) diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js index 8aa3b4fb8c..3c8eafaa89 100644 --- a/ui/src/dashboards/components/CellEditorOverlay.js +++ b/ui/src/dashboards/components/CellEditorOverlay.js @@ -49,7 +49,6 @@ class CellEditorOverlay extends Component { activeQueryIndex: 0, isDisplayOptionsTabActive: false, staticLegend: IS_STATIC_LEGEND(legend), - dataLabels: [], } } @@ -253,10 +252,6 @@ class CellEditorOverlay extends Component { this.overlayRef.focus() } - setDataLabels = dataLabels => { - this.setState({dataLabels}) - } - render() { const { onCancel, @@ -271,7 +266,6 @@ class CellEditorOverlay extends Component { isDisplayOptionsTabActive, queriesWorkingDraft, staticLegend, - dataLabels, } = this.state const queryActions = { @@ -304,7 +298,6 @@ class CellEditorOverlay extends Component { queryConfigs={queriesWorkingDraft} editQueryStatus={editQueryStatus} staticLegend={staticLegend} - setDataLabels={this.setDataLabels} /> ) : ( { this.handleToggleVisible = this.handleToggleVisible.bind(this) } - public handleFieldRename(rename: string) { - const {onFieldUpdate, internalName, visible} = this.props - onFieldUpdate({internalName, displayName: rename, visible}) - } - - public handleToggleVisible() { - const {onFieldUpdate, internalName, displayName, visible} = this.props - onFieldUpdate({internalName, displayName, visible: !visible}) - } - public render() { const {internalName, displayName, visible} = this.props @@ -65,6 +55,16 @@ class GraphOptionsCustomizableField extends PureComponent { ) } + + private handleFieldRename(rename: string) { + const {onFieldUpdate, internalName, visible} = this.props + onFieldUpdate({internalName, displayName: rename, visible}) + } + + private handleToggleVisible() { + const {onFieldUpdate, internalName, displayName, visible} = this.props + onFieldUpdate({internalName, displayName, visible: !visible}) + } } export default GraphOptionsCustomizableField diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index ff549258f7..317f615b28 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -36,7 +36,7 @@ interface Options { fixFirstColumn: boolean } -type QueryConfig = { +interface QueryConfig { measurement: string fields: [ { @@ -51,7 +51,6 @@ interface Props { handleUpdateTableOptions: (options: Options) => void tableOptions: Options onResetFocus: () => void - dataLabels: string[] } export class TableOptions extends PureComponent { @@ -59,79 +58,6 @@ export class TableOptions extends PureComponent { super(props) } - get fieldNames() { - const {tableOptions: {fieldNames}} = this.props - return fieldNames || [] - } - - get timeField() { - return ( - this.fieldNames.find(f => f.internalName === 'time') || TIME_FIELD_DEFAULT - ) - } - - get computedFieldNames() { - const {dataLabels} = this.props - - return _.isEmpty(dataLabels) - ? [this.timeField] - : dataLabels.map(label => { - const existing = this.fieldNames.find(f => f.internalName === label) - return ( - existing || {internalName: label, displayName: '', visible: true} - ) - }) - } - - public handleChooseSortBy = (option: Option) => { - const {tableOptions, handleUpdateTableOptions} = this.props - const sortBy = { - displayName: option.text === option.key ? '' : option.text, - internalName: option.key, - visible: true, - } - - handleUpdateTableOptions({...tableOptions, sortBy}) - } - - public handleTimeFormatChange = timeFormat => { - const {tableOptions, handleUpdateTableOptions} = this.props - handleUpdateTableOptions({...tableOptions, timeFormat}) - } - - public handleToggleVerticalTimeAxis = verticalTimeAxis => () => { - const {tableOptions, handleUpdateTableOptions} = this.props - handleUpdateTableOptions({...tableOptions, verticalTimeAxis}) - } - - public handleToggleFixFirstColumn = () => { - const {handleUpdateTableOptions, tableOptions} = this.props - const fixFirstColumn = !tableOptions.fixFirstColumn - handleUpdateTableOptions({...tableOptions, fixFirstColumn}) - } - - public handleFieldUpdate = field => { - const {handleUpdateTableOptions, tableOptions, dataLabels} = this.props - const {sortBy, fieldNames} = tableOptions - const fields = - fieldNames.length >= dataLabels.length - ? fieldNames - : this.computedFieldNames - const updatedFields = fields.map( - f => (f.internalName === field.internalName ? field : f) - ) - const updatedSortBy = - sortBy.internalName === field.internalName - ? {...sortBy, displayName: field.displayName} - : sortBy - - handleUpdateTableOptions({ - ...tableOptions, - fieldNames: updatedFields, - sortBy: updatedSortBy, - }) - } - public componentWillMount() { const {handleUpdateTableOptions, tableOptions} = this.props handleUpdateTableOptions({ @@ -141,14 +67,13 @@ export class TableOptions extends PureComponent { } public shouldComponentUpdate(nextProps) { - const {tableOptions, dataLabels} = this.props + const {tableOptions} = this.props const tableOptionsDifferent = !_.isEqual( tableOptions, nextProps.tableOptions ) - const dataLabelsDifferent = !_.isEqual(dataLabels, nextProps.dataLabels) - return tableOptionsDifferent || dataLabelsDifferent + return tableOptionsDifferent } public render() { @@ -163,8 +88,6 @@ export class TableOptions extends PureComponent { text: field.displayName || field.internalName, })) - const fields = fieldNames.length > 1 ? fieldNames : this.computedFieldNames - return ( { /> @@ -203,6 +126,79 @@ export class TableOptions extends PureComponent { ) } + + private get fieldNames() { + const {tableOptions: {fieldNames}} = this.props + return fieldNames || [] + } + + private get timeField() { + return ( + this.fieldNames.find(f => f.internalName === 'time') || TIME_FIELD_DEFAULT + ) + } + + private get computedFieldNames() { + const {queryConfigs} = this.props + const queryFields = _.flatten( + queryConfigs.map(({measurement, fields}) => { + return fields.map(({alias}) => { + const internalName = `${measurement}.${alias}` + const existing = this.fieldNames.find( + c => c.internalName === internalName + ) + return existing || {internalName, displayName: '', visible: true} + }) + }) + ) + + return [this.timeField, ...queryFields] + } + + private handleChooseSortBy = (option: Option) => { + const {tableOptions, handleUpdateTableOptions} = this.props + const sortBy = { + displayName: option.text === option.key ? '' : option.text, + internalName: option.key, + visible: true, + } + + handleUpdateTableOptions({...tableOptions, sortBy}) + } + + private handleTimeFormatChange = timeFormat => { + const {tableOptions, handleUpdateTableOptions} = this.props + handleUpdateTableOptions({...tableOptions, timeFormat}) + } + + private handleToggleVerticalTimeAxis = verticalTimeAxis => () => { + const {tableOptions, handleUpdateTableOptions} = this.props + handleUpdateTableOptions({...tableOptions, verticalTimeAxis}) + } + + private handleToggleFixFirstColumn = () => { + const {handleUpdateTableOptions, tableOptions} = this.props + const fixFirstColumn = !tableOptions.fixFirstColumn + handleUpdateTableOptions({...tableOptions, fixFirstColumn}) + } + + private handleFieldUpdate = field => { + const {handleUpdateTableOptions, tableOptions} = this.props + const {sortBy, fieldNames} = tableOptions + const updatedFields = fieldNames.map( + f => (f.internalName === field.internalName ? field : f) + ) + const updatedSortBy = + sortBy.internalName === field.internalName + ? {...sortBy, displayName: field.displayName} + : sortBy + + handleUpdateTableOptions({ + ...tableOptions, + fieldNames: updatedFields, + sortBy: updatedSortBy, + }) + } } const mapStateToProps = ({cellEditorOverlay: {cell: {tableOptions}}}) => ({ diff --git a/ui/src/dashboards/components/Visualization.js b/ui/src/dashboards/components/Visualization.js index 5fe725856f..82cf5ce831 100644 --- a/ui/src/dashboards/components/Visualization.js +++ b/ui/src/dashboards/components/Visualization.js @@ -24,7 +24,6 @@ const DashVisualization = ( staticLegend, thresholdsListColors, tableOptions, - setDataLabels, }, {source: {links: {proxy}}} ) => { @@ -50,7 +49,6 @@ const DashVisualization = ( editQueryStatus={editQueryStatus} resizerTopHeight={resizerTopHeight} staticLegend={staticLegend} - setDataLabels={setDataLabels} /> @@ -80,7 +78,6 @@ DashVisualization.propTypes = { gaugeColors: colorsNumberSchema, lineColors: colorsStringSchema, staticLegend: bool, - setDataLabels: func, } DashVisualization.contextTypes = { diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js index c3597b618d..6f89f0be89 100644 --- a/ui/src/shared/components/RefreshingGraph.js +++ b/ui/src/shared/components/RefreshingGraph.js @@ -25,7 +25,6 @@ const RefreshingGraph = ({ cellID, queries, tableOptions, - setDataLabels, templates, timeRange, cellHeight, @@ -101,7 +100,6 @@ const RefreshingGraph = ({ hoverTime={hoverTime} onSetHoverTime={onSetHoverTime} inView={inView} - setDataLabels={setDataLabels} /> ) } @@ -160,7 +158,6 @@ RefreshingGraph.propTypes = { cellID: string, inView: bool, tableOptions: shape({}), - setDataLabels: func, } RefreshingGraph.defaultProps = { diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index daa860cd7c..f0d71c3bcb 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -40,7 +40,6 @@ class TableGraph extends Component { data: [[]], processedData: [[]], sortedTimeVals: [], - labels: [], hoveredColumnIndex: NULL_ARRAY_INDEX, hoveredRowIndex: NULL_ARRAY_INDEX, sortField, @@ -51,7 +50,7 @@ class TableGraph extends Component { } componentWillReceiveProps(nextProps) { - const {labels, data} = timeSeriesToTableGraph(nextProps.data) + const {data} = timeSeriesToTableGraph(nextProps.data) if (_.isEmpty(data[0])) { return } @@ -64,13 +63,8 @@ class TableGraph extends Component { verticalTimeAxis, timeFormat, }, - setDataLabels, } = nextProps - if (setDataLabels) { - setDataLabels(labels) - } - let direction, sortFieldName if ( _.get(this.props, ['tableOptions', 'sortBy', 'internalName'], '') === @@ -99,7 +93,6 @@ class TableGraph extends Component { this.setState({ data, - labels, processedData, sortedTimeVals, sortField: sortFieldName, @@ -412,7 +405,6 @@ TableGraph.propTypes = { hoverTime: string, onSetHoverTime: func, colors: colorsStringSchema, - setDataLabels: func, } export default TableGraph diff --git a/ui/src/utils/timeSeriesTransformers.js b/ui/src/utils/timeSeriesTransformers.js index 3c576c69cc..3099deecf8 100644 --- a/ui/src/utils/timeSeriesTransformers.js +++ b/ui/src/utils/timeSeriesTransformers.js @@ -180,7 +180,6 @@ export const timeSeriesToTableGraph = raw => { const tableData = map(sortedTimeSeries, ({time, values}) => [time, ...values]) const data = tableData.length ? [labels, ...tableData] : [[]] return { - labels, data, } } diff --git a/ui/test/dashboards/components/TableOptions.test.tsx b/ui/test/dashboards/components/TableOptions.test.tsx index 425af9564b..dfaf085bb4 100644 --- a/ui/test/dashboards/components/TableOptions.test.tsx +++ b/ui/test/dashboards/components/TableOptions.test.tsx @@ -12,7 +12,6 @@ import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeTo import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph' const defaultProps = { - dataLabels: [], handleUpdateTableOptions: () => {}, onResetFocus: () => {}, queryConfigs: [], @@ -92,46 +91,6 @@ describe('Dashboards.Components.TableOptions', () => { }) }) }) - - describe('computedFieldNames', () => { - describe('if dataLabels are not passed in', () => { - it('returns an array of the time column', () => { - const {instance} = setup() - - expect(instance.computedFieldNames).toEqual([TIME_FIELD_DEFAULT]) - }) - }) - - describe('if dataLabels are passed in', () => { - describe('if dataLabel has a matching fieldName', () => { - it('returns array with the matching fieldName', () => { - const fieldNames = [ - {internalName: 'foo', displayName: 'bar', visible: true}, - ] - const dataLabels = ['foo'] - const {instance} = setup({tableOptions: {fieldNames}, dataLabels}) - - expect(instance.computedFieldNames).toEqual(fieldNames) - }) - }) - - describe('if dataLabel does not have a matching fieldName', () => { - it('returns array with a new fieldName created for it', () => { - const fieldNames = [ - {internalName: 'time', displayName: 'bar', visible: true}, - ] - const unmatchedLabel = 'foo' - const dataLabels = ['time', unmatchedLabel] - const {instance} = setup({tableOptions: {fieldNames}, dataLabels}) - - expect(instance.computedFieldNames).toEqual([ - ...fieldNames, - {internalName: unmatchedLabel, displayName: '', visible: true}, - ]) - }) - }) - }) - }) }) describe('rendering', () => { From 2e1860336e78be784d2065c5d76fba28f7197369 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Mon, 9 Apr 2018 12:52:20 -0700 Subject: [PATCH 3/5] Fix tests after removing datalabels and making instance methods private --- .../GraphOptionsCustomizableField.test.tsx | 43 --------------- .../components/TableOptions.test.tsx | 55 ------------------- ui/test/utils/timeSeriesTransformers.test.js | 52 ------------------ 3 files changed, 150 deletions(-) diff --git a/ui/test/dashboards/components/GraphOptionsCustomizableField.test.tsx b/ui/test/dashboards/components/GraphOptionsCustomizableField.test.tsx index 52dc1d214b..631c075cef 100644 --- a/ui/test/dashboards/components/GraphOptionsCustomizableField.test.tsx +++ b/ui/test/dashboards/components/GraphOptionsCustomizableField.test.tsx @@ -72,47 +72,4 @@ describe('Dashboards.Components.GraphOptionsCustomizableField', () => { }) }) }) - - describe('instance methods', () => { - describe('#handleFieldUpdate', () => { - it('calls onFieldUpdate once with internalName, new name, and visible', () => { - const onFieldUpdate = jest.fn() - const internalName = 'test' - const {instance, props: {visible}} = setup({ - internalName, - onFieldUpdate, - }) - const rename = 'TEST' - - instance.handleFieldRename(rename) - - expect(onFieldUpdate).toHaveBeenCalledTimes(1) - expect(onFieldUpdate).toHaveBeenCalledWith({ - displayName: rename, - internalName, - visible, - }) - }) - }) - - describe('#handleToggleVisible', () => { - it('calls onFieldUpdate once with !visible, internalName, and displayName', () => { - const onFieldUpdate = jest.fn() - const visible = true - const {instance, props: {internalName, displayName}} = setup({ - onFieldUpdate, - visible, - }) - - instance.handleToggleVisible() - - expect(onFieldUpdate).toHaveBeenCalledTimes(1) - expect(onFieldUpdate).toHaveBeenCalledWith({ - displayName, - internalName, - visible: !visible, - }) - }) - }) - }) }) diff --git a/ui/test/dashboards/components/TableOptions.test.tsx b/ui/test/dashboards/components/TableOptions.test.tsx index dfaf085bb4..e65fbe0310 100644 --- a/ui/test/dashboards/components/TableOptions.test.tsx +++ b/ui/test/dashboards/components/TableOptions.test.tsx @@ -9,7 +9,6 @@ import {TableOptions} from 'src/dashboards/components/TableOptions' import FancyScrollbar from 'src/shared/components/FancyScrollbar' import ThresholdsList from 'src/shared/components/ThresholdsList' import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeToggle' -import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph' const defaultProps = { handleUpdateTableOptions: () => {}, @@ -39,60 +38,6 @@ const setup = (override = {}) => { } describe('Dashboards.Components.TableOptions', () => { - describe('getters', () => { - describe('fieldNames', () => { - describe('if fieldNames are passed in tableOptions as props', () => { - it('returns fieldNames', () => { - const fieldNames = [ - {internalName: 'time', displayName: 'TIME', visible: true}, - {internalName: 'foo', displayName: 'BAR', visible: false}, - ] - const {instance} = setup({tableOptions: {fieldNames}}) - - expect(instance.fieldNames).toBe(fieldNames) - }) - }) - - describe('if fieldNames are not passed in tableOptions as props', () => { - it('returns empty array', () => { - const {instance} = setup() - - expect(instance.fieldNames).toEqual([]) - }) - }) - }) - - describe('timeField', () => { - describe('if time field in fieldNames', () => { - it('returns time field', () => { - const timeField = { - internalName: 'time', - displayName: 'TIME', - visible: true, - } - const fieldNames = [ - timeField, - {internalName: 'foo', displayName: 'BAR', visible: false}, - ] - const {instance} = setup({tableOptions: {fieldNames}}) - - expect(instance.timeField).toBe(timeField) - }) - }) - - describe('if time field not in fieldNames', () => { - it('returns default time field', () => { - const fieldNames = [ - {internalName: 'foo', displayName: 'BAR', visible: false}, - ] - const {instance} = setup({tableOptions: {fieldNames}}) - - expect(instance.timeField).toBe(TIME_FIELD_DEFAULT) - }) - }) - }) - }) - describe('rendering', () => { it('should render all components', () => { const {wrapper} = setup() diff --git a/ui/test/utils/timeSeriesTransformers.test.js b/ui/test/utils/timeSeriesTransformers.test.js index f55c75f7b7..b50a20d599 100644 --- a/ui/test/utils/timeSeriesTransformers.test.js +++ b/ui/test/utils/timeSeriesTransformers.test.js @@ -351,58 +351,6 @@ describe('timeSeriesToTableGraph', () => { expect(actual.data).toEqual(expected) }) - it('returns labels starting with time and then alphabetized', () => { - const influxResponse = [ - { - response: { - results: [ - { - series: [ - { - name: 'mb', - columns: ['time', 'f1'], - values: [[1000, 1], [2000, 2]], - }, - ], - }, - { - series: [ - { - name: 'ma', - columns: ['time', 'f1'], - values: [[1000, 1], [2000, 2]], - }, - ], - }, - { - series: [ - { - name: 'mc', - columns: ['time', 'f2'], - values: [[2000, 3], [4000, 4]], - }, - ], - }, - { - series: [ - { - name: 'mc', - columns: ['time', 'f1'], - values: [[2000, 3], [4000, 4]], - }, - ], - }, - ], - }, - }, - ] - - const actual = timeSeriesToTableGraph(influxResponse) - const expected = ['time', 'ma.f1', 'mb.f1', 'mc.f1', 'mc.f2'] - - expect(actual.labels).toEqual(expected) - }) - it('parses raw data into a table-readable format with the first row being labels', () => { const influxResponse = [ { From 3b34e3f7db90d94a3009ca429a224d6ab1c6842d Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Mon, 9 Apr 2018 15:15:02 -0700 Subject: [PATCH 4/5] Respond to PR Review --- ui/src/dashboards/components/TableOptions.tsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index 317f615b28..7b72638fe7 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -16,6 +16,7 @@ import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeTo import {updateTableOptions} from 'src/dashboards/actions/cellEditorOverlay' import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph' +import {QueryConfig} from 'src/types/query' interface Option { text: string @@ -36,16 +37,6 @@ interface Options { fixFirstColumn: boolean } -interface QueryConfig { - measurement: string - fields: [ - { - alias: string - value: string - } - ] -} - interface Props { queryConfigs: QueryConfig[] handleUpdateTableOptions: (options: Options) => void @@ -83,7 +74,7 @@ export class TableOptions extends PureComponent { tableOptions, } = this.props - const tableSortByOptions = this.computedFieldNames.map(field => ({ + const tableSortByOptions = this.fieldNames.map(field => ({ key: field.internalName, text: field.displayName || field.internalName, })) From 1b08132941ec977a600c1bdbebf70ace014609a1 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Mon, 9 Apr 2018 15:42:14 -0700 Subject: [PATCH 5/5] Update calculateColumnWidth to take into account 1 visible column and lock first is true --- ui/src/shared/components/TableGraph.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index f0d71c3bcb..fb67ce2090 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -187,7 +187,7 @@ class TableGraph extends Component { }) } - calculateColumnWidth = __ => column => { + calculateColumnWidth = columnSizerWidth => column => { const {index} = column const {tableOptions: {fixFirstColumn}} = this.props const {processedData, columnWidths, totalColumnWidths} = this.state @@ -198,8 +198,12 @@ class TableGraph extends Component { const tableWidth = _.get(this, ['gridContainer', 'clientWidth'], 0) if (tableWidth > totalColumnWidths) { + if (columnCount === 1) { + return columnSizerWidth + } const difference = tableWidth - totalColumnWidths - const distributeOver = fixFirstColumn ? columnCount - 1 : columnCount + const distributeOver = + fixFirstColumn && columnCount > 1 ? columnCount - 1 : columnCount const increment = difference / distributeOver adjustedColumnSizerWidth = fixFirstColumn && index === 0