diff --git a/ui/src/dashboards/components/GraphOptionsTimeFormat.js b/ui/src/dashboards/components/GraphOptionsTimeFormat.js
index 1b867e3d0..9613a9e97 100644
--- a/ui/src/dashboards/components/GraphOptionsTimeFormat.js
+++ b/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}) =>
-
-
-
-
+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 (
+
+
+
+
+ )
+ }
+}
const {func, string} = PropTypes
GraphOptionsTimeFormat.propTypes = {
- TimeFormat: string,
+ timeFormat: string,
onTimeFormatChange: func,
}
diff --git a/ui/src/dashboards/components/TableOptions.js b/ui/src/dashboards/components/TableOptions.js
index a80536586..4e0d66569 100644
--- a/ui/src/dashboards/components/TableOptions.js
+++ b/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 {
Table Controls
{
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'
+ })
)
: [[]]