Fix saving multiple metrics to SOpanels (#407) (#408)

* fix saving multiple metrics to SOpanels

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* remove unused variable

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

---------

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
(cherry picked from commit a4cb6d1)

Co-authored-by: Shenoy Pratik <sgguruda@amazon.com>

Author: 2 people

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);
+  }
+};

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;
@@ -158,6 +161,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);
 

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);