Add timeFormat and fieldOptions to default new cell

ui/src/dashboards/components/GraphOptionsTimeFormat.tsx

@@ -6,7 +6,7 @@ import {
   TIME_FORMAT_CUSTOM,
   DEFAULT_TIME_FORMAT,
   TIME_FORMAT_TOOLTIP_LINK,
-} from 'src/shared/constants/tableGraph'
+} from 'src/dashboards/constants'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface TimeFormatOptions {

ui/src/dashboards/components/TableOptions.tsx

@@ -19,7 +19,7 @@ import {
   updateFieldOptions,
   changeTimeFormat,
 } from 'src/dashboards/actions/cellEditorOverlay'
-import {DEFAULT_TIME_FIELD} from 'src/shared/constants/tableGraph'
+import {DEFAULT_TIME_FIELD} from 'src/dashboards/constants'
 import {QueryConfig} from 'src/types/query'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 

ui/src/dashboards/constants/cellEditor.js

@@ -1,4 +1,4 @@
-import {DEFAULT_TABLE_OPTIONS} from 'src/shared/constants/tableGraph'
+import {DEFAULT_TABLE_OPTIONS} from 'src/dashboards/constants'
 import {stringifyColorValues} from 'src/shared/constants/colorOperations'
 import {
   CELL_TYPE_LINE,

ui/src/dashboards/constants/index.js

@@ -1,4 +1,7 @@
-import {DEFAULT_TABLE_OPTIONS} from 'src/shared/constants/tableGraph'
+import {
+  DEFAULT_VERTICAL_TIME_AXIS,
+  DEFAULT_FIX_FIRST_COLUMN,
+} from 'src/shared/constants/tableGraph'
 import {CELL_TYPE_LINE} from 'src/dashboards/graphics/graph'
 
 export const UNTITLED_CELL_LINE = 'Untitled Line Graph'
@@ -11,6 +14,39 @@ export const UNTITLED_CELL_SINGLE_STAT = 'Untitled Single Stat'
 export const UNTITLED_CELL_GAUGE = 'Untitled Gauge'
 export const UNTITLED_CELL_TABLE = 'Untitled Table'
 
+export const TIME_FORMAT_TOOLTIP_LINK =
+  'http://momentjs.com/docs/#/parsing/string-format/'
+
+export const DEFAULT_PRECISION = 0
+
+export const DEFAULT_TIME_FIELD = {
+  internalName: 'time',
+  displayName: '',
+  visible: true,
+  precision: DEFAULT_PRECISION,
+}
+
+export const DEFAULT_TABLE_OPTIONS = {
+  verticalTimeAxis: DEFAULT_VERTICAL_TIME_AXIS,
+  sortBy: DEFAULT_TIME_FIELD,
+  wrapping: 'truncate',
+  fixFirstColumn: DEFAULT_FIX_FIRST_COLUMN,
+}
+
+export const DEFAULT_TIME_FORMAT = 'MM/DD/YYYY HH:mm:ss'
+export const TIME_FORMAT_CUSTOM = 'Custom'
+
+export const FORMAT_OPTIONS = [
+  {text: DEFAULT_TIME_FORMAT},
+  {text: 'MM/DD/YYYY HH:mm:ss.SSS'},
+  {text: 'YYYY-MM-DD HH:mm:ss'},
+  {text: 'HH:mm:ss'},
+  {text: 'HH:mm:ss.SSS'},
+  {text: 'MMMM D, YYYY HH:mm:ss'},
+  {text: 'dddd, MMMM D, YYYY HH:mm:ss'},
+  {text: TIME_FORMAT_CUSTOM},
+]
+
 export const NEW_DEFAULT_DASHBOARD_CELL = {
   x: 0,
   y: 0,
@@ -20,6 +56,8 @@ export const NEW_DEFAULT_DASHBOARD_CELL = {
   type: CELL_TYPE_LINE,
   queries: [],
   tableOptions: DEFAULT_TABLE_OPTIONS,
+  timeFormat: DEFAULT_TIME_FORMAT,
+  fieldOptions: [DEFAULT_TIME_FIELD],
 }
 
 export const EMPTY_DASHBOARD = {

ui/src/dashboards/utils/tableGraph.ts

@@ -2,12 +2,12 @@ import calculateSize from 'calculate-size'
 import _ from 'lodash'
 import {map, reduce, filter} from 'fast.js'
 
+import {CELL_HORIZONTAL_PADDING} from 'src/shared/constants/tableGraph'
 import {
-  CELL_HORIZONTAL_PADDING,
   DEFAULT_TIME_FIELD,
   DEFAULT_TIME_FORMAT,
   DEFAULT_PRECISION,
-} from 'src/shared/constants/tableGraph'
+} from 'src/dashboards/constants'
 
 const calculateTimeColumnWidth = timeFormat => {
   // Force usage of longest format names for ideal measurement

ui/src/shared/components/Layout.js

@@ -151,6 +151,24 @@ const propTypes = {
     name: string.isRequired,
     type: string.isRequired,
     colors: colorsStringSchema,
+    tableOptions: shape({
+      verticalTimeAxis: bool.isRequired,
+      sortBy: shape({
+        internalName: string.isRequired,
+        displayName: string.isRequired,
+        visible: bool.isRequired,
+      }).isRequired,
+      wrapping: string.isRequired,
+      fixFirstColumn: bool.isRequired,
+    }),
+    timeFormat: string.isRequired,
+    fieldOptions: arrayOf(
+      shape({
+        internalName: string.isRequired,
+        displayName: string.isRequired,
+        visible: bool.isRequired,
+      }).isRequired
+    ),
   }).isRequired,
   templates: arrayOf(shape()),
   host: string,

ui/src/shared/components/LayoutRenderer.js

@@ -173,6 +173,24 @@ LayoutRenderer.propTypes = {
       i: string.isRequired,
       name: string.isRequired,
       type: string.isRequired,
+      timeFormat: string.isRequired,
+      tableOptions: shape({
+        verticalTimeAxis: bool.isRequired,
+        sortBy: shape({
+          internalName: string.isRequired,
+          displayName: string.isRequired,
+          visible: bool.isRequired,
+        }).isRequired,
+        wrapping: string.isRequired,
+        fixFirstColumn: bool.isRequired,
+      }),
+      fieldOptions: arrayOf(
+        shape({
+          internalName: string.isRequired,
+          displayName: string.isRequired,
+          visible: bool.isRequired,
+        }).isRequired
+      ),
     }).isRequired
   ),
   templates: arrayOf(shape()),

ui/src/shared/components/RefreshingGraph.js

@@ -168,13 +168,22 @@ RefreshingGraph.propTypes = {
   colors: colorsStringSchema,
   cellID: string,
   inView: bool,
-  tableOptions: shape({}),
+  tableOptions: shape({
+    verticalTimeAxis: bool.isRequired,
+    sortBy: shape({
+      internalName: string.isRequired,
+      displayName: string.isRequired,
+      visible: bool.isRequired,
+    }).isRequired,
+    wrapping: string.isRequired,
+    fixFirstColumn: bool.isRequired,
+  }),
   fieldOptions: arrayOf(
     shape({
       internalName: string.isRequired,
       displayName: string.isRequired,
       visible: bool.isRequired,
-    })
+    }).isRequired
   ),
   timeFormat: string.isRequired,
   hoverTime: string.isRequired,

ui/src/shared/components/TableGraph.js

@@ -17,19 +17,16 @@ import {
   transformTableData,
 } from 'src/dashboards/utils/tableGraph'
 import {updateFieldOptions} from 'src/dashboards/actions/cellEditorOverlay'
-
+import {DEFAULT_TIME_FIELD, DEFAULT_TIME_FORMAT} from 'src/dashboards/constants'
 import {
   ASCENDING,
   DESCENDING,
   NULL_HOVER_TIME,
   NULL_ARRAY_INDEX,
-  DEFAULT_TIME_FIELD,
-  DEFAULT_TIME_FORMAT,
-  DEFAULT_SORT_DIRECTION,
   DEFAULT_FIX_FIRST_COLUMN,
   DEFAULT_VERTICAL_TIME_AXIS,
+  DEFAULT_SORT_DIRECTION,
 } from 'src/shared/constants/tableGraph'
-
 import {generateThresholdsListHexs} from 'shared/constants/colorOperations'
 import {colorsStringSchema} from 'shared/schemas'
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -441,7 +438,7 @@ TableGraph.propTypes = {
       visible: bool.isRequired,
     }).isRequired,
     wrapping: string.isRequired,
-    fixFirstColumn: bool,
+    fixFirstColumn: bool.isRequired,
   }),
   timeFormat: string.isRequired,
   fieldOptions: arrayOf(

ui/src/shared/constants/tableGraph.js

@@ -2,18 +2,6 @@ export const NULL_ARRAY_INDEX = -1
 
 export const NULL_HOVER_TIME = '0'
 
-export const TIME_FORMAT_TOOLTIP_LINK =
-  'http://momentjs.com/docs/#/parsing/string-format/'
-
-export const DEFAULT_PRECISION = 0
-
-export const DEFAULT_TIME_FIELD = {
-  internalName: 'time',
-  displayName: '',
-  visible: true,
-  precision: DEFAULT_PRECISION,
-}
-
 export const ASCENDING = 'asc'
 export const DESCENDING = 'desc'
 export const DEFAULT_SORT_DIRECTION = ASCENDING
@@ -22,24 +10,3 @@ export const DEFAULT_FIX_FIRST_COLUMN = true
 export const DEFAULT_VERTICAL_TIME_AXIS = true
 
 export const CELL_HORIZONTAL_PADDING = 30
-
-export const DEFAULT_TIME_FORMAT = 'MM/DD/YYYY HH:mm:ss'
-export const TIME_FORMAT_CUSTOM = 'Custom'
-
-export const FORMAT_OPTIONS = [
-  {text: DEFAULT_TIME_FORMAT},
-  {text: 'MM/DD/YYYY HH:mm:ss.SSS'},
-  {text: 'YYYY-MM-DD HH:mm:ss'},
-  {text: 'HH:mm:ss'},
-  {text: 'HH:mm:ss.SSS'},
-  {text: 'MMMM D, YYYY HH:mm:ss'},
-  {text: 'dddd, MMMM D, YYYY HH:mm:ss'},
-  {text: TIME_FORMAT_CUSTOM},
-]
-
-export const DEFAULT_TABLE_OPTIONS = {
-  verticalTimeAxis: DEFAULT_VERTICAL_TIME_AXIS,
-  sortBy: DEFAULT_TIME_FIELD,
-  wrapping: 'truncate',
-  fixFirstColumn: DEFAULT_FIX_FIRST_COLUMN,
-}

ui/test/dashboards/components/GraphOptionsTimeFormat.test.tsx

@@ -8,7 +8,7 @@ import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
 import {
   TIME_FORMAT_CUSTOM,
   TIME_FORMAT_TOOLTIP_LINK,
-} from 'src/shared/constants/tableGraph'
+} from 'src/dashboards/constants'
 
 const setup = (override = {}) => {
   const props = {

ui/test/dashboards/reducers/cellEditorOverlay.test.js

@@ -11,7 +11,7 @@ import {
   updateLineColors,
   updateAxes,
 } from 'src/dashboards/actions/cellEditorOverlay'
-import {DEFAULT_TABLE_OPTIONS} from 'src/shared/constants/tableGraph'
+import {DEFAULT_TABLE_OPTIONS} from 'src/dashboards/constants'
 
 import {
   validateGaugeColors,

ui/test/utils/timeSeriesTransformers.test.js

@@ -8,10 +8,8 @@ import {
   transformTableData,
 } from 'src/dashboards/utils/tableGraph'
 
-import {
-  DEFAULT_SORT_DIRECTION,
-  DEFAULT_TIME_FORMAT,
-} from 'src/shared/constants/tableGraph'
+import {DEFAULT_SORT_DIRECTION} from 'src/shared/constants/tableGraph'
+import {DEFAULT_TIME_FORMAT} from 'src/dashboards/constants'
 
 describe('timeSeriesToDygraph', () => {
   it('parses a raw InfluxDB response into a dygraph friendly data format', () => {