diff --git a/ui/src/dashboards/actions/cellEditorOverlay.ts b/ui/src/dashboards/actions/cellEditorOverlay.ts index 3e2d847c07..564afa75f7 100644 --- a/ui/src/dashboards/actions/cellEditorOverlay.ts +++ b/ui/src/dashboards/actions/cellEditorOverlay.ts @@ -1,85 +1,183 @@ -export const showCellEditorOverlay = cell => ({ +import {Cell} from 'src/types' +import {CellType} from 'src/types/dashboard' +import {ColorNumber, ColorString} from 'src/types/colors' +import {Axes, DecimalPlaces, FieldName, TableOptions} from 'src/types/dashboard' + +interface ShowCellEditorOverlayAction { + type: 'SHOW_CELL_EDITOR_OVERLAY' + payload: { + cell: Cell + } +} +export const showCellEditorOverlay = ( + cell: Cell +): ShowCellEditorOverlayAction => ({ type: 'SHOW_CELL_EDITOR_OVERLAY', payload: { cell, }, }) -export const hideCellEditorOverlay = () => ({ +interface HideCellEditorOverlayAction { + type: 'HIDE_CELL_EDITOR_OVERLAY' +} +export const hideCellEditorOverlay = (): HideCellEditorOverlayAction => ({ type: 'HIDE_CELL_EDITOR_OVERLAY', }) -export const changeCellType = cellType => ({ +interface ChangeCellTypeAction { + type: 'CHANGE_CELL_TYPE' + payload: { + cellType: CellType + } +} +export const changeCellType = (cellType: CellType): ChangeCellTypeAction => ({ type: 'CHANGE_CELL_TYPE', payload: { cellType, }, }) -export const renameCell = cellName => ({ +interface RenameCellAction { + type: 'RENAME_CELL' + payload: { + cellName: string + } +} +export const renameCell = (cellName: string): RenameCellAction => ({ type: 'RENAME_CELL', payload: { cellName, }, }) -export const updateThresholdsListColors = thresholdsListColors => ({ +interface UpdateThresholdsListColorsAction { + type: 'UPDATE_THRESHOLDS_LIST_COLORS' + payload: { + thresholdsListColors: ColorNumber[] + } +} +export const updateThresholdsListColors = ( + thresholdsListColors: ColorNumber[] +): UpdateThresholdsListColorsAction => ({ type: 'UPDATE_THRESHOLDS_LIST_COLORS', payload: { thresholdsListColors, }, }) -export const updateThresholdsListType = thresholdsListType => ({ +interface UpdateThresholdsListTypeAction { + type: 'UPDATE_THRESHOLDS_LIST_TYPE' + payload: { + thresholdsListType: string + } +} +export const updateThresholdsListType = ( + thresholdsListType: string +): UpdateThresholdsListTypeAction => ({ type: 'UPDATE_THRESHOLDS_LIST_TYPE', payload: { thresholdsListType, }, }) -export const updateGaugeColors = gaugeColors => ({ +interface UpdateGaugeColorsAction { + type: 'UPDATE_GAUGE_COLORS' + payload: { + gaugeColors: ColorNumber[] + } +} +export const updateGaugeColors = ( + gaugeColors: ColorNumber[] +): UpdateGaugeColorsAction => ({ type: 'UPDATE_GAUGE_COLORS', payload: { gaugeColors, }, }) -export const updateAxes = axes => ({ +interface UpdateAxesAction { + type: 'UPDATE_AXES' + payload: { + axes: Axes + } +} +export const updateAxes = (axes: Axes): UpdateAxesAction => ({ type: 'UPDATE_AXES', payload: { axes, }, }) -export const updateTableOptions = tableOptions => ({ +interface UpdateTableOptionsAction { + type: 'UPDATE_TABLE_OPTIONS' + payload: { + tableOptions: TableOptions + } +} +export const updateTableOptions = ( + tableOptions: TableOptions +): UpdateTableOptionsAction => ({ type: 'UPDATE_TABLE_OPTIONS', payload: { tableOptions, }, }) -export const updateLineColors = lineColors => ({ +interface UpdateLineColorsAction { + type: 'UPDATE_LINE_COLORS' + payload: { + lineColors: ColorString[] + } +} +export const updateLineColors = ( + lineColors: ColorString[] +): UpdateLineColorsAction => ({ type: 'UPDATE_LINE_COLORS', payload: { lineColors, }, }) -export const changeTimeFormat = timeFormat => ({ +interface ChangeTimeFormatAction { + type: 'CHANGE_TIME_FORMAT' + payload: { + timeFormat: string + } +} +export const changeTimeFormat = ( + timeFormat: string +): ChangeTimeFormatAction => ({ type: 'CHANGE_TIME_FORMAT', payload: { timeFormat, }, }) -export const changeDecimalPlaces = decimalPlaces => ({ +interface ChangeDecimalPlacesAction { + type: 'CHANGE_DECIMAL_PLACES' + payload: { + decimalPlaces: DecimalPlaces + } +} +export const changeDecimalPlaces = ( + decimalPlaces: DecimalPlaces +): ChangeDecimalPlacesAction => ({ type: 'CHANGE_DECIMAL_PLACES', payload: { decimalPlaces, }, }) -export const updateFieldOptions = fieldOptions => ({ +interface UpdateFieldOptionsAction { + type: 'UPDATE_FIELD_OPTIONS' + payload: { + fieldOptions: FieldName[] + } +} +export const updateFieldOptions = ( + fieldOptions: FieldName[] +): UpdateFieldOptionsAction => ({ type: 'UPDATE_FIELD_OPTIONS', payload: { fieldOptions, diff --git a/ui/src/dashboards/components/AxesOptions.js b/ui/src/dashboards/components/AxesOptions.js index a621b14fcd..6cf482369c 100644 --- a/ui/src/dashboards/components/AxesOptions.js +++ b/ui/src/dashboards/components/AxesOptions.js @@ -13,7 +13,7 @@ import { AXES_SCALE_OPTIONS, TOOLTIP_Y_VALUE_FORMAT, } from 'src/dashboards/constants/cellEditor' -import {GRAPH_TYPES} from 'src/dashboards/graphics/graph' +import {GRAPH_TYPES} from 'src/types/dashboard' import {updateAxes} from 'src/dashboards/actions/cellEditorOverlay' import {ErrorHandling} from 'src/shared/decorators/errors' diff --git a/ui/src/dashboards/components/GraphOptionsDecimalPlaces.tsx b/ui/src/dashboards/components/GraphOptionsDecimalPlaces.tsx index 0244c7fced..75de17b1b8 100644 --- a/ui/src/dashboards/components/GraphOptionsDecimalPlaces.tsx +++ b/ui/src/dashboards/components/GraphOptionsDecimalPlaces.tsx @@ -2,10 +2,7 @@ import React, {PureComponent} from 'react' import {ErrorHandling} from 'src/shared/decorators/errors' import OptIn from 'src/shared/components/OptIn' -interface DecimalPlaces { - isEnforced: boolean - digits: number -} +import {DecimalPlaces} from 'src/types/dashboard' interface Props extends DecimalPlaces { onDecimalPlacesChange: (decimalPlaces: DecimalPlaces) => void diff --git a/ui/src/dashboards/components/GraphTypeSelector.js b/ui/src/dashboards/components/GraphTypeSelector.js index 4e6e04f731..2c729f89aa 100644 --- a/ui/src/dashboards/components/GraphTypeSelector.js +++ b/ui/src/dashboards/components/GraphTypeSelector.js @@ -6,7 +6,7 @@ import classnames from 'classnames' import FancyScrollbar from 'shared/components/FancyScrollbar' -import {GRAPH_TYPES} from 'src/dashboards/graphics/graph' +import {GRAPH_TYPES} from 'src/types/dashboard' import {changeCellType} from 'src/dashboards/actions/cellEditorOverlay' diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index 5955807a34..8527929b59 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -22,9 +22,11 @@ import { changeDecimalPlaces, } from 'src/dashboards/actions/cellEditorOverlay' import {DEFAULT_TIME_FIELD} from 'src/dashboards/constants' -import {QueryConfig} from 'src/types/query' import {ErrorHandling} from 'src/shared/decorators/errors' +import {DecimalPlaces} from 'src/types/dashboard' +import {QueryConfig} from 'src/types/query' + interface DropdownOption { text: string key: string @@ -42,11 +44,6 @@ interface TableOptionsInterface { fixFirstColumn: boolean } -interface DecimalPlaces { - isEnforced: boolean - digits: number -} - interface Props { queryConfigs: QueryConfig[] handleUpdateTableOptions: (options: TableOptionsInterface) => void diff --git a/ui/src/dashboards/constants/cellEditor.js b/ui/src/dashboards/constants/cellEditor.ts similarity index 63% rename from ui/src/dashboards/constants/cellEditor.js rename to ui/src/dashboards/constants/cellEditor.ts index a3a617db3d..a8955ecc2c 100644 --- a/ui/src/dashboards/constants/cellEditor.js +++ b/ui/src/dashboards/constants/cellEditor.ts @@ -1,17 +1,8 @@ import {DEFAULT_TABLE_OPTIONS} from 'src/dashboards/constants' import {stringifyColorValues} from 'src/shared/constants/colorOperations' -import { - CELL_TYPE_LINE, - CELL_TYPE_STACKED, - CELL_TYPE_STEPPLOT, - CELL_TYPE_BAR, - CELL_TYPE_LINE_PLUS_SINGLE_STAT, - CELL_TYPE_SINGLE_STAT, - CELL_TYPE_GAUGE, - CELL_TYPE_TABLE, -} from 'src/dashboards/graphics/graph' +import {CellType} from 'src/types/dashboard' -export const initializeOptions = cellType => { +export const initializeOptions = (cellType: CellType) => { switch (cellType) { case 'table': return DEFAULT_TABLE_OPTIONS @@ -35,24 +26,29 @@ export const getCellTypeColors = ({ gaugeColors, thresholdsListColors, lineColors, +}: { + cellType: CellType + gaugeColors + thresholdsListColors + lineColors }) => { let colors = [] switch (cellType) { - case CELL_TYPE_GAUGE: { + case CellType.Gauge: { colors = stringifyColorValues(gaugeColors) break } - case CELL_TYPE_SINGLE_STAT: - case CELL_TYPE_TABLE: { + case CellType.SingleStat: + case CellType.Table: { colors = stringifyColorValues(thresholdsListColors) break } - case CELL_TYPE_BAR: - case CELL_TYPE_LINE: - case CELL_TYPE_LINE_PLUS_SINGLE_STAT: - case CELL_TYPE_STACKED: - case CELL_TYPE_STEPPLOT: { + case CellType.Bar: + case CellType.Line: + case CellType.LinePlusSingleStat: + case CellType.Stacked: + case CellType.StepPlot: { colors = stringifyColorValues(lineColors) } } diff --git a/ui/src/dashboards/constants/index.js b/ui/src/dashboards/constants/index.ts similarity index 79% rename from ui/src/dashboards/constants/index.js rename to ui/src/dashboards/constants/index.ts index 875699fa99..076a22da46 100644 --- a/ui/src/dashboards/constants/index.js +++ b/ui/src/dashboards/constants/index.ts @@ -2,15 +2,16 @@ import { DEFAULT_VERTICAL_TIME_AXIS, DEFAULT_FIX_FIRST_COLUMN, } from 'src/shared/constants/tableGraph' -import {CELL_TYPE_LINE} from 'src/dashboards/graphics/graph' +import {Cell, QueryConfig} from 'src/types' +import {CellType, Dashboard, DecimalPlaces} from 'src/types/dashboard' import {TEMP_VAR_DASHBOARD_TIME} from 'src/shared/constants' -export const UNTITLED_GRAPH = 'Untitled Graph' +export const UNTITLED_GRAPH: string = 'Untitled Graph' -export const TIME_FORMAT_TOOLTIP_LINK = +export const TIME_FORMAT_TOOLTIP_LINK: string = 'http://momentjs.com/docs/#/parsing/string-format/' -export const DEFAULT_DECIMAL_PLACES = { +export const DEFAULT_DECIMAL_PLACES: DecimalPlaces = { isEnforced: false, digits: 3, } @@ -42,13 +43,17 @@ export const FORMAT_OPTIONS = [ {text: TIME_FORMAT_CUSTOM}, ] -export const NEW_DEFAULT_DASHBOARD_CELL = { +export type NewDefaultCell = Pick< + Cell, + Exclude +> +export const NEW_DEFAULT_DASHBOARD_CELL: NewDefaultCell = { x: 0, y: 0, w: 4, h: 4, name: UNTITLED_GRAPH, - type: CELL_TYPE_LINE, + type: CellType.Line, queries: [], tableOptions: DEFAULT_TABLE_OPTIONS, timeFormat: DEFAULT_TIME_FORMAT, @@ -56,7 +61,20 @@ export const NEW_DEFAULT_DASHBOARD_CELL = { fieldOptions: [DEFAULT_TIME_FIELD], } -export const EMPTY_DASHBOARD = { +interface EmptyDefaultDashboardCell { + x: number + y: number + queries: QueryConfig[] + name: string + type: CellType +} +type EmptyDefaultDashboard = Pick< + Dashboard, + Exclude +> & { + cells: EmptyDefaultDashboardCell[] +} +export const EMPTY_DASHBOARD: EmptyDefaultDashboard = { id: 0, name: '', cells: [ @@ -65,7 +83,7 @@ export const EMPTY_DASHBOARD = { y: 0, queries: [], name: 'Loading...', - type: CELL_TYPE_LINE, + type: CellType.Line, }, ], } diff --git a/ui/src/dashboards/graphics/graph.js b/ui/src/dashboards/graphics/graph.tsx similarity index 94% rename from ui/src/dashboards/graphics/graph.js rename to ui/src/dashboards/graphics/graph.tsx index 93084b7ae3..971e0b8dfa 100644 --- a/ui/src/dashboards/graphics/graph.js +++ b/ui/src/dashboards/graphics/graph.tsx @@ -1,15 +1,20 @@ -import React from 'react' +import React, {ReactElement} from 'react' -export const CELL_TYPE_LINE = 'line' -export const CELL_TYPE_STACKED = 'line-stacked' -export const CELL_TYPE_STEPPLOT = 'line-stepplot' -export const CELL_TYPE_BAR = 'bar' -export const CELL_TYPE_LINE_PLUS_SINGLE_STAT = 'line-plus-single-stat' -export const CELL_TYPE_SINGLE_STAT = 'single-stat' -export const CELL_TYPE_GAUGE = 'gauge' -export const CELL_TYPE_TABLE = 'table' +import {CellType} from 'src/types/dashboard' -const GRAPH_SVGS = { +type Graphic = ReactElement + +interface GraphSVGs { + [CellType.Line]: Graphic + [CellType.Stacked]: Graphic + [CellType.StepPlot]: Graphic + [CellType.Bar]: Graphic + [CellType.LinePlusSingleStat]: Graphic + [CellType.SingleStat]: Graphic + [CellType.Gauge]: Graphic + [CellType.Table]: Graphic +} +const GRAPH_SVGS: GraphSVGs = { line: (
{ +const getMostCommonValue = (values: number[]): number => { const results = values.reduce( (acc, value) => { const {distribution, mostCommonCount} = acc @@ -16,13 +16,13 @@ const getMostCommonValue = values => { } return acc }, - {distribution: {}, mostCommonCount: 0} + {distribution: {}, mostCommonCount: 0, mostCommonValue: null} ) return results.mostCommonValue } -export const isCellUntitled = cellName => { +export const isCellUntitled = (cellName: string): boolean => { return cellName === UNTITLED_GRAPH } @@ -53,8 +53,11 @@ const getNextAvailablePosition = (dashboard, newCell) => { } } -export const getNewDashboardCell = (dashboard, cellType) => { - const type = cellType || CELL_TYPE_LINE +export const getNewDashboardCell = ( + dashboard: Dashboard, + cellType: CellType +): NewDefaultCell => { + const type = cellType || CellType.Line const typedCell = { ...NEW_DEFAULT_DASHBOARD_CELL, type, @@ -86,7 +89,10 @@ export const getNewDashboardCell = (dashboard, cellType) => { } } -export const getClonedDashboardCell = (dashboard, cloneCell) => { +export const getClonedDashboardCell = ( + dashboard: Dashboard, + cloneCell: Cell +): Cell => { const {x, y} = getNextAvailablePosition(dashboard, cloneCell) const name = `${cloneCell.name} (clone)` diff --git a/ui/src/shared/constants/colorOperations.js b/ui/src/shared/constants/colorOperations.ts similarity index 80% rename from ui/src/shared/constants/colorOperations.js rename to ui/src/shared/constants/colorOperations.ts index 6e7cf74d1f..1e507c3d4b 100644 --- a/ui/src/shared/constants/colorOperations.js +++ b/ui/src/shared/constants/colorOperations.ts @@ -5,13 +5,9 @@ import { THRESHOLD_COLORS, THRESHOLD_TYPE_BASE, THRESHOLD_TYPE_TEXT, -} from 'shared/constants/thresholds' +} from 'src/shared/constants/thresholds' -import { - CELL_TYPE_LINE, - CELL_TYPE_LINE_PLUS_SINGLE_STAT, - CELL_TYPE_TABLE, -} from 'src/dashboards/graphics/graph' +import {CellType} from 'src/types/dashboard' const getLegibleTextColor = bgColorHex => { const darkText = '#292933' @@ -40,14 +36,16 @@ export const stringifyColorValues = colors => { export const generateThresholdsListHexs = ({ colors, lastValue, - cellType = CELL_TYPE_LINE, + cellType = CellType.Line, }) => { const defaultColoring = { bgColor: null, textColor: - cellType === CELL_TYPE_TABLE ? '#BEC2CC' : THRESHOLD_COLORS[11].hex, + cellType === CellType.Table ? '#BEC2CC' : THRESHOLD_COLORS[11].hex, } const lastValueNumber = Number(lastValue) || 0 + let bgColor + let textColor if (!colors.length) { return defaultColoring @@ -63,7 +61,7 @@ export const generateThresholdsListHexs = ({ } // If the single stat is above a line graph never have a background color - if (cellType === CELL_TYPE_LINE_PLUS_SINGLE_STAT) { + if (cellType === CellType.LinePlusSingleStat) { return baseColor ? {bgColor: null, textColor: baseColor.hex} : defaultColoring @@ -85,16 +83,16 @@ export const generateThresholdsListHexs = ({ colors, lastValueNumber ) - const bgColor = null - const textColor = nearestCrossedThreshold.hex + bgColor = null + textColor = nearestCrossedThreshold.hex return {bgColor, textColor} } // When there is only a base color and it's applued to the background if (colors.length === 1) { - const bgColor = baseColor.hex - const textColor = getLegibleTextColor(bgColor) + bgColor = baseColor.hex + textColor = getLegibleTextColor(bgColor) return {bgColor, textColor} } @@ -106,16 +104,16 @@ export const generateThresholdsListHexs = ({ lastValueNumber ) - const bgColor = nearestCrossedThreshold + bgColor = nearestCrossedThreshold ? nearestCrossedThreshold.hex : baseColor.hex - const textColor = getLegibleTextColor(bgColor) + textColor = getLegibleTextColor(bgColor) return {bgColor, textColor} } // If all else fails, use safe default - const bgColor = null - const textColor = baseColor.hex + bgColor = null + textColor = baseColor.hex return {bgColor, textColor} } diff --git a/ui/src/shared/constants/index.tsx b/ui/src/shared/constants/index.tsx index 4dd35dcd25..36047ffe49 100644 --- a/ui/src/shared/constants/index.tsx +++ b/ui/src/shared/constants/index.tsx @@ -1,11 +1,6 @@ import _ from 'lodash' -import { - CELL_TYPE_LINE, - CELL_TYPE_STACKED, - CELL_TYPE_STEPPLOT, - CELL_TYPE_BAR, -} from 'src/dashboards/graphics/graph' +import {CellType} from 'src/types/dashboard' export const NO_CELL = 'none' @@ -464,11 +459,11 @@ export const linksLink = '/chronograf/v1' export const cellSupportsAnnotations = cellType => { const supportedTypes = [ - CELL_TYPE_LINE, - CELL_TYPE_BAR, - CELL_TYPE_LINE, - CELL_TYPE_STACKED, - CELL_TYPE_STEPPLOT, + CellType.Line, + CellType.Bar, + CellType.Line, + CellType.Stacked, + CellType.StepPlot, ] return !!supportedTypes.find(type => type === cellType) } diff --git a/ui/src/types/dashboard.ts b/ui/src/types/dashboard.ts index 1f05b14312..931d40e172 100644 --- a/ui/src/types/dashboard.ts +++ b/ui/src/types/dashboard.ts @@ -55,7 +55,7 @@ export interface Cell { h: number name: string queries: CellQuery[] - type: string + type: CellType axes: Axes colors: ColorString[] tableOptions: TableOptions @@ -66,13 +66,52 @@ export interface Cell { legend: Legend } +export enum CellType { + Line = 'line', + Stacked = 'line-stacked', + StepPlot = 'line-stepplot', + Bar = 'bar', + LinePlusSingleStat = 'line-plus-single-stat', + SingleStat = 'single-stat', + Gauge = 'gauge', + Table = 'table', +} + interface TemplateValue { value: string - selected?: boolean + type: string + selected: boolean +} + +interface TemplateQuery { + command: string + db?: string + rp?: string + measurement: string + tagKey: string + fieldKey: string } export interface Template { id: string tempVar: string values: TemplateValue[] + type: string + label: string + query?: TemplateQuery +} + +interface DashboardLinks { + self: string + cells: string + templates: string +} + +export interface Dashboard { + id: number + cells: Cell[] + templates: Template[] + name: string + organization: string + links?: DashboardLinks } diff --git a/ui/test/dashboards/components/TemplateControlBar.test.tsx b/ui/test/dashboards/components/TemplateControlBar.test.tsx index 0c14188849..fb98495489 100644 --- a/ui/test/dashboards/components/TemplateControlBar.test.tsx +++ b/ui/test/dashboards/components/TemplateControlBar.test.tsx @@ -10,7 +10,20 @@ const defaultProps = { { id: '000', tempVar: ':alpha:', - values: [{value: 'firstValue'}, {value: 'secondValue'}], + label: '', + type: 'constant', + values: [ + { + value: 'firstValue', + type: 'constant', + selected: false, + }, + { + value: 'secondValue', + type: 'constant', + selected: false, + }, + ], }, ], meRole: 'EDITOR', diff --git a/ui/test/dashboards/reducers/cellEditorOverlay.test.js b/ui/test/dashboards/reducers/cellEditorOverlay.test.ts similarity index 80% rename from ui/test/dashboards/reducers/cellEditorOverlay.test.js rename to ui/test/dashboards/reducers/cellEditorOverlay.test.ts index e0b05d9b40..32165883a5 100644 --- a/ui/test/dashboards/reducers/cellEditorOverlay.test.js +++ b/ui/test/dashboards/reducers/cellEditorOverlay.test.ts @@ -17,31 +17,13 @@ import { validateGaugeColors, validateThresholdsListColors, getThresholdsListType, -} from 'shared/constants/thresholds' +} from 'src/shared/constants/thresholds' import {validateLineColors} from 'src/shared/constants/graphColorPalettes' -import {CELL_TYPE_LINE} from 'src/dashboards/graphics/graph' -import {UNTITLED_GRAPH} from 'src/dashboards/constants' - -const defaultCellType = CELL_TYPE_LINE -const defaultCellName = UNTITLED_GRAPH -const defaultCellAxes = { - y: { - base: '10', - bounds: ['0', ''], - label: '', - prefix: '', - scale: 'linear', - suffix: '', - }, -} +import {cell, axes} from 'test/fixtures' const defaultCell = { - axes: defaultCellAxes, - colors: [], - name: defaultCellName, - type: defaultCellType, - tableOptions: DEFAULT_TABLE_OPTIONS, + ...cell, } const defaultThresholdsListType = getThresholdsListType(defaultCell.colors) @@ -77,15 +59,15 @@ describe('Dashboards.Reducers.cellEditorOverlay', () => { }) it('should change the cell editor visualization type', () => { - const actual = reducer(initialState, changeCellType(defaultCellType)) - const expected = defaultCellType + const actual = reducer(initialState, changeCellType(defaultCell.type)) + const expected = defaultCell.type expect(actual.cell.type).toBe(expected) }) it('should change the name of the cell', () => { - const actual = reducer(initialState, renameCell(defaultCellName)) - const expected = defaultCellName + const actual = reducer(initialState, renameCell(defaultCell.name)) + const expected = defaultCell.name expect(actual.cell.name).toBe(expected) }) @@ -118,8 +100,8 @@ describe('Dashboards.Reducers.cellEditorOverlay', () => { }) it('should update the cell axes', () => { - const actual = reducer(initialState, updateAxes(defaultCellAxes)) - const expected = defaultCellAxes + const actual = reducer(initialState, updateAxes(axes)) + const expected = axes expect(actual.cell.axes).toBe(expected) }) diff --git a/ui/test/fixtures/index.ts b/ui/test/fixtures/index.ts index 735ef085db..dbbe546541 100644 --- a/ui/test/fixtures/index.ts +++ b/ui/test/fixtures/index.ts @@ -1,3 +1,4 @@ +import {interval} from 'src/shared/constants' import { Source, CellQuery, @@ -9,6 +10,7 @@ import { } from 'src/types' import {Axes, TableOptions, FieldName, DecimalPlaces} from 'src/types/dashboard' import {ColorString, ColorNumber} from 'src/types/colors' +import {CellType} from 'src/types/dashboard' export const sourceLinks: SourceLinks = { self: '/chronograf/v1/sources/4', @@ -160,7 +162,7 @@ export const cell: Cell = { name: 'Untitled Graph', queries: [query], axes, - type: 'line', + type: CellType.Line, colors: lineColors, legend: {}, tableOptions, @@ -192,45 +194,57 @@ export const timeRange: TimeRange = { export const userDefinedTemplateVariables: Template[] = [ { tempVar: ':fields:', + type: 'fieldKeys', + label: '', values: [ { selected: false, + type: 'fieldKey', value: 'usage_guest', }, { selected: false, + type: 'fieldKey', value: 'usage_guest_nice', }, { selected: true, + type: 'fieldKey', value: 'usage_idle', }, { selected: false, + type: 'fieldKey', value: 'usage_iowait', }, { selected: false, + type: 'fieldKey', value: 'usage_irq', }, { selected: false, + type: 'fieldKey', value: 'usage_nice', }, { selected: false, + type: 'fieldKey', value: 'usage_softirq', }, { selected: false, + type: 'fieldKey', value: 'usage_steal', }, { selected: false, + type: 'fieldKey', value: 'usage_system', }, { selected: false, + type: 'fieldKey', value: 'usage_user', }, ], @@ -238,33 +252,42 @@ export const userDefinedTemplateVariables: Template[] = [ }, { tempVar: ':measurements:', + type: 'measurements', + label: '', values: [ { selected: true, + type: 'measurement', value: 'cpu', }, { selected: false, + type: 'measurement', value: 'disk', }, { selected: false, + type: 'measurement', value: 'diskio', }, { selected: false, + type: 'measurement', value: 'mem', }, { selected: false, + type: 'measurement', value: 'processes', }, { selected: false, + type: 'measurement', value: 'swap', }, { selected: false, + type: 'measurement', value: 'system', }, ], @@ -272,37 +295,36 @@ export const userDefinedTemplateVariables: Template[] = [ }, ] +const dashtimeTempVar: Template = { + id: 'dashtime', + tempVar: ':dashboardTime:', + type: 'constant', + values: [ + { + value: 'now() - 5m', + type: 'constant', + selected: true, + }, + ], + label: '', +} +const upperdashtimeTempVar: Template = { + id: 'upperdashtime', + tempVar: ':upperDashboardTime:', + type: 'constant', + values: [ + { + value: 'now()', + type: 'constant', + selected: true, + }, + ], + label: '', +} export const predefinedTemplateVariables: Template[] = [ - { - id: 'dashtime', - tempVar: ':dashboardTime:', - values: [ - { - value: 'now() - 5m', - selected: true, - }, - ], - }, - { - id: 'upperdashtime', - tempVar: ':upperDashboardTime:', - values: [ - { - value: 'now()', - selected: true, - }, - ], - }, - { - id: 'interval', - tempVar: ':interval:', - values: [ - { - value: '333', - selected: true, - }, - ], - }, + {...dashtimeTempVar}, + {...upperdashtimeTempVar}, + {...interval}, ] export const thresholdsListColors: ColorNumber[] = [