diff --git a/public/components/custom_panels/helpers/add_visualization_helper.ts b/public/components/custom_panels/helpers/add_visualization_helper.ts index 5c57ab53a..1c827219b 100644 --- a/public/components/custom_panels/helpers/add_visualization_helper.ts +++ b/public/components/custom_panels/helpers/add_visualization_helper.ts @@ -96,3 +96,30 @@ export const addVisualizationPanel = ( throw new Error('Add/Replace Visualization Error:' + error); } }; + +// Add Multiple visualizations in a Panel +export const addMultipleVisualizations = ( + savedVisualizationIds: string[], + allPanelVisualizations: VisualizationType[] +) => { + try { + let newDimensions; + let visualizationsList = [...allPanelVisualizations]; + + savedVisualizationIds.map((savedVisualizationId) => { + newDimensions = getNewVizDimensions(visualizationsList); + visualizationsList = [ + ...visualizationsList, + { + id: 'panel_viz_' + uuidv4(), + savedVisualizationId, + ...newDimensions, + }, + ]; + }); + + return visualizationsList; + } catch (error) { + throw new Error('Add Multiple Visualization Error:' + error); + } +}; diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts index a3028a4df..a68c27155 100644 --- a/public/components/custom_panels/redux/panel_slice.ts +++ b/public/components/custom_panels/redux/panel_slice.ts @@ -17,7 +17,10 @@ import { import { coreRefs } from '../../../framework/core_refs'; import { SavedObject, SimpleSavedObject } from '../../../../../../src/core/public'; import { isNameValid } from '../helpers/utils'; -import { addVisualizationPanel } from '../helpers/add_visualization_helper'; +import { + addMultipleVisualizations, + addVisualizationPanel, +} from '../helpers/add_visualization_helper'; interface InitialState { id: string; @@ -163,6 +166,23 @@ export const addVizToPanels = (panels, vizId) => async (dispatch, getState) => { }); }; +export const addMultipleVizToPanels = (panels, vizIds) => async (dispatch, getState) => { + forEach(panels, (oldPanel) => { + const panel = getState().customPanel.panelList.find((p) => p.id === oldPanel.panel.id); + + const allVisualizations = panel!.visualizations; + + const visualizationsWithNewPanel = addMultipleVisualizations(vizIds, allVisualizations); + + const updatedPanel = { ...panel, visualizations: visualizationsWithNewPanel }; + try { + dispatch(updatePanel(updatedPanel)); + } catch (err) { + console.error(err?.body?.message || err); + } + }); +}; + export const replaceVizInPanel = (oldPanel, oldVizId, vizId) => async (dispatch, getState) => { const panel = getState().customPanel.panelList.find((p) => p.id === oldPanel.id); diff --git a/public/components/metrics/top_menu/top_menu.tsx b/public/components/metrics/top_menu/top_menu.tsx index 9bd8839c5..70a10059f 100644 --- a/public/components/metrics/top_menu/top_menu.tsx +++ b/public/components/metrics/top_menu/top_menu.tsx @@ -27,7 +27,6 @@ import { resolutionOptions } from '../../../../common/constants/metrics'; import { MetricType } from '../../../../common/types/metrics'; import { uiSettingsService } from '../../../../common/utils'; import SavedObjects from '../../../services/saved_objects/event_analytics/saved_objects'; -import { addVizToPanels, uuidRx } from '../../custom_panels/redux/panel_slice'; import { sortMetricLayout, updateMetricsWithSelections } from '../helpers/utils'; import { allAvailableMetricsSelector, @@ -37,6 +36,7 @@ import { import { SearchBar } from '../sidebar/search_bar'; import { MetricsExportPanel } from './metrics_export_panel'; import './top_menu.scss'; +import { addMultipleVizToPanels, uuidRx } from '../../custom_panels/redux/panel_slice'; interface TopMenuProps { http: CoreStart['http']; @@ -158,7 +158,6 @@ export const TopMenu = ({ const handleSavingObjects = async () => { let savedMetricIds = []; - const savedMetricsInPanels = []; try { savedMetricIds = await Promise.all( @@ -194,6 +193,7 @@ export const TopMenu = ({ const soPanels = selectedPanelOptions.filter((panel) => uuidRx.test(panel.panel.id)); const opsPanels = selectedPanelOptions.filter((panel) => !uuidRx.test(panel.panel.id)); + dispatch(addMultipleVizToPanels(soPanels, allMetricIds)); const savedMetricsInOpsPanels = await Promise.all( opsPanels.map((panel) => { return http.post(`${CUSTOM_PANELS_API_PREFIX}/visualizations/multiple`, { @@ -204,10 +204,6 @@ export const TopMenu = ({ }); }) ); - - allMetricIds.forEach((metricId) => { - dispatch(addVizToPanels(soPanels, metricId)); - }); } catch (e) { const message = 'Issue in saving metrics to panels'; console.error(message, e);