Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #3446 from influxdata/ts_dashboards 

Convert CEO actions, cell types, & more dashboards hootenanny to TypeScript
pull/10616/head
Jared Scheib 2018-05-16 14:14:36 -07:00 committed by GitHub
parent a0b44787b7 bcf1100e9d
commit 23a1a32fe1
15 changed files with 347 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
ui/src/dashboards/actions/cellEditorOverlay.ts
View File

@ -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,

2
ui/src/dashboards/components/AxesOptions.js
View File

@ -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'

5
ui/src/dashboards/components/GraphOptionsDecimalPlaces.tsx
View File

@ -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

2
ui/src/dashboards/components/GraphTypeSelector.js
View File

@ -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'

9
ui/src/dashboards/components/TableOptions.tsx
View File

@ -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

34
ui/src/dashboards/constants/cellEditor.js → ui/src/dashboards/constants/cellEditor.ts
View File

@ -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)
}
}

34
ui/src/dashboards/constants/index.js → ui/src/dashboards/constants/index.ts
View File

@ -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<keyof Cell, 'id' | 'axes' | 'colors' | 'links' | 'legend'>
>
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<keyof Dashboard, 'templates' | 'links' | 'organization' | 'cells'>
> & {
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,
},
],
}

64
ui/src/dashboards/graphics/graph.js → ui/src/dashboards/graphics/graph.tsx
View File

@ -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<HTMLDivElement>
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: (
<div className="viz-type-selector--graphic">
<svg
@ -518,45 +523,50 @@ const GRAPH_SVGS = {
),
}
export const GRAPH_TYPES = [
interface GraphType {
type: CellType
menuOption: string
graphic: Graphic
}
export const GRAPH_TYPES: GraphType[] = [
{
type: CELL_TYPE_LINE,
type: CellType.Line,
menuOption: 'Line Graph',
graphic: GRAPH_SVGS[CELL_TYPE_LINE],
graphic: GRAPH_SVGS[CellType.Line],
},
{
type: CELL_TYPE_STACKED,
type: CellType.Stacked,
menuOption: 'Stacked Graph',
graphic: GRAPH_SVGS[CELL_TYPE_STACKED],
graphic: GRAPH_SVGS[CellType.Stacked],
},
{
type: CELL_TYPE_STEPPLOT,
type: CellType.StepPlot,
menuOption: 'Step-Plot Graph',
graphic: GRAPH_SVGS[CELL_TYPE_STEPPLOT],
graphic: GRAPH_SVGS[CellType.StepPlot],
},
{
type: CELL_TYPE_BAR,
type: CellType.Bar,
menuOption: 'Bar Graph',
graphic: GRAPH_SVGS[CELL_TYPE_BAR],
graphic: GRAPH_SVGS[CellType.Bar],
},
{
type: CELL_TYPE_LINE_PLUS_SINGLE_STAT,
type: CellType.LinePlusSingleStat,
menuOption: 'Line Graph + Single Stat',
graphic: GRAPH_SVGS[CELL_TYPE_LINE_PLUS_SINGLE_STAT],
graphic: GRAPH_SVGS[CellType.LinePlusSingleStat],
},
{
type: CELL_TYPE_SINGLE_STAT,
type: CellType.SingleStat,
menuOption: 'Single Stat',
graphic: GRAPH_SVGS[CELL_TYPE_SINGLE_STAT],
graphic: GRAPH_SVGS[CellType.SingleStat],
},
{
type: CELL_TYPE_GAUGE,
type: CellType.Gauge,
menuOption: 'Gauge',
graphic: GRAPH_SVGS[CELL_TYPE_GAUGE],
graphic: GRAPH_SVGS[CellType.Gauge],
},
{
type: CELL_TYPE_TABLE,
type: CellType.Table,
menuOption: 'Table',
graphic: GRAPH_SVGS[CELL_TYPE_TABLE],
graphic: GRAPH_SVGS[CellType.Table],
},
]

22
ui/src/dashboards/utils/cellGetters.js → ui/src/dashboards/utils/cellGetters.ts
View File

@ -1,8 +1,8 @@
import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants'
import {CELL_TYPE_LINE} from 'src/dashboards/graphics/graph'
import {UNTITLED_GRAPH} from 'src/dashboards/constants'
import {Cell, CellType, Dashboard} from 'src/types/dashboard'
import {NewDefaultCell, UNTITLED_GRAPH} from 'src/dashboards/constants'
const getMostCommonValue = values => {
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)`

32
ui/src/shared/constants/colorOperations.js → ui/src/shared/constants/colorOperations.ts
View File

@ -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}
}

17
ui/src/shared/constants/index.tsx
View File

@ -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)
}

43
ui/src/types/dashboard.ts
View File

@ -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
}

15
ui/test/dashboards/components/TemplateControlBar.test.tsx
View File

@ -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',

36
ui/test/dashboards/reducers/cellEditorOverlay.test.js → ui/test/dashboards/reducers/cellEditorOverlay.test.ts
View File

@ -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)
})

84
ui/test/fixtures/index.ts vendored
View File

@ -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[] = [