From 39f2eeb146fcdb74da8fa6c68400b4164d7bb2d1 Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Thu, 26 Apr 2018 12:30:01 -0700 Subject: [PATCH] Add timeFormat and fieldOptions to default new cell --- .../components/GraphOptionsTimeFormat.tsx | 2 +- ui/src/dashboards/components/TableOptions.tsx | 2 +- ui/src/dashboards/constants/cellEditor.js | 2 +- ui/src/dashboards/constants/index.js | 40 ++++++++++++++++++- ui/src/dashboards/utils/tableGraph.ts | 4 +- ui/src/shared/components/Layout.js | 18 +++++++++ ui/src/shared/components/LayoutRenderer.js | 18 +++++++++ ui/src/shared/components/RefreshingGraph.js | 13 +++++- ui/src/shared/components/TableGraph.js | 9 ++--- ui/src/shared/constants/tableGraph.js | 33 --------------- .../GraphOptionsTimeFormat.test.tsx | 2 +- .../reducers/cellEditorOverlay.test.js | 2 +- ui/test/utils/timeSeriesTransformers.test.js | 6 +-- 13 files changed, 98 insertions(+), 53 deletions(-) diff --git a/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx b/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx index 5e44af6cf1..3709df855d 100644 --- a/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx +++ b/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 { diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index 6a0fe3dcc8..c90e6fea6f 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/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' diff --git a/ui/src/dashboards/constants/cellEditor.js b/ui/src/dashboards/constants/cellEditor.js index 4530b2c671..a3a617db3d 100644 --- a/ui/src/dashboards/constants/cellEditor.js +++ b/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, diff --git a/ui/src/dashboards/constants/index.js b/ui/src/dashboards/constants/index.js index 8a343c1d24..645d7303cf 100644 --- a/ui/src/dashboards/constants/index.js +++ b/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 = { diff --git a/ui/src/dashboards/utils/tableGraph.ts b/ui/src/dashboards/utils/tableGraph.ts index fc535b11a3..37cdcbb9b5 100644 --- a/ui/src/dashboards/utils/tableGraph.ts +++ b/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 diff --git a/ui/src/shared/components/Layout.js b/ui/src/shared/components/Layout.js index b3e80d1f1b..352fa10b0d 100644 --- a/ui/src/shared/components/Layout.js +++ b/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, diff --git a/ui/src/shared/components/LayoutRenderer.js b/ui/src/shared/components/LayoutRenderer.js index 1308bdf4d0..42f46a50cc 100644 --- a/ui/src/shared/components/LayoutRenderer.js +++ b/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()), diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js index 9d0aba8387..63275655c2 100644 --- a/ui/src/shared/components/RefreshingGraph.js +++ b/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, diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index e9ab526272..1e32298f30 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/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( diff --git a/ui/src/shared/constants/tableGraph.js b/ui/src/shared/constants/tableGraph.js index af4b969eab..c32309ed78 100644 --- a/ui/src/shared/constants/tableGraph.js +++ b/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, -} diff --git a/ui/test/dashboards/components/GraphOptionsTimeFormat.test.tsx b/ui/test/dashboards/components/GraphOptionsTimeFormat.test.tsx index 0ecd160d91..bffbba1ab8 100644 --- a/ui/test/dashboards/components/GraphOptionsTimeFormat.test.tsx +++ b/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 = { diff --git a/ui/test/dashboards/reducers/cellEditorOverlay.test.js b/ui/test/dashboards/reducers/cellEditorOverlay.test.js index d9fd5c1c18..1fe88c7d77 100644 --- a/ui/test/dashboards/reducers/cellEditorOverlay.test.js +++ b/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, diff --git a/ui/test/utils/timeSeriesTransformers.test.js b/ui/test/utils/timeSeriesTransformers.test.js index 906f9253e4..bc635f632d 100644 --- a/ui/test/utils/timeSeriesTransformers.test.js +++ b/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', () => {