[Backport 2.7] Metrics analytics support for SOpanels

.cypress/integration/2_notebooks.spec.js

@@ -497,7 +497,7 @@ describe('Testing paragraphs', () => {
 
     cy.get('.euiButton__text').contains('Create notebook').should('exist');
   });
-  
+
   it('Cleans up test notebooks', () => {
     cy.get('[data-test-subj="notebook-notebook-actions-button"]').click();
     cy.wait(delay);

public/components/metrics/helpers/utils.tsx

@@ -20,7 +20,6 @@ import { CoreStart } from '../../../../../../src/core/public';
 import { MetricType } from '../../../../common/types/metrics';
 import { VisualizationType } from '../../../../common/types/custom_panels';
 import { DEFAULT_METRIC_HEIGHT, DEFAULT_METRIC_WIDTH } from '../../../../common/constants/metrics';
-import { UNITS_OF_MEASURE } from '../../../../common/constants/explorer';
 import { updateQuerySpanInterval } from '../../custom_panels/helpers/utils';
 
 export const onTimeChange = (

public/components/metrics/top_menu/__tests__/metrics_export_panel.test.tsx

@@ -13,16 +13,24 @@ import {
   sampleSortedMetricsLayout,
   sampleVisualizationById,
 } from '../../../../../test/metrics_contants';
-import { createStore } from '@reduxjs/toolkit';
+import { applyMiddleware, createStore } from '@reduxjs/toolkit';
 import { rootReducer } from '../../../../framework/redux/reducers';
 import { Provider } from 'react-redux';
 import { HttpResponse } from '../../../../../../../src/core/public';
 import { MetricsExportPanel } from '../metrics_export_panel';
 import { EuiComboBoxOptionOption } from '@elastic/eui';
+import thunk from 'redux-thunk';
+import { coreRefs } from '../../../../framework/core_refs';
 
 describe('Export Metrics Panel Component', () => {
   configure({ adapter: new Adapter() });
-  const store = createStore(rootReducer);
+  const store = createStore(rootReducer, applyMiddleware(thunk));
+  coreRefs.savedObjectsClient.find = jest.fn(() =>
+    Promise.resolve({
+      savedObjects: [],
+      then: () => Promise.resolve(),
+    })
+  );
 
   it('renders Export Metrics Panel Component', async () => {
     let httpFlag = 1;

public/components/metrics/top_menu/metrics_export_panel.tsx

@@ -18,6 +18,11 @@ import {
 import { createPrometheusMetricById } from '../helpers/utils';
 import { MetricType } from '../../../../common/types/metrics';
 import { fetchVisualizationById } from '../../custom_panels/helpers/utils';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  fetchPanels,
+  selectPanelList,
+} from '../../../../public/components/custom_panels/redux/panel_slice';
 
 interface MetricsExportPanelProps {
   http: CoreStart['http'];
@@ -49,14 +54,13 @@ export const MetricsExportPanel = ({
 
   const [errorResponse, setErrorResponse] = useState('');
 
-  const getCustomPanelList = async () => {
-    http
-      .get(`${CUSTOM_PANELS_API_PREFIX}/panels`)
-      .then((res: any) => {
-        setOptions(res.panels || []);
-      })
-      .catch((error: any) => console.error(error));
-  };
+  const customPanels = useSelector(selectPanelList);
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(fetchPanels());
+  }, []);
 
   const fetchAllvisualizationsById = async () => {
     let tempVisualizationsMetaData = await Promise.all(
@@ -70,7 +74,6 @@ export const MetricsExportPanel = ({
   };
 
   useEffect(() => {
-    getCustomPanelList();
     fetchAllvisualizationsById();
   }, []);
 
@@ -92,10 +95,10 @@ export const MetricsExportPanel = ({
             setSelectedPanelOptions(options);
           }}
           selectedOptions={selectedPanelOptions}
-          options={options.map((option: CustomPanelOptions) => {
+          options={customPanels.map((option: any) => {
             return {
               panel: option,
-              label: option.name,
+              label: option.title,
             };
           })}
           isClearable={true}

public/components/metrics/top_menu/top_menu.tsx

@@ -37,6 +37,7 @@ import SavedObjects from '../../../services/saved_objects/event_analytics/saved_
 import { sortMetricLayout, updateMetricsWithSelections } from '../helpers/utils';
 import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
 import { MetricsExportPanel } from './metrics_export_panel';
+import { addVizToPanels, uuidRx } from '../../custom_panels/redux/panel_slice';
 
 interface TopMenuProps {
   http: CoreStart['http'];
@@ -191,8 +192,11 @@ export const TopMenu = ({
     if (selectedPanelOptions.length > 0) {
       try {
         const allMetricIds = savedMetricIds.map((metric) => metric.objectId);
-        savedMetricsInPanels = await Promise.all(
-          selectedPanelOptions.map((panel) => {
+        const soPanels = selectedPanelOptions.filter((panel) => uuidRx.test(panel.panel.id));
+        const opsPanels = selectedPanelOptions.filter((panel) => !uuidRx.test(panel.panel.id));
+
+        const savedMetricsInOpsPanels = await Promise.all(
+          opsPanels.map((panel) => {
             return http.post(`${CUSTOM_PANELS_API_PREFIX}/visualizations/multiple`, {
               body: JSON.stringify({
                 panelId: panel.panel.id,
@@ -201,6 +205,10 @@ export const TopMenu = ({
             });
           })
         );
+
+        allMetricIds.forEach((metricId) => {
+          dispatch(addVizToPanels(soPanels, metricId));
+        });
       } catch (e) {
         const message = 'Issue in saving metrics to panels';
         console.error(message, e);