CEO reducer and misc

ui/src/dashboards/actions/cellEditorOverlay.ts

@@ -1,5 +1,5 @@
 import {Cell} from 'src/types'
-import {CellType} from 'src/types/dashboard'
+import {CellType, ThresholdType} from 'src/types/dashboard'
 import {ColorNumber, ColorString} from 'src/types/colors'
 import {
   Axes,
@@ -8,6 +8,21 @@ import {
   TableOptions,
 } from 'src/types/dashboard'
 
+export type Action =
+  | ShowCellEditorOverlayAction
+  | HideCellEditorOverlayAction
+  | ChangeCellTypeAction
+  | RenameCellAction
+  | UpdateThresholdsListColorsAction
+  | UpdateThresholdsListTypeAction
+  | UpdateGaugeColorsAction
+  | UpdateAxesAction
+  | UpdateTableOptionsAction
+  | UpdateLineColorsAction
+  | ChangeTimeFormatAction
+  | ChangeDecimalPlacesAction
+  | UpdateFieldOptionsAction
+
 interface ShowCellEditorOverlayAction {
   type: 'SHOW_CELL_EDITOR_OVERLAY'
   payload: {
@@ -36,6 +51,7 @@ interface ChangeCellTypeAction {
     cellType: CellType
   }
 }
+
 export const changeCellType = (cellType: CellType): ChangeCellTypeAction => ({
   type: 'CHANGE_CELL_TYPE',
   payload: {
@@ -74,11 +90,12 @@ export const updateThresholdsListColors = (
 interface UpdateThresholdsListTypeAction {
   type: 'UPDATE_THRESHOLDS_LIST_TYPE'
   payload: {
-    thresholdsListType: string
+    thresholdsListType: ThresholdType
   }
 }
+
 export const updateThresholdsListType = (
-  thresholdsListType: string
+  thresholdsListType: ThresholdType
 ): UpdateThresholdsListTypeAction => ({
   type: 'UPDATE_THRESHOLDS_LIST_TYPE',
   payload: {

ui/src/dashboards/constants/cellEditor.ts

@@ -8,7 +8,7 @@ export const initializeOptions = (cellType: CellType) => {
     case 'table':
       return DEFAULT_TABLE_OPTIONS
     default:
-      return {}
+      return DEFAULT_TABLE_OPTIONS
   }
 }
 

ui/src/dashboards/reducers/cellEditorOverlay.ts

@@ -1,13 +1,12 @@
-import _ from 'lodash'
+import {getDeep} from 'src/utils/wrappers'
 
 import {
-  THRESHOLD_TYPE_TEXT,
   DEFAULT_THRESHOLDS_LIST_COLORS,
   DEFAULT_GAUGE_COLORS,
   validateGaugeColors,
   validateThresholdsListColors,
   getThresholdsListType,
-} from 'shared/constants/thresholds'
+} from 'src/shared/constants/thresholds'
 
 import {
   DEFAULT_LINE_COLORS,
@@ -15,16 +14,31 @@ import {
 } from 'src/shared/constants/graphColorPalettes'
 
 import {initializeOptions} from 'src/dashboards/constants/cellEditor'
+import {Action} from 'src/dashboards/actions/cellEditorOverlay'
+import {CellType, Cell} from 'src/types'
+import {ThresholdType, TableOptions} from 'src/types/dashboard'
+import {ThresholdColor, GaugeColor, LineColor} from 'src/types/colors'
+
+interface CEOInitialState {
+  cell: Cell | null
+  thresholdsListType: ThresholdType
+  thresholdsListColors: ThresholdColor[]
+  gaugeColors: GaugeColor[]
+  lineColors: LineColor[]
+}
 
 export const initialState = {
   cell: null,
-  thresholdsListType: THRESHOLD_TYPE_TEXT,
+  thresholdsListType: ThresholdType.Text,
   thresholdsListColors: DEFAULT_THRESHOLDS_LIST_COLORS,
   gaugeColors: DEFAULT_GAUGE_COLORS,
   lineColors: DEFAULT_LINE_COLORS,
 }
 
-export default function cellEditorOverlay(state = initialState, action) {
+const cellEditorOverlay = (
+  state = initialState,
+  action: Action
+): CEOInitialState => {
   switch (action.type) {
     case 'SHOW_CELL_EDITOR_OVERLAY': {
       const {
@@ -39,10 +53,10 @@ export default function cellEditorOverlay(state = initialState, action) {
       )
       const gaugeColors = validateGaugeColors(colors)
 
-      const tableOptions = _.get(
+      const tableOptions = getDeep<TableOptions>(
         cell,
         'tableOptions',
-        initializeOptions('table')
+        initializeOptions(CellType.Table)
       )
 
       const lineColors = validateLineColors(colors)
@@ -142,3 +156,5 @@ export default function cellEditorOverlay(state = initialState, action) {
 
   return state
 }
+
+export default cellEditorOverlay

ui/src/shared/components/Dygraph.tsx

@@ -47,6 +47,7 @@ import {
   DygraphSeries,
   Constructable,
 } from 'src/types'
+import {LineColor} from 'src/types/colors'
 
 const Dygraphs = D as Constructable<DygraphClass>
 
@@ -59,7 +60,7 @@ interface Props {
   containerStyle: object // TODO
   dygraphSeries: DygraphSeries
   timeRange: TimeRange
-  colors: object
+  colors: LineColor[]
   handleSetHoverTime: (t: string) => void
   ruleValues?: RuleValues
   axes?: Axes

ui/src/shared/constants/graphColorPalettes.ts

@@ -1,5 +1,6 @@
 import chroma from 'chroma-js'
 import uuid from 'uuid'
+import {LineColor} from 'src/types/colors'
 
 const COLOR_TYPE_SCALE = 'scale'
 
@@ -207,7 +208,10 @@ export const LINE_COLOR_SCALES = [
   return {name, colors, id}
 })
 
-export const validateLineColors = (colors, numSeries) => {
+export const validateLineColors = (
+  colors: LineColor[],
+  numSeries = 0
+): LineColor[] => {
   const multipleSeriesButOneColor = numSeries > 1 && colors.length < 2
   if (!colors || colors.length === 0 || multipleSeriesButOneColor) {
     return DEFAULT_LINE_COLORS
@@ -220,7 +224,10 @@ export const validateLineColors = (colors, numSeries) => {
   return testColorsTypes ? colors : DEFAULT_LINE_COLORS
 }
 
-export const getLineColorsHexes = (colors, numSeries) => {
+export const getLineColorsHexes = (
+  colors: LineColor[],
+  numSeries: number
+): string[] => {
   const validatedColors = validateLineColors(colors, numSeries) // ensures safe defaults
   const colorsHexArray = validatedColors.map(color => color.hex)
 

ui/src/types/colors.ts

@@ -7,6 +7,8 @@ interface ColorBase {
 
 export type ColorString = ColorBase & {value: string}
 export type ColorNumber = ColorBase & {value: number}
+export type LineColor = ColorString
+export type GaugeColor = ColorString | ColorNumber
 
 export interface ThresholdColor {
   hex: string

ui/src/types/dashboard.ts

@@ -121,3 +121,9 @@ export interface DashboardFile {
   meta?: DashboardFileMetaSection
   dashboard: Dashboard
 }
+
+export enum ThresholdType {
+  Text = 'text',
+  BG = 'background',
+  Base = 'base',
+}

ui/test/dashboards/reducers/cellEditorOverlay.test.ts

@@ -52,7 +52,7 @@ describe('Dashboards.Reducers.cellEditorOverlay', () => {
   })
 
   it('should hide cell editor overlay', () => {
-    const actual = reducer(initialState, hideCellEditorOverlay)
+    const actual = reducer(initialState, hideCellEditorOverlay())
     const expected = null
 
     expect(actual.cell).toBe(expected)

ui/test/fixtures/index.ts

@@ -14,7 +14,7 @@ import {
   FieldOption,
   DecimalPlaces,
 } from 'src/types/dashboard'
-import {ColorString, ColorNumber} from 'src/types/colors'
+import {LineColor, ColorNumber} from 'src/types/colors'
 import {CellType} from 'src/types/dashboard'
 
 export const sourceLinks: SourceLinks = {
@@ -131,7 +131,7 @@ export const tableOptions: TableOptions = {
   wrapping: 'truncate',
   fixFirstColumn: true,
 }
-export const lineColors: ColorString[] = [
+export const lineColors: LineColor[] = [
   {
     id: '574fb0a3-0a26-44d7-8d71-d4981756acb1',
     type: 'scale',