Constrain TableGraph updating

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<Props, {}> {
     const {handleUpdateTableOptions, tableOptions} = this.props
     handleUpdateTableOptions({
       ...tableOptions,
-      fieldNames: this.computedFieldNames,
+      fieldNames: computeFieldNames([], this.props.queryASTs),
     })
   }
 
@@ -100,7 +101,10 @@ export class TableOptions extends PureComponent<Props, {}> {
     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<Props, {}> {
     )
   }
 
-  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<Props, {}> {
     })
   }
 
-  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

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,

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({

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)

ui/test/dashboards/components/TableOptions.test.tsx

@@ -22,6 +22,7 @@ const defaultProps = {
     timeFormat: '',
     verticalTimeAxis: true,
   },
+  queryASTs: [],
 }
 
 const setup = (override = {}) => {