From ddaf1dfcaae365807e0551975dd0c5be03d5591f Mon Sep 17 00:00:00 2001 From: Alirie Gray Date: Thu, 9 Aug 2018 14:48:27 -0700 Subject: [PATCH] Open CEO before saving new cell to dashboard --- .../dashboards/actions/cellEditorOverlay.ts | 5 ++- ui/src/dashboards/actions/index.ts | 22 ++++------- .../components/CellEditorOverlay.tsx | 7 ++-- .../dashboards/containers/DashboardPage.tsx | 19 +++++++-- .../dashboards/reducers/cellEditorOverlay.ts | 39 +++++++++++-------- 5 files changed, 53 insertions(+), 39 deletions(-) diff --git a/ui/src/dashboards/actions/cellEditorOverlay.ts b/ui/src/dashboards/actions/cellEditorOverlay.ts index 800518c57..9d8a1359d 100644 --- a/ui/src/dashboards/actions/cellEditorOverlay.ts +++ b/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: { diff --git a/ui/src/dashboards/actions/index.ts b/ui/src/dashboards/actions/index.ts index 2985a653a..74408453a 100644 --- a/ui/src/dashboards/actions/index.ts +++ b/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 -): Promise => { +export const updateDashboardCell = ( + dashboard: Dashboard, + cell: Cell | NewDefaultCell +) => async (dispatch: Dispatch): Promise => { 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): Promise => { 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)) diff --git a/ui/src/dashboards/components/CellEditorOverlay.tsx b/ui/src/dashboards/components/CellEditorOverlay.tsx index 0d6b818d0..d4eb05d87 100644 --- a/ui/src/dashboards/components/CellEditorOverlay.tsx +++ b/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 { lineColors, }) - const newCell: DashboardsModels.Cell = { + const newCell: DashboardsModels.Cell | NewDefaultCell = { ...cell, queries, colors, diff --git a/ui/src/dashboards/containers/DashboardPage.tsx b/ui/src/dashboards/containers/DashboardPage.tsx index 6a01fff97..d3389fb47 100644 --- a/ui/src/dashboards/containers/DashboardPage.tsx +++ b/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 { 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 => { 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 { 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 => { diff --git a/ui/src/dashboards/reducers/cellEditorOverlay.ts b/ui/src/dashboards/reducers/cellEditorOverlay.ts index 4fc48c42e..fb3e84421 100644 --- a/ui/src/dashboards/reducers/cellEditorOverlay.ts +++ b/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( 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, } }