From b71babcec68f884b697aaa1833237d43c8fb0c8f Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Fri, 2 Mar 2018 18:08:30 -0800
Subject: [PATCH] fix issue with moment deprecation when scrolling in
 TableGraph

---
 .../dashboards/components/GraphOptionsTimeFormat.js  |  8 ++++----
 ui/src/dashboards/components/TableOptions.js         |  2 +-
 ui/src/shared/components/TableGraph.js               | 12 ++++++------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/ui/src/dashboards/components/GraphOptionsTimeFormat.js b/ui/src/dashboards/components/GraphOptionsTimeFormat.js
index 9613a9e975..e5beec5c9b 100644
--- a/ui/src/dashboards/components/GraphOptionsTimeFormat.js
+++ b/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"
         />
diff --git a/ui/src/dashboards/components/TableOptions.js b/ui/src/dashboards/components/TableOptions.js
index 4e0d66569d..6366ff4d8f 100644
--- a/ui/src/dashboards/components/TableOptions.js
+++ b/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 = () => {}
diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index d99bf9f045..e144a4bd54 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/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>
     )