Open CEO before saving new cell to dashboard

ui/src/dashboards/actions/cellEditorOverlay.ts

@@ -8,6 +8,7 @@ import {
   ThresholdType,
   TableOptions,
 } from 'src/types/dashboards'
+import {NewDefaultCell} from '../constants'
 
 export enum ActionType {
   ShowCellEditorOverlay = 'SHOW_CELL_EDITOR_OVERLAY',
@@ -43,7 +44,7 @@ export type Action =
 export interface ShowCellEditorOverlayAction {
   type: ActionType.ShowCellEditorOverlay
   payload: {
-    cell: Cell
+    cell: Cell | NewDefaultCell
   }
 }
 
@@ -129,7 +130,7 @@ export interface UpdateFieldOptionsAction {
 }
 
 export const showCellEditorOverlay = (
-  cell: Cell
+  cell: Cell | NewDefaultCell
 ): ShowCellEditorOverlayAction => ({
   type: ActionType.ShowCellEditorOverlay,
   payload: {

ui/src/dashboards/actions/index.ts

@@ -26,10 +26,7 @@ import {
   templateSelectionsFromTemplates,
 } from 'src/dashboards/utils/tempVars'
 import {validTimeRange, validAbsoluteTimeRange} from 'src/dashboards/utils/time'
-import {
-  getNewDashboardCell,
-  getClonedDashboardCell,
-} from 'src/dashboards/utils/cellGetters'
+import {getClonedDashboardCell} from 'src/dashboards/utils/cellGetters'
 import {
   notifyDashboardDeleted,
   notifyDashboardDeleteFailed,
@@ -53,13 +50,13 @@ import {defaultTimeRange} from 'src/shared/data/timeRanges'
 import {
   Dashboard,
   Cell,
-  CellType,
   TimeRange,
   Source,
   Template,
   TemplateValue,
   TemplateType,
 } from 'src/types'
+import {NewDefaultCell} from '../constants'
 
 export enum ActionType {
   LoadDashboards = 'LOAD_DASHBOARDS',
@@ -482,9 +479,10 @@ export const putDashboardByID = (dashboardID: number) => async (
   }
 }
 
-export const updateDashboardCell = (dashboard: Dashboard, cell: Cell) => async (
-  dispatch: Dispatch<Action>
-): Promise<void> => {
+export const updateDashboardCell = (
+  dashboard: Dashboard,
+  cell: Cell | NewDefaultCell
+) => async (dispatch: Dispatch<Action>): Promise<void> => {
   try {
     const {data} = await updateDashboardCellAJAX(cell)
     dispatch(syncDashboardCell(dashboard, data))
@@ -514,16 +512,12 @@ export const deleteDashboardAsync = (dashboard: Dashboard) => async (
 
 export const addDashboardCellAsync = (
   dashboard: Dashboard,
-  cellType?: CellType
+  cell: NewDefaultCell
 ) => async (dispatch: Dispatch<Action>): Promise<void> => {
   try {
-    const {data} = await addDashboardCellAJAX(
-      dashboard,
-      getNewDashboardCell(dashboard, cellType)
-    )
+    const {data} = await addDashboardCellAJAX(dashboard, cell)
     dispatch(addDashboardCell(dashboard, data))
     dispatch(notify(notifyCellAdded(data.name)))
-    dispatch(showCellEditorOverlay(data))
   } catch (error) {
     console.error(error)
     dispatch(errorThrown(error))

ui/src/dashboards/components/CellEditorOverlay.tsx

@@ -45,6 +45,7 @@ import * as QueriesModels from 'src/types/queries'
 import * as SourcesModels from 'src/types/sources'
 import {Service} from 'src/types'
 import {Template} from 'src/types/tempVars'
+import {NewDefaultCell} from 'src/dashboards/constants/index'
 
 type QueryTransitions = typeof queryTransitions
 type EditRawTextAsyncFunc = (
@@ -75,7 +76,7 @@ interface Props {
   services: Service[]
   editQueryStatus: typeof editCellQueryStatus
   onCancel: () => void
-  onSave: (cell: DashboardsModels.Cell) => void
+  onSave: (cell: DashboardsModels.Cell | NewDefaultCell) => void
   source: SourcesModels.Source
   dashboardID: number
   queryStatus: QueryStatus
@@ -86,7 +87,7 @@ interface Props {
   thresholdsListColors: ColorsModels.ColorNumber[]
   gaugeColors: ColorsModels.ColorNumber[]
   lineColors: ColorsModels.ColorString[]
-  cell: DashboardsModels.Cell
+  cell: DashboardsModels.Cell | NewDefaultCell
 }
 
 interface State {
@@ -359,7 +360,7 @@ class CellEditorOverlay extends Component<Props, State> {
       lineColors,
     })
 
-    const newCell: DashboardsModels.Cell = {
+    const newCell: DashboardsModels.Cell | NewDefaultCell = {
       ...cell,
       queries,
       colors,

ui/src/dashboards/containers/DashboardPage.tsx

@@ -48,6 +48,7 @@ import {
 } from 'src/shared/constants'
 import {FORMAT_INFLUXQL, defaultTimeRange} from 'src/shared/data/timeRanges'
 import {EMPTY_LINKS} from 'src/dashboards/constants/dashboardHeader'
+import {getNewDashboardCell} from 'src/dashboards/utils/cellGetters'
 
 // Types
 import {WithRouterProps} from 'react-router'
@@ -62,6 +63,7 @@ import * as QueriesModels from 'src/types/queries'
 import * as SourcesModels from 'src/types/sources'
 import * as TempVarsModels from 'src/types/tempVars'
 import * as NotificationsActions from 'src/types/actions/notifications'
+import {NewDefaultCell} from 'src/dashboards/constants/index'
 import {Service} from 'src/types'
 
 interface Props extends ManualRefreshProps, WithRouterProps {
@@ -412,11 +414,21 @@ class DashboardPage extends Component<Props, State> {
     return topInView && bottomInView
   }
 
+  private isExistingCell(cell: DashboardsModels.Cell | NewDefaultCell) {
+    return (cell as DashboardsModels.Cell).i !== undefined
+  }
+
   private handleSaveEditedCell = async (
-    newCell: DashboardsModels.Cell
+    newCell: DashboardsModels.Cell | NewDefaultCell
   ): Promise<void> => {
     const {dashboard, handleHideCellEditorOverlay} = this.props
-    await this.props.updateDashboardCell(dashboard, newCell)
+
+    if (this.isExistingCell(newCell)) {
+      await this.props.updateDashboardCell(dashboard, newCell)
+    } else if (!this.isExistingCell(newCell)) {
+      this.props.addDashboardCellAsync(dashboard, newCell)
+    }
+
     handleHideCellEditorOverlay()
   }
 
@@ -459,7 +471,8 @@ class DashboardPage extends Component<Props, State> {
 
   private handleAddCell = (): void => {
     const {dashboard} = this.props
-    this.props.addDashboardCellAsync(dashboard)
+    const emptyCell = getNewDashboardCell(dashboard)
+    this.props.handleShowCellEditorOverlay(emptyCell)
   }
 
   private handleCloneCell = (cell: DashboardsModels.Cell): void => {

ui/src/dashboards/reducers/cellEditorOverlay.ts

@@ -18,9 +18,10 @@ import {Action, ActionType} from 'src/dashboards/actions/cellEditorOverlay'
 import {CellType, Cell} from 'src/types'
 import {ThresholdType, TableOptions} from 'src/types/dashboards'
 import {ThresholdColor, GaugeColor, LineColor} from 'src/types/colors'
+import {NewDefaultCell} from 'src/dashboards/constants/index'
 
 interface CEOInitialState {
-  cell: Cell | null
+  cell: Cell | NewDefaultCell | null
   thresholdsListType: ThresholdType
   thresholdsListColors: ThresholdColor[]
   gaugeColors: GaugeColor[]
@@ -38,17 +39,7 @@ export const initialState = {
 export default (state = initialState, action: Action): CEOInitialState => {
   switch (action.type) {
     case ActionType.ShowCellEditorOverlay: {
-      const {
-        cell,
-        cell: {colors},
-      } = action.payload
-
-      const thresholdsListType = getThresholdsListType(colors)
-      const thresholdsListColors = validateThresholdsListColors(
-        colors,
-        thresholdsListType
-      )
-      const gaugeColors = validateGaugeColors(colors)
+      const {cell} = action.payload
 
       const tableOptions = getDeep<TableOptions>(
         cell,
@@ -56,15 +47,29 @@ export default (state = initialState, action: Action): CEOInitialState => {
         initializeOptions(CellType.Table)
       )
 
-      const lineColors = validateLineColors(colors)
+      const colors = (cell as any).colors
+      if (colors !== undefined) {
+        const thresholdsListType = getThresholdsListType(colors)
+        const thresholdsListColors = validateThresholdsListColors(
+          colors,
+          thresholdsListType
+        )
+        const gaugeColors = validateGaugeColors(colors)
 
+        const lineColors = validateLineColors(colors)
+
+        return {
+          ...state,
+          cell: {...cell, tableOptions},
+          thresholdsListType,
+          thresholdsListColors,
+          gaugeColors,
+          lineColors,
+        }
+      }
       return {
         ...state,
         cell: {...cell, tableOptions},
-        thresholdsListType,
-        thresholdsListColors,
-        gaugeColors,
-        lineColors,
       }
     }