update graphOptionsTimeFormat to have state and validate format; fix linter errors

ui/src/dashboards/components/GraphOptionsTimeFormat.js

@@ -1,20 +1,42 @@
-import React, {PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import moment from 'moment'
 
-const GraphOptionsTimeFormat = ({TimeFormat, onTimeFormatChange}) =>
-  <div>
-    <label>Time Format</label>
-    <input
-      className="form-control input-sm"
-      placeholder="mm/dd/yyyy HH:mm:ss.ss"
-      value={TimeFormat}
-      onChange={onTimeFormatChange}
-    />
-  </div>
+import InputClickToEdit from 'shared/components/InputClickToEdit'
+
+class GraphOptionsTimeFormat extends Component {
+  state = {format: 'MM/DD/YYYY HH:mm:ss.ss'}
+
+  handleInputChange = value => {
+    const {onTimeFormatChange} = this.props
+    const date = new Date()
+    const formattedDate = moment(date.toISOString()).format(value)
+    const validDateFormat = moment(formattedDate, value)._isValid
+    if (validDateFormat) {
+      onTimeFormatChange(validDateFormat)
+    }
+  }
+
+  render() {
+    const {timeFormat} = this.props
+    return (
+      <div>
+        <label>Time Format</label>
+        <InputClickToEdit
+          wrapperClass="fancytable--td orgs-table--name"
+          value={timeFormat}
+          onUpdate={this.handleInputChange}
+          placeholder="MM/DD/YYYY HH:mm:ss.ss"
+        />
+      </div>
+    )
+  }
+}
 
 const {func, string} = PropTypes
 
 GraphOptionsTimeFormat.propTypes = {
-  TimeFormat: string,
+  timeFormat: string,
   onTimeFormatChange: func,
 }
 

ui/src/dashboards/components/TableOptions.js

@@ -27,7 +27,7 @@ const formatColor = color => {
 }
 
 class TableOptions extends Component {
-  state = {TimeAxis: 'VERTICAL', TimeFormat: 'MM/DD/YYYY HH:mm:ss.ss'}
+  state = {TimeAxis: 'VERTICAL', timeFormat: 'MM/DD/YYYY HH:mm:ss.ss'}
 
   handleToggleSingleStatType = () => {}
 
@@ -39,7 +39,9 @@ class TableOptions extends Component {
 
   handleChooseSortBy = () => {}
 
-  handleTimeFormatChange = () => {}
+  handleTimeFormatChange = timeFormat => {
+    this.setState({...this.state, timeFormat: timeFormat.target.value})
+  }
 
   handleToggleTimeAxis = () => {}
 
@@ -58,7 +60,7 @@ class TableOptions extends Component {
       //   axes: {y: {prefix, suffix}},
     } = this.props
 
-    const {TimeFormat, TimeAxis} = this.state
+    const {timeFormat, TimeAxis} = this.state
 
     const disableAddThreshold = singleStatColors.length > MAX_THRESHOLDS
 
@@ -80,7 +82,7 @@ class TableOptions extends Component {
           <h5 className="display-options--header">Table Controls</h5>
           <div className="gauge-controls">
             <GraphOptionsTimeFormat
-              TimeFormat={TimeFormat}
+              timeFormat={timeFormat}
               onTimeFormatChange={this.handleTimeFormatChange}
             />
             <GraphOptionsTimeAxis

ui/src/dashboards/constants/gaugeColors.js

@@ -13,6 +13,8 @@ export const SINGLE_STAT_TEXT = 'text'
 export const SINGLE_STAT_BG = 'background'
 export const SINGLE_STAT_BASE = 'base'
 
+export const TIME_FORMAT_DEFAULT = 'MM/DD/YYYY HH:mm:ss.ss'
+
 export const GAUGE_COLORS = [
   {
     hex: '#BF3D5E',

ui/src/utils/timeSeriesToDygraph.js

@@ -167,12 +167,14 @@ export const timeSeriesToTable = data => {
   const {labels, timeSeries} = timeSeriesToDygraph(data, false)
   const tableData = timeSeries.length
     ? timeSeries.map(row =>
-        row.map(
-          cell =>
-            cell
-              ? typeof cell === 'object' ? cell.toISOString() : cell.toString()
-              : 'null'
-        )
+        row.map(cell => {
+          if (cell) {
+            return typeof cell === 'object'
+              ? cell.toISOString()
+              : cell.toString()
+          }
+          return 'null'
+        })
       )
     : [[]]