add options to backend DashboardCell and to cell editor overlay cell in redux

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

chronograf.go

@@ -554,6 +554,23 @@ type DashboardCell struct {
 	Type       string           `json:"type"`
 	CellColors []CellColor      `json:"colors"`
 	Legend     Legend           `json:"legend"`
+	Options    Options          `json:"options,omitempty"`
+}
+
+// TableColumn is a column in a DashboardCell of type Table
+type TableColumn struct {
+	InternalName string `json:"internal"`
+	DisplayName  string `json:"display"`
+}
+
+// Should add options for different dashboard cell types
+// TableOptions is a type of Options for a DashboardCell with type Table
+type Options struct {
+	TimeFormat       string        `json:"format"`
+	VerticalTimeAxis bool          `json:"vertical"`
+	SortBy           TableColumn   `json:"sort"`
+	Wrapping         string        `json:"wrapping"`
+	ColumnNames      []TableColumn `json:"columns"`
 }
 
 // DashboardsStore is the storage and retrieval of dashboards

ui/src/dashboards/constants/gaugeColors.js

@@ -129,6 +129,14 @@ export const DEFAULT_TABLE_COLORS = [
   },
 ]
 
+export const DEFAULT_TABLE_OPTIONS = {
+  timeFormat: '',
+  verticalTimeAxis: false,
+  sortBy: 'time',
+  wrapping: 'truncate',
+  columnNames: [],
+}
+
 export const validateSingleStatColors = (colors, type) => {
   if (!colors || colors.length === 0) {
     return DEFAULT_SINGLESTAT_COLORS
@@ -186,6 +194,15 @@ export const validateGaugeColors = colors => {
   return formattedColors
 }
 
+export const initializeOptions = cellType => {
+  switch (cellType) {
+    case 'table':
+      return DEFAULT_TABLE_OPTIONS
+    default:
+      return {}
+  }
+}
+
 export const stringifyColorValues = colors => {
   return colors.map(color => ({...color, value: `${color.value}`}))
 }

ui/src/dashboards/reducers/cellEditorOverlay.js

@@ -5,6 +5,7 @@ import {
   validateGaugeColors,
   validateSingleStatColors,
   getSingleStatType,
+  initializeOptions,
 } from 'src/dashboards/constants/gaugeColors'
 
 export const initialState = {
@@ -23,7 +24,15 @@ export default function cellEditorOverlay(state = initialState, action) {
       const singleStatColors = validateSingleStatColors(colors, singleStatType)
       const gaugeColors = validateGaugeColors(colors)
 
-      return {...state, cell, singleStatType, singleStatColors, gaugeColors}
+      const options = cell.options || initializeOptions(cell.type)
+
+      return {
+        ...state,
+        cell: {...cell, options},
+        singleStatType,
+        singleStatColors,
+        gaugeColors,
+      }
     }
 
     case 'HIDE_CELL_EDITOR_OVERLAY': {