From 7642e43a1567427d5de02acedd4ac89421910f24 Mon Sep 17 00:00:00 2001 From: Devon A Thomson Date: Tue, 3 Mar 2020 15:22:31 -0500 Subject: [PATCH] passed timeRange prop into sidebar.tsx from default_editor. Created a useEffect for timeRange changes, and an action & reducer to capture those changes. Added timeRange to createAggConfigs, and used the setTimeRange method in createAggConfigs --- .../data/public/search/search_service.ts | 18 ++++-- .../public/components/sidebar/sidebar.tsx | 17 +++++- .../components/sidebar/state/actions.ts | 17 +++++- .../components/sidebar/state/constants.ts | 1 + .../components/sidebar/state/reducers.ts | 56 +++++++++++++++++-- .../public/default_editor.tsx | 1 + 6 files changed, 98 insertions(+), 12 deletions(-) diff --git a/src/legacy/core_plugins/data/public/search/search_service.ts b/src/legacy/core_plugins/data/public/search/search_service.ts index 6754c0e3551af..9267e3203af68 100644 --- a/src/legacy/core_plugins/data/public/search/search_service.ts +++ b/src/legacy/core_plugins/data/public/search/search_service.ts @@ -18,7 +18,7 @@ */ import { CoreSetup, CoreStart } from '../../../../../core/public'; -import { IndexPattern } from '../../../../../plugins/data/public'; +import { IndexPattern, TimeRange } from '../../../../../plugins/data/public'; import { aggTypes, AggType, @@ -55,7 +55,8 @@ interface AggsStart { createAggConfigs: ( indexPattern: IndexPattern, configStates?: CreateAggConfigParams[], - schemas?: Record + schemas?: Record, + timeRange?: TimeRange ) => InstanceType; types: AggTypesRegistryStart; __LEGACY: AggsStartLegacy; @@ -94,11 +95,20 @@ export class SearchService { const aggTypesStart = this.aggTypesRegistry.start(); return { aggs: { - createAggConfigs: (indexPattern, configStates = [], schemas) => { - return new AggConfigs(indexPattern, configStates, { + createAggConfigs: ( + indexPattern, + configStates = [], + schemas, + timeRange: TimeRange | undefined + ) => { + const aggConfigs = new AggConfigs(indexPattern, configStates, { schemas, typesRegistry: aggTypesStart, }); + if (timeRange) { + aggConfigs.setTimeRange(timeRange); + } + return aggConfigs; }, types: aggTypesStart, __LEGACY: { diff --git a/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/sidebar.tsx b/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/sidebar.tsx index d3b843eaaec9f..0c99352595a64 100644 --- a/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/sidebar.tsx +++ b/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/sidebar.tsx @@ -21,11 +21,18 @@ import React, { useMemo, useState, useCallback, KeyboardEventHandler, useEffect import { get, isEqual } from 'lodash'; import { i18n } from '@kbn/i18n'; import { keyCodes, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; +import { TimeRange } from 'src/plugins/data/public'; import { Vis } from 'src/legacy/core_plugins/visualizations/public'; import { AggGroupNames } from '../../legacy_imports'; import { DefaultEditorNavBar, OptionTab } from './navbar'; import { DefaultEditorControls } from './controls'; -import { setStateParamValue, useEditorReducer, useEditorFormState, discardChanges } from './state'; +import { + setStateParamValue, + useEditorReducer, + useEditorFormState, + discardChanges, + timeRangeChange, +} from './state'; import { DefaultEditorAggCommonProps } from '../agg_common_props'; import { PersistedState } from '../../../../../../plugins/visualizations/public'; @@ -35,6 +42,7 @@ interface DefaultEditorSideBarProps { optionTabs: OptionTab[]; uiState: PersistedState; vis: Vis; + timeRange?: TimeRange | undefined; } function DefaultEditorSideBar({ @@ -43,6 +51,7 @@ function DefaultEditorSideBar({ optionTabs, uiState, vis, + timeRange, }: DefaultEditorSideBarProps) { const [selectedTab, setSelectedTab] = useState(optionTabs[0].name); const [isDirty, setDirty] = useState(false); @@ -65,6 +74,12 @@ function DefaultEditorSideBar({ [setValidity] ); + useEffect(() => { + if (timeRange) { + dispatch(timeRangeChange(timeRange)); + } + }, [dispatch, timeRange]); + const setStateValue: DefaultEditorAggCommonProps['setStateParamValue'] = useCallback( (paramName, value) => { const shouldUpdate = !isEqual(state.params[paramName], value); diff --git a/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/state/actions.ts b/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/state/actions.ts index 93fa1083bebf9..1315e742f1b7a 100644 --- a/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/state/actions.ts +++ b/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/state/actions.ts @@ -18,6 +18,7 @@ */ import { Vis, VisParams } from 'src/legacy/core_plugins/visualizations/public'; +import { TimeRange } from 'src/plugins/data/public'; import { IAggConfig, Schema } from '../../../legacy_imports'; import { EditorStateActionTypes } from './constants'; @@ -60,6 +61,10 @@ type UpdateStateParams = ActionType< EditorStateActionTypes.UPDATE_STATE_PARAMS, { params: VisParams } >; +type TimeRangeChange = ActionType< + EditorStateActionTypes.TIMERANGE_CHANGE, + { timeRange: TimeRange } +>; export type EditorAction = | AddNewAgg @@ -70,7 +75,8 @@ export type EditorAction = | RemoveAgg | ReorderAggs | ToggleEnabledAgg - | UpdateStateParams; + | UpdateStateParams + | TimeRangeChange; export interface EditorActions { addNewAgg(schema: Schema): AddNewAgg; @@ -89,6 +95,7 @@ export interface EditorActions { reorderAggs(sourceAgg: IAggConfig, destinationAgg: IAggConfig): ReorderAggs; toggleEnabledAgg(aggId: AggId, enabled: IAggConfig['enabled']): ToggleEnabledAgg; updateStateParams(params: VisParams): UpdateStateParams; + timeRangeChange(timeRange: TimeRange): TimeRangeChange; } const addNewAgg: EditorActions['addNewAgg'] = schema => ({ @@ -158,6 +165,13 @@ const updateStateParams: EditorActions['updateStateParams'] = params => ({ }, }); +const timeRangeChange: EditorActions['timeRangeChange'] = (timeRange: TimeRange) => ({ + type: EditorStateActionTypes.TIMERANGE_CHANGE, + payload: { + timeRange, + }, +}); + export { addNewAgg, discardChanges, @@ -168,4 +182,5 @@ export { reorderAggs, toggleEnabledAgg, updateStateParams, + timeRangeChange, }; diff --git a/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/state/constants.ts b/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/state/constants.ts index 2c5f5f1384858..16e6e05ec1411 100644 --- a/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/state/constants.ts +++ b/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/state/constants.ts @@ -27,4 +27,5 @@ export enum EditorStateActionTypes { REMOVE_AGG = 'REMOVE_AGG', REORDER_AGGS = 'REORDER_AGGS', UPDATE_STATE_PARAMS = 'UPDATE_STATE_PARAMS', + TIMERANGE_CHANGE = 'TIMERANGE_CHANGE', } diff --git a/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/state/reducers.ts b/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/state/reducers.ts index 6ae4e415f8caa..abd4c15a5e706 100644 --- a/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/state/reducers.ts +++ b/src/legacy/core_plugins/vis_default_editor/public/components/sidebar/state/reducers.ts @@ -42,7 +42,12 @@ function editorStateReducer(state: VisState, action: EditorAction): VisState { return { ...state, - aggs: createAggConfigs(state.aggs.indexPattern, newAggs, state.aggs.schemas), + aggs: createAggConfigs( + state.aggs.indexPattern, + newAggs, + state.aggs.schemas, + state.aggs.timeRange + ), }; } @@ -65,7 +70,12 @@ function editorStateReducer(state: VisState, action: EditorAction): VisState { return { ...state, - aggs: createAggConfigs(state.aggs.indexPattern, newAggs, state.aggs.schemas), + aggs: createAggConfigs( + state.aggs.indexPattern, + newAggs, + state.aggs.schemas, + state.aggs.timeRange + ), }; } @@ -90,7 +100,12 @@ function editorStateReducer(state: VisState, action: EditorAction): VisState { return { ...state, - aggs: createAggConfigs(state.aggs.indexPattern, newAggs, state.aggs.schemas), + aggs: createAggConfigs( + state.aggs.indexPattern, + newAggs, + state.aggs.schemas, + state.aggs.timeRange + ), }; } @@ -131,7 +146,12 @@ function editorStateReducer(state: VisState, action: EditorAction): VisState { return { ...state, - aggs: createAggConfigs(state.aggs.indexPattern, newAggs, state.aggs.schemas), + aggs: createAggConfigs( + state.aggs.indexPattern, + newAggs, + state.aggs.schemas, + state.aggs.timeRange + ), }; } @@ -143,7 +163,12 @@ function editorStateReducer(state: VisState, action: EditorAction): VisState { return { ...state, - aggs: createAggConfigs(state.aggs.indexPattern, newAggs, state.aggs.schemas), + aggs: createAggConfigs( + state.aggs.indexPattern, + newAggs, + state.aggs.schemas, + state.aggs.timeRange + ), }; } @@ -165,7 +190,26 @@ function editorStateReducer(state: VisState, action: EditorAction): VisState { return { ...state, - aggs: createAggConfigs(state.aggs.indexPattern, newAggs, state.aggs.schemas), + aggs: createAggConfigs( + state.aggs.indexPattern, + newAggs, + state.aggs.schemas, + state.aggs.timeRange + ), + }; + } + + case EditorStateActionTypes.TIMERANGE_CHANGE: { + const { timeRange: timeRange } = action.payload; + + return { + ...state, + aggs: createAggConfigs( + state.aggs.indexPattern, + state.aggs.aggs, + state.aggs.schemas, + timeRange + ), }; } diff --git a/src/legacy/core_plugins/vis_default_editor/public/default_editor.tsx b/src/legacy/core_plugins/vis_default_editor/public/default_editor.tsx index 7eee54006f684..7a62117e3c484 100644 --- a/src/legacy/core_plugins/vis_default_editor/public/default_editor.tsx +++ b/src/legacy/core_plugins/vis_default_editor/public/default_editor.tsx @@ -112,6 +112,7 @@ function DefaultEditor({ initialWidth={editorInitialWidth} >