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' + }) ) : [[]]