Add test from display value of selected

ui/src/dashboards/components/GraphOptionsSortBy.tsx

@@ -1,24 +1,31 @@
 import React from 'react'
 import Dropdown from 'src/shared/components/Dropdown'
 
+interface TableColumn {
+  internalName: string
+  displayName: string
+}
+
 interface Props {
   sortByOptions: any[]
   onChooseSortBy: (any) => void
-  selected: string
+  selected: TableColumn
 }
 
-const GraphOptionsSortBy = ({sortByOptions, onChooseSortBy, selected} : Props) => (
-  <div className="form-group col-xs-6">
+const GraphOptionsSortBy = ({sortByOptions, onChooseSortBy, selected} : Props) => {
+  const selectedValue = selected.displayName || selected.internalName
+
+  return <div className="form-group col-xs-6">
     <label>Sort By</label>
     <Dropdown
       items={sortByOptions}
-      selected={selected}
+      selected={selectedValue}
       buttonColor="btn-default"
       buttonSize="btn-sm"
       className="dropdown-stretch"
       onChoose={onChooseSortBy}
     />
   </div>
-)
+}
 
 export default GraphOptionsSortBy

ui/src/dashboards/components/TableOptions.tsx

@@ -145,7 +145,7 @@ export class TableOptions extends PureComponent<Props, {}> {
               onToggleTimeAxis={this.handleToggleTimeAxis}
             />
             <GraphOptionsSortBy
-              selected={tableOptions.sortBy.internalName || TIME_COLUMN_DEFAULT.internalName}
+              selected={tableOptions.sortBy || TIME_COLUMN_DEFAULT}
               sortByOptions={tableSortByOptions}
               onChooseSortBy={this.handleChooseSortBy}
             />

ui/src/shared/components/TableGraph.js

@@ -24,7 +24,7 @@ class TableGraph extends Component {
       data: [[]],
       hoveredColumnIndex: NULL_COLUMN_INDEX,
       hoveredRowIndex: NULL_ROW_INDEX,
-      columnIndex: -1,
+      sortByColumnIndex: -1,
     }
   }
 
@@ -32,10 +32,10 @@ class TableGraph extends Component {
     const {data} = timeSeriesToTableGraph(nextProps.data)
 
     const {tableOptions: {sortBy: {internalName}}} = nextProps
-    const columnIndex = _.indexOf(data[0], internalName)
+    const sortByColumnIndex = _.indexOf(data[0], internalName)
 
-    const sortedData = _.sortBy(_.drop(data, 1), columnIndex)
-    this.setState({data: [data[0], ...sortedData], columnIndex})
+    const sortedData = _.sortBy(_.drop(data, 1), sortByColumnIndex)
+    this.setState({data: [data[0], ...sortedData], sortByColumnIndex})
   }
 
   calcHoverTimeRow = (data, hoverTime) =>
@@ -137,7 +137,7 @@ class TableGraph extends Component {
   }
 
   render() {
-    const {hoveredColumnIndex, hoveredRowIndex} = this.state
+    const {sortByColumnIndex, hoveredColumnIndex, hoveredRowIndex} = this.state
     const {hoverTime, tableOptions, colors} = this.props
     const {data} = this.state
     const columnCount = _.get(data, ['0', 'length'], 0)
@@ -175,7 +175,7 @@ class TableGraph extends Component {
             columnNames={
               tableOptions ? tableOptions.columnNames : [TIME_COLUMN_DEFAULT]
             }
-            columnIndex={columnIndex}
+            sortByColumnIndex={sortByColumnIndex}
             scrollToRow={hoverTimeRow}
             cellRenderer={this.cellRenderer}
             hoveredColumnIndex={hoveredColumnIndex}

ui/test/dashboards/components/GraphOptionsSortBy.test.tsx

@@ -7,7 +7,10 @@ import Dropdown from 'src/shared/components/Dropdown'
 const defaultProps = {
   sortByOptions: [],
   onChooseSortBy: () => {},
-  selected: ''
+  selected: {
+    internalName: 'boom',
+    displayName: 'here',
+  }
 }
 
 const setup = (override = {}) => {
@@ -25,8 +28,19 @@ describe('Dashboards.Components.GraphOptionsSortBy', () => {
       const dropdown = wrapper.find(Dropdown)
       const label = wrapper.find('label')
 
+      expect(dropdown.props().selected).toEqual('here')
       expect(dropdown.exists()).toBe(true)
       expect(label.exists()).toBe(true)
     })
+
+    describe('when selected display name is not available', () => {
+      it('render internal name as selected', () => {
+        const {wrapper} = setup({selected: {internalName: 'boom'}})
+
+        const dropdown = wrapper.find(Dropdown)
+
+        expect(dropdown.props().selected).toEqual('boom')
+      })
+    })
   })
 })