Implement cell type constants across app

ui/src/dashboards/constants/cellEditor.js

@@ -1,5 +1,15 @@
 import {DEFAULT_TABLE_OPTIONS} from 'src/shared/constants/tableGraph'
 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'
 
 export const initializeOptions = cellType => {
   switch (cellType) {
@@ -29,20 +39,20 @@ export const getCellTypeColors = ({
   let colors = []
 
   switch (cellType) {
-    case 'gauge': {
+    case CELL_TYPE_GAUGE: {
       colors = stringifyColorValues(gaugeColors)
       break
     }
-    case 'single-stat':
-    case 'table': {
+    case CELL_TYPE_SINGLE_STAT:
+    case CELL_TYPE_TABLE: {
       colors = stringifyColorValues(thresholdsListColors)
       break
     }
-    case 'bar':
-    case 'line':
-    case 'line-plus-single-stat':
-    case 'line-stacked':
-    case 'line-stepplot': {
+    case CELL_TYPE_BAR:
+    case CELL_TYPE_LINE:
+    case CELL_TYPE_LINE_PLUS_SINGLE_STAT:
+    case CELL_TYPE_STACKED:
+    case CELL_TYPE_STEPPLOT: {
       colors = stringifyColorValues(lineColors)
     }
   }

ui/src/dashboards/constants/index.js

@@ -1,4 +1,5 @@
 import {DEFAULT_TABLE_OPTIONS} from 'src/shared/constants/tableGraph'
+import {CELL_TYPE_LINE, UNTITLED_CELL_LINE} from 'src/dashboards/graphics/graph'
 
 export const EMPTY_DASHBOARD = {
   id: 0,
@@ -9,7 +10,7 @@ export const EMPTY_DASHBOARD = {
       y: 0,
       queries: [],
       name: 'Loading...',
-      type: 'single-stat',
+      type: CELL_TYPE_LINE,
     },
   ],
 }
@@ -19,8 +20,8 @@ export const NEW_DEFAULT_DASHBOARD_CELL = {
   y: 0,
   w: 4,
   h: 4,
-  name: 'Untitled Cell',
-  type: 'line',
+  name: UNTITLED_CELL_LINE,
+  type: CELL_TYPE_LINE,
   queries: [],
   tableOptions: DEFAULT_TABLE_OPTIONS,
 }

ui/src/dashboards/utils/cellGetters.js

@@ -1,4 +1,14 @@
 import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants'
+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'
 
 const getMostCommonValue = values => {
   const results = values.reduce(
@@ -20,10 +30,56 @@ const getMostCommonValue = values => {
   return results.mostCommonValue
 }
 
+export const UNTITLED_CELL_LINE = 'Untitled Line Graph'
+export const UNTITLED_CELL_STACKED = 'Untitled Stacked Graph'
+export const UNTITLED_CELL_STEPPLOT = 'Untitled Step-Plot Graph'
+export const UNTITLED_CELL_BAR = 'Untitled Bar Graph'
+export const UNTITLED_CELL_LINE_PLUS_SINGLE_STAT =
+  'Untitled Line Graph + Single Stat'
+export const UNTITLED_CELL_SINGLE_STAT = 'Untitled Single Stat'
+export const UNTITLED_CELL_GAUGE = 'Untitled Gauge'
+export const UNTITLED_CELL_TABLE = 'Untitled Table'
+
+const getNewTypedCellName = type => {
+  switch (type) {
+    case CELL_TYPE_LINE:
+      return UNTITLED_CELL_LINE
+    case CELL_TYPE_STACKED:
+      return UNTITLED_CELL_STACKED
+    case CELL_TYPE_STEPPLOT:
+      return UNTITLED_CELL_STEPPLOT
+    case CELL_TYPE_BAR:
+      return UNTITLED_CELL_BAR
+    case CELL_TYPE_LINE_PLUS_SINGLE_STAT:
+      return UNTITLED_CELL_LINE_PLUS_SINGLE_STAT
+    case CELL_TYPE_SINGLE_STAT:
+      return UNTITLED_CELL_SINGLE_STAT
+    case CELL_TYPE_GAUGE:
+      return UNTITLED_CELL_GAUGE
+    case CELL_TYPE_TABLE:
+      return UNTITLED_CELL_TABLE
+  }
+}
+
+export const isCellUntitled = cellName => {
+  return (
+    cellName === UNTITLED_CELL_LINE ||
+    cellName === UNTITLED_CELL_STACKED ||
+    cellName === UNTITLED_CELL_STEPPLOT ||
+    cellName === UNTITLED_CELL_BAR ||
+    cellName === UNTITLED_CELL_LINE_PLUS_SINGLE_STAT ||
+    cellName === UNTITLED_CELL_SINGLE_STAT ||
+    cellName === UNTITLED_CELL_GAUGE ||
+    cellName === UNTITLED_CELL_TABLE
+  )
+}
+
 export const getNewDashboardCell = (dashboard, cellType) => {
+  const type = cellType || CELL_TYPE_LINE
   const typedCell = {
     ...NEW_DEFAULT_DASHBOARD_CELL,
-    type: cellType || 'line',
+    type,
+    name: getNewTypedCellName(type),
   }
 
   if (dashboard.cells.length === 0) {

ui/src/shared/components/LayoutCellHeader.js

@@ -1,10 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants/index'
+import {isCellUntitled} from 'src/dashboards/utils/cellGetters'
 
 const LayoutCellHeader = ({isEditable, cellName}) => {
-  const cellNameIsDefault = cellName === NEW_DEFAULT_DASHBOARD_CELL.name
-
   const headingClass = `dash-graph--heading ${
     isEditable ? 'dash-graph--draggable dash-graph--heading-draggable' : ''
   }`
@@ -13,7 +11,7 @@ const LayoutCellHeader = ({isEditable, cellName}) => {
     <div className={headingClass}>
       <span
         className={
-          cellNameIsDefault
+          isCellUntitled(cellName)
             ? 'dash-graph--name dash-graph--name__default'
             : 'dash-graph--name'
         }

ui/src/shared/constants/colorOperations.js

@@ -7,6 +7,12 @@ import {
   THRESHOLD_TYPE_TEXT,
 } from 'shared/constants/thresholds'
 
+import {
+  CELL_TYPE_LINE,
+  CELL_TYPE_LINE_PLUS_SINGLE_STAT,
+  CELL_TYPE_TABLE,
+} from 'src/dashboards/graphics/graph'
+
 const getLegibleTextColor = bgColorHex => {
   const darkText = '#292933'
   const lightText = '#ffffff'
@@ -34,11 +40,12 @@ export const stringifyColorValues = colors => {
 export const generateThresholdsListHexs = ({
   colors,
   lastValue,
-  cellType = 'line',
+  cellType = CELL_TYPE_LINE,
 }) => {
   const defaultColoring = {
     bgColor: null,
-    textColor: cellType === 'table' ? '#BEC2CC' : THRESHOLD_COLORS[11].hex,
+    textColor:
+      cellType === CELL_TYPE_TABLE ? '#BEC2CC' : THRESHOLD_COLORS[11].hex,
   }
   const lastValueNumber = Number(lastValue) || 0
 
@@ -56,7 +63,7 @@ export const generateThresholdsListHexs = ({
   }
 
   // If the single stat is above a line graph never have a background color
-  if (cellType === 'line-plus-single-stat') {
+  if (cellType === CELL_TYPE_LINE_PLUS_SINGLE_STAT) {
     return baseColor
       ? {bgColor: null, textColor: baseColor.hex}
       : defaultColoring

ui/src/shared/constants/index.js

@@ -1,5 +1,12 @@
 import _ from 'lodash'
 
+import {
+  CELL_TYPE_LINE,
+  CELL_TYPE_STACKED,
+  CELL_TYPE_STEPPLOT,
+  CELL_TYPE_BAR,
+} from 'src/dashboards/graphics/graph'
+
 export const PERMISSIONS = {
   ViewAdmin: {
     description: 'Can view or edit admin screens',
@@ -448,11 +455,11 @@ export const linksLink = '/chronograf/v1'
 
 export const cellSupportsAnnotations = cellType => {
   const supportedTypes = [
-    'line',
-    'bar',
-    'line-plus-single-stat',
-    'line-stacked',
-    'line-stepplot',
+    CELL_TYPE_LINE,
+    CELL_TYPE_BAR,
+    CELL_TYPE_LINE,
+    CELL_TYPE_STACKED,
+    CELL_TYPE_STEPPLOT,
   ]
   return !!supportedTypes.find(type => type === cellType)
 }

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

@@ -20,8 +20,10 @@ import {
 } from 'shared/constants/thresholds'
 import {validateLineColors} from 'src/shared/constants/graphColorPalettes'
 
-const defaultCellType = 'line'
-const defaultCellName = 'defaultCell'
+import {CELL_TYPE_LINE, UNTITLED_CELL_LINE} from 'src/dashboards/graphics/graph'
+
+const defaultCellType = CELL_TYPE_LINE
+const defaultCellName = UNTITLED_CELL_LINE
 const defaultCellAxes = {
   y: {
     base: '10',