add fixFirstColumn to tableOptions

ui/src/dashboards/components/TableOptions.tsx

@@ -9,6 +9,7 @@ import GraphOptionsTimeFormat from 'src/dashboards/components/GraphOptionsTimeFo
 import GraphOptionsTimeAxis from 'src/dashboards/components/GraphOptionsTimeAxis'
 import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy'
 import GraphOptionsTextWrapping from 'src/dashboards/components/GraphOptionsTextWrapping'
+import GraphOptionsFixFirstColumn from 'src/dashboards/components/GraphOptionsFixFirstColumn'
 import GraphOptionsCustomizeColumns from 'src/dashboards/components/GraphOptionsCustomizeColumns'
 
 import ThresholdsList from 'src/shared/components/ThresholdsList'
@@ -28,6 +29,7 @@ type Options = {
   sortBy: TableColumn
   wrapping: string
   columnNames: TableColumn[]
+  fixFirstColumn: boolean
 }
 
 interface QueryConfig {
@@ -84,7 +86,7 @@ export class TableOptions extends PureComponent<Props, {}> {
     const {handleUpdateTableOptions, tableOptions} = this.props
     handleUpdateTableOptions({
       ...tableOptions,
-      columnNames: this.computedColumnNames
+      columnNames: this.computedColumnNames,
     })
   }
 
@@ -107,6 +109,12 @@ export class TableOptions extends PureComponent<Props, {}> {
 
   handleToggleTextWrapping = () => {}
 
+  handleToggleFixFirstColumn = () => {
+    const {handleUpdateTableOptions, tableOptions} = this.props
+    const fixFirstColumn = !tableOptions.fixFirstColumn
+    handleUpdateTableOptions({...tableOptions, fixFirstColumn})
+  }
+
   handleColumnRename = column => {
     const {handleUpdateTableOptions, tableOptions} = this.props
     const {columnNames} = tableOptions
@@ -118,14 +126,19 @@ export class TableOptions extends PureComponent<Props, {}> {
 
   render() {
     const {
-      tableOptions: {timeFormat, columnNames: columns, verticalTimeAxis},
+      tableOptions: {
+        timeFormat,
+        columnNames: columns,
+        verticalTimeAxis,
+        fixFirstColumn,
+      },
       onResetFocus,
-      tableOptions
+      tableOptions,
     } = this.props
 
     const tableSortByOptions = this.computedColumnNames.map(col => ({
       text: col.displayName || col.internalName,
-      key: col.internalName
+      key: col.internalName,
     }))
 
     return (
@@ -153,6 +166,10 @@ export class TableOptions extends PureComponent<Props, {}> {
               thresholdsListType="background"
               onToggleTextWrapping={this.handleToggleTextWrapping}
             />
+            <GraphOptionsFixFirstColumn
+              fixed={fixFirstColumn}
+              onToggleFixFirstColumn={this.handleToggleFixFirstColumn}
+            />
           </div>
           <GraphOptionsCustomizeColumns
             columns={columns}
@@ -169,11 +186,11 @@ export class TableOptions extends PureComponent<Props, {}> {
 }
 
 const mapStateToProps = ({cellEditorOverlay: {cell: {tableOptions}}}) => ({
-  tableOptions
+  tableOptions,
 })
 
 const mapDispatchToProps = dispatch => ({
-  handleUpdateTableOptions: bindActionCreators(updateTableOptions, dispatch)
+  handleUpdateTableOptions: bindActionCreators(updateTableOptions, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(TableOptions)

ui/src/shared/components/TableGraph.js

@@ -14,6 +14,7 @@ import {
   NULL_HOVER_TIME,
   TIME_FORMAT_DEFAULT,
   TIME_COLUMN_DEFAULT,
+  FIX_FIRST_COLUMN_DEFAULT,
 } from 'src/shared/constants/tableGraph'
 import {generateThresholdsListHexs} from 'shared/constants/colorOperations'
 
@@ -80,24 +81,30 @@ class TableGraph extends Component {
     }
   }
 
-  cellRenderer = ({columnIndex, rowIndex, key, parent, style}) => {
-    const data = _.get(this.props, ['tableOptions', 'verticalTimeAxis'], true)
+  cellRenderer = ({columnIndex, rowIndex, key, style, parent}) => {
+    const {colors, tableOptions} = this.props
+    const {hoveredColumnIndex, hoveredRowIndex} = this.state
+
+    const data = _.get(tableOptions, 'verticalTimeAxis', true)
       ? this.state.data
       : this.state.unzippedData
-    const {hoveredColumnIndex, hoveredRowIndex} = this.state
-    const {colors} = this.props
+
     const columnCount = _.get(data, ['0', 'length'], 0)
     const rowCount = data.length
-    const {tableOptions} = this.props
     const timeFormat = _.get(tableOptions, 'timeFormat', TIME_FORMAT_DEFAULT)
     const columnNames = _.get(tableOptions, 'columnNames', [
       TIME_COLUMN_DEFAULT,
     ])
+    const fixFirstColumn = _.get(
+      tableOptions,
+      'fixFirstColumn',
+      FIX_FIRST_COLUMN_DEFAULT
+    )
 
     const isFixedRow = rowIndex === 0 && columnIndex > 0
-    const isFixedColumn = rowIndex > 0 && columnIndex === 0
+    const isFixedColumn = fixFirstColumn && rowIndex > 0 && columnIndex === 0
     const isTimeData = tableOptions.verticalTimeAxis
-      ? isFixedColumn
+      ? rowIndex > 0 && columnIndex === 0
       : isFixedRow
     const isFixedCorner = rowIndex === 0 && columnIndex === 0
     const isLastRow = rowIndex === rowCount - 1
@@ -173,6 +180,7 @@ class TableGraph extends Component {
       hoveredRowIndex === NULL_ROW_INDEX
         ? this.calcHoverTimeIndex(data, hoverTime, verticalTimeAxis)
         : hoveredRowIndex
+    const fixedColumnCount = tableOptions.fixFirstColumn ? 1 : undefined
 
     return (
       <div
@@ -188,7 +196,7 @@ class TableGraph extends Component {
             rowHeight={ROW_HEIGHT}
             height={tableHeight}
             width={tableWidth}
-            fixedColumnCount={1}
+            fixedColumnCount={fixedColumnCount}
             fixedRowCount={1}
             enableFixedColumnScroll={true}
             enableFixedRowScroll={true}

ui/src/shared/constants/tableGraph.js

@@ -8,6 +8,8 @@ export const TIME_FORMAT_CUSTOM = 'Custom'
 
 export const TIME_COLUMN_DEFAULT = {internalName: 'time', displayName: ''}
 
+export const FIX_FIRST_COLUMN_DEFAULT = true
+
 export const FORMAT_OPTIONS = [
   {text: TIME_FORMAT_DEFAULT},
   {text: 'MM/DD/YYYY HH:mm'},
@@ -26,5 +28,5 @@ export const DEFAULT_TABLE_OPTIONS = {
   sortBy: TIME_COLUMN_DEFAULT,
   wrapping: 'truncate',
   columnNames: [TIME_COLUMN_DEFAULT],
-  fixFirstColumn: true,
+  fixFirstColumn: FIX_FIRST_COLUMN_DEFAULT,
 }