From 28cea41a6f0df27ee4bd5ffd7a67f88b5c120673 Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Mon, 16 Apr 2018 19:02:11 -0700 Subject: [PATCH] Constrain TableGraph updating --- ui/src/dashboards/components/TableOptions.tsx | 83 ++++++++++--------- ui/src/dashboards/utils/tableGraph.ts | 25 ++++++ ui/src/shared/components/TableGraph.js | 44 ++++------ ui/src/utils/timeSeriesTransformers.js | 12 --- .../components/TableOptions.test.tsx | 1 + 5 files changed, 85 insertions(+), 80 deletions(-) diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index c0d5f3601..28b257a59 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -15,6 +15,7 @@ import ThresholdsList from 'src/shared/components/ThresholdsList' import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeToggle' import {updateTableOptions} from 'src/dashboards/actions/cellEditorOverlay' +import {computeFieldNames} from 'src/dashboards/utils/tableGraph' import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph' import {QueryConfig} from 'src/types/query' @@ -81,7 +82,7 @@ export class TableOptions extends PureComponent { const {handleUpdateTableOptions, tableOptions} = this.props handleUpdateTableOptions({ ...tableOptions, - fieldNames: this.computedFieldNames, + fieldNames: computeFieldNames([], this.props.queryASTs), }) } @@ -100,7 +101,10 @@ export class TableOptions extends PureComponent { if (!_.isEqual(queryASTs, nextProps.queryASTs)) { handleUpdateTableOptions({ ...tableOptions, - fieldNames: this.computedFieldNames, + fieldNames: computeFieldNames( + tableOptions.fieldNames, + this.props.queryASTs + ), }) } } @@ -157,21 +161,24 @@ export class TableOptions extends PureComponent { ) } - private get fieldNames() { - const {tableOptions: {fieldNames}} = this.props - return fieldNames || [] - } + // 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 timeField() { + // return ( + // this.fieldNames.find(f => f.internalName === 'time') || TIME_FIELD_DEFAULT + // ) + // } private moveField(dragIndex, hoverIndex) { - const {handleUpdateTableOptions, tableOptions} = this.props + const {handleUpdateTableOptions, tableOptions, queryASTs} = this.props const {fieldNames} = tableOptions - const fields = fieldNames.length > 1 ? fieldNames : this.computedFieldNames + const fields = + fieldNames.length > 1 + ? fieldNames + : computeFieldNames(fieldNames, queryASTs) const dragField = fields[dragIndex] const removedFields = _.concat( @@ -189,31 +196,31 @@ export class TableOptions extends PureComponent { }) } - private get computedFieldNames() { - const {queryASTs} = this.props - const existingFieldNames = this.fieldNames - let astNames = [this.timeField] - queryASTs.forEach(q => { - const {fields, sources} = q - const {name: sourceName} = sources[0] - fields.forEach(f => { - const {alias, column: {val}} = f - const value = val || alias - const internalName = `${sourceName}.${value}` - const field = {internalName, displayName: '', visible: true} - astNames = [...astNames, field] - }) - }) - - const intersection = existingFieldNames.filter(f => { - return astNames.find(a => a.internalName === f.internalName) - }) - - const newFields = astNames.filter(a => { - return !existingFieldNames.find(f => f.internalName === a.internalName) - }) - return [...intersection, ...newFields] - } + // private get computedFieldNames() { + // const {queryASTs} = this.props + // const existingFieldNames = this.fieldNames + // let astNames = [this.timeField] + // queryASTs.forEach(q => { + // const {fields, sources} = q + // const {name: sourceName} = sources[0] + // fields.forEach(f => { + // const {alias, column: {val}} = f + // const value = val || alias + // const internalName = `${sourceName}.${value}` + // const field = {internalName, displayName: '', visible: true} + // astNames = [...astNames, field] + // }) + // }) + // + // const intersection = existingFieldNames.filter(f => { + // return astNames.find(a => a.internalName === f.internalName) + // }) + // + // const newFields = astNames.filter(a => { + // return !existingFieldNames.find(f => f.internalName === a.internalName) + // }) + // return [...intersection, ...newFields] + // } private handleChooseSortBy = (option: Option) => { const {tableOptions, handleUpdateTableOptions} = this.props diff --git a/ui/src/dashboards/utils/tableGraph.ts b/ui/src/dashboards/utils/tableGraph.ts index 7b853f422..c872a071e 100644 --- a/ui/src/dashboards/utils/tableGraph.ts +++ b/ui/src/dashboards/utils/tableGraph.ts @@ -77,6 +77,31 @@ const updateMaxWidths = ( ) } +export const computeFieldNames = (existingFieldNames, queryASTs) => { + const timeField = + existingFieldNames.find(f => f.internalName === 'time') || + TIME_FIELD_DEFAULT + let astNames = [timeField] + queryASTs.forEach(q => { + const {fields, sources} = q + const sourceName = _.get(sources, ['0', 'name']) + fields.forEach(f => { + const {alias, column: {val}} = f + const value = val || alias + const internalName = `${sourceName}.${value}` + const field = {internalName, displayName: '', visible: true} + astNames = [...astNames, field] + }) + }) + const intersection = existingFieldNames.filter(f => { + return astNames.find(a => a.internalName === f.internalName) + }) + const newFields = astNames.filter(a => { + return !existingFieldNames.find(f => f.internalName === a.internalName) + }) + return [...intersection, ...newFields] +} + export const calculateColumnWidths = ( data, fieldNames, diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index 45500ed87..bdadfc50b 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -11,6 +11,7 @@ import { timeSeriesToTableGraph, processTableData, } from 'src/utils/timeSeriesTransformers' +import {computeFieldNames} from 'src/dashboards/utils/tableGraph' import { NULL_ARRAY_INDEX, @@ -27,33 +28,6 @@ import { import {generateThresholdsListHexs} from 'shared/constants/colorOperations' import {colorsStringSchema} from 'shared/schemas' -const computedFieldNames = (existingFieldNames, queryASTs) => { - const timeField = - existingFieldNames.find(f => f.internalName === 'time') || - TIME_FIELD_DEFAULT - let astNames = [timeField] - queryASTs.forEach(q => { - const {fields, sources} = q - const sourceName = _.get(sources, ['0', 'name']) - fields.forEach(f => { - const {alias, column: {val}} = f - const value = val || alias - const internalName = `${sourceName}.${value}` - const field = {internalName, displayName: '', visible: true} - astNames = [...astNames, field] - }) - }) - - const intersection = existingFieldNames.filter(f => { - return astNames.find(a => a.internalName === f.internalName) - }) - - const newFields = astNames.filter(a => { - return !existingFieldNames.find(f => f.internalName === a.internalName) - }) - return [...intersection, ...newFields] -} - class TableGraph extends Component { constructor(props) { super(props) @@ -76,6 +50,14 @@ class TableGraph extends Component { } } + shouldComponentUpdate(nextProps) { + const updatedProps = _.keys(nextProps).filter( + k => !_.isEqual(this.props[k], nextProps[k]) + ) + return !!_.intersection(updatedProps, ['data', 'queryASTs', 'tableOptions']) + .length + } + componentWillReceiveProps(nextProps) { const {data} = timeSeriesToTableGraph(nextProps.data, nextProps.queryASTs) if (_.isEmpty(data[0])) { @@ -90,8 +72,10 @@ class TableGraph extends Component { timeFormat, }, } = nextProps - - const newFieldNames = computedFieldNames(fieldNames, nextProps.queryASTs) + const computedFieldNames = computeFieldNames( + fieldNames, + nextProps.queryASTs + ) let direction, sortFieldName if ( @@ -115,7 +99,7 @@ class TableGraph extends Component { sortFieldName, direction, verticalTimeAxis, - newFieldNames, + computedFieldNames, timeFormat ) this.setState({ diff --git a/ui/src/utils/timeSeriesTransformers.js b/ui/src/utils/timeSeriesTransformers.js index b22911c22..eae206ca7 100644 --- a/ui/src/utils/timeSeriesTransformers.js +++ b/ui/src/utils/timeSeriesTransformers.js @@ -2,7 +2,6 @@ import _ from 'lodash' import {shiftDate} from 'shared/query/helpers' import {map, reduce, filter, forEach, concat, clone} from 'fast.js' import {calculateColumnWidths} from 'src/dashboards/utils/tableGraph' -import {groupByTag} from 'src/kapacitor/actions/queryConfigs' import {groupByTimeSeriesTransform} from 'src/utils/groupBy.js' /** @@ -180,17 +179,6 @@ const hasGroupBy = queryASTs => { }) } -const groupbysNotSelected = (raw, groupby) => { - const columnsInRaw = _.get( - raw, - ['0', 'response', 'results', '0', 'series', '0', 'columns'], - [] - ) - return groupby.filter(gb => { - return !_.includes(columnsInRaw, gb) - }) -} - export const timeSeriesToTableGraph = (raw, queryASTs) => { // console.log('raw', raw) // console.log('queryASTs', queryASTs) diff --git a/ui/test/dashboards/components/TableOptions.test.tsx b/ui/test/dashboards/components/TableOptions.test.tsx index e65fbe031..1c4923056 100644 --- a/ui/test/dashboards/components/TableOptions.test.tsx +++ b/ui/test/dashboards/components/TableOptions.test.tsx @@ -22,6 +22,7 @@ const defaultProps = { timeFormat: '', verticalTimeAxis: true, }, + queryASTs: [], } const setup = (override = {}) => {