WIP get labels from tableGraph instead of building them in tableOptions

ui/src/dashboards/components/CellEditorOverlay.js

@@ -48,6 +48,7 @@ class CellEditorOverlay extends Component {
       activeQueryIndex: 0,
       isDisplayOptionsTabActive: false,
       staticLegend: IS_STATIC_LEGEND(legend),
+      dataLabels: [],
     }
   }
 
@@ -259,6 +260,10 @@ class CellEditorOverlay extends Component {
     this.overlayRef.focus()
   }
 
+  setDataLabels = dataLabels => {
+    this.setState({dataLabels})
+  }
+
   render() {
     const {
       onCancel,
@@ -273,6 +278,7 @@ class CellEditorOverlay extends Component {
       isDisplayOptionsTabActive,
       queriesWorkingDraft,
       staticLegend,
+      dataLabels,
     } = this.state
 
     const queryActions = {
@@ -305,6 +311,7 @@ class CellEditorOverlay extends Component {
             queryConfigs={queriesWorkingDraft}
             editQueryStatus={editQueryStatus}
             staticLegend={staticLegend}
+            setDataLabels={this.setDataLabels}
           />
           <CEOBottom>
             <OverlayControls
@@ -324,6 +331,7 @@ class CellEditorOverlay extends Component {
                   onToggleStaticLegend={this.handleToggleStaticLegend}
                   staticLegend={staticLegend}
                   onResetFocus={this.handleResetFocus}
+                  dataLabels={dataLabels}
                 />
               : <QueryMaker
                   source={this.getSource()}

ui/src/dashboards/components/DisplayOptions.js

@@ -43,6 +43,7 @@ class DisplayOptions extends Component {
       onToggleStaticLegend,
       onResetFocus,
       queryConfigs,
+      dataLabels,
     } = this.props
     switch (type) {
       case 'gauge':
@@ -54,6 +55,7 @@ class DisplayOptions extends Component {
           <TableOptions
             onResetFocus={onResetFocus}
             queryConfigs={queryConfigs}
+            dataLabels={dataLabels}
           />
         )
       default:
@@ -93,6 +95,7 @@ DisplayOptions.propTypes = {
   onToggleStaticLegend: func.isRequired,
   staticLegend: bool,
   onResetFocus: func.isRequired,
+  dataLabels: arrayOf(string),
 }
 
 const mapStateToProps = ({cellEditorOverlay: {cell, cell: {axes}}}) => ({

ui/src/dashboards/components/TableOptions.tsx

@@ -46,6 +46,7 @@ interface Props {
   handleUpdateTableOptions: (options: Options) => void
   tableOptions: Options
   onResetFocus: () => void
+  dataLabels: string[]
 }
 
 export class TableOptions extends PureComponent<Props, {}> {
@@ -65,21 +66,12 @@ export class TableOptions extends PureComponent<Props, {}> {
   }
 
   get computedFieldNames() {
-    const {queryConfigs} = this.props
+    const {dataLabels} = this.props
 
-    const queryFields = _.flatten(
-      queryConfigs.map(({measurement, fields}) => {
-        return fields.map(({alias}) => {
-          const internalName = `${measurement}.${alias}`
-          const existing = this.fieldNames.find(
-            f => f.internalName === internalName
-          )
-          return existing || {internalName, displayName: '', visible: true}
-        })
-      })
-    )
-
-    return [this.timeColumn, ...queryFields]
+    return dataLabels.map(label => {
+      const existing = this.fieldNames.find(f => f.internalName === label)
+      return existing || {internalName: label, displayName: '', visible: true}
+    })
   }
 
   componentWillMount() {
@@ -133,6 +125,7 @@ export class TableOptions extends PureComponent<Props, {}> {
       tableOptions: {timeFormat, fieldNames, verticalTimeAxis, fixFirstColumn},
       onResetFocus,
       tableOptions,
+      dataLabels,
     } = this.props
 
     const tableSortByOptions = this.computedFieldNames.map(col => ({

ui/src/dashboards/components/Visualization.js

@@ -22,6 +22,7 @@ const DashVisualization = (
     staticLegend,
     thresholdsListColors,
     tableOptions,
+    setDataLabels,
   },
   {source: {links: {proxy}}}
 ) => {
@@ -42,6 +43,7 @@ const DashVisualization = (
           editQueryStatus={editQueryStatus}
           resizerTopHeight={resizerTopHeight}
           staticLegend={staticLegend}
+          setDataLabels={setDataLabels}
         />
       </div>
     </div>
@@ -86,6 +88,7 @@ DashVisualization.propTypes = {
     }).isRequired
   ),
   staticLegend: bool,
+  setDataLabels: func,
 }
 
 DashVisualization.contextTypes = {

ui/src/shared/components/RefreshingGraph.js

@@ -23,6 +23,7 @@ const RefreshingGraph = ({
   cellID,
   queries,
   tableOptions,
+  setDataLabels,
   templates,
   timeRange,
   cellHeight,
@@ -100,6 +101,7 @@ const RefreshingGraph = ({
         hoverTime={hoverTime}
         onSetHoverTime={onSetHoverTime}
         inView={inView}
+        setDataLabels={setDataLabels}
       />
     )
   }
@@ -166,6 +168,7 @@ RefreshingGraph.propTypes = {
   cellID: string,
   inView: bool,
   tableOptions: shape({}),
+  setDataLabels: func,
 }
 
 RefreshingGraph.defaultProps = {

ui/src/shared/components/TableGraph.js

@@ -29,7 +29,7 @@ const filterInvisibleRows = (data, fieldNames) => {
 
 const filterInvisibleColumns = (data, fieldNames) => {
   const visibleColumns = {}
-  visibleData = data.map((row, i) => {
+  const visibleData = data.map((row, i) => {
     return row.filter((col, j) => {
       if (i === 0) {
         const foundField = fieldNames.find(field => field.internalName === col)
@@ -57,19 +57,23 @@ class TableGraph extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const {data, unzippedData} = timeSeriesToTableGraph(nextProps.data)
+    const {labels, data, unzippedData} = timeSeriesToTableGraph(nextProps.data)
     const {
       tableOptions: {sortBy: {internalName}, fieldNames, verticalTimeAxis},
+      setDataLabels,
     } = nextProps
-
     if (!isEmpty(data[0])) {
+      if (setDataLabels) {
+        setDataLabels(labels)
+      }
+
+      const sortByColumnIndex = _.indexOf(data[0], internalName)
+
       const sortedData = [
         data[0],
         ..._.sortBy(_.drop(data, 1), sortByColumnIndex),
       ]
 
-      const sortByColumnIndex = _.indexOf(data[0], internalName)
-
       const visibleData = verticalTimeAxis
         ? filterInvisibleColumns(sortedData, fieldNames)
         : filterInvisibleRows(sortedData, fieldNames)
@@ -287,6 +291,7 @@ TableGraph.propTypes = {
       value: string.isRequired,
     }).isRequired
   ),
+  setDataLabels: func,
 }
 
 export default TableGraph

ui/src/utils/timeSeriesToDygraph.js

@@ -180,6 +180,7 @@ export const timeSeriesToTableGraph = raw => {
   const data = tableData.length ? [labels, ...tableData] : [[]]
   const unzippedData = _.unzip(data)
   return {
+    labels,
     data,
     unzippedData,
   }