create action and reducer for updating the redux store

Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>

ui/src/dashboards/actions/cellEditorOverlay.js

@@ -50,3 +50,10 @@ export const updateAxes = axes => ({
     axes,
   },
 })
+
+export const updateOptions = options => ({
+  type: 'UPDATE_OPTIONS',
+  payload: {
+    options,
+  },
+})

ui/src/dashboards/components/GraphOptionsTimeFormat.js

@@ -26,10 +26,12 @@ class GraphOptionsTimeFormat extends Component {
   }
 
   handleChooseFormat = formatOption => {
+    const {onTimeFormatChange} = this.props
     if (formatOption.text === 'Custom') {
       this.setState({customFormat: true})
     } else {
       this.setState({format: formatOption.text, customFormat: false})
+      onTimeFormatChange(formatOption.text)
     }
   }
 

ui/src/dashboards/components/TableOptions.js

@@ -18,7 +18,7 @@ import {MAX_THRESHOLDS} from 'src/dashboards/constants/gaugeColors'
 import {
   updateSingleStatType,
   updateSingleStatColors,
-  updateAxes,
+  updateOptions,
 } from 'src/dashboards/actions/cellEditorOverlay'
 
 const formatColor = color => {
@@ -40,7 +40,8 @@ class TableOptions extends Component {
   handleChooseSortBy = () => {}
 
   handleTimeFormatChange = timeFormat => {
-    this.setState({...this.state, timeFormat})
+    const {options, handleUpdateOptions} = this.props
+    handleUpdateOptions({...options, timeFormat})
   }
 
   handleToggleTimeAxis = () => {}
@@ -151,16 +152,16 @@ TableOptions.propTypes = {
   ),
   handleUpdateSingleStatType: func.isRequired,
   handleUpdateSingleStatColors: func.isRequired,
-  handleUpdateAxes: func.isRequired,
-  axes: shape({}).isRequired,
+  handleUpdateOptions: func.isRequired,
+  options: shape({}).isRequired,
 }
 
 const mapStateToProps = ({
-  cellEditorOverlay: {singleStatType, singleStatColors, cell: {axes}},
+  cellEditorOverlay: {singleStatType, singleStatColors, cell: {options}},
 }) => ({
   singleStatType,
   singleStatColors,
-  axes,
+  options,
 })
 
 const mapDispatchToProps = dispatch => ({
@@ -172,7 +173,7 @@ const mapDispatchToProps = dispatch => ({
     updateSingleStatColors,
     dispatch
   ),
-  handleUpdateAxes: bindActionCreators(updateAxes, dispatch),
+  handleUpdateOptions: bindActionCreators(updateOptions, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(TableOptions)

ui/src/dashboards/constants/gaugeColors.js

@@ -132,7 +132,7 @@ export const DEFAULT_TABLE_COLORS = [
 ]
 
 export const DEFAULT_TABLE_OPTIONS = {
-  timeFormat: '',
+  timeFormat: 'MM/DD/YYYY HH:mm:ss.ss',
   verticalTimeAxis: false,
   sortBy: 'time',
   wrapping: 'truncate',

ui/src/dashboards/reducers/cellEditorOverlay.js

@@ -84,6 +84,13 @@ export default function cellEditorOverlay(state = initialState, action) {
 
       return {...state, cell}
     }
+
+    case 'UPDATE_OPTIONS': {
+      const {options} = action.payload
+      const cell = {...state.cell, options}
+
+      return {...state, cell}
+    }
   }
 
   return state