fix issue with moment deprecation when scrolling in TableGraph

ui/src/dashboards/components/GraphOptionsTimeFormat.js

@@ -5,7 +5,7 @@ import moment from 'moment'
 import InputClickToEdit from 'shared/components/InputClickToEdit'
 
 class GraphOptionsTimeFormat extends Component {
-  state = {format: 'MM/DD/YYYY HH:mm:ss.ss'}
+  state = {format: this.props.timeFormat || 'MM/DD/YYYY HH:mm:ss.ss'}
 
   handleInputChange = value => {
     const {onTimeFormatChange} = this.props
@@ -13,18 +13,18 @@ class GraphOptionsTimeFormat extends Component {
     const formattedDate = moment(date.toISOString()).format(value)
     const validDateFormat = moment(formattedDate, value)._isValid
     if (validDateFormat) {
-      onTimeFormatChange(validDateFormat)
+      onTimeFormatChange(value)
     }
   }
 
   render() {
-    const {timeFormat} = this.props
+    const {format} = this.state
     return (
       <div>
         <label>Time Format</label>
         <InputClickToEdit
           wrapperClass="fancytable--td orgs-table--name"
-          value={timeFormat}
+          value={format}
           onUpdate={this.handleInputChange}
           placeholder="MM/DD/YYYY HH:mm:ss.ss"
         />

ui/src/dashboards/components/TableOptions.js

@@ -40,7 +40,7 @@ class TableOptions extends Component {
   handleChooseSortBy = () => {}
 
   handleTimeFormatChange = timeFormat => {
-    this.setState({...this.state, timeFormat: timeFormat.target.value})
+    this.setState({...this.state, timeFormat})
   }
 
   handleToggleTimeAxis = () => {}

ui/src/shared/components/TableGraph.js

@@ -23,14 +23,13 @@ class TableGraph extends Component {
   cellRenderer = ({columnIndex, key, rowIndex, style}) => {
     const data = this._data
     const {timeFormat} = this.state
-    if (columnIndex === 0 && rowIndex > 0) {
-      data[rowIndex][columnIndex] = moment(data[rowIndex][columnIndex]).format(
-        timeFormat
-      )
-    }
+    const isTimeCell = columnIndex === 0 && rowIndex > 0
+
     return (
       <div key={key} style={style}>
-        {data[rowIndex][columnIndex]}
+        {isTimeCell
+          ? moment(data[rowIndex][columnIndex]).format(timeFormat)
+          : data[rowIndex][columnIndex]}
       </div>
     )
   }
@@ -60,6 +59,7 @@ class TableGraph extends Component {
             rowCount={rowCount}
             rowHeight={ROW_HEIGHT}
             width={tableWidth - 32}
+            onScroll={this.handleScroll}
           />}
       </div>
     )