connect tableOptions field visibility toggle to tableGraph

ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx

@@ -12,7 +12,7 @@ interface Props {
   internalName: string
   displayName: string
   visible: boolean
-  onColumnRename: (column: Column) => void
+  onColumnUpdate: (column: Column) => void
 }
 
 class GraphOptionsCustomizableColumn extends PureComponent<Props, {}> {
@@ -24,26 +24,26 @@ class GraphOptionsCustomizableColumn extends PureComponent<Props, {}> {
   }
 
   handleColumnRename(rename: string) {
-    const {onColumnRename, internalName, visible} = this.props
-    onColumnRename({internalName, displayName: rename, visible})
+    const {onColumnUpdate, internalName, visible} = this.props
+    onColumnUpdate({internalName, displayName: rename, visible})
   }
 
   handleToggleVisible() {
-    const {onColumnRename, internalName, displayName, visible} = this.props
-    onColumnRename({internalName, displayName, visible: !visible})
+    const {onColumnUpdate, internalName, displayName, visible} = this.props
+    onColumnUpdate({internalName, displayName, visible: !visible})
   }
 
   render() {
     const {internalName, displayName, visible} = this.props
-    console.log('VISIBLE:', visible)
 
     return (
       <div className="column-controls--section">
         <div
-          className="column-controls--label"
-          onClick={this.handleToggleVisible}
+          className={
+            visible ? 'column-controls--label' : 'column-controls--label-hidden'
+          }
         >
-          <span className="icon eye" />
+          <span className="icon eye" onClick={this.handleToggleVisible} />
           {internalName}
         </div>
         <InputClickToEdit
@@ -52,6 +52,7 @@ class GraphOptionsCustomizableColumn extends PureComponent<Props, {}> {
           onBlur={this.handleColumnRename}
           placeholder="Rename..."
           appearAsNormalInput={true}
+          disabled={!visible}
         />
       </div>
     )

ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx

@@ -11,12 +11,12 @@ type Column = {
 
 interface Props {
   columns: Column[]
-  onColumnRename: (column: Column) => void
+  onColumnUpdate: (column: Column) => void
 }
 
 const GraphOptionsCustomizeColumns: SFC<Props> = ({
   columns,
-  onColumnRename,
+  onColumnUpdate,
 }) => {
   return (
     <div className="graph-options-group">
@@ -28,7 +28,7 @@ const GraphOptionsCustomizeColumns: SFC<Props> = ({
             internalName={col.internalName}
             displayName={col.displayName}
             visible={col.visible}
-            onColumnRename={onColumnRename}
+            onColumnUpdate={onColumnUpdate}
           />
         )
       })}

ui/src/dashboards/components/TableOptions.tsx

@@ -21,6 +21,7 @@ import {updateTableOptions} from 'src/dashboards/actions/cellEditorOverlay'
 type TableColumn = {
   internalName: string
   displayName: string
+  visible: boolean
 }
 
 type Options = {
@@ -74,7 +75,7 @@ export class TableOptions extends PureComponent<Props, {}> {
           const existing = this.columnNames.find(
             c => c.internalName === internalName
           )
-          return existing || {internalName, displayName: ''}
+          return existing || {internalName, displayName: '', visible: true}
         })
       })
     )
@@ -92,7 +93,11 @@ export class TableOptions extends PureComponent<Props, {}> {
 
   handleChooseSortBy = option => {
     const {tableOptions, handleUpdateTableOptions} = this.props
-    const sortBy = {displayName: option.text, internalName: option.key}
+    const sortBy = {
+      displayName: option.text,
+      internalName: option.key,
+      visible: true,
+    }
 
     handleUpdateTableOptions({...tableOptions, sortBy})
   }
@@ -115,7 +120,7 @@ export class TableOptions extends PureComponent<Props, {}> {
     handleUpdateTableOptions({...tableOptions, fixFirstColumn})
   }
 
-  handleColumnRename = column => {
+  handleColumnUpdate = column => {
     const {handleUpdateTableOptions, tableOptions} = this.props
     const {columnNames} = tableOptions
     const updatedColumns = columnNames.map(
@@ -173,7 +178,7 @@ export class TableOptions extends PureComponent<Props, {}> {
           </div>
           <GraphOptionsCustomizeColumns
             columns={columns}
-            onColumnRename={this.handleColumnRename}
+            onColumnUpdate={this.handleColumnUpdate}
           />
           <ThresholdsList showListHeading={true} onResetFocus={onResetFocus} />
           <div className="form-group-wrapper graph-options-group">

ui/src/shared/components/TableGraph.js

@@ -24,26 +24,56 @@ class TableGraph extends Component {
     this.state = {
       data: [[]],
       unzippedData: [[]],
+      visibleData: [[]],
       hoveredColumnIndex: NULL_COLUMN_INDEX,
       hoveredRowIndex: NULL_ROW_INDEX,
       sortByColumnIndex: -1,
+      invisibleFieldIndices: [],
     }
   }
 
   componentWillReceiveProps(nextProps) {
     const {data, unzippedData} = timeSeriesToTableGraph(nextProps.data)
 
-    const {tableOptions: {sortBy: {internalName}}} = nextProps
+    const {
+      tableOptions: {sortBy: {internalName}, columnNames, verticalTimeAxis},
+    } = nextProps
     const sortByColumnIndex = _.indexOf(data[0], internalName)
 
-    const sortedData = _.sortBy(_.drop(data, 1), sortByColumnIndex)
+    const sortedData = [
+      data[0],
+      ..._.sortBy(_.drop(data, 1), sortByColumnIndex),
+    ]
+
+    if (verticalTimeAxis) {
+      const visibleColumns = {}
+      const filteredData = sortedData.map((row, i) => {
+        return row.filter((col, j) => {
+          if (i === 0) {
+            const foundColumn = columnNames.find(
+              column => column.internalName === col
+            )
+            visibleColumns[j] = foundColumn && foundColumn.visible
+          }
+          return visibleColumns[j]
+        })
+      })
+      const visibleData = filteredData[0].length ? filteredData : [[]]
+    }
+
     this.setState({
-      data: [data[0], ...sortedData],
+      data: sortedData,
+      visibleData,
       unzippedData,
       sortByColumnIndex,
     })
   }
 
+  componentWillMount() {
+    this._data = [[]]
+    this._visibleData = [[]]
+  }
+
   calcHoverTimeIndex = (data, hoverTime, verticalTimeAxis) => {
     if (isEmpty(data) || hoverTime === NULL_HOVER_TIME) {
       return undefined
@@ -101,11 +131,17 @@ class TableGraph extends Component {
       FIX_FIRST_COLUMN_DEFAULT
     )
 
+    const timeField = columnNames.find(
+      column => column.internalName === TIME_COLUMN_DEFAULT.internalName
+    )
+
     const isFixedRow = rowIndex === 0 && columnIndex > 0
     const isFixedColumn = fixFirstColumn && rowIndex > 0 && columnIndex === 0
-    const isTimeData = tableOptions.verticalTimeAxis
+    const isTimeData =
+      timeField.visible &&
+      (tableOptions.verticalTimeAxis
         ? rowIndex > 0 && columnIndex === 0
-      : isFixedRow
+        : isFixedRow)
     const isFixedCorner = rowIndex === 0 && columnIndex === 0
     const isLastRow = rowIndex === rowCount - 1
     const isLastColumn = columnIndex === columnCount - 1
@@ -168,7 +204,9 @@ class TableGraph extends Component {
 
     const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
 
-    const data = verticalTimeAxis ? this.state.data : this.state.unzippedData
+    const data = verticalTimeAxis
+      ? this.state.visibleData
+      : this.state.unzippedData
 
     const columnCount = _.get(data, ['0', 'length'], 0)
     const rowCount = data.length
@@ -193,7 +231,7 @@ class TableGraph extends Component {
         ref={gridContainer => (this.gridContainer = gridContainer)}
         onMouseOut={this.handleMouseOut}
       >
-        {!isEmpty(data) &&
+        {!isEmpty(visibleData) &&
           <MultiGrid
             columnCount={columnCount}
             columnWidth={COLUMN_WIDTH}

ui/src/style/components/ceo-display-options.scss

@@ -257,17 +257,30 @@ button.btn.btn-primary.btn-sm.gauge-controls--add-threshold {
 }
 
 
-.column-controls--label {
+.column-controls--label, .column-controls--label-hidden {
   @extend %gauge-controls-label-styles;
   color: $g16-pearl;
   background-color: $g4-onyx;
   flex: 2 0 0;
+
+  > span {
+    padding-right: 5px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+.column-controls--label-hidden {
+  color: $g0-obsidian;
 }
 .column-controls-input {
   flex: 1 0 0;
   display: flex;
   align-items: center;
 }
+
+
 /*
   Cell Editor Overlay - Single-Stat Controls
   ------------------------------------------------------------------------------

ui/test/dashboards/components/GraphOptionsCustomizableColumn.test.tsx

@@ -9,7 +9,8 @@ const setup = (override = {}) => {
   const props = {
     internalName: '',
     displayName: '',
-    onColumnRename: () => {},
+    visible: true,
+    onColumnUpdate: () => {},
     ...override,
   }
 
@@ -42,17 +43,17 @@ describe('Dashboards.Components.GraphOptionsCustomizableColumn', () => {
   })
 
   describe('instance methods', () => {
-    describe('#handleColumnRename', () => {
-      it('calls onColumnRename once', () => {
-        const onColumnRename = jest.fn()
+    describe('#handleColumnUpdate', () => {
+      it('calls onColumnUpdate once', () => {
+        const onColumnUpdate = jest.fn()
         const internalName = 'test'
-        const {instance} = setup({onColumnRename, internalName})
+        const {instance} = setup({onColumnUpdate, internalName})
         const rename = 'TEST'
 
         instance.handleColumnRename(rename)
 
-        expect(onColumnRename).toHaveBeenCalledTimes(1)
-        expect(onColumnRename).toHaveBeenCalledWith({
+        expect(onColumnUpdate).toHaveBeenCalledTimes(1)
+        expect(onColumnUpdate).toHaveBeenCalledWith({
           internalName,
           displayName: rename,
         })

ui/test/dashboards/components/GraphOptionsCustomizeColumns.test.tsx

@@ -9,7 +9,7 @@ import {shallow} from 'enzyme'
 const setup = (override = {}) => {
   const props = {
     columns: [],
-    onColumnRename: () => {},
+    onColumnUpdate: () => {},
     ...override,
   }