From c19259d639cb783b7e881fbdf1c2d8a9e86642a1 Mon Sep 17 00:00:00 2001
From: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
Date: Thu, 7 Dec 2023 04:24:39 -0800
Subject: [PATCH 1/8] Metrics Explorer updated with PromQL query for Prometheus
 Metrics and updated Export Panel

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
---
 .cypress/integration/3_panels.spec.ts         | 108 +++--
 .../integration/8_metrics_analytics.spec.js   |   8 +-
 common/constants/metrics.ts                   |  15 +-
 common/constants/shared.ts                    |   6 +
 common/types/custom_panels.ts                 |   2 +-
 common/types/explorer.ts                      |  26 +-
 common/types/metrics.ts                       |  14 +-
 .../application_analytics/helpers/utils.tsx   |   4 +-
 public/components/common/query_utils/index.ts |  54 ++-
 public/components/common/search/search.tsx    |  10 +-
 .../custom_panels/custom_panel_view_so.tsx    |  14 +-
 .../__snapshots__/utils.test.tsx.snap         | 160 +++++--
 .../custom_panels/helpers/utils.tsx           | 154 +++----
 public/components/custom_panels/home.tsx      |  19 +-
 .../panel_modules/panel_grid/panel_grid.tsx   |   3 +-
 .../panel_grid/panel_grid_so.tsx              |   2 +
 .../visualization_container.test.tsx.snap     | 243 ++++++-----
 .../visualization_container.test.tsx          |  39 +-
 .../visualization_container.scss              |  41 +-
 .../visualization_container.tsx               |  76 +++-
 .../custom_panels/redux/panel_slice.ts        | 125 ++++--
 .../event_analytics/explorer/explorer.tsx     |  60 ++-
 .../explorer/save_panel/save_panel.tsx        |   3 +-
 .../__snapshots__/sidebar.test.tsx.snap       | 238 ++++-------
 .../__snapshots__/config_panel.test.tsx.snap  | 110 ++---
 .../config_panes/default_vis_editor.tsx       |   2 +-
 .../home/saved_objects_table.tsx              |  14 +-
 .../event_analytics/utils/utils.tsx           |  43 +-
 .../metrics/helpers/__tests__/utils.test.tsx  |  51 +--
 public/components/metrics/helpers/utils.tsx   | 175 ++------
 public/components/metrics/index.tsx           |  63 +--
 .../metrics/redux/slices/metrics_slice.ts     | 241 +++++++----
 .../metrics/sidebar/metrics_accordion.tsx     |  13 +-
 .../metrics/sidebar/metrics_edit_inline.tsx   |  78 ++++
 .../components/metrics/sidebar/search_bar.tsx |   2 +-
 public/components/metrics/sidebar/sidebar.tsx |  37 +-
 .../metrics_export_panel.test.tsx.snap        |  12 +-
 .../metrics/top_menu/metrics_export.tsx       | 399 ++++++++++++++++++
 .../metrics/top_menu/metrics_export_panel.tsx |  87 ++--
 .../components/metrics/top_menu/top_menu.tsx  | 302 ++-----------
 .../components/metrics/view/metrics_grid.tsx  | 230 +++++-----
 .../__snapshots__/para_output.test.tsx.snap   |   2 +-
 .../__snapshots__/paragraphs.test.tsx.snap    |   2 +-
 .../paragraph_components/para_output.tsx      | 245 +++++------
 .../__tests__/__snapshots__/bar.test.tsx.snap |   8 +-
 .../__snapshots__/heatmap.test.tsx.snap       |   4 +-
 .../__snapshots__/histogram.test.tsx.snap     |   8 +-
 .../horizontal_bar.test.tsx.snap              |   8 +-
 .../__snapshots__/line.test.tsx.snap          |   8 +-
 .../__tests__/__snapshots__/pie.test.tsx.snap |   8 +-
 .../__snapshots__/text.test.tsx.snap          |   4 +-
 .../__snapshots__/treemap.test.tsx.snap       |   4 +-
 .../saved_object_visualization.tsx            |  51 ++-
 .../visualizations/visualization.tsx          |  21 +-
 .../visualizations/visualization_chart.tsx    |   6 +-
 .../embeddable/observability_embeddable.tsx   |  30 +-
 .../observability_embeddable_component.tsx    |   1 +
 public/framework/core_refs.ts                 |   3 +
 public/plugin.ts                              |   1 +
 .../event_analytics/saved_objects.ts          |   8 +-
 .../osd_saved_object_client.ts                |   9 +-
 .../osd_saved_objects/saved_visualization.ts  |   3 +
 .../saved_object_client/ppl/ppl_client.ts     |  12 +-
 .../explorer_saved_object_loader.ts           |   9 +-
 .../saved_object_loaders/ppl/ppl_loader.ts    |   9 +-
 .../custom_panels/custom_panel_adaptor.ts     |  15 +-
 .../event_analytics/event_analytics_router.ts |  12 +-
 test/metrics_contants.ts                      |  54 ++-
 68 files changed, 2138 insertions(+), 1690 deletions(-)
 create mode 100644 public/components/metrics/sidebar/metrics_edit_inline.tsx
 create mode 100644 public/components/metrics/top_menu/metrics_export.tsx

diff --git a/.cypress/integration/3_panels.spec.ts b/.cypress/integration/3_panels.spec.ts
index 7096f5aa8..cad62d989 100644
--- a/.cypress/integration/3_panels.spec.ts
+++ b/.cypress/integration/3_panels.spec.ts
@@ -17,7 +17,7 @@ import {
 } from '../utils/panel_constants';
 
 describe('Panels testing with Sample Data', () => {
-  suppressResizeObserverIssue();//needs to be in file once
+  suppressResizeObserverIssue(); //needs to be in file once
 
   before(() => {
     cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`);
@@ -30,7 +30,7 @@ describe('Panels testing with Sample Data', () => {
   beforeEach(() => {
     eraseTestPanels();
     eraseSavedVisualizations();
-  })
+  });
 
   after(() => {
     eraseTestPanels();
@@ -54,8 +54,8 @@ describe('Panels testing with Sample Data', () => {
         .click({ force: true });
       cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]')
         .trigger('mouseover')
-        .click({force: true});
-      cy.wait(delay*5); //Wont save as correct name without wait
+        .click({ force: true });
+      cy.wait(delay * 5); //Wont save as correct name without wait
       cy.get('[data-test-subj="eventExplorer__querySaveName"]')
         .focus()
         .type(PPL_VISUALIZATIONS_NAMES[0]);
@@ -151,7 +151,7 @@ describe('Panels testing with Sample Data', () => {
       it('Searches panels', () => {
         createLegacyPanel('Legacy Named');
         createSavedObjectPanel('Saved Object');
-        cy.wait(delay);//Needed so the panel appears on the dashboard page
+        cy.wait(delay); //Needed so the panel appears on the dashboard page
         cy.reload();
         cy.get('input[data-test-subj="operationalPanelSearchBar"]')
           .focus()
@@ -203,7 +203,7 @@ describe('Panels testing with Sample Data', () => {
 
       it('Deletes the panel', () => {
         createSavedObjectPanel();
-        cy.get('a[data-test-subj="breadcrumb last"]').click();//refresh so panel appears
+        cy.get('a[data-test-subj="breadcrumb last"]').click(); //refresh so panel appears
         cy.get('input[data-test-subj="checkboxSelectAll"]').click();
         openActionsDropdown();
         cy.get('button[data-test-subj="deleteContextMenuItem"]').click({ force: true });
@@ -251,7 +251,7 @@ describe('Panels testing with Sample Data', () => {
     beforeEach(() => {
       const test_name = `test_${new Date().getTime()}`;
       createSavedObjectPanel(test_name).as('thePanel');
-      cy.then(function (){
+      cy.then(function () {
         moveToThePanel(this.thePanel.id);
       });
     });
@@ -264,19 +264,23 @@ describe('Panels testing with Sample Data', () => {
 
     it('Redirects to correct page on breadcrumb click', () => {
       cy.get('a[data-test-subj="breadcrumb last"]').click();
-      cy.then(function (){
-        cy.get('h1[data-test-subj="panelNameHeader"]').contains(this.thePanel.attributes.title).should('exist');
+      cy.then(function () {
+        cy.get('h1[data-test-subj="panelNameHeader"]')
+          .contains(this.thePanel.attributes.title)
+          .should('exist');
       });
     });
 
     it('Duplicate the open panel', () => {
       cy.get('button[data-test-subj="panelActionContextMenu"]').click();
       cy.get('button[data-test-subj="duplicatePanelContextMenuItem"]').click();
-      cy.then(function (){
-        cy.get(`input.euiFieldText[value="${this.thePanel.attributes.title} (copy)"]`).should('exist');
+      cy.then(function () {
+        cy.get(`input.euiFieldText[value="${this.thePanel.attributes.title} (copy)"]`).should(
+          'exist'
+        );
       });
       cy.get('button[data-test-subj="runModalButton"]').click();
-      cy.then(function (){
+      cy.then(function () {
         cy.get('h1[data-test-subj="panelNameHeader"]')
           .contains(this.thePanel.attributes.title + ' (copy)')
           .should('exist');
@@ -284,9 +288,11 @@ describe('Panels testing with Sample Data', () => {
     });
 
     it('Rename the open panel', () => {
-      cy.then(function (){
+      cy.then(function () {
         cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
-        cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
+        cy.get('input[data-test-subj="operationalPanelSearchBar"]')
+          .focus()
+          .type(this.thePanel.attributes.title);
         cy.get('a.euiLink').contains(this.thePanel.attributes.title).click();
         cy.get('button[data-test-subj="panelActionContextMenu"]').click();
         cy.get('button[data-test-subj="renamePanelContextMenuItem"]').click();
@@ -295,15 +301,19 @@ describe('Panels testing with Sample Data', () => {
           .clear({ force: true })
           .focus()
           .type('Renamed Panel');
-        });
+      });
       cy.get('button[data-test-subj="runModalButton"]').click();
       cy.get('h1[data-test-subj="panelNameHeader"]').contains('Renamed Panel').should('exist');
     });
 
     it('Change date filter of the panel', () => {
-      cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({force: true});
-      cy.wait(delay);//flyout won't open sometimes without
-      cy.get('button[data-test-subj="superDatePickerCommonlyUsed_This_year"]').click({force: true});
+      cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({
+        force: true,
+      });
+      cy.wait(delay); //flyout won't open sometimes without
+      cy.get('button[data-test-subj="superDatePickerCommonlyUsed_This_year"]').click({
+        force: true,
+      });
       cy.get('button[data-test-subj="superDatePickerShowDatesButton"]')
         .contains('This year')
         .should('exist');
@@ -320,7 +330,7 @@ describe('Panels testing with Sample Data', () => {
       cy.get('select').select(PPL_VISUALIZATIONS_NAMES[0]);
       cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click();
       cy.get('.plot-container').should('exist');
-      cy.get('button[data-test-subj="addFlyoutButton"]').click({force: true});
+      cy.get('button[data-test-subj="addFlyoutButton"]').click({ force: true });
       cy.get('.euiToastHeader__title').contains('successfully').should('exist');
     });
 
@@ -335,7 +345,7 @@ describe('Panels testing with Sample Data', () => {
       cy.get('select').select(PPL_VISUALIZATIONS_NAMES[1]);
       cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click();
       cy.get('.plot-container').should('exist');
-      cy.get('button[data-test-subj="addFlyoutButton"]').click({force: true});
+      cy.get('button[data-test-subj="addFlyoutButton"]').click({ force: true });
       cy.get('.euiToastHeader__title').contains('successfully').should('exist');
     });
 
@@ -350,11 +360,15 @@ describe('Panels testing with Sample Data', () => {
         addVisualizationsToPanel(this.thePanel, [this.vis1.id]);
         moveToThePanel(this.thePanel.id);
         cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
-        cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
+        cy.get('input[data-test-subj="operationalPanelSearchBar"]')
+          .focus()
+          .type(this.thePanel.attributes.title);
         cy.get('a.euiLink').contains(this.thePanel.attributes.title).click();
       });
 
-      cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({force: true,});
+      cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({
+        force: true,
+      });
       cy.get('[data-test-subj="superDatePickerQuickMenu"')
         .first()
         .within(() => {
@@ -365,11 +379,11 @@ describe('Panels testing with Sample Data', () => {
 
       cy.get('[data-test-subj="searchAutocompleteTextArea"]')
         .trigger('mouseover')
-        .click({force: true})
-        .wait(delay*5)
+        .click({ force: true })
+        .wait(delay * 5)
         .focus()
         .type(PPL_FILTER);
-      cy.get('button[data-test-subj="superDatePickerApplyTimeButton"]').click({force: true});
+      cy.get('button[data-test-subj="superDatePickerApplyTimeButton"]').click({ force: true });
       cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click();
       cy.get('.xtick').should('contain', 'Munich Airport');
       cy.get('.xtick').contains('Zurich Airport').should('not.exist');
@@ -389,7 +403,9 @@ describe('Panels testing with Sample Data', () => {
         addVisualizationsToPanel(this.thePanel, [this.vis1.id]);
         moveToThePanel(this.thePanel.id);
         cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
-        cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
+        cy.get('input[data-test-subj="operationalPanelSearchBar"]')
+          .focus()
+          .type(this.thePanel.attributes.title);
         cy.get('a.euiLink').contains(this.thePanel.attributes.title).click();
       });
 
@@ -419,7 +435,9 @@ describe('Panels testing with Sample Data', () => {
         addVisualizationsToPanel(this.thePanel, [this.vis1.id]);
         moveToThePanel(this.thePanel.id);
         cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
-        cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
+        cy.get('input[data-test-subj="operationalPanelSearchBar"]')
+          .focus()
+          .type(this.thePanel.attributes.title);
         cy.get('a.euiLink').contains(this.thePanel.attributes.title).click();
       });
 
@@ -446,7 +464,9 @@ describe('Panels testing with Sample Data', () => {
         addVisualizationsToPanel(this.thePanel, [this.vis1.id]);
         moveToThePanel(this.thePanel.id);
         cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
-        cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
+        cy.get('input[data-test-subj="operationalPanelSearchBar"]')
+          .focus()
+          .type(this.thePanel.attributes.title);
         cy.get('a.euiLink').contains(this.thePanel.attributes.title).click();
       });
 
@@ -470,7 +490,9 @@ describe('Panels testing with Sample Data', () => {
         addVisualizationsToPanel(this.thePanel, [this.vis1.id]);
         moveToThePanel(this.thePanel.id);
         cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
-        cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
+        cy.get('input[data-test-subj="operationalPanelSearchBar"]')
+          .focus()
+          .type(this.thePanel.attributes.title);
         cy.get('a.euiLink').contains(this.thePanel.attributes.title).click();
       });
 
@@ -503,15 +525,17 @@ describe('Panels testing with Sample Data', () => {
         PPL_VISUALIZATIONS[2],
         PPL_VISUALIZATION_CONFIGS[2]
       ).as('vis2');
-      
+
       cy.then(function () {
         addVisualizationsToPanel(this.thePanel, [this.vis1.id]);
         moveToThePanel(this.thePanel.id);
         cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
-        cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
+        cy.get('input[data-test-subj="operationalPanelSearchBar"]')
+          .focus()
+          .type(this.thePanel.attributes.title);
         cy.get('a.euiLink').contains(this.thePanel.attributes.title).click({ force: true });
       });
-      
+
       cy.get('button[aria-label="actionMenuButton"]').eq(0).click();
       cy.get('button[data-test-subj="replaceVizContextMenuItem"]').click();
       cy.get('select').select(PPL_VISUALIZATIONS_NAMES[2]);
@@ -540,18 +564,20 @@ describe('Panels testing with Sample Data', () => {
       cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]')
         .trigger('mouseover')
         .click();
-        
-        cy.then(function () {
-          cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').type(this.thePanel.attributes.title);
-          cy.get(`input[value="${this.thePanel.attributes.title}"]`).trigger('mouseover').click();
-        });
+
+      cy.then(function () {
+        cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').type(
+          this.thePanel.attributes.title
+        );
+        cy.get(`input[value="${this.thePanel.attributes.title}"]`).trigger('mouseover').click();
+      });
 
       cy.get('[data-test-subj="eventExplorer__querySaveName"]')
         .focus()
         .type(PPL_VISUALIZATIONS_NAMES[2]);
       cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click();
       cy.get('.euiToastHeader__title').contains('successfully').should('exist');
-      
+
       cy.then(function () {
         moveToThePanel(this.thePanel.id);
       });
@@ -572,7 +598,9 @@ describe('Panels testing with Sample Data', () => {
         addVisualizationsToPanel(this.thePanel, [this.vis1.id]);
         moveToThePanel(this.thePanel.id);
         cy.get('[data-test-subj="breadcrumb"]').click({ force: true });
-        cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title);
+        cy.get('input[data-test-subj="operationalPanelSearchBar"]')
+          .focus()
+          .type(this.thePanel.attributes.title);
         cy.get('a.euiLink').contains(this.thePanel.attributes.title).click();
       });
 
@@ -813,7 +841,7 @@ const createVisualization = (newName, query, vizConfig) => {
             description: '',
             type: 'bar',
             user_configs: vizConfig,
-            sub_type: 'visualization',
+            subType: 'visualization',
           },
         },
       },
diff --git a/.cypress/integration/8_metrics_analytics.spec.js b/.cypress/integration/8_metrics_analytics.spec.js
index 255a35434..768c62294 100644
--- a/.cypress/integration/8_metrics_analytics.spec.js
+++ b/.cypress/integration/8_metrics_analytics.spec.js
@@ -9,11 +9,11 @@ import {
   delay,
   PPL_METRICS,
   PPL_METRICS_NAMES,
-  VIS_TYPE_LINE,
   TESTING_PANEL,
+  VIS_TYPE_LINE,
 } from '../utils/metrics_constants';
-import { suppressResizeObserverIssue, COMMAND_TIMEOUT_LONG } from '../utils/constants';
-import { landOnPanels, clearQuerySearchBoxText } from '../utils/event_analytics/helpers';
+import { COMMAND_TIMEOUT_LONG, suppressResizeObserverIssue } from '../utils/constants';
+import { clearQuerySearchBoxText, landOnPanels } from '../utils/event_analytics/helpers';
 
 describe('Metrics Analytics', () => {
   beforeEach(() => {
@@ -281,7 +281,7 @@ const createSavedObjectMetric = ({ testMetricIndex }) => {
             name: PPL_METRICS_NAMES[testMetricIndex],
             description: '',
             type: 'line',
-            sub_type: 'metric',
+            subType: 'metric',
           },
         },
       },
diff --git a/common/constants/metrics.ts b/common/constants/metrics.ts
index 853ef2865..7e92e6663 100644
--- a/common/constants/metrics.ts
+++ b/common/constants/metrics.ts
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+export const METRIC_EXPLORER_BASE_PATH = 'observability-metrics#/';
+
 // requests constants
 export const VISUALIZATION = 'viz';
 export const SAVED_VISUALIZATION = 'savedVisualization';
@@ -24,13 +26,10 @@ export const resolutionOptions = [
   { value: 'y', text: 'years' },
 ];
 
-export const DEFAULT_METRIC_HEIGHT = 2;
-export const DEFAULT_METRIC_WIDTH = 12;
-
 export const AGGREGATION_OPTIONS = [
-  { label: 'avg' },
-  { label: 'sum' },
-  { label: 'count' },
-  { label: 'min' },
-  { label: 'max' },
+  { value: 'avg', text: 'avg()' },
+  { value: 'sum', text: 'sum()' },
+  { value: 'count', text: 'count()' },
+  { value: 'min', text: 'min()' },
+  { value: 'max', text: 'max()' },
 ];
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
index 211645485..9baffcf10 100644
--- a/common/constants/shared.ts
+++ b/common/constants/shared.ts
@@ -78,6 +78,10 @@ export const PPL_PATTERNS_DOCUMENTATION_URL =
 export const UI_DATE_FORMAT = 'MM/DD/YYYY hh:mm A';
 export const PPL_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss.SSSSSS';
 export const SPAN_REGEX = /span/;
+
+export const PROMQL_METRIC_SUBTYPE = 'promqlmetric';
+export const PPL_METRIC_SUBTYPE = 'metric';
+
 export const PPL_SPAN_REGEX = /by\s*span/i;
 export const PPL_STATS_REGEX = /\|\s*stats/i;
 export const PPL_INDEX_INSERT_POINT_REGEX = /(search source|source|index)\s*=\s*([^|\s]+)(.*)/i;
@@ -190,6 +194,7 @@ export const LIVE_OPTIONS = [
 ];
 
 export const LIVE_END_TIME = 'now';
+
 export interface DefaultChartStylesProps {
   DefaultModeLine: string;
   Interpolation: string;
@@ -243,6 +248,7 @@ export const VISUALIZATION_ERROR = {
   NO_DATA: 'No data found.',
   INVALID_DATA: 'Invalid visualization data',
   NO_SERIES: 'Add a field to start',
+  NO_METRIC: 'Invalid Metric MetaData',
 };
 
 export const S3_DATASOURCE_TYPE = 'S3_DATASOURCE';
diff --git a/common/types/custom_panels.ts b/common/types/custom_panels.ts
index a24cbe839..11834906c 100644
--- a/common/types/custom_panels.ts
+++ b/common/types/custom_panels.ts
@@ -50,7 +50,7 @@ export interface SavedVisualizationType {
   selected_date_range: { start: string; end: string; text: string };
   timeField: string;
   application_id?: string;
-  user_configs: any;
+  userConfigs: any;
 }
 
 export interface PPLResponse {
diff --git a/common/types/explorer.ts b/common/types/explorer.ts
index 9daf69074..c46a65249 100644
--- a/common/types/explorer.ts
+++ b/common/types/explorer.ts
@@ -8,23 +8,23 @@ import Plotly from 'plotly.js-dist';
 import { QueryManager } from 'common/query_manager';
 import { VIS_CHART_TYPES } from '../../common/constants/shared';
 import {
-  RAW_QUERY,
-  SELECTED_FIELDS,
-  UNSELECTED_FIELDS,
+  AGGREGATIONS,
   AVAILABLE_FIELDS,
-  QUERIED_FIELDS,
-  INDEX,
+  BREAKDOWNS,
+  CUSTOM_LABEL,
   FINAL_QUERY,
-  SELECTED_TIMESTAMP,
-  SELECTED_DATE_RANGE,
   GROUPBY,
-  AGGREGATIONS,
-  CUSTOM_LABEL,
-  BREAKDOWNS,
+  INDEX,
+  QUERIED_FIELDS,
+  RAW_QUERY,
+  SELECTED_DATE_RANGE,
+  SELECTED_FIELDS,
+  SELECTED_TIMESTAMP,
+  UNSELECTED_FIELDS,
 } from '../constants/explorer';
 import {
-  CoreStart,
   CoreSetup,
+  CoreStart,
   HttpSetup,
   HttpStart,
   NotificationsStart,
@@ -39,6 +39,7 @@ import {
 } from '../../../../src/core/public/saved_objects';
 import { ChromeBreadcrumb } from '../../../../src/core/public/chrome';
 import { DataSourceType } from '../../../../src/plugins/data/public';
+import { PROMQL_METRIC_SUBTYPE } from '../constants/shared';
 
 export interface IQueryTab {
   id: string;
@@ -173,7 +174,7 @@ export interface SavedVisualization extends SavedObjectAttributes {
   selected_fields: { text: string; tokens: [] };
   selected_timestamp: IField;
   type: string;
-  sub_type?: 'metric' | 'visualization'; // exists if sub type is metric
+  subType?: 'metric' | 'visualization' | typeof PROMQL_METRIC_SUBTYPE; // exists if sub type is metric
   user_configs?: string;
   units_of_measure?: string;
   application_id?: string;
@@ -346,6 +347,7 @@ export interface DataConfigPanelProps {
   visualizations: IVisualizationContainerProps;
   queryManager?: QueryManager;
 }
+
 export interface GetTooltipHoverInfoType {
   tooltipMode: string;
   tooltipText: string;
diff --git a/common/types/metrics.ts b/common/types/metrics.ts
index 64ebd07ab..7cefde98b 100644
--- a/common/types/metrics.ts
+++ b/common/types/metrics.ts
@@ -5,12 +5,6 @@
 
 import { VisualizationType } from './custom_panels';
 
-export interface MetricData {
-  metricId: string;
-  metricType: 'savedCustomMetric' | 'prometheusMetric';
-  metricName: string;
-}
-
 export interface MetricType extends VisualizationType {
   id: string;
   savedVisualizationId: string;
@@ -18,5 +12,11 @@ export interface MetricType extends VisualizationType {
   y: number;
   w: number;
   h: number;
-  metricType: 'savedCustomMetric' | 'prometheusMetric';
+  query: {
+    type: 'savedCustomMetric' | 'prometheusMetric';
+    aggregation: string;
+    attributesGroupBy: string[];
+    catalog: string;
+    availableAttributes?: string[];
+  };
 }
diff --git a/public/components/application_analytics/helpers/utils.tsx b/public/components/application_analytics/helpers/utils.tsx
index 08ba77f32..8c66cc215 100644
--- a/public/components/application_analytics/helpers/utils.tsx
+++ b/public/components/application_analytics/helpers/utils.tsx
@@ -218,7 +218,9 @@ export const calculateAvailability = async (
     const visData = await fetchVisualizationById(http, visualizationId, (value: string) =>
       console.error(value)
     );
-    const userConfigs = visData.user_configs ? JSON.parse(visData.user_configs) : {};
+    const userConfigs = visData.userConfigs
+      ? JSON.parse(visData.user_configs || visData.userConfigs)
+      : {};
     // If there are levels, we get the current value
     if (userConfigs.availabilityConfig?.hasOwnProperty('level')) {
       // For every saved visualization with availability levels we push it to visWithAvailability
diff --git a/public/components/common/query_utils/index.ts b/public/components/common/query_utils/index.ts
index 9f4024bb3..819ba3bc2 100644
--- a/public/components/common/query_utils/index.ts
+++ b/public/components/common/query_utils/index.ts
@@ -6,7 +6,7 @@
 import dateMath from '@elastic/datemath';
 import { Moment } from 'moment-timezone';
 import { isEmpty } from 'lodash';
-import { SearchMetaData } from 'public/components/event_analytics/redux/slices/search_meta_data_slice';
+import { SearchMetaData } from '../../event_analytics/redux/slices/search_meta_data_slice';
 import {
   PPL_DEFAULT_PATTERN_REGEX_FILETER,
   SELECTED_DATE_RANGE,
@@ -20,6 +20,7 @@ import {
   PPL_NEWLINE_REGEX,
 } from '../../../../common/constants/shared';
 import { IExplorerFields, IQuery } from '../../../../common/types/explorer';
+import { updateCatalogVisualizationQuery } from '../../custom_panels/helpers/utils';
 
 /*
  * "Query Utils" This file contains different reused functions in operational panels
@@ -35,6 +36,32 @@ const escapeQuotes = (literal: string) => {
   return literal.replaceAll("'", "''");
 };
 
+export const findMinInterval = (start: string = '', end: string = '') => {
+  const momentStart = dateMath.parse(start)!;
+  const momentEnd = dateMath.parse(end, { roundUp: true })!;
+  const diffSeconds = momentEnd.unix() - momentStart.unix();
+  let minInterval = 'y';
+
+  // less than 1 second
+  if (diffSeconds <= 1) minInterval = 'ms';
+  // less than 2 minutes
+  else if (diffSeconds <= 60 * 2) minInterval = 's';
+  // less than 2 hours
+  else if (diffSeconds <= 3600 * 2) minInterval = 'm';
+  // less than 2 days
+  else if (diffSeconds <= 86400 * 2) minInterval = 'h';
+  // less than 1 month
+  else if (diffSeconds <= 86400 * 31) minInterval = 'd';
+  // less than 3 months
+  else if (diffSeconds <= 86400 * 93) minInterval = 'w';
+  // less than 2 year
+  else if (diffSeconds <= 86400 * 366) minInterval = 'w';
+
+  console.log('findMinInterval', { momentStart, momentEnd, diffSeconds, minInterval });
+
+  return minInterval;
+};
+
 export const convertDateTime = (
   datetime: string,
   isStart = true,
@@ -128,13 +155,6 @@ export const updatePromQLQueryFilters = (
   const { connection, metric, aggregation, attributesGroupBy } = parsePromQLIntoKeywords(
     promQLQuery
   );
-  console.log('updatePromQLQueryFilters', {
-    connection,
-    metric,
-    aggregation,
-    attributesGroupBy,
-    promQLQuery,
-  });
   const promQLPart = buildPromQLFromMetricQuery({
     metric,
     attributesGroupBy: attributesGroupBy.split(','),
@@ -157,6 +177,24 @@ export const getIndexPatternFromRawQuery = (query: string): string => {
   return getPromQLIndex(query) || getPPLIndex(query);
 };
 
+export const preprocessMetricQuery = ({ metaData, startTime, endTime }) => {
+  // convert to moment
+  const start = convertDateTime(startTime, true);
+  const end = convertDateTime(endTime, false);
+
+  const resolution = findMinInterval(start, end);
+
+  const visualizationQuery = updateCatalogVisualizationQuery({
+    ...metaData.queryMetaData,
+    start,
+    end,
+    span: '1',
+    resolution,
+  });
+
+  return visualizationQuery;
+};
+
 // insert time filter command and additional commands based on raw query
 export const preprocessQuery = ({
   rawQuery,
diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx
index de450d09c..c849c25cb 100644
--- a/public/components/common/search/search.tsx
+++ b/public/components/common/search/search.tsx
@@ -323,9 +323,13 @@ export const Search = (props: any) => {
                   }
                   curVisId={curVisId}
                   setSubType={setSubType}
-                  isSaveAsMetricEnabled={
-                    isEqual(curVisId, 'line') && tempQuery.match(PPL_SPAN_REGEX) !== null
-                  }
+                  isSaveAsMetricEnabled={() => {
+                    return (
+                      isEqual(curVisId, 'line') &&
+                      tempQuery &&
+                      tempQuery.match(PPL_SPAN_REGEX) !== null
+                    );
+                  }}
                 />
                 <EuiPopoverFooter>
                   <EuiFlexGroup justifyContent="flexEnd">
diff --git a/public/components/custom_panels/custom_panel_view_so.tsx b/public/components/custom_panels/custom_panel_view_so.tsx
index 65b10416a..382bc50d0 100644
--- a/public/components/custom_panels/custom_panel_view_so.tsx
+++ b/public/components/custom_panels/custom_panel_view_so.tsx
@@ -45,7 +45,6 @@ import { addVisualizationPanel } from './helpers/add_visualization_helper';
 import { AddVisualizationPopover } from './helpers/add_visualization_popover';
 import { getCustomModal } from './helpers/modal_containers';
 import {
-  convertDateTime,
   isDateValid,
   isNameValid,
   isPPLFilterValid,
@@ -66,7 +65,8 @@ import {
 import { useToast } from '../common/toast';
 import PPLService from '../../services/requests/ppl';
 import DSLService from '../../services/requests/dsl';
- 
+import { convertDateTime } from '../common/query_utils';
+
 /*
  * "CustomPanelsView" module used to render an Observability Dashboard
  *
@@ -181,7 +181,9 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
       timeProps.end,
       recentlyUsedRanges
     );
-    dispatch(updatePanel({ ...panel, timeRange: { from: timeProps.start, to: timeProps.end } }, '', ''));
+    dispatch(
+      updatePanel({ ...panel, timeRange: { from: timeProps.start, to: timeProps.end } }, '', '')
+    );
 
     setRecentlyUsedRanges(updatedRanges.slice(0, 9));
     onRefreshFilters(timeProps.start, timeProps.end);
@@ -354,7 +356,11 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
   };
 
   const cloneVisualization = (visualzationTitle: string, savedVisualizationId: string) => {
-    addVisualizationToCurrentPanel({ savedVisualizationId, successMsg: `Visualization ${visualzationTitle} successfully added!`, failureMsg: `Error in adding ${visualzationTitle} visualization to the panel` });
+    addVisualizationToCurrentPanel({
+      savedVisualizationId,
+      successMsg: `Visualization ${visualzationTitle} successfully added!`,
+      failureMsg: `Error in adding ${visualzationTitle} visualization to the panel`,
+    });
   };
 
   const cancelButton = (
diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
index adf75a180..bd5d1ac5d 100644
--- a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
+++ b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -257,7 +257,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                         "props": Object {
                           "defaultSelections": Array [
                             Object {
-                              "id": "v",
+                              "id": "h",
                               "name": "Right",
                             },
                           ],
@@ -420,7 +420,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
           "id": "bar",
           "label": "Vertical bar",
           "labelangle": 0,
-          "legendposition": "v",
+          "legendposition": "h",
           "linewidth": 0,
           "mode": "group",
           "name": "bar",
@@ -712,7 +712,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
-                                "id": "v",
+                                "id": "h",
                                 "name": "Right",
                               },
                             ],
@@ -875,7 +875,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
             "id": "bar",
             "label": "Vertical bar",
             "labelangle": 0,
-            "legendposition": "v",
+            "legendposition": "h",
             "linewidth": 0,
             "mode": "group",
             "name": "bar",
@@ -919,7 +919,23 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
             "responsive": true,
           }
         }
-        layout={[Function]}
+        layout={
+          Object {
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          }
+        }
         visualizations={
           Object {
             "data": Object {
@@ -1174,7 +1190,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "v",
+                                  "id": "h",
                                   "name": "Right",
                                 },
                               ],
@@ -1337,7 +1353,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               "id": "bar",
               "label": "Vertical bar",
               "labelangle": 0,
-              "legendposition": "v",
+              "legendposition": "h",
               "linewidth": 0,
               "mode": "group",
               "name": "bar",
@@ -1433,9 +1449,11 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 "#BD6F26",
                 "#4C636F",
               ],
+              "height": 1180,
               "hovermode": "closest",
               "legend": Object {
-                "orientation": "v",
+                "orientation": "h",
+                "traceorder": "normal",
               },
               "margin": Object {
                 "b": 30,
@@ -1526,9 +1544,11 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                   "#BD6F26",
                   "#4C636F",
                 ],
+                "height": 1180,
                 "hovermode": "closest",
                 "legend": Object {
-                  "orientation": "v",
+                  "orientation": "h",
+                  "traceorder": "normal",
                 },
                 "margin": Object {
                   "b": 30,
@@ -1792,7 +1812,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                         "props": Object {
                           "defaultSelections": Array [
                             Object {
-                              "id": "v",
+                              "id": "h",
                               "name": "Right",
                             },
                           ],
@@ -2308,7 +2328,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
-                                "id": "v",
+                                "id": "h",
                                 "name": "Right",
                               },
                             ],
@@ -2628,7 +2648,47 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
             },
           }
         }
-        layout={[Function]}
+        layout={
+          Object {
+            "colorway": Array [
+              "#3CA1C7",
+              "#8C55A3",
+              "#DB748A",
+              "#F2BE4B",
+              "#68CCC2",
+              "#2A7866",
+              "#843769",
+              "#374FB8",
+              "#BD6F26",
+              "#4C636F",
+            ],
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "paper_bgcolor": "rgba(0, 0, 0, 0)",
+            "plot_bgcolor": "rgba(0, 0, 0, 0)",
+            "showlegend": true,
+            "xaxis": Object {
+              "fixedrange": true,
+              "showgrid": false,
+              "visible": true,
+            },
+            "yaxis": Object {
+              "fixedrange": true,
+              "showgrid": false,
+              "visible": true,
+            },
+          }
+        }
         visualizations={
           Object {
             "data": Object {
@@ -2838,7 +2898,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "v",
+                                  "id": "h",
                                   "name": "Right",
                                 },
                               ],
@@ -3205,8 +3265,22 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
           layout={
             Object {
               "autosize": true,
+              "colorway": Array [
+                "#3CA1C7",
+                "#8C55A3",
+                "#DB748A",
+                "#F2BE4B",
+                "#68CCC2",
+                "#2A7866",
+                "#843769",
+                "#374FB8",
+                "#BD6F26",
+                "#4C636F",
+              ],
+              "height": 1180,
               "legend": Object {
-                "orientation": "v",
+                "orientation": "h",
+                "traceorder": "normal",
               },
               "margin": Object {
                 "b": 30,
@@ -3215,6 +3289,8 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                 "r": 5,
                 "t": 50,
               },
+              "paper_bgcolor": "rgba(0, 0, 0, 0)",
+              "plot_bgcolor": "rgba(0, 0, 0, 0)",
               "shapes": Array [],
               "showlegend": true,
               "title": "",
@@ -3295,9 +3371,23 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
               Object {
                 "autosize": true,
                 "barmode": "stack",
+                "colorway": Array [
+                  "#3CA1C7",
+                  "#8C55A3",
+                  "#DB748A",
+                  "#F2BE4B",
+                  "#68CCC2",
+                  "#2A7866",
+                  "#843769",
+                  "#374FB8",
+                  "#BD6F26",
+                  "#4C636F",
+                ],
+                "height": 1180,
                 "hovermode": "closest",
                 "legend": Object {
-                  "orientation": "v",
+                  "orientation": "h",
+                  "traceorder": "normal",
                 },
                 "margin": Object {
                   "b": 30,
@@ -3306,6 +3396,8 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                   "r": 5,
                   "t": 50,
                 },
+                "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                "plot_bgcolor": "rgba(0, 0, 0, 0)",
                 "shapes": Array [],
                 "showlegend": true,
                 "title": "",
@@ -3602,7 +3694,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                         "props": Object {
                           "defaultSelections": Array [
                             Object {
-                              "id": "v",
+                              "id": "h",
                               "name": "Right",
                             },
                           ],
@@ -3765,7 +3857,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
           "id": "horizontal_bar",
           "label": "Horizontal bar",
           "labelangle": 0,
-          "legendposition": "v",
+          "legendposition": "h",
           "linewidth": 0,
           "mode": "group",
           "name": "horizontal_bar",
@@ -4057,7 +4149,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
-                                "id": "v",
+                                "id": "h",
                                 "name": "Right",
                               },
                             ],
@@ -4220,7 +4312,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
             "id": "horizontal_bar",
             "label": "Horizontal bar",
             "labelangle": 0,
-            "legendposition": "v",
+            "legendposition": "h",
             "linewidth": 0,
             "mode": "group",
             "name": "horizontal_bar",
@@ -4264,7 +4356,23 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
             "responsive": true,
           }
         }
-        layout={[Function]}
+        layout={
+          Object {
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          }
+        }
         visualizations={
           Object {
             "data": Object {
@@ -4519,7 +4627,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "v",
+                                  "id": "h",
                                   "name": "Right",
                                 },
                               ],
@@ -4682,7 +4790,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               "id": "horizontal_bar",
               "label": "Horizontal bar",
               "labelangle": 0,
-              "legendposition": "v",
+              "legendposition": "h",
               "linewidth": 0,
               "mode": "group",
               "name": "horizontal_bar",
@@ -4778,9 +4886,11 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 "#BD6F26",
                 "#4C636F",
               ],
+              "height": 1180,
               "hovermode": "closest",
               "legend": Object {
-                "orientation": "v",
+                "orientation": "h",
+                "traceorder": "normal",
               },
               "margin": Object {
                 "b": 30,
@@ -4871,9 +4981,11 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                   "#BD6F26",
                   "#4C636F",
                 ],
+                "height": 1180,
                 "hovermode": "closest",
                 "legend": Object {
-                  "orientation": "v",
+                  "orientation": "h",
+                  "traceorder": "normal",
                 },
                 "margin": Object {
                   "b": 30,
diff --git a/public/components/custom_panels/helpers/utils.tsx b/public/components/custom_panels/helpers/utils.tsx
index aac147718..8586ed8f4 100644
--- a/public/components/custom_panels/helpers/utils.tsx
+++ b/public/components/custom_panels/helpers/utils.tsx
@@ -80,11 +80,12 @@ export const mergeLayoutAndVisualizations = (
 export const updateQuerySpanInterval = (
   query: string,
   timestampField: string,
-  spanParam: string
+  span: number | string = '1',
+  resolution: string = 'h'
 ) => {
   return query.replace(
     new RegExp(`span\\(\\s*${timestampField}\\s*,(.*?)\\)`),
-    `span(${timestampField},${spanParam})`
+    `span(${timestampField},${span}${resolution})`
   );
 };
 
@@ -210,29 +211,38 @@ export const getQueryResponse = (
 };
 
 // Fetches savedVisualization by Id and runs getQueryResponse
-export const renderSavedVisualization = async (
-  http: CoreStart['http'],
-  pplService: PPLService,
-  savedVisualizationId: string,
-  startTime: string,
-  endTime: string,
-  filterQuery: string,
-  spanParam: string | undefined,
-  setVisualizationTitle: React.Dispatch<React.SetStateAction<string>>,
-  setVisualizationType: React.Dispatch<React.SetStateAction<string>>,
-  setVisualizationData: React.Dispatch<React.SetStateAction<Plotly.Data[]>>,
-  setVisualizationMetaData: React.Dispatch<React.SetStateAction<undefined>>,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
-  setIsError: React.Dispatch<React.SetStateAction<VizContainerError>>
-) => {
+export const renderSavedVisualization = async ({
+  pplService,
+  startTime,
+  endTime,
+  filterQuery,
+  span = '1',
+  resolution = 'h',
+  setVisualizationTitle,
+  setVisualizationType,
+  setVisualizationData,
+  setVisualizationMetaData,
+  setIsLoading,
+  setIsError,
+  visualization,
+}: {
+  pplService: PPLService;
+  startTime: string;
+  endTime: string;
+  filterQuery: string;
+  span?: number | string;
+  resolution?: string;
+  setVisualizationTitle: React.Dispatch<React.SetStateAction<string>>;
+  setVisualizationType: React.Dispatch<React.SetStateAction<string>>;
+  setVisualizationData: React.Dispatch<React.SetStateAction<Plotly.Data[]>>;
+  setVisualizationMetaData: React.Dispatch<React.SetStateAction<undefined>>;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsError: React.Dispatch<React.SetStateAction<VizContainerError>>;
+  visualization: SavedVisualizationType;
+}) => {
   setIsLoading(true);
   setIsError({} as VizContainerError);
 
-  let visualization: SavedVisualizationType = {};
-  let updatedVisualizationQuery = '';
-
-  visualization = await fetchVisualizationById(http, savedVisualizationId, setIsError);
-
   if (_.isEmpty(visualization)) {
     setIsLoading(false);
     return;
@@ -246,15 +256,10 @@ export const renderSavedVisualization = async (
     setVisualizationType(visualization.type);
   }
 
-  if (spanParam !== undefined) {
-    updatedVisualizationQuery = updateQuerySpanInterval(
-      visualization.query,
-      visualization.timeField,
-      spanParam
-    );
-  } else {
-    updatedVisualizationQuery = visualization.query;
-  }
+  const updatedVisualizationQuery =
+    span !== undefined
+      ? updateQuerySpanInterval(visualization.query, visualization.timeField, span, resolution)
+      : visualization.query;
 
   setVisualizationMetaData({ ...visualization, query: updatedVisualizationQuery });
 
@@ -299,34 +304,35 @@ const createCatalogVisualizationMetaData = (
   };
 };
 
-const updateCatalogVisualizationQuery = ({
+export const updateCatalogVisualizationQuery = ({
   catalogSourceName,
   catalogTableName,
   aggregation,
   attributesGroupBy,
-  startTime,
-  endTime,
-  spanParam,
+  start,
+  end,
+  span = '1',
+  resolution = 'h',
 }: {
   catalogSourceName: string;
   catalogTableName: string;
   aggregation: string;
   attributesGroupBy: string[];
-  startTime: string;
-  endTime: string;
-  spanParam: string | undefined;
+  start: string;
+  end: string;
+  span: string;
+  resolution: string;
 }) => {
-  const attributesGroupString = attributesGroupBy.toString();
-  const startEpochTime = convertDateTime(startTime, true, false, true);
-  const endEpochTime = convertDateTime(endTime, false, false, true);
-  // const promQuery =
-  //   attributesGroupBy.length === 0
-  //     ? `${aggregation} (${catalogTableName})`
-  //     : `${aggregation} by(${attributesGroupString}) (${catalogTableName})`;
-
-  const promQuery = `${aggregation} (${catalogTableName})`;
-
-  return `source = ${catalogSourceName}.query_range('${promQuery}', ${startEpochTime}, ${endEpochTime}, '${spanParam}')`;
+  const attributesGroupString = attributesGroupBy.join(',');
+  const startEpochTime = convertDateTime(start, true, false, true);
+  const endEpochTime = convertDateTime(end, false, false, true);
+  const promQuery =
+    attributesGroupBy.length === 0
+      ? `${aggregation} (${catalogTableName})`
+      : `${aggregation} by(${attributesGroupString}) (${catalogTableName})`;
+
+  const newQuery = `source = ${catalogSourceName}.query_range('${promQuery}', ${startEpochTime}, ${endEpochTime}, '${span}${resolution}')`;
+  return newQuery;
 };
 
 // Creates a catalogVisualization for a runtime catalog based PPL query and runs getQueryResponse
@@ -337,7 +343,8 @@ export const renderCatalogVisualization = async ({
   startTime,
   endTime,
   filterQuery,
-  spanParam,
+  span,
+  resolution,
   setVisualizationTitle,
   setVisualizationType,
   setVisualizationData,
@@ -345,7 +352,7 @@ export const renderCatalogVisualization = async ({
   setIsLoading,
   setIsError,
   spanResolution,
-  queryMetaData,
+  visualization,
 }: {
   http: CoreStart['http'];
   pplService: PPLService;
@@ -353,7 +360,8 @@ export const renderCatalogVisualization = async ({
   startTime: string;
   endTime: string;
   filterQuery: string;
-  spanParam: string | undefined;
+  span?: number | string;
+  resolution?: string;
   setVisualizationTitle: React.Dispatch<React.SetStateAction<string>>;
   setVisualizationType: React.Dispatch<React.SetStateAction<string>>;
   setVisualizationData: React.Dispatch<React.SetStateAction<Plotly.Data[]>>;
@@ -362,6 +370,7 @@ export const renderCatalogVisualization = async ({
   setIsError: React.Dispatch<React.SetStateAction<VizContainerError>>;
   spanResolution?: string;
   queryMetaData?: MetricType;
+  visualization: SavedVisualizationType;
 }) => {
   setIsLoading(true);
   setIsError({} as VizContainerError);
@@ -369,20 +378,12 @@ export const renderCatalogVisualization = async ({
   const visualizationType = 'line';
   const visualizationTimeField = '@timestamp';
 
-  const catalogSourceName = catalogSource.split('.')[0];
-  const catalogTableName = catalogSource.split('.')[1];
-
-  const defaultAggregation = 'avg'; // pass in attributes to this function
-  const attributes: string[] = [];
-
   const visualizationQuery = updateCatalogVisualizationQuery({
-    catalogSourceName,
-    catalogTableName,
-    aggregation: defaultAggregation,
-    attributesGroupBy: attributes,
-    startTime,
-    endTime,
-    spanParam,
+    ...visualization.queryMetaData,
+    start: startTime,
+    end: endTime,
+    span,
+    resolution,
   });
 
   const visualizationMetaData = createCatalogVisualizationMetaData(
@@ -392,18 +393,17 @@ export const renderCatalogVisualization = async ({
     visualizationTimeField
   );
 
-  visualizationMetaData.user_configs = {
+  visualizationMetaData.userConfigs = {
     layoutConfig: {
-      height: 390,
-      margin: { t: 5 },
-      legend: { visible: false },
+      height: 280,
+      legend: { orientation: 'h', y: -0.3 },
     },
   };
 
-  setVisualizationTitle(catalogSource);
+  setVisualizationTitle(visualization.name);
   setVisualizationType(visualizationType);
 
-  setVisualizationMetaData({ ...visualizationMetaData, query: visualizationQuery });
+  setVisualizationMetaData(visualizationMetaData);
 
   getQueryResponse(
     pplService,
@@ -449,9 +449,9 @@ export const parseSavedVisualizations = (
     timeField: visualization.savedVisualization.selected_timestamp.name,
     selected_date_range: visualization.savedVisualization.selected_date_range,
     selected_fields: visualization.savedVisualization.selected_fields,
-    user_configs: visualization.savedVisualization.user_configs || {},
-    sub_type: visualization.savedVisualization.hasOwnProperty('sub_type')
-      ? visualization.savedVisualization.sub_type
+    userConfigs: visualization.savedVisualization.userConfigs || {},
+    subType: visualization.savedVisualization.hasOwnProperty('subType')
+      ? visualization.savedVisualization.subType
       : '',
     units_of_measure: visualization.savedVisualization.hasOwnProperty('units_of_measure')
       ? visualization.savedVisualization.units_of_measure
@@ -549,7 +549,7 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
     return <></>;
   }
 
-  const dataConfig = { ...(metaData.user_configs?.dataConfig || {}) };
+  const dataConfig = { ...(metaData.userConfigs?.dataConfig || {}) };
   const hasBreakdowns = !_.isEmpty(dataConfig.breakdowns);
   const realTimeParsedStats = {
     ...getDefaultVisConfig(new QueryManager().queryParser().parse(metaData.query).getStats()),
@@ -576,13 +576,13 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
 
   const mixedUserConfigs = {
     availabilityConfig: {
-      ...(metaData.user_configs?.availabilityConfig || {}),
+      ...(metaData.userConfigs?.availabilityConfig || {}),
     },
     dataConfig: {
       ...finalDataConfig,
     },
     layoutConfig: {
-      ...(metaData.user_configs?.layoutConfig || {}),
+      ...(metaData.userConfigs?.layoutConfig || {}),
     },
   };
 
diff --git a/public/components/custom_panels/home.tsx b/public/components/custom_panels/home.tsx
index 2e2af8de8..c5067dd57 100644
--- a/public/components/custom_panels/home.tsx
+++ b/public/components/custom_panels/home.tsx
@@ -3,19 +3,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiBreadcrumb, ShortDate, htmlIdGenerator } from '@elastic/eui';
+import { EuiBreadcrumb, htmlIdGenerator, ShortDate } from '@elastic/eui';
 import React, { useState } from 'react';
-import { useDispatch, batch } from 'react-redux';
+import { batch, useDispatch } from 'react-redux';
 // eslint-disable-next-line @osd/eslint/module_migration
 import { StaticContext } from 'react-router';
 import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { CoreStart, SavedObjectsStart } from '../../../../../src/core/public';
-import { CUSTOM_PANELS_API_PREFIX } from '../../../common/constants/custom_panels';
 import {
   EVENT_ANALYTICS,
+  OBSERVABILITY_BASE,
   observabilityLogsID,
   observabilityPanelsID,
-  OBSERVABILITY_BASE,
   SAVED_OBJECTS,
 } from '../../../common/constants/shared';
 import DSLService from '../../services/requests/dsl';
@@ -23,15 +22,7 @@ import PPLService from '../../services/requests/ppl';
 import { CustomPanelTable } from './custom_panel_table';
 import { CustomPanelView } from './custom_panel_view';
 import { CustomPanelViewSO } from './custom_panel_view_so';
-import {
-  createPanel,
-  createPanelSample,
-  createPanelWithVizs,
-  deletePanel,
-  fetchPanels,
-  newPanelTemplate,
-  uuidRx,
-} from './redux/panel_slice';
+import { createPanelSample, uuidRx } from './redux/panel_slice';
 import { REDIRECT_TAB, TAB_CREATED_TYPE, TAB_ID_TXT_PFX } from '../../../common/constants/explorer';
 import { init as initFields } from '../event_analytics/redux/slices/field_slice';
 import { init as initPatterns } from '../event_analytics/redux/slices/patterns_slice';
@@ -186,7 +177,7 @@ export const Home = ({
           }}
         />
         <Route
-          path={`${parentPath}/:id`}
+          path={[`${parentPath}/view/:id`, `${parentPath}/:id`]}
           render={(props) => {
             const isSavedObject = !!props.match.params.id.match(uuidRx);
 
diff --git a/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx b/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx
index dc70ba7fd..f7d7de672 100644
--- a/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx
+++ b/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 /* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable no-console */
 
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
@@ -109,6 +108,7 @@ export const PanelGrid = (props: PanelGridProps) => {
           pplFilterValue={pplFilterValue}
           showFlyout={showFlyout}
           removeVisualization={removeVisualization}
+          contextMenuId="visualization"
         />
       )
     );
@@ -203,6 +203,7 @@ export const PanelGrid = (props: PanelGridProps) => {
       breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
       cols={{ lg: 12, md: 12, sm: 12, xs: 1, xxs: 1 }}
       onLayoutChange={layoutChanged}
+      draggableHandle=".mouseGrabber"
     >
       {panelVisualizations.map((panelVisualization: VisualizationType, index) => (
         <div key={panelVisualization.id}>{gridData[index]}</div>
diff --git a/public/components/custom_panels/panel_modules/panel_grid/panel_grid_so.tsx b/public/components/custom_panels/panel_modules/panel_grid/panel_grid_so.tsx
index a2fa5e02b..f2a1cff64 100644
--- a/public/components/custom_panels/panel_modules/panel_grid/panel_grid_so.tsx
+++ b/public/components/custom_panels/panel_modules/panel_grid/panel_grid_so.tsx
@@ -105,6 +105,7 @@ export const PanelGridSO = (props: PanelGridProps) => {
           pplFilterValue={pplFilterValue}
           showFlyout={showFlyout}
           removeVisualization={removeVisualization}
+          contextMenuId="visualization"
         />
       )
     );
@@ -210,6 +211,7 @@ export const PanelGridSO = (props: PanelGridProps) => {
       breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
       cols={{ lg: 12, md: 12, sm: 12, xs: 1, xxs: 1 }}
       onLayoutChange={layoutChanged}
+      draggableHandle=".mouseGrabber"
     >
       {panelVisualizations.map((panelVisualization: VisualizationType, index) => (
         <div key={panelVisualization.id}>{gridData[index]}</div>
diff --git a/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap b/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
index 4ba3e3ec3..a38755e25 100644
--- a/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
+++ b/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
@@ -1,156 +1,169 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Visualization Container Component renders add visualization container 1`] = `
-<Component
-  cloneVisualization={[MockFunction]}
-  editMode={true}
-  fromTime="now-15m"
-  http={[MockFunction]}
-  onEditClick={[Function]}
-  onRefresh={true}
-  pplFilterValue="where Carrier = \\"OpenSearch-Air\\""
-  pplService={
-    PPLService {
-      "fetch": [Function],
-      "http": [MockFunction],
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
     }
   }
-  removeVisualization={[MockFunction]}
-  savedVisualizationId="oiuccXwBYVazWqOO1e06"
-  showFlyout={[MockFunction]}
-  toTime="now"
-  visualizationId="panel_viz_9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d"
 >
-  <EuiPanel
-    className="panel-full-width"
-    data-test-subj="VisualizationPanel"
-    grow={false}
+  <Component
+    cloneVisualization={[MockFunction]}
+    contextMenuId="visualization"
+    editMode={true}
+    fromTime="now-15m"
+    http={[MockFunction]}
+    onEditClick={[Function]}
+    onRefresh={true}
+    pplFilterValue="where Carrier = \\"OpenSearch-Air\\""
+    pplService={
+      PPLService {
+        "fetch": [Function],
+        "http": [MockFunction],
+      }
+    }
+    removeVisualization={[MockFunction]}
+    savedVisualizationId="oiuccXwBYVazWqOO1e06"
+    showFlyout={[MockFunction]}
+    toTime="now"
+    visualizationId="panel_viz_9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d"
   >
-    <div
-      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero panel-full-width"
+    <EuiPanel
+      className="panel-full-width "
       data-test-subj="VisualizationPanel"
+      grow={false}
     >
       <div
-        className="mouseGrabber"
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero panel-full-width "
+        data-test-subj="VisualizationPanel"
       >
-        <EuiFlexGroup
-          justifyContent="spaceBetween"
+        <div
+          className="mouseGrabber"
         >
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+          <EuiFlexGroup
+            justifyContent="spaceBetween"
           >
-            <EuiFlexItem
-              style={
-                Object {
-                  "width": "35%",
-                }
-              }
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
-              <div
-                className="euiFlexItem"
+              <EuiFlexItem
                 style={
                   Object {
                     "width": "35%",
                   }
                 }
               >
-                <EuiText
-                  className="panels-title-text"
-                  grow={false}
+                <div
+                  className="euiFlexItem"
+                  style={
+                    Object {
+                      "width": "35%",
+                    }
+                  }
                 >
-                  <div
-                    className="euiText euiText--medium panels-title-text euiText--constrainedWidth"
+                  <EuiText
+                    className="panels-title-text"
+                    grow={false}
                   >
-                    <EuiToolTip
-                      content=""
-                      delay="long"
-                      position="top"
+                    <div
+                      className="euiText euiText--medium panels-title-text euiText--constrainedWidth"
                     >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
+                      <EuiToolTip
+                        content=""
+                        delay="long"
+                        position="top"
                       >
-                        <h5
-                          data-test-subj="visualizationHeader"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        />
-                      </span>
-                    </EuiToolTip>
-                  </div>
-                </EuiText>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              className="visualization-action-button"
-              grow={false}
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero visualization-action-button"
+                        <span
+                          className="euiToolTipAnchor"
+                          onKeyUp={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                        >
+                          <h5
+                            data-test-subj="visualizationHeader"
+                            onBlur={[Function]}
+                            onFocus={[Function]}
+                          />
+                        </span>
+                      </EuiToolTip>
+                    </div>
+                  </EuiText>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem
+                className="visualization-action-button"
+                grow={false}
               >
-                <EuiIcon
-                  data-test-subj="removeVisualizationButton"
-                  onClick={[Function]}
-                  type="crossInACircleFilled"
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero visualization-action-button"
                 >
-                  <EuiIconEmpty
-                    aria-hidden={true}
-                    className="euiIcon euiIcon--medium euiIcon-isLoading"
+                  <EuiIcon
                     data-test-subj="removeVisualizationButton"
-                    focusable="false"
                     onClick={[Function]}
-                    role="img"
-                    style={null}
+                    type="crossInACircleFilled"
                   >
-                    <svg
+                    <EuiIconEmpty
                       aria-hidden={true}
                       className="euiIcon euiIcon--medium euiIcon-isLoading"
                       data-test-subj="removeVisualizationButton"
                       focusable="false"
-                      height={16}
                       onClick={[Function]}
                       role="img"
                       style={null}
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
-                    />
-                  </EuiIconEmpty>
-                </EuiIcon>
-              </div>
-            </EuiFlexItem>
-          </div>
-        </EuiFlexGroup>
-      </div>
-      <div
-        className="visualization-div"
-      >
-        <EuiLoadingChart
-          className="visualization-loading-chart"
-          mono={true}
-          size="xl"
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon-isLoading"
+                        data-test-subj="removeVisualizationButton"
+                        focusable="false"
+                        height={16}
+                        onClick={[Function]}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </EuiIconEmpty>
+                  </EuiIcon>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+        </div>
+        <div
+          className="visualization-div"
         >
-          <span
-            className="euiLoadingChart euiLoadingChart--mono visualization-loading-chart euiLoadingChart--xLarge"
+          <EuiLoadingChart
+            className="visualization-loading-chart"
+            mono={true}
+            size="xl"
           >
             <span
-              className="euiLoadingChart__bar"
-            />
-            <span
-              className="euiLoadingChart__bar"
-            />
-            <span
-              className="euiLoadingChart__bar"
-            />
-            <span
-              className="euiLoadingChart__bar"
-            />
-          </span>
-        </EuiLoadingChart>
+              className="euiLoadingChart euiLoadingChart--mono visualization-loading-chart euiLoadingChart--xLarge"
+            >
+              <span
+                className="euiLoadingChart__bar"
+              />
+              <span
+                className="euiLoadingChart__bar"
+              />
+              <span
+                className="euiLoadingChart__bar"
+              />
+              <span
+                className="euiLoadingChart__bar"
+              />
+            </span>
+          </EuiLoadingChart>
+        </div>
       </div>
-    </div>
-  </EuiPanel>
-</Component>
+    </EuiPanel>
+  </Component>
+</Provider>
 `;
diff --git a/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx b/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx
index 9ea46f4d4..507208fad 100644
--- a/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx
+++ b/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx
@@ -15,6 +15,9 @@ import {
   sampleSavedVisualization,
   samplePPLResponse,
 } from '../../../../../../test/panels_constants';
+import { createStore } from '@reduxjs/toolkit';
+import { rootReducer } from '../../../../../framework/redux/reducers';
+import { Provider } from 'react-redux';
 
 describe('Visualization Container Component', () => {
   configure({ adapter: new Adapter() });
@@ -28,6 +31,9 @@ describe('Visualization Container Component', () => {
       Promise.resolve((samplePPLResponse as unknown) as HttpResponse)
     );
 
+    // configure({ adapter: new Adapter() });
+    const store = createStore(rootReducer);
+
     const editMode = true;
     const visualizationId = 'panel_viz_9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d';
     const savedVisualizationId = 'oiuccXwBYVazWqOO1e06';
@@ -44,21 +50,24 @@ describe('Visualization Container Component', () => {
     };
 
     const wrapper = mount(
-      <VisualizationContainer
-        http={httpClientMock}
-        editMode={editMode}
-        visualizationId={visualizationId}
-        savedVisualizationId={savedVisualizationId}
-        pplService={pplService}
-        fromTime={fromTime}
-        toTime={toTime}
-        onRefresh={onRefresh}
-        cloneVisualization={cloneVisualization}
-        pplFilterValue={pplFilterValue}
-        showFlyout={showFlyout}
-        removeVisualization={removeVisualization}
-        onEditClick={onEditClick}
-      />
+      <Provider store={store}>
+        <VisualizationContainer
+          http={httpClientMock}
+          editMode={editMode}
+          visualizationId={visualizationId}
+          savedVisualizationId={savedVisualizationId}
+          pplService={pplService}
+          fromTime={fromTime}
+          toTime={toTime}
+          onRefresh={onRefresh}
+          cloneVisualization={cloneVisualization}
+          pplFilterValue={pplFilterValue}
+          showFlyout={showFlyout}
+          removeVisualization={removeVisualization}
+          onEditClick={onEditClick}
+          contextMenuId="visualization"
+        />
+      </Provider>
     );
     wrapper.update();
 
diff --git a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss
index 0130b340f..da61c2f65 100644
--- a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss
+++ b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss
@@ -8,6 +8,7 @@
     cursor: -webkit-grab;
     cursor: grab;
   }
+
   & :active {
     cursor: -webkit-grabbing;
     cursor: grabbing;
@@ -34,6 +35,43 @@
   text-align: center;
 }
 
+.metricVis {
+  #metricsEditInline {
+    /* for ... reasons (?), margin here causes
+       other rules to activate... providing
+       a more-correct display.
+     */
+    margin: 0 0;
+  }
+
+
+  #aggregation__field {
+    .euiFormLabel {
+      width: 130px
+    }
+  }
+
+  //  #explorerPlotComponent {
+  //    //overflow: hidden;
+  //  }
+  //
+  .svg-container {
+    //height: 425px !important;
+    margin-top: -25px !important;
+  }
+
+  //  .main-svg {
+  //    //margin-top: -10px;
+  //    //height: calc(100% - 10px);
+  //  }
+  //
+
+  .main-svg {
+    margin-top: -10px;
+    //height: calc(100% - 60px);
+  }
+}
+
 %center-div {
   top: 50%;
   left: 50%;
@@ -45,8 +83,7 @@
 }
 
 .visualization-loading-chart {
-  margin: 0;
-  position: absolute;
+  margin: 122px 0;
   @extend %center-div;
 }
 
diff --git a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
index a5fb52474..3d52f9edd 100644
--- a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
+++ b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
@@ -25,15 +25,19 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import React, { useEffect, useMemo, useState } from 'react';
-import _ from 'lodash';
+import { isEmpty } from 'lodash';
+import { useSelector } from 'react-redux';
 import {
   displayVisualization,
+  fetchVisualizationById,
   renderCatalogVisualization,
   renderSavedVisualization,
 } from '../../helpers/utils';
 import './visualization_container.scss';
 import { VizContainerError } from '../../../../../common/types/custom_panels';
+import { metricQuerySelector } from '../../../metrics/redux/slices/metrics_slice';
 import { coreRefs } from '../../../../framework/core_refs';
+import { PROMQL_METRIC_SUBTYPE } from '../../../../../common/constants/shared';
 
 /*
  * Visualization container - This module is a placeholder to add visualizations in react-grid-layout
@@ -60,8 +64,11 @@ interface Props {
   editMode: boolean;
   visualizationId: string;
   savedVisualizationId: string;
+  inputMetaData: object;
   fromTime: string;
   toTime: string;
+  span?: number | string;
+  resolution?: string;
   onRefresh: boolean;
   pplFilterValue: string;
   usedInNotebooks?: boolean;
@@ -70,15 +77,18 @@ interface Props {
   showFlyout?: (isReplacement?: boolean | undefined, replaceVizId?: string | undefined) => void;
   removeVisualization?: (visualizationId: string) => void;
   catalogVisualization?: boolean;
-  spanParam?: string;
+  inlineEditor?: JSX.Element;
 }
 
 export const VisualizationContainer = ({
   editMode,
   visualizationId,
   savedVisualizationId,
+  inputMetaData,
   fromTime,
   toTime,
+  span,
+  resolution,
   onRefresh,
   pplFilterValue,
   usedInNotebooks,
@@ -87,7 +97,7 @@ export const VisualizationContainer = ({
   showFlyout,
   removeVisualization,
   catalogVisualization,
-  spanParam,
+  inlineEditor,
 }: Props) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [visualizationTitle, setVisualizationTitle] = useState('');
@@ -103,6 +113,7 @@ export const VisualizationContainer = ({
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [modalContent, setModalContent] = useState(<></>);
 
+  const queryMetaData = useSelector(metricQuerySelector(visualizationId));
   const closeModal = () => setIsModalVisible(false);
   const showModal = (modalType: string) => {
     if (modalType === 'catalogModal')
@@ -193,11 +204,10 @@ export const VisualizationContainer = ({
     </EuiContextMenuItem>,
   ];
 
-  const showModelPanel = [
+  const showPPLQueryPanel = [
     <EuiContextMenuItem
       data-test-subj="showCatalogPPLQuery"
       key="view_query"
-      disabled={editMode}
       onClick={() => {
         closeActionsMenu();
         showModal('catalogModal');
@@ -207,43 +217,61 @@ export const VisualizationContainer = ({
     </EuiContextMenuItem>,
   ];
 
-  if (usedInNotebooks) {
-    popoverPanel = catalogVisualization ? [showModelPanel] : [popoverPanel[0]];
+  if (visualizationMetaData?.subType === PROMQL_METRIC_SUBTYPE) {
+    popoverPanel = [showPPLQueryPanel];
+  } else if (usedInNotebooks) {
+    popoverPanel = [popoverPanel[0]];
   }
 
+  const fetchVisualization = async () => {
+    return savedVisualizationId
+      ? await fetchVisualizationById(http, savedVisualizationId, setIsError)
+      : inputMetaData;
+  };
+
   const loadVisaulization = async () => {
-    if (catalogVisualization)
-      await renderCatalogVisualization({
+    const visualization = await fetchVisualization();
+    setVisualizationMetaData(visualization);
+
+    if (!visualization && !savedVisualizationId) return;
+
+    if (visualization.subType === PROMQL_METRIC_SUBTYPE) {
+      renderCatalogVisualization({
+        visualization,
         http,
         pplService,
-        catalogSource: savedVisualizationId,
+        catalogSource: visualizationId,
         startTime: fromTime,
         endTime: toTime,
+        span,
+        resolution,
         filterQuery: pplFilterValue,
-        spanParam,
         setVisualizationTitle,
         setVisualizationType,
         setVisualizationData,
         setVisualizationMetaData,
         setIsLoading,
         setIsError,
+        queryMetaData,
       });
-    else
-      await renderSavedVisualization(
+    } else
+      await renderSavedVisualization({
+        visualization,
         http,
         pplService,
         savedVisualizationId,
-        fromTime,
-        toTime,
+        startTime: fromTime,
+        endTime: toTime,
         pplFilterValue,
-        spanParam,
+        span,
+        resolution,
         setVisualizationTitle,
         setVisualizationType,
         setVisualizationData,
         setVisualizationMetaData,
         setIsLoading,
-        setIsError
-      );
+        setIsError,
+      });
   };
 
   const memoisedVisualizationBox = useMemo(
@@ -251,7 +279,7 @@ export const VisualizationContainer = ({
       <div className="visualization-div">
         {isLoading ? (
           <EuiLoadingChart size="xl" mono className="visualization-loading-chart" />
-        ) : !_.isEmpty(isError) ? (
+        ) : !isEmpty(isError) ? (
           <div className="visualization-error-div">
             <EuiIcon type="alert" color="danger" size="s" />
             <EuiSpacer size="s" />
@@ -281,18 +309,21 @@ export const VisualizationContainer = ({
 
   useEffect(() => {
     loadVisaulization();
-  }, [onRefresh]);
+  }, [onRefresh, inputMetaData, span, resolution, fromTime, toTime]);
+
+  const metricVisCssClassName = catalogVisualization ? 'metricVis' : '';
 
   return (
     <>
       <EuiPanel
         data-test-subj={`${visualizationTitle}VisualizationPanel`}
-        className="panel-full-width"
+        className={`panel-full-width ${metricVisCssClassName}`}
         grow={false}
       >
-        <div className={editMode ? 'mouseGrabber' : ''}>
+        <div>
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem
+              className={editMode ? 'mouseGrabber' : ''}
               style={{
                 width: '35%',
               }}
@@ -333,6 +364,7 @@ export const VisualizationContainer = ({
               )}
             </EuiFlexItem>
           </EuiFlexGroup>
+          {inlineEditor}
         </div>
         {memoisedVisualizationBox}
       </EuiPanel>
diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts
index 1bad8f452..82492a09e 100644
--- a/public/components/custom_panels/redux/panel_slice.ts
+++ b/public/components/custom_panels/redux/panel_slice.ts
@@ -4,31 +4,24 @@
  */
 
 import { createSelector, createSlice } from '@reduxjs/toolkit';
-import { async, concat, from, Observable, of } from 'rxjs';
-import { map, mergeMap, tap, toArray } from 'rxjs/operators';
-import { forEach, last } from 'lodash';
+import { concat, from, Observable, of } from 'rxjs';
+import { map, mergeMap, toArray } from 'rxjs/operators';
+import { forEach } from 'lodash';
 import {
+  createDemoPanel,
   CUSTOM_PANELS_API_PREFIX,
   CUSTOM_PANELS_SAVED_OBJECT_TYPE,
-  CUSTOM_PANEL_SLICE,
-  createDemoPanel,
+  samplePanelName,
 } from '../../../../common/constants/custom_panels';
 import {
   CustomPanelListType,
   CustomPanelType,
   ObservabilityPanelAttrs,
   PanelType,
-  VisualizationType,
 } from '../../../../common/types/custom_panels';
 import { coreRefs } from '../../../framework/core_refs';
 import { SavedObject, SimpleSavedObject } from '../../../../../../src/core/public';
-import { isNameValid } from '../helpers/utils';
-import { samplePanelName } from '../../../../common/constants/custom_panels';
-import {
-  addMultipleVisualizations,
-  addVisualizationPanel,
-} from '../helpers/add_visualization_helper';
-import { useToast } from '../../../../public/components/common/toast';
+import { addVisualizationPanel } from '../helpers/add_visualization_helper';
 
 interface InitialState {
   id: string;
@@ -84,8 +77,6 @@ const normalizedPanel = (panel: CustomPanelType): CustomPanelType => ({
 
 export const selectPanelList = (rootState): CustomPanelType[] => rootState.customPanel.panelList;
 
-const {setToast} = useToast();
-
 /*
  ** ASYNC DISPATCH FUNCTIONS
  */
@@ -100,7 +91,12 @@ const fetchObservabilityPanels$ = () =>
   of(coreRefs.http.get(`${CUSTOM_PANELS_API_PREFIX}/panels`)).pipe(
     mergeMap((res) => res),
     mergeMap((res) => res.panels as ObservabilityPanelAttrs[]),
-    map((p: ObservabilityPanelAttrs) => ({ ...p, title: p.name, savedObject: false }))
+    map((p: ObservabilityPanelAttrs) => ({
+      ...p,
+      title: p.name,
+      savedObject: false,
+      type: 'observability-savedObject',
+    }))
   );
 
 // Fetches all saved Custom Panels
@@ -141,19 +137,25 @@ export const uuidRx = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a
 
 export const isUuid = (id) => !!id.match(uuidRx);
 
-export const updatePanel = (panel: CustomPanelType, successMsg: string, failureMsg: string) => async (dispatch, getState) => {
+export const updatePanel = (
+  panel: CustomPanelType,
+  successMsg: string,
+  failureMsg: string
+) => async (dispatch, getState) => {
+  const { toasts } = coreRefs;
+
   try {
     if (isUuid(panel.id)) await updateSavedObjectPanel(panel);
     else await updateLegacyPanel(panel);
     if (successMsg) {
-      setToast(successMsg)
+      toasts!.add(successMsg);
     }
     dispatch(setPanel(panel));
     const panelList = getState().customPanel.panelList.map((p) => (p.id === panel.id ? panel : p));
     dispatch(setPanelList(panelList));
-  } catch (e) {    
+  } catch (e) {
     if (failureMsg) {
-      setToast(failureMsg, 'danger')
+      toasts!.addDanger(failureMsg);
     }
     console.error(e);
   }
@@ -172,20 +174,39 @@ 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);
+export const addMultipleVizToPanels = async (panels, vizIds) => {
+  await Promise.all(
+    panels.map(async ({ panel: { id } }) => {
+      const soPanel = await savedObjectPanelsClient.get(id);
+      const oldPanel = savedObjectToCustomPanel(soPanel);
 
-    const allVisualizations = panel!.visualizations;
+      const allVisualizations = oldPanel!.visualizations;
 
-    const visualizationsWithNewPanel = addMultipleVisualizations(vizIds, allVisualizations);
+      let visualizationsWithNewPanel = allVisualizations;
 
-    const updatedPanel = { ...panel, visualizations: visualizationsWithNewPanel };
-    dispatch(updatePanel(updatedPanel, '', ''));
-  });
+      forEach(vizIds, (vizId) => {
+        visualizationsWithNewPanel = addVisualizationPanel(
+          vizId,
+          undefined,
+          visualizationsWithNewPanel
+        );
+      });
+
+      const updatedPanel = { ...oldPanel, visualizations: visualizationsWithNewPanel };
+
+      if (isUuid(updatedPanel.id)) {
+        await updateSavedObjectPanel(updatedPanel);
+      } else {
+        await updateLegacyPanel(updatedPanel);
+      }
+    })
+  );
 };
 
-export const replaceVizInPanel = (oldPanel, oldVizId, vizId, newVisualizationTitle) => async (dispatch, getState) => {
+export const replaceVizInPanel = (oldPanel, oldVizId, vizId, newVisualizationTitle) => async (
+  dispatch,
+  getState
+) => {
   const panel = getState().customPanel.panelList.find((p) => p.id === oldPanel.id);
 
   const allVisualizations = panel!.visualizations;
@@ -193,8 +214,14 @@ export const replaceVizInPanel = (oldPanel, oldVizId, vizId, newVisualizationTit
   const visualizationsWithNewPanel = addVisualizationPanel(vizId, oldVizId, allVisualizations);
 
   const updatedPanel = { ...panel, visualizations: visualizationsWithNewPanel };
-  
-  dispatch(updatePanel(updatedPanel, `Visualization ${newVisualizationTitle} successfully added!`, `Error in adding ${newVisualizationTitle} visualization to the panel`));
+
+  dispatch(
+    updatePanel(
+      updatedPanel,
+      `Visualization ${newVisualizationTitle} successfully added!`,
+      `Error in adding ${newVisualizationTitle} visualization to the panel`
+    )
+  );
 };
 
 const deletePanelSO = (customPanelIdList: string[]) => {
@@ -211,6 +238,8 @@ const deleteLegacyPanels = (customPanelIdList: string[]) => {
 };
 
 export const deletePanels = (panelsToDelete: CustomPanelType[]) => async (dispatch, getState) => {
+  const { toasts } = coreRefs;
+
   const toastMessage = `Observability Dashboard${
     panelsToDelete.length > 1 ? 's' : ' ' + panelsToDelete[0].title
   } successfully deleted!`;
@@ -222,28 +251,27 @@ export const deletePanels = (panelsToDelete: CustomPanelType[]) => async (dispat
       (p) => !ids.includes(p.id)
     );
     dispatch(setPanelList(panelList));
-    setToast(toastMessage);
+    toasts!.add(toastMessage);
   } catch (e) {
-    setToast(
-      'Error deleting Observability Dashboards, please make sure you have the correct permission.',
-      'danger'
+    toasts!.addDanger(
+      'Error deleting Observability Dashboards, please make sure you have the correct permission.'
     );
     console.error(e);
   }
 };
 
 export const createPanel = (panel) => async (dispatch, getState) => {
+  const { toasts } = coreRefs;
   try {
     const newSOPanel = await savedObjectPanelsClient.create(panel);
     const newPanel = savedObjectToCustomPanel(newSOPanel);
     const panelList = getState().customPanel.panelList;
     dispatch(setPanelList([...panelList, newPanel]));
-    setToast(`Observability Dashboard "${newPanel.title}" successfully created!`);
+    toasts!.add(`Observability Dashboard "${newPanel.title}" successfully created!`);
     window.location.replace(`#/${newPanel.id}`);
   } catch (e) {
-    setToast(
-      'Error occurred while creating Observability Dashboard, please make sure you have the correct permission.',
-      'danger'
+    toasts!.addDanger(
+      'Error occurred while creating Observability Dashboard, please make sure you have the correct permission.'
     );
     console.error(e);
   }
@@ -263,6 +291,8 @@ export const createPanelSample = (vizIds) => async (dispatch, getState) => {
 };
 
 export const clonePanel = (panel, newPanelName) => async (dispatch, getState) => {
+  const { toasts } = coreRefs;
+
   try {
     const { id, ...panelCopy } = {
       ...panel,
@@ -277,12 +307,11 @@ export const clonePanel = (panel, newPanelName) => async (dispatch, getState) =>
     const panelList = getState().customPanel.panelList;
     dispatch(setPanelList([...panelList, newPanel]));
     dispatch(setPanel(newPanel));
-    setToast(`Observability Dashboard "${newPanel.title}" successfully created!`);
+    toasts!.add(`Observability Dashboard "${newPanel.title}" successfully created!`);
     window.location.replace(`#/${newPanel.id}`);
   } catch (e) {
-    setToast(
-      'Error cloning Observability Dashboard, please make sure you have the correct permission.',
-      'danger'
+    toasts!.addDanger(
+      'Error cloning Observability Dashboard, please make sure you have the correct permission.'
     );
     console.error(e);
   }
@@ -315,7 +344,13 @@ export const renameCustomPanel = (editedCustomPanelName: string, id: string) =>
 ) => {
   const panel = getState().customPanel.panelList.find((p) => p.id === id);
   const updatedPanel = { ...panel, title: editedCustomPanelName };
-  dispatch(updatePanel(updatedPanel, `Operational Panel successfully renamed into "${editedCustomPanelName}"`, 'Error renaming Operational Panel, please make sure you have the correct permission.'))
+  dispatch(
+    updatePanel(
+      updatedPanel,
+      `Operational Panel successfully renamed into "${editedCustomPanelName}"`,
+      'Error renaming Operational Panel, please make sure you have the correct permission.'
+    )
+  );
 };
 
 /*
@@ -323,6 +358,8 @@ export const renameCustomPanel = (editedCustomPanelName: string, id: string) =>
  */
 const savedObjectToCustomPanel = (so: SimpleSavedObject<PanelType>): CustomPanelType => ({
   id: so.id,
+  type: so.type,
+  objectId: so.type + ':' + so.id,
   ...so.attributes,
   savedObject: true,
 });
diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
index 1f4806b3c..fd88697b3 100644
--- a/public/components/event_analytics/explorer/explorer.tsx
+++ b/public/components/event_analytics/explorer/explorer.tsx
@@ -10,15 +10,15 @@ import {
   EuiFlexItem,
   EuiLink,
   EuiLoadingSpinner,
+  EuiPage,
+  EuiPageBody,
+  EuiPageSideBar,
   EuiPanel,
   EuiSpacer,
+  EuiSplitPanel,
   EuiTabbedContent,
   EuiTabbedContentTab,
   EuiText,
-  EuiPage,
-  EuiSplitPanel,
-  EuiPageSideBar,
-  EuiPageBody,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import _, { isEmpty, isEqual, reduce } from 'lodash';
@@ -57,6 +57,7 @@ import {
 import {
   LIVE_END_TIME,
   LIVE_OPTIONS,
+  PPL_METRIC_SUBTYPE,
   PPL_NEWLINE_REGEX,
 } from '../../../../common/constants/shared';
 import { QueryManager } from '../../../../common/query_manager';
@@ -70,8 +71,8 @@ import {
 import {
   buildQuery,
   getIndexPatternFromRawQuery,
-  uiSettingsService,
   getSavingCommonParams,
+  uiSettingsService,
 } from '../../../../common/utils';
 import { PPLDataFetcher } from '../../../services/data_fetchers/ppl/ppl_data_fetcher';
 import { getSavedObjectsClient } from '../../../services/saved_objects/saved_object_client/client_factory';
@@ -91,8 +92,8 @@ import { selectSearchMetaData } from '../../event_analytics/redux/slices/search_
 import { getVizContainerProps } from '../../visualizations/charts/helpers';
 import { TabContext, useFetchEvents, useFetchPatterns, useFetchVisualizations } from '../hooks';
 import {
-  selectCountDistribution,
   render as updateCountDistribution,
+  selectCountDistribution,
 } from '../redux/slices/count_distribution_slice';
 import { selectFields, updateFields } from '../redux/slices/field_slice';
 import { selectQueryResult } from '../redux/slices/query_result_slice';
@@ -102,8 +103,8 @@ import { selectExplorerVisualization } from '../redux/slices/visualization_slice
 import {
   change as changeVisualizationConfig,
   change as changeVizConfig,
-  selectVisualizationConfig,
   change as updateVizConfig,
+  selectVisualizationConfig,
 } from '../redux/slices/viualization_config_slice';
 import { formatError, getDefaultVisConfig } from '../utils';
 import { getContentTabTitle, getDateRange } from '../utils/utils';
@@ -120,10 +121,12 @@ import { DataSourceSelection } from './datasources/datasources_selection';
 import { initialTabId } from '../../../framework/redux/store/shared_state';
 import { ObservabilitySideBar } from './sidebar/observability_sidebar';
 import { ExplorerSavedObjectLoader } from '../../../services/saved_objects/saved_object_loaders/explorer_saved_object_loader';
+import { processMetricsData } from '../../custom_panels/helpers/utils';
 import {
   DEFAULT_DATA_SOURCE_TYPE,
   QUERY_LANGUAGE,
 } from '../../../../common/constants/data_sources';
+import { findMinInterval } from '../../common/query_utils';
 
 export const Explorer = ({
   pplService,
@@ -206,8 +209,10 @@ export const Explorer = ({
       explorerSearchMeta.lang || QUERY_LANGUAGE.SQL
     ) || {};
   const SearchBar = ui?.SearchBar || Search;
-  const isDefaultDataSourceType =
-    explorerSearchMeta.datasources?.[0]?.type === DEFAULT_DATA_SOURCE_TYPE;
+  const isDefaultDataSourceType = [DEFAULT_DATA_SOURCE_TYPE, 'prometheus'].includes(
+    explorerSearchMeta.datasources?.[0]?.type
+  );
+
   const selectedIntervalRef = useRef<{
     text: string;
     value: string;
@@ -233,25 +238,7 @@ export const Explorer = ({
   liveTailNameRef.current = liveTailName;
 
   const findAutoInterval = (start: string = '', end: string = '') => {
-    const momentStart = dateMath.parse(start)!;
-    const momentEnd = dateMath.parse(end, { roundUp: true })!;
-    const diffSeconds = momentEnd.unix() - momentStart.unix();
-    let minInterval = 'y';
-
-    // less than 1 second
-    if (diffSeconds <= 1) minInterval = 'ms';
-    // less than 2 minutes
-    else if (diffSeconds <= 60 * 2) minInterval = 's';
-    // less than 2 hours
-    else if (diffSeconds <= 3600 * 2) minInterval = 'm';
-    // less than 2 days
-    else if (diffSeconds <= 86400 * 2) minInterval = 'h';
-    // less than 1 month
-    else if (diffSeconds <= 86400 * 31) minInterval = 'd';
-    // less than 3 months
-    else if (diffSeconds <= 86400 * 93) minInterval = 'w';
-    // less than 1 year
-    else if (diffSeconds <= 86400 * 366) minInterval = 'M';
+    const minInterval = findMinInterval(start, end);
 
     setTimeIntervalOptions([
       { text: 'Auto', value: 'auto_' + minInterval },
@@ -608,17 +595,22 @@ export const Explorer = ({
     isQueryRunning,
   ]);
 
+  const visualizationSettings = !isEmpty(userVizConfigs[curVisId])
+    ? { ...userVizConfigs[curVisId] }
+    : {
+        dataConfig: getDefaultVisConfig(queryManager.queryParser().parse(tempQuery).getStats()),
+      };
+
   const visualizations: IVisualizationContainerProps = useMemo(() => {
     return getVizContainerProps({
       vizId: curVisId,
       rawVizData: explorerVisualizations,
       query,
       indexFields: explorerFields,
-      userConfigs: !isEmpty(userVizConfigs[curVisId])
-        ? { ...userVizConfigs[curVisId] }
-        : {
-            dataConfig: getDefaultVisConfig(queryManager.queryParser().parse(tempQuery).getStats()),
-          },
+      userConfigs: {
+        ...visualizationSettings,
+        ...processMetricsData(explorerData.schema, visualizationSettings),
+      },
       appData: { fromApp: appLogEvents },
       explorer: { explorerData, explorerFields, query, http, pplService },
     });
@@ -740,7 +732,7 @@ export const Explorer = ({
         );
       }
     } else {
-      if (isTabHasObjID && isObjTypeMatchVis) {
+      if (isTabHasObjID && isObjTypeMatchVis && subType !== PPL_METRIC_SUBTYPE) {
         soClient = new SaveAsCurrentVisualization(
           { tabId, history, notifications, showPermissionErrorToast },
           { batch, dispatch, changeQuery, updateTabName },
diff --git a/public/components/event_analytics/explorer/save_panel/save_panel.tsx b/public/components/event_analytics/explorer/save_panel/save_panel.tsx
index 51c8b34c9..642adb6d4 100644
--- a/public/components/event_analytics/explorer/save_panel/save_panel.tsx
+++ b/public/components/event_analytics/explorer/save_panel/save_panel.tsx
@@ -20,6 +20,7 @@ import {
   fetchPanels,
   selectPanelList,
 } from '../../../../../public/components/custom_panels/redux/panel_slice';
+import { PPL_METRIC_SUBTYPE } from '../../../../../common/constants/shared';
 
 interface ISavedPanelProps {
   selectedOptions: any;
@@ -64,7 +65,7 @@ export const SavePanel = ({
   const onToggleChange = (e: { target: { checked: React.SetStateAction<boolean> } }) => {
     setChecked(e.target.checked);
     if (e.target.checked) {
-      setSubType('metric');
+      setSubType(PPL_METRIC_SUBTYPE);
     } else {
       setSubType('visualization');
     }
diff --git a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index 28c6cd812..fe7ab15c3 100644
--- a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -701,7 +701,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
         "unselectedFields": Array [],
       }
     }
-    tabId="DEFAULT_INDEX_PATTERNS"
   >
     <I18nProvider>
       <IntlProvider
@@ -1153,7 +1152,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={true}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -1285,7 +1283,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -1312,14 +1309,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -1540,7 +1536,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={true}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -1672,7 +1667,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -1699,14 +1693,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -1927,7 +1920,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={true}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -2059,7 +2051,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -2086,14 +2077,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -2314,7 +2304,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={true}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -2446,7 +2435,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -2473,14 +2461,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -2701,7 +2688,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={true}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -2833,7 +2819,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -2860,14 +2845,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -3088,7 +3072,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={true}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -3220,7 +3203,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -3247,14 +3229,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -3633,7 +3614,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -3739,15 +3719,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
-                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={true}
+                                                                          disabled={false}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -3821,7 +3800,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -3848,14 +3826,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -4077,7 +4054,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -4209,7 +4185,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -4236,14 +4211,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -4465,7 +4439,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -4597,7 +4570,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -4624,14 +4596,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -4853,7 +4824,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -4985,7 +4955,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -5012,14 +4981,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -5241,7 +5209,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -5347,15 +5314,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
-                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={true}
+                                                                          disabled={false}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -5429,7 +5395,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -5456,14 +5421,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -5685,7 +5649,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -5817,7 +5780,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -5844,14 +5806,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -6073,7 +6034,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -6179,15 +6139,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
-                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={true}
+                                                                          disabled={false}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -6261,7 +6220,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -6288,14 +6246,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -6517,7 +6474,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -6623,15 +6579,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
-                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={true}
+                                                                          disabled={false}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -6705,7 +6660,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -6732,14 +6686,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -6961,7 +6914,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -7093,7 +7045,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -7120,14 +7071,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -7349,7 +7299,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -7481,7 +7430,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -7508,14 +7456,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -7737,7 +7684,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -7869,7 +7815,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -7896,14 +7841,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -8125,7 +8069,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -8231,15 +8174,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
-                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={true}
+                                                                          disabled={false}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -8313,7 +8255,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -8340,14 +8281,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -8569,7 +8509,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -8701,7 +8640,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -8728,14 +8666,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -8957,7 +8894,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -9063,15 +8999,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
-                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={true}
+                                                                          disabled={false}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -9145,7 +9080,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -9172,14 +9106,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -9401,7 +9334,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -9507,15 +9439,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
-                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={true}
+                                                                          disabled={false}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -9589,7 +9520,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -9616,14 +9546,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -9845,7 +9774,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -9951,15 +9879,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
-                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={true}
+                                                                          disabled={false}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -10033,7 +9960,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -10060,14 +9986,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -10289,7 +10214,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -10395,15 +10319,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
-                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={true}
+                                                                          disabled={false}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -10477,7 +10400,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -10504,14 +10426,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -10733,7 +10654,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -10906,7 +10826,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -10933,14 +10852,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -11162,7 +11080,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -11268,15 +11185,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
-                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={true}
+                                                                          disabled={false}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -11350,7 +11266,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -11377,14 +11292,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -11606,7 +11520,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
-                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -11725,15 +11638,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultTimestamp"
                                                                         iconType="inputOutput"
-                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_timestamp"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultTimestamp"
-                                                                          disabled={true}
+                                                                          disabled={false}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -11794,7 +11706,6 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
-                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -11821,14 +11732,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
-                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={true}
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
index 6162e2a46..aa52b1155 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -465,7 +465,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "v",
+                            "id": "h",
                             "name": "Right",
                           },
                         ],
@@ -628,7 +628,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "v",
+        "legendposition": "h",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
@@ -787,7 +787,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "v",
+                                  "id": "h",
                                   "name": "Right",
                                 },
                               ],
@@ -951,7 +951,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
               "id": "bar",
               "label": "Vertical bar",
               "labelangle": 0,
-              "legendposition": "v",
+              "legendposition": "h",
               "linewidth": 0,
               "mode": "group",
               "name": "bar",
@@ -1092,7 +1092,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "v",
+                                  "id": "h",
                                   "name": "Right",
                                 },
                               ],
@@ -1255,7 +1255,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
               "id": "horizontal_bar",
               "label": "Horizontal bar",
               "labelangle": 0,
-              "legendposition": "v",
+              "legendposition": "h",
               "linewidth": 0,
               "mode": "group",
               "name": "horizontal_bar",
@@ -1337,7 +1337,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "v",
+                                  "id": "h",
                                   "name": "Right",
                                 },
                               ],
@@ -1688,13 +1688,13 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "v",
+                                  "id": "h",
                                   "name": "Right",
                                 },
                               ],
                               "options": Array [
                                 Object {
-                                  "id": "v",
+                                  "id": "h",
                                   "name": "Right",
                                 },
                                 Object {
@@ -1821,7 +1821,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
               "icontype": "visPie",
               "id": "pie",
               "label": "Pie",
-              "legendposition": "v",
+              "legendposition": "h",
               "mode": "pie",
               "name": "pie",
               "seriesaxis": "yaxis",
@@ -2484,7 +2484,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "v",
+                                  "id": "h",
                                   "name": "Right",
                                 },
                               ],
@@ -2648,7 +2648,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
               "id": "bar",
               "label": "Vertical bar",
               "labelangle": 0,
-              "legendposition": "v",
+              "legendposition": "h",
               "linewidth": 0,
               "mode": "group",
               "name": "bar",
@@ -2821,7 +2821,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 "props": Object {
                                   "defaultSelections": Array [
                                     Object {
-                                      "id": "v",
+                                      "id": "h",
                                       "name": "Right",
                                     },
                                   ],
@@ -2985,7 +2985,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                   "id": "bar",
                   "label": "Vertical bar",
                   "labelangle": 0,
-                  "legendposition": "v",
+                  "legendposition": "h",
                   "linewidth": 0,
                   "mode": "group",
                   "name": "bar",
@@ -3163,7 +3163,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       "props": Object {
                                         "defaultSelections": Array [
                                           Object {
-                                            "id": "v",
+                                            "id": "h",
                                             "name": "Right",
                                           },
                                         ],
@@ -3328,7 +3328,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       id="bar"
                       key="vertical bar"
                       labelangle={0}
-                      legendposition="v"
+                      legendposition="h"
                       linewidth={0}
                       mode="group"
                       name="bar"
@@ -3440,7 +3440,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                         "props": Object {
                                           "defaultSelections": Array [
                                             Object {
-                                              "id": "v",
+                                              "id": "h",
                                               "name": "Right",
                                             },
                                           ],
@@ -3604,7 +3604,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           "id": "bar",
                           "label": "Vertical bar",
                           "labelangle": 0,
-                          "legendposition": "v",
+                          "legendposition": "h",
                           "linewidth": 0,
                           "mode": "group",
                           "name": "bar",
@@ -3783,7 +3783,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                         "props": Object {
                                           "defaultSelections": Array [
                                             Object {
-                                              "id": "v",
+                                              "id": "h",
                                               "name": "Right",
                                             },
                                           ],
@@ -3947,7 +3947,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         icontype="visBarVerticalStacked"
                         id="bar"
                         labelangle={0}
-                        legendposition="v"
+                        legendposition="h"
                         linewidth={0}
                         mode="group"
                         name="bar"
@@ -4096,7 +4096,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             "props": Object {
                                               "defaultSelections": Array [
                                                 Object {
-                                                  "id": "v",
+                                                  "id": "h",
                                                   "name": "Right",
                                                 },
                                               ],
@@ -4259,7 +4259,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             icontype="visBarVerticalStacked"
                             id="bar"
                             labelangle={0}
-                            legendposition="v"
+                            legendposition="h"
                             linewidth={0}
                             mode="group"
                             name="bar"
@@ -4577,7 +4577,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
-                                "id": "v",
+                                "id": "h",
                                 "name": "Right",
                               },
                             ],
@@ -5187,7 +5187,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "props": Object {
                                     "defaultSelections": Array [
                                       Object {
-                                        "id": "v",
+                                        "id": "h",
                                         "name": "Right",
                                       },
                                     ],
@@ -5350,7 +5350,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                     "id": "bar",
                     "label": "Vertical bar",
                     "labelangle": 0,
-                    "legendposition": "v",
+                    "legendposition": "h",
                     "linewidth": 0,
                     "mode": "group",
                     "name": "bar",
@@ -5519,7 +5519,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "v",
+                                  "id": "h",
                                   "name": "Right",
                                 },
                               ],
@@ -6129,7 +6129,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     "props": Object {
                                       "defaultSelections": Array [
                                         Object {
-                                          "id": "v",
+                                          "id": "h",
                                           "name": "Right",
                                         },
                                       ],
@@ -6292,7 +6292,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       "id": "bar",
                       "label": "Vertical bar",
                       "labelangle": 0,
-                      "legendposition": "v",
+                      "legendposition": "h",
                       "linewidth": 0,
                       "mode": "group",
                       "name": "bar",
@@ -6502,7 +6502,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
-                                "id": "v",
+                                "id": "h",
                                 "name": "Right",
                               },
                             ],
@@ -7112,7 +7112,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "props": Object {
                                     "defaultSelections": Array [
                                       Object {
-                                        "id": "v",
+                                        "id": "h",
                                         "name": "Right",
                                       },
                                     ],
@@ -7275,7 +7275,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                     "id": "bar",
                     "label": "Vertical bar",
                     "labelangle": 0,
-                    "legendposition": "v",
+                    "legendposition": "h",
                     "linewidth": 0,
                     "mode": "group",
                     "name": "bar",
@@ -7823,7 +7823,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "props": Object {
                                                   "defaultSelections": Array [
                                                     Object {
-                                                      "id": "v",
+                                                      "id": "h",
                                                       "name": "Right",
                                                     },
                                                   ],
@@ -7986,7 +7986,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "id": "bar",
                                   "label": "Vertical bar",
                                   "labelangle": 0,
-                                  "legendposition": "v",
+                                  "legendposition": "h",
                                   "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
@@ -8269,6 +8269,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
+                      key="tooltip_options"
                       labelType="label"
                     >
                       <div
@@ -8801,7 +8802,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "props": Object {
                                                   "defaultSelections": Array [
                                                     Object {
-                                                      "id": "v",
+                                                      "id": "h",
                                                       "name": "Right",
                                                     },
                                                   ],
@@ -8964,7 +8965,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "id": "bar",
                                   "label": "Vertical bar",
                                   "labelangle": 0,
-                                  "legendposition": "v",
+                                  "legendposition": "h",
                                   "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
@@ -9743,6 +9744,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
+                      key="legend"
                       labelType="label"
                     >
                       <div
@@ -9790,7 +9792,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "props": Object {
                                     "defaultSelections": Array [
                                       Object {
-                                        "id": "v",
+                                        "id": "h",
                                         "name": "Right",
                                       },
                                     ],
@@ -10278,7 +10280,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "props": Object {
                                                   "defaultSelections": Array [
                                                     Object {
-                                                      "id": "v",
+                                                      "id": "h",
                                                       "name": "Right",
                                                     },
                                                   ],
@@ -10441,7 +10443,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "id": "bar",
                                   "label": "Vertical bar",
                                   "labelangle": 0,
-                                  "legendposition": "v",
+                                  "legendposition": "h",
                                   "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
@@ -10830,7 +10832,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           defaultSelections={
                                             Array [
                                               Object {
-                                                "id": "v",
+                                                "id": "h",
                                                 "name": "Right",
                                               },
                                             ]
@@ -10850,7 +10852,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             ]
                                           }
                                           handleButtonChange={[Function]}
-                                          idSelected="v"
+                                          idSelected="h"
                                           legend="Position"
                                           options={
                                             Array [
@@ -10893,7 +10895,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             <EuiButtonGroup
                                               buttonSize="compressed"
                                               id="random_html_id"
-                                              idSelected="v"
+                                              idSelected="h"
                                               isFullWidth={false}
                                               legend="Position"
                                               name="Position"
@@ -10934,7 +10936,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                     id="v"
                                                     isDisabled={false}
                                                     isIconOnly={false}
-                                                    isSelected={true}
+                                                    isSelected={false}
                                                     key="0"
                                                     label="Right"
                                                     name="Right"
@@ -10943,7 +10945,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                   >
                                                     <EuiButtonDisplay
                                                       baseClassName="euiButtonGroupButton"
-                                                      className="euiButtonGroupButton-isSelected"
+                                                      className=""
                                                       color="text"
                                                       element="label"
                                                       fill={false}
@@ -10961,7 +10963,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                       }
                                                     >
                                                       <label
-                                                        className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected"
+                                                        className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
                                                         disabled={false}
                                                         htmlFor="random_html_id"
                                                         onClick={[Function]}
@@ -10992,7 +10994,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                               title="Right"
                                                             >
                                                               <input
-                                                                checked={true}
+                                                                checked={false}
                                                                 className="euiScreenReaderOnly"
                                                                 data-test-subj="v"
                                                                 disabled={false}
@@ -11014,7 +11016,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                     id="h"
                                                     isDisabled={false}
                                                     isIconOnly={false}
-                                                    isSelected={false}
+                                                    isSelected={true}
                                                     key="1"
                                                     label="Bottom"
                                                     name="Bottom"
@@ -11023,7 +11025,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                   >
                                                     <EuiButtonDisplay
                                                       baseClassName="euiButtonGroupButton"
-                                                      className=""
+                                                      className="euiButtonGroupButton-isSelected"
                                                       color="text"
                                                       element="label"
                                                       fill={false}
@@ -11041,7 +11043,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                       }
                                                     >
                                                       <label
-                                                        className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                                        className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected"
                                                         disabled={false}
                                                         htmlFor="random_html_id"
                                                         onClick={[Function]}
@@ -11072,7 +11074,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                               title="Bottom"
                                                             >
                                                               <input
-                                                                checked={false}
+                                                                checked={true}
                                                                 className="euiScreenReaderOnly"
                                                                 data-test-subj="h"
                                                                 disabled={false}
@@ -11188,6 +11190,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
+                      key="chart_styles"
                       labelType="label"
                     >
                       <div
@@ -11776,7 +11779,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "props": Object {
                                                   "defaultSelections": Array [
                                                     Object {
-                                                      "id": "v",
+                                                      "id": "h",
                                                       "name": "Right",
                                                     },
                                                   ],
@@ -11939,7 +11942,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "id": "bar",
                                   "label": "Vertical bar",
                                   "labelangle": 0,
-                                  "legendposition": "v",
+                                  "legendposition": "h",
                                   "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
@@ -14360,6 +14363,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
+                      key="color-theme"
                       labelType="label"
                     >
                       <div
@@ -14839,7 +14843,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "props": Object {
                                                   "defaultSelections": Array [
                                                     Object {
-                                                      "id": "v",
+                                                      "id": "h",
                                                       "name": "Right",
                                                     },
                                                   ],
@@ -15002,7 +15006,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "id": "bar",
                                   "label": "Vertical bar",
                                   "labelangle": 0,
-                                  "legendposition": "v",
+                                  "legendposition": "h",
                                   "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx
index 6ee5397d8..ef8e17b50 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx
@@ -20,7 +20,7 @@ export const VizDataPanel = ({ visualizations, onConfigChange, vizState = {}, ta
   const dynamicContent = tabProps.sections.map((section) => {
     const Editor = section.editor;
     return (
-      <EuiFormRow fullWidth>
+      <EuiFormRow key={section.id} fullWidth>
         <Editor
           visualizations={visualizations}
           schemas={section.schemas}
diff --git a/public/components/event_analytics/home/saved_objects_table.tsx b/public/components/event_analytics/home/saved_objects_table.tsx
index 79c76c4ec..4d42a0b07 100644
--- a/public/components/event_analytics/home/saved_objects_table.tsx
+++ b/public/components/event_analytics/home/saved_objects_table.tsx
@@ -6,6 +6,8 @@
 import { Criteria, EuiIcon, EuiInMemoryTable, EuiLink } from '@elastic/eui';
 import React, { useRef, useState } from 'react';
 import { FILTER_OPTIONS, LOG_EXPLORER_BASE_PATH } from '../../../../common/constants/explorer';
+import { PPL_METRIC_SUBTYPE, PROMQL_METRIC_SUBTYPE } from '../../../../common/constants/shared';
+import { METRIC_EXPLORER_BASE_PATH } from '../../../../common/constants/metrics';
 
 interface SavedQueryTableProps {
   savedHistories: any[];
@@ -64,7 +66,14 @@ export function SavedQueryTable({
       sortable: true,
       truncateText: true,
       render: (item: any) => {
-        return (
+        return item.subType === PROMQL_METRIC_SUBTYPE ? (
+          <EuiLink
+            href={`${METRIC_EXPLORER_BASE_PATH}${item.objectId}`}
+            data-test-subj="eventHome__savedQueryTableName"
+          >
+            {item.name}
+          </EuiLink>
+        ) : (
           <EuiLink
             href={`${LOG_EXPLORER_BASE_PATH}${item.objectId}`}
             data-test-subj="eventHome__savedQueryTableName"
@@ -86,7 +95,7 @@ export function SavedQueryTable({
     const curType = isSavedVisualization ? 'savedVisualization' : 'savedQuery';
     const displayType = !isSavedVisualization
       ? 'Query'
-      : savedObject?.sub_type === 'metric'
+      : [PPL_METRIC_SUBTYPE, PROMQL_METRIC_SUBTYPE].includes(savedObject?.subType)
       ? 'Metric'
       : 'Visualization';
     const record = {
@@ -98,6 +107,7 @@ export function SavedQueryTable({
       date_end: savedObject.selected_date_range.end,
       timestamp: savedObject.selected_timestamp?.name,
       fields: savedObject.selected_fields?.tokens || [],
+      subType: savedObject.subType,
     };
     return {
       id: h.objectId,
diff --git a/public/components/event_analytics/utils/utils.tsx b/public/components/event_analytics/utils/utils.tsx
index 996a656b6..b19f3ce02 100644
--- a/public/components/event_analytics/utils/utils.tsx
+++ b/public/components/event_analytics/utils/utils.tsx
@@ -5,19 +5,18 @@
 
 /* eslint-disable no-bitwise */
 
-import { uniqueId, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 import moment from 'moment';
 import React, { MutableRefObject } from 'react';
 import { EuiDataGridSorting, EuiText } from '@elastic/eui';
 import datemath from '@elastic/datemath';
-import { HttpStart } from '../../../../../../src/core/public';
 import {
-  CUSTOM_LABEL,
-  TIME_INTERVAL_OPTIONS,
-  GROUPBY,
   AGGREGATIONS,
   BREAKDOWNS,
+  CUSTOM_LABEL,
   DATE_PICKER_FORMAT,
+  GROUPBY,
+  TIME_INTERVAL_OPTIONS,
 } from '../../../../common/constants/explorer';
 import {
   PPL_DATE_FORMAT,
@@ -28,13 +27,10 @@ import {
 import {
   ConfigListEntry,
   GetTooltipHoverInfoType,
-  IExplorerFields,
-  IField,
   IQuery,
   MOMENT_UNIT_OF_TIME,
 } from '../../../../common/types/explorer';
 import PPLService from '../../../services/requests/ppl';
-import { DocViewRow, IDocType } from '../explorer/events_views';
 import { ConfigTooltip } from '../explorer/visualizations/config_panel/config_panes/config_controls';
 import {
   GroupByChunk,
@@ -76,16 +72,6 @@ const composeFinalQuery = (
   return indexPartOfQuery + timeQueryFilter + filterPartOfQuery + sortFilter;
 };
 
-const createTds = (
-  docs: IDocType[],
-  selectedCols: IField[],
-  getTds: (doc: IDocType, selectedCols: IField[], isFlyout: boolean) => JSX.Element[]
-) => {
-  return docs.map((doc: IDocType) => (
-    <tr className="osdDocTable__row"> {getTds(doc, selectedCols, true).slice(1)}</tr>
-  ));
-};
-
 // fetches Surrounding events based on a timestamp
 export const fetchSurroundingData = async (
   pplService: PPLService,
@@ -96,9 +82,7 @@ export const fetchSurroundingData = async (
   typeOfDocs: 'new' | 'old',
   setEventsData: React.Dispatch<React.SetStateAction<JSX.Element[]>>,
   setIsError: React.Dispatch<React.SetStateAction<string>>,
-  setLoadingData: React.Dispatch<React.SetStateAction<boolean>>,
-  selectedCols: IField[],
-  getTds: (doc: IDocType, selectedCols: IField[], isFlyout: boolean) => JSX.Element[]
+  setLoadingData: React.Dispatch<React.SetStateAction<boolean>>
 ) => {
   let resultCount = 0;
   let isErred = false;
@@ -270,6 +254,23 @@ export const getPropName = (queriedVizObj: {
   }
 };
 
+export const getMetricVisConfig = (metric) => {
+  const { aggregation } = metric;
+  return {
+    [AGGREGATIONS]: [
+      {
+        name: aggregation,
+        aggregation,
+        label: aggregation + '()',
+      },
+    ],
+    [BREAKDOWNS]: [],
+    queryMetaData: metric.queryMetaData,
+    subType: metric.subType,
+    legend: { showLegend: 'hidden' }, // force no-legend in dashboard displays
+  };
+};
+
 export const getDefaultVisConfig = (statsToken: statsChunk) => {
   if (statsToken === null) {
     return {
diff --git a/public/components/metrics/helpers/__tests__/utils.test.tsx b/public/components/metrics/helpers/__tests__/utils.test.tsx
index 42d099a35..dde4cdb70 100644
--- a/public/components/metrics/helpers/__tests__/utils.test.tsx
+++ b/public/components/metrics/helpers/__tests__/utils.test.tsx
@@ -5,47 +5,18 @@
 
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+import { mergeLayoutAndMetrics, sortMetricLayout } from '../utils';
 import {
-  createPrometheusMetricById,
-  getNewVizDimensions,
-  mergeLayoutAndMetrics,
-  onTimeChange,
-  sortMetricLayout,
-  updateMetricsWithSelections,
-} from '../utils';
-import {
-  samplePanelVisualizations1,
-  samplenewDimensions1,
-  samplenewDimensions2,
-  samplePanelVisualizations2,
-  sampleMetricsVisualizations,
-  samplePrometheusVisualizationComponent,
-  samplePrometheusVisualizationId,
   sampleLayout,
-  sampleVisualizationsList,
   sampleMergedVisualizations,
-  samplePrometheusSampleUpdateWithSelections,
-  sampleSavedMetric,
-  sampleSavedMetricUpdate,
+  sampleMetricsVisualizations,
+  sampleVisualizationsList,
 } from '../../../../../test/metrics_contants';
 import _ from 'lodash';
 
 describe('Utils helper functions', () => {
   configure({ adapter: new Adapter() });
 
-  it('validates getNewVizDimensions function', () => {
-    expect(getNewVizDimensions([])).toMatchObject({
-      x: 0,
-      y: 0,
-      w: 12,
-      h: 2,
-    });
-
-    expect(getNewVizDimensions(samplePanelVisualizations1)).toStrictEqual(samplenewDimensions1);
-    expect(getNewVizDimensions(samplePanelVisualizations2)).toStrictEqual(samplenewDimensions2);
-  });
-
   it('validates sortMetricLayout function', () => {
     expect(sortMetricLayout(_.shuffle(sampleMetricsVisualizations))).toStrictEqual(
       sampleMetricsVisualizations
@@ -61,20 +32,4 @@ describe('Utils helper functions', () => {
       sampleMergedVisualizations
     );
   });
-
-  it('validates createPrometheusMetricById function', () => {
-    expect(createPrometheusMetricById(samplePrometheusVisualizationId)).toStrictEqual(
-      samplePrometheusVisualizationComponent
-    );
-  });
-
-  it('validates updateMetricsWithSelections function', () => {
-    expect(
-      updateMetricsWithSelections(samplePrometheusVisualizationComponent, 'now-1d', 'now', '1h')
-    ).toStrictEqual(samplePrometheusSampleUpdateWithSelections);
-
-    expect(updateMetricsWithSelections(sampleSavedMetric, 'now-30m', 'now', '1m')).toStrictEqual(
-      sampleSavedMetricUpdate
-    );
-  });
 });
diff --git a/public/components/metrics/helpers/utils.tsx b/public/components/metrics/helpers/utils.tsx
index 2736a0467..9e175f8ec 100644
--- a/public/components/metrics/helpers/utils.tsx
+++ b/public/components/metrics/helpers/utils.tsx
@@ -3,24 +3,33 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import dateMath from '@elastic/datemath';
 import { ShortDate } from '@elastic/eui';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
-import _ from 'lodash';
 import React from 'react';
 import { Layout } from 'react-grid-layout';
-import { VISUALIZATION, SAVED_VISUALIZATION } from '../../../../common/constants/metrics';
-import {
-  EVENT_ANALYTICS,
-  OBSERVABILITY_BASE,
-  SAVED_OBJECTS,
-} from '../../../../common/constants/shared';
+import { VISUALIZATION } from '../../../../common/constants/metrics';
+import { PROMQL_METRIC_SUBTYPE } from '../../../../common/constants/shared';
 import PPLService from '../../../services/requests/ppl';
-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 { updateQuerySpanInterval } from '../../custom_panels/helpers/utils';
+
+export const onTimeChange = (
+  start: ShortDate,
+  end: ShortDate,
+  recentlyUsedRanges: DurationRange[],
+  setRecentlyUsedRanges: React.Dispatch<React.SetStateAction<DurationRange[]>>,
+  setStart: React.Dispatch<React.SetStateAction<string>>,
+  setEnd: React.Dispatch<React.SetStateAction<string>>
+) => {
+  const dedupedRanges = recentlyUsedRanges.filter((recentlyUsedRange) => {
+    const isDuplicate = recentlyUsedRange.start === start && recentlyUsedRange.end === end;
+    return !isDuplicate;
+  });
+  dedupedRanges.unshift({ start, end });
+  setStart(start);
+  setEnd(end);
+  setRecentlyUsedRanges(dedupedRanges.slice(0, 9));
+};
 
 // PPL Service requestor
 export const pplServiceRequestor = (pplService: PPLService, finalQuery: string) => {
@@ -29,99 +38,6 @@ export const pplServiceRequestor = (pplService: PPLService, finalQuery: string)
   });
 };
 
-// Observability backend to fetch visualizations/custom metrics
-export const getVisualizations = (http: CoreStart['http']) => {
-  return http
-    .get(`${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}`, {
-      query: { objectType: [SAVED_VISUALIZATION] },
-    })
-    .catch((err) => {
-      console.error('Issue in fetching all saved visualizations', err);
-    });
-};
-
-interface BoxType {
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-}
-
-const calculatOverlapArea = (bb1: BoxType, bb2: BoxType) => {
-  const xLeft = Math.max(bb1.x1, bb2.x1);
-  const yTop = Math.max(bb1.y1, bb2.y1);
-  const xRight = Math.min(bb1.x2, bb2.x2);
-  const yBottom = Math.min(bb1.y2, bb2.y2);
-
-  if (xRight < xLeft || yBottom < yTop) return 0;
-  return (xRight - xLeft) * (yBottom - yTop);
-};
-
-const getTotalOverlapArea = (panelVisualizations: MetricType[]) => {
-  const newVizBox = { x1: 0, y1: 0, x2: DEFAULT_METRIC_WIDTH, y2: DEFAULT_METRIC_HEIGHT };
-  const currentVizBoxes = panelVisualizations.map((visualization) => {
-    return {
-      x1: visualization.x,
-      y1: visualization.y,
-      x2: visualization.x + visualization.w,
-      y2: visualization.y + visualization.h,
-    };
-  });
-
-  let isOverlapping = 0;
-  currentVizBoxes.map((viz) => {
-    isOverlapping += calculatOverlapArea(viz, newVizBox);
-  });
-  return isOverlapping;
-};
-
-// We want to check if the new visualization being added, can be placed at { x: 0, y: 0, w: 6, h: 4 };
-// To check this we try to calculate overlap between all the current visualizations and new visualization
-// if there is no overalap (i.e Total Overlap Area is 0), we place the new viz. in default position
-// else, we add it to the bottom of the panel
-export const getNewVizDimensions = (panelVisualizations: MetricType[]) => {
-  let maxY: number = 0;
-  let maxYH: number = 0;
-
-  // check if we can place the new visualization at default location
-  if (getTotalOverlapArea(panelVisualizations) === 0) {
-    return { x: 0, y: 0, w: DEFAULT_METRIC_WIDTH, h: DEFAULT_METRIC_HEIGHT };
-  }
-
-  // else place the new visualization at the bottom of the panel
-  panelVisualizations.map((panelVisualization: MetricType) => {
-    if (panelVisualization.y >= maxY) {
-      maxY = panelVisualization.y;
-      maxYH = panelVisualization.h;
-    }
-  });
-
-  return { x: 0, y: maxY + maxYH, w: DEFAULT_METRIC_WIDTH, h: DEFAULT_METRIC_HEIGHT };
-};
-
-export const getMinSpanInterval = (start: any, end: any) => {
-  const momentStart = dateMath.parse(start)!;
-  const momentEnd = dateMath.parse(end, { roundUp: true })!;
-  const diffSeconds = momentEnd.unix() - momentStart.unix();
-  let minInterval;
-  // // less than 1 second
-  // if (diffSeconds <= 1) minInterval = 'ms';
-  // less than 2 minutes
-  if (diffSeconds <= 60 * 2) minInterval = 's';
-  // less than 2 hours
-  else if (diffSeconds <= 3600 * 2) minInterval = 'm';
-  // less than 2 days
-  else if (diffSeconds <= 86400 * 2) minInterval = 'h';
-  // less than 1 month
-  else if (diffSeconds <= 86400 * 31) minInterval = 'd';
-  // less than 3 months
-  else if (diffSeconds <= 86400 * 93) minInterval = 'w';
-  // less than 1 year
-  else if (diffSeconds <= 86400 * 366) minInterval = 'M';
-
-  return minInterval;
-};
-
 // Merges new layout into visualizations
 export const mergeLayoutAndMetrics = (
   layout: Layout[],
@@ -153,41 +69,28 @@ export const sortMetricLayout = (metricsLayout: MetricType[]) => {
   });
 };
 
-export const createPrometheusMetricById = (metricId: string) => {
-  return {
-    name: '[Prometheus Metric] ' + metricId,
-    description: '',
-    query: 'source = ' + metricId + ' | stats avg(@value) by span(@timestamp,1h)',
-    type: 'line',
-    timeField: '@timestamp',
-    selected_fields: {
-      text: '',
-      tokens: [],
+export const visualizationFromMetric = (metric, span, resolution): SavedVisualizationType => {
+  const userConfigs = JSON.stringify({
+    dataConfig: {
+      chartStyles: {
+        lineWidth: '2',
+        fillOpacity: '0',
+      },
+      series: ['@value'],
     },
-    sub_type: 'metric',
-    user_configs: {},
-  };
-};
+  });
 
-export const updateMetricsWithSelections = (
-  savedVisualization: any,
-  startTime: ShortDate,
-  endTime: ShortDate,
-  spanValue: string
-) => {
   return {
-    query: updateQuerySpanInterval(
-      savedVisualization.query,
-      savedVisualization.timeField,
-      spanValue
-    ),
-    fields: savedVisualization.selected_fields.tokens,
-    dateRange: [startTime, endTime],
-    timestamp: savedVisualization.timeField,
-    name: savedVisualization.name,
-    description: savedVisualization.description,
+    ...metric,
+    timeField: '@timestamp',
+    selected_date_range: {
+      start: 'now-1d',
+      end: 'now',
+      span,
+      resolution,
+    },
     type: 'line',
-    subType: 'metric',
-    userConfigs: JSON.stringify(savedVisualization.user_configs),
+    subType: PROMQL_METRIC_SUBTYPE,
+    userConfigs: JSON.stringify(userConfigs),
   };
 };
diff --git a/public/components/metrics/index.tsx b/public/components/metrics/index.tsx
index 168f68fe4..8303a4e82 100644
--- a/public/components/metrics/index.tsx
+++ b/public/components/metrics/index.tsx
@@ -4,30 +4,16 @@
  */
 
 import './index.scss';
-import {
-  EuiGlobalToastList,
-  EuiPage,
-  EuiPageBody,
-  EuiResizableContainer,
-  htmlIdGenerator,
-  OnTimeChangeProps,
-  ShortDate,
-} from '@elastic/eui';
+import { EuiGlobalToastList, EuiPage, EuiPageBody, EuiResizableContainer } from '@elastic/eui';
 import React, { ReactChild, useEffect, useState } from 'react';
-import { HashRouter, Route, RouteComponentProps } from 'react-router-dom';
-import { StaticContext } from 'react-router-dom';
-import { useSelector } from 'react-redux';
+import { HashRouter, Route, RouteComponentProps, StaticContext } from 'react-router-dom';
 import { ChromeBreadcrumb, Toast } from '../../../../../src/core/public';
 import { Sidebar } from './sidebar/sidebar';
-import { EmptyMetricsView } from './view/empty_view';
 import PPLService from '../../services/requests/ppl';
 import { TopMenu } from './top_menu/top_menu';
 import { MetricType } from '../../../common/types/metrics';
 import { MetricsGrid } from './view/metrics_grid';
-import { metricsLayoutSelector, selectedMetricsSelector } from './redux/slices/metrics_slice';
-import { resolutionOptions } from '../../../common/constants/metrics';
 import SavedObjects from '../../services/saved_objects/event_analytics/saved_objects';
-import { observabilityLogsID } from '../../../common/constants/shared';
 
 interface MetricsProps {
   parentBreadcrumb: ChromeBreadcrumb;
@@ -38,14 +24,12 @@ interface MetricsProps {
 }
 
 export const Home = ({ chrome, parentBreadcrumb }: MetricsProps) => {
-  // Redux tools
-  const selectedMetrics = useSelector(selectedMetricsSelector);
-  const metricsLayout = useSelector(metricsLayoutSelector);
+  // Date picker constants
+  const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<DurationRange[]>([]);
+  const [onRefresh, setOnRefresh] = useState(false);
 
   // Top panel
-  const [IsTopPanelDisabled, setIsTopPanelDisabled] = useState(false);
   const [editMode, setEditMode] = useState(false);
-  const [editActionType, setEditActionType] = useState('');
   const [toasts, setToasts] = useState<Toast[]>([]);
   const [toastRightSide, setToastRightSide] = useState<boolean>(true);
 
@@ -58,10 +42,6 @@ export const Home = ({ chrome, parentBreadcrumb }: MetricsProps) => {
     setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
   };
 
-  const onEditClick = (savedVisualizationId: string) => {
-    window.location.assign(`${observabilityLogsID}#/explorer/${savedVisualizationId}`);
-  };
-
   useEffect(() => {
     chrome.setBreadcrumbs([
       parentBreadcrumb,
@@ -72,18 +52,6 @@ export const Home = ({ chrome, parentBreadcrumb }: MetricsProps) => {
     ]);
   }, [chrome, parentBreadcrumb]);
 
-  useEffect(() => {
-    if (!editMode) {
-      selectedMetrics.length > 0 ? setIsTopPanelDisabled(false) : setIsTopPanelDisabled(true); // eslint-disable-line
-    } else {
-      setIsTopPanelDisabled(true);
-    }
-  }, [selectedMetrics, editMode]);
-
-  useEffect(() => {
-    setPanelVisualizations(metricsLayout);
-  }, [metricsLayout]);
-
   return (
     <>
       <EuiGlobalToastList
@@ -97,13 +65,12 @@ export const Home = ({ chrome, parentBreadcrumb }: MetricsProps) => {
       <HashRouter>
         <Route
           exact
-          path="/"
-          render={() => (
+          path={['/:id', '/']}
+          render={(routerProps) => (
             <div>
               <EuiPage>
                 <EuiPageBody component="div">
                   <TopMenu
-                    IsTopPanelDisabled={IsTopPanelDisabled}
                     editMode={editMode}
                     setEditMode={setEditMode}
                     setEditActionType={setEditActionType}
@@ -116,25 +83,13 @@ export const Home = ({ chrome, parentBreadcrumb }: MetricsProps) => {
                       {(EuiResizablePanel, EuiResizableButton) => (
                         <>
                           <EuiResizablePanel mode="collapsible" initialSize={20} minSize="10%">
-                            <Sidebar />
+                            <Sidebar additionalSelectedMetricId={routerProps.match.params.id} />
                           </EuiResizablePanel>
 
                           <EuiResizableButton />
 
                           <EuiResizablePanel mode="main" initialSize={80} minSize="50px">
-                            {selectedMetrics.length > 0 ? (
-                              <MetricsGrid
-                                chrome={chrome}
-                                panelVisualizations={panelVisualizations}
-                                setPanelVisualizations={setPanelVisualizations}
-                                editMode={editMode}
-                                moveToEvents={onEditClick}
-                                editActionType={editActionType}
-                                setEditActionType={setEditActionType}
-                              />
-                            ) : (
-                              <EmptyMetricsView />
-                            )}
+                            <MetricsGrid key="metricGrid" />
                           </EuiResizablePanel>
                         </>
                       )}
diff --git a/public/components/metrics/redux/slices/metrics_slice.ts b/public/components/metrics/redux/slices/metrics_slice.ts
index 93e1ff26b..6de49d48c 100644
--- a/public/components/metrics/redux/slices/metrics_slice.ts
+++ b/public/components/metrics/redux/slices/metrics_slice.ts
@@ -4,23 +4,25 @@
  */
 
 import { createSlice } from '@reduxjs/toolkit';
-import { sortBy } from 'lodash';
+import { keyBy, mergeWith, pick, sortBy } from 'lodash';
 import { ouiPaletteColorBlindBehindText } from '@elastic/eui';
 import {
+  OBSERVABILITY_CUSTOM_METRIC,
   PPL_DATASOURCES_REQUEST,
   REDUX_SLICE_METRICS,
   SAVED_VISUALIZATION,
-  OBSERVABILITY_CUSTOM_METRIC,
 } from '../../../../../common/constants/metrics';
 import { MetricType } from '../../../../../common/types/metrics';
 import { SavedObjectsActions } from '../../../../services/saved_objects/saved_object_client/saved_objects_actions';
 import { ObservabilitySavedVisualization } from '../../../../services/saved_objects/saved_object_client/types';
-import { getNewVizDimensions, pplServiceRequestor, sortMetricLayout } from '../../helpers/utils';
+import { pplServiceRequestor } from '../../helpers/utils';
 import { coreRefs } from '../../../../framework/core_refs';
+import { PPL_METRIC_SUBTYPE, PROMQL_METRIC_SUBTYPE } from '../../../../../common/constants/shared';
 
 export interface IconAttributes {
   color: string;
 }
+
 const coloredIconsFrom = (dataSources: string[]): { [dataSource: string]: IconAttributes } => {
   const colorCycle = ouiPaletteColorBlindBehindText({ sortBy: 'natural' });
   const keyedIcons = dataSources.map((dataSource, index) => {
@@ -36,9 +38,9 @@ const coloredIconsFrom = (dataSources: string[]): { [dataSource: string]: IconAt
 };
 
 const initialState = {
-  metrics: [],
-  selected: [],
-  searched: [],
+  metrics: {},
+  selectedIds: [],
+  sortedIds: [],
   search: '',
   metricsLayout: [],
   dataSources: [OBSERVABILITY_CUSTOM_METRIC],
@@ -54,6 +56,23 @@ const initialState = {
   refresh: 0, // set to new Date() to trigger
 };
 
+const mergeMetricCustomizer = function (objValue, srcValue) {
+  return {
+    ...srcValue,
+    availableAttributes:
+      objValue?.availableAttributes?.length > 0
+        ? objValue.availableAttributes
+        : srcValue.availableAttributes,
+  };
+};
+export const mergeMetrics = (newMetricMap) => (dispatch, getState) => {
+  const { metrics } = getState().metrics;
+  const modifiableMetricsMap = { ...metrics };
+
+  const mergedMetrics = mergeWith(modifiableMetricsMap, newMetricMap, mergeMetricCustomizer);
+  dispatch(setMetrics(mergedMetrics));
+};
+
 export const loadMetrics = () => async (dispatch) => {
   const { http, pplService } = coreRefs;
   const customDataRequest = fetchCustomMetrics(http);
@@ -67,22 +86,35 @@ export const loadMetrics = () => async (dispatch) => {
   );
 
   const remoteDataRequests = await fetchRemoteMetrics(remoteDataSources);
-  const dataResponses = await Promise.all([customDataRequest, ...remoteDataRequests]);
-  dispatch(setMetrics(dataResponses.flat()));
+  const metricsResultSet = await Promise.all([customDataRequest, ...remoteDataRequests]);
+  const metricsResult = metricsResultSet.flat();
+
+  const metricsMapById = keyBy(metricsResult.flat(), 'id');
+  dispatch(mergeMetrics(metricsMapById));
+
+  const sortedIds = sortBy(metricsResult, 'catalog', 'id').map((m) => m.id);
+  dispatch(setSortedIds(sortedIds));
 };
 
 const fetchCustomMetrics = async () => {
   const dataSet = await SavedObjectsActions.getBulk<ObservabilitySavedVisualization>({
     objectType: [SAVED_VISUALIZATION],
   });
-  const savedMetrics = dataSet.observabilityObjectList.filter(
-    (obj) => obj.savedVisualization.sub_type === 'metric'
+  const savedMetrics = dataSet.observabilityObjectList.filter((obj) =>
+    [PROMQL_METRIC_SUBTYPE, PPL_METRIC_SUBTYPE].includes(obj.savedVisualization?.subType)
   );
   return savedMetrics.map((obj: any) => ({
     id: obj.objectId,
+    savedVisualizationId: obj.objectId,
+    query: obj.savedVisualization.query,
     name: obj.savedVisualization.name,
-    catalog: 'CUSTOM_METRICS',
+    catalog: OBSERVABILITY_CUSTOM_METRIC,
     type: obj.savedVisualization.type,
+    subType: obj.savedVisualization.subType,
+    aggregation: obj.savedVisualization.queryMetaData?.aggregation ?? 'avg',
+    availableAttributes: [],
+    attributesGroupBy: obj.savedVisualization.queryMetaData?.attributesGroupBy ?? [],
+    index: `${obj.savedVisualization.queryMetaData?.catalogSourceName}.${obj.savedVisualization.queryMetaData?.catalogTableName}`,
     recentlyCreated: (Date.now() - obj.createdTimeMs) / 36e5 <= 12,
   }));
 };
@@ -104,46 +136,21 @@ const fetchRemoteMetrics = async (remoteDataSources: string[]): Promise<any> =>
         id: `${obj.TABLE_CATALOG}.${obj.TABLE_NAME}`,
         name: `${obj.TABLE_CATALOG}.${obj.TABLE_NAME}`,
         catalog: `${dataSource}`,
-        type: obj.TABLE_TYPE,
+        catalogSourceName: dataSource,
+        catalogTableName: obj.TABLE_NAME,
+        index: `${dataSource}.${obj.TABLE_NAME}`,
+        query: undefined,
+        aggregation: 'avg',
+        attributesGroupBy: [],
+        availableAttributes: [],
+        type: 'line',
+        subType: PROMQL_METRIC_SUBTYPE,
         recentlyCreated: false,
       }))
     )
   );
 };
 
-const updateLayoutBySelection = (state: any, newMetric: any) => {
-  const newDimensions = getNewVizDimensions(state.metricsLayout);
-
-  const metricVisualization: MetricType = {
-    id: newMetric.id,
-    savedVisualizationId: newMetric.id,
-    x: newDimensions.x,
-    y: newDimensions.y,
-    h: newDimensions.h,
-    w: newDimensions.w,
-    metricType:
-      newMetric.catalog === OBSERVABILITY_CUSTOM_METRIC ? 'savedCustomMetric' : 'prometheusMetric',
-  };
-  state.metricsLayout = [...state.metricsLayout, metricVisualization];
-};
-
-const updateLayoutByDeSelection = (state: any, newMetric: any) => {
-  const sortedMetricsLayout = sortMetricLayout(state.metricsLayout);
-
-  const newMetricsLayout = [] as MetricType[];
-  let heightSubtract = 0;
-
-  sortedMetricsLayout.map((metricLayout: MetricType) => {
-    if (metricLayout.id !== newMetric.id) {
-      metricLayout.y = metricLayout.y - heightSubtract;
-      newMetricsLayout.push(metricLayout);
-    } else {
-      heightSubtract = metricLayout.h;
-    }
-  });
-  state.metricsLayout = newMetricsLayout;
-};
-
 export const metricSlice = createSlice({
   name: REDUX_SLICE_METRICS,
   initialState,
@@ -151,22 +158,38 @@ export const metricSlice = createSlice({
     setMetrics: (state, { payload }) => {
       state.metrics = payload;
     },
+    setMetric: (state, { payload }) => {
+      state.metrics[payload.id] = payload;
+    },
+    setSortedIds: (state, { payload }) => {
+      state.sortedIds = payload;
+    },
+
+    clearSelectedMetrics: (state) => {
+      state.selectedIds = [];
+    },
+
     selectMetric: (state, { payload }) => {
-      state.selected.push(payload.id);
-      updateLayoutBySelection(state, payload);
+      state.selectedIds.push(payload.id);
     },
+
     deSelectMetric: (state, { payload }) => {
-      updateLayoutByDeSelection(state, payload);
-      state.selected = state.selected.filter((id) => id !== payload.id);
+      state.selectedIds = state.selectedIds.filter((id) => id !== payload);
     },
+
+    moveMetric: (state, { payload: { source, destination } }) => {
+      const movingId = state.selectedIds.splice(source.index, 1);
+      state.selectedIds.splice(destination.index, 0, movingId[0]);
+    },
+
     setSearch: (state, { payload }) => {
       state.search = payload;
     },
 
-    updateMetricsLayout: (state, { payload }) => {
-      state.metricsLayout = payload;
-      state.selected = sortBy(payload, ['x', 'y']).map(({ id }) => id);
+    updateMetric: (state, { payload: { id, metric } }) => {
+      state.metrics[id] = metric;
     },
+
     setDataSources: (state, { payload }) => {
       state.dataSources = [OBSERVABILITY_CUSTOM_METRIC, ...payload];
     },
@@ -187,45 +210,94 @@ export const metricSlice = createSlice({
 
 export const {
   deSelectMetric,
+  clearSelectedMetrics,
   selectMetric,
-  setDataSourceIcons,
-  setDataSourceTitles,
-  setDataSources,
-  setMetrics,
-  setRefresh,
+  moveMetric,
   setSearch,
-  updateMetricsLayout,
+  setDateSpan,
+  setDataSources,
+  setDataSourceTitles,
+  setDataSourceIcons,
+  updateMetric,
 } = metricSlice.actions;
 
 /** private actions */
-const { setDateSpan } = metricSlice.actions;
-
-export const availableMetricsSelector = (state) =>
-  state.metrics.metrics
-    .filter((metric) => !state.metrics.selected.includes(metric.id))
-    .filter(
-      (metric) =>
-        state.metrics.search === '' || metric.name.match(new RegExp(state.metrics.search, 'i'))
-    );
-
-export const updateStartEndDate = ({ start, end }) => (dispatch, getState) => {
-  const currentDateSpanFilter = getState().metrics.dateSpanFilter;
-  const recentlyUsedRange = currentDateSpanFilter.recentlyUsedRanges.filter((r) => {
-    const isDuplicate = r.start === start && r.end === end;
-    return !isDuplicate;
-  });
-  recentlyUsedRange.unshift({ start, end });
 
-  dispatch(setDateSpan({ start, end, recentlyUsedRanges: recentlyUsedRange.slice(0, 9) }));
-  dispatch(setRefresh());
+const { setMetrics, setMetric, setSortedIds } = metricSlice.actions;
+
+const getAvailableAttributes = (id, metricIndex) => async (dispatch, getState) => {
+  const { pplService, toasts } = coreRefs;
+
+  try {
+    const columnSchema = await pplService.fetch({
+      query: 'describe ' + metricIndex + ' | fields COLUMN_NAME',
+      format: 'jdbc',
+    });
+    const availableAttributes = columnSchema.jsonData
+      .map((sch) => sch.COLUMN_NAME)
+      .filter((col) => col[0] !== '@');
+
+    dispatch(updateMetricQuery(id, { availableAttributes }));
+  } catch (e) {
+    toasts?.addDanger(`An error occurred retrieving attributes for metric ${id} `);
+    console.error(`An error occurred retrieving attributes for metric ${id} `, e);
+  }
+};
+
+export const addSelectedMetric = (metric: MetricType) => async (dispatch, getState) => {
+  const currentSelectedIds = getState().metrics.selectedIds;
+  if (currentSelectedIds.includes(metric.id)) return;
+
+  if (metric.subType === PROMQL_METRIC_SUBTYPE) {
+    dispatch(getAvailableAttributes(metric.id, metric.index));
+  }
+  dispatch(selectMetric(metric));
+};
+
+export const removeSelectedMetric = ({ id }) => async (dispatch, getState) => {
+  dispatch(deSelectMetric(id));
 };
 
-export const updateDateSpan = (props: { span?: string; resolution?: string }) => (dispatch) => {
-  dispatch(setDateSpan(props)); // specifically use props variable to partial update
+export const updateMetricQuery = (id, { availableAttributes, aggregation, attributesGroupBy }) => (
+  dispatch,
+  getState
+) => {
+  const state = getState();
+  const staticMetric = getState().metrics.metrics[id];
+  const metric = {
+    ...staticMetric,
+    aggregation: aggregation || staticMetric.aggregation || 'avg',
+    attributesGroupBy: attributesGroupBy || staticMetric.attributesGroupBy || [],
+    availableAttributes: availableAttributes || staticMetric.availableAttributes || [],
+  };
+  dispatch(setMetric(metric));
+};
+
+export const searchOrTrue = (search, metric) => {
+  if (search === '') return true;
+  return metric.name.match(new RegExp(search, 'i'));
 };
 
+export const selectMetricByIdSelector = (id) => (state) => {
+  return state.metrics.metrics[id];
+};
+
+export const allMetricsSelector = (state) => state.metrics.metrics;
+
+export const availableMetricsSelector = (state) => {
+  return (
+    state.metrics.sortedIds
+      ?.filter((id) => !state.metrics.selectedIds?.includes(id))
+      .filter((id) => searchOrTrue(state.metrics.search, state.metrics.metrics[id]))
+      .map((id) => state.metrics.metrics[id]) ?? []
+  );
+};
 export const selectedMetricsSelector = (state) =>
-  state.metrics.selected.map((id) => state.metrics.metrics.find((metric) => metric.id === id));
+  pick(state.metrics.metrics, state.metrics.selectedIds) ?? {};
+
+export const selectedMetricByIdSelector = (id) => (state) => state.metrics.metrics[id];
+
+export const selectedMetricsIdsSelector = (state) => state.metrics.selectedIds ?? [];
 
 export const searchSelector = (state) => state.metrics.search;
 
@@ -233,10 +305,15 @@ export const metricIconsSelector = (state) => state.metrics.dataSourceIcons;
 
 export const metricsLayoutSelector = (state) => state.metrics.metricsLayout;
 
-export const dataSourcesSelector = (state) => state.metrics.dataSources;
-
 export const dateSpanFilterSelector = (state) => state.metrics.dateSpanFilter;
 
 export const refreshSelector = (state) => state.metrics.refresh;
 
+export const metricQuerySelector = (id) => (state) =>
+  state.metrics.metricsLayout.find((layout) => layout.id === id)?.query || {
+    aggregation: '',
+    attributesGroupBy: [],
+    availableAttributes: [],
+  };
+
 export const metricsReducers = metricSlice.reducer;
diff --git a/public/components/metrics/sidebar/metrics_accordion.tsx b/public/components/metrics/sidebar/metrics_accordion.tsx
index 41a1611c9..d3168e710 100644
--- a/public/components/metrics/sidebar/metrics_accordion.tsx
+++ b/public/components/metrics/sidebar/metrics_accordion.tsx
@@ -31,13 +31,14 @@ export const MetricsAccordion = (props: IMetricNameProps) => {
       }
       paddingSize="none"
     >
-      {metricsList.length > 100 && <p>Use search bar to focus listed Metrics.</p>}
       <ul className="metricsList">
-        {metricsList.slice(0, 100).map((metric: any) => (
-          <li key={metric.id} className="metricsListContainer" data-test-subj={dataTestSubj}>
-            <MetricName metric={metric} handleClick={handleClick} />
-          </li>
-        ))}
+        {metricsList
+          .map((m) => m)
+          .map((metric: any) => (
+            <li key={metric.id} className="metricsListContainer" data-test-subj={dataTestSubj}>
+              <MetricName metric={metric} handleClick={handleClick} />
+            </li>
+          ))}
       </ul>
     </EuiAccordion>
   );
diff --git a/public/components/metrics/sidebar/metrics_edit_inline.tsx b/public/components/metrics/sidebar/metrics_edit_inline.tsx
new file mode 100644
index 000000000..83291e518
--- /dev/null
+++ b/public/components/metrics/sidebar/metrics_edit_inline.tsx
@@ -0,0 +1,78 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiComboBox,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormControlLayout,
+  EuiFormLabel,
+  EuiSelect,
+} from '@elastic/eui';
+import { useDispatch } from 'react-redux';
+import { AGGREGATION_OPTIONS } from '../../../../common/constants/metrics';
+import { updateMetricQuery } from '../redux/slices/metrics_slice';
+
+const availableAttributesLabels = (attributes) =>
+  attributes.map((a) => ({
+    label: a,
+    name: a,
+  }));
+
+export const MetricsEditInline = ({ visualization }: { visualizationId: string }) => {
+  const dispatch = useDispatch();
+
+  const onChangeAggregation = (e) => {
+    dispatch(updateMetricQuery(visualization.id, { aggregation: e.target.value }));
+  };
+
+  const onChangeAttributesGroupBy = async (selectedAttributes) => {
+    const attributesGroupBy = selectedAttributes.map(({ label }) => label);
+    dispatch(updateMetricQuery(visualization.id, { attributesGroupBy }));
+  };
+
+  const renderAggregationEditor = () => (
+    <EuiFlexGroup>
+      <EuiFlexItem id="aggregation__field">
+        <EuiSelect
+          compressed
+          value={visualization?.aggregation ?? 'avg'}
+          onChange={onChangeAggregation}
+          options={AGGREGATION_OPTIONS}
+          prepend="AGGREGATION"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  const renderAttributesGroupByEditor = () => (
+    <EuiFormControlLayout
+      readOnly
+      compressed
+      fullWidth
+      prepend={<EuiFormLabel htmlFor="attributeGroupBy">ATTRIBUTES GROUP BY</EuiFormLabel>}
+    >
+      <EuiComboBox
+        className={'attributesGroupBy'}
+        compressed
+        fullWidth
+        selectedOptions={
+          visualization?.attributesGroupBy?.map((label) => ({ label, value: label })) ?? []
+        }
+        onChange={onChangeAttributesGroupBy}
+        options={availableAttributesLabels(visualization?.availableAttributes ?? [])}
+        prepend={'ATTRIBUTES GROUP BY'}
+      />
+    </EuiFormControlLayout>
+  );
+
+  return (
+    <EuiFlexGroup id="metricsEditInline">
+      <EuiFlexItem grow={false}>{renderAggregationEditor()}</EuiFlexItem>
+      <EuiFlexItem>{renderAttributesGroupByEditor()}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/public/components/metrics/sidebar/search_bar.tsx b/public/components/metrics/sidebar/search_bar.tsx
index abb1f9760..46c3341e5 100644
--- a/public/components/metrics/sidebar/search_bar.tsx
+++ b/public/components/metrics/sidebar/search_bar.tsx
@@ -21,7 +21,7 @@ export const SearchBar = () => {
     <div className="metrics-search-bar-input" data-test-subj="metricsSearch">
       <EuiSearchBar
         box={{
-          placeholder: 'Search for metrics',
+          placeholder: 'Search to filter Available Metrics',
           incremental: true,
         }}
         defaultQuery={''}
diff --git a/public/components/metrics/sidebar/sidebar.tsx b/public/components/metrics/sidebar/sidebar.tsx
index 22bbbaadc..71a92cf42 100644
--- a/public/components/metrics/sidebar/sidebar.tsx
+++ b/public/components/metrics/sidebar/sidebar.tsx
@@ -5,27 +5,35 @@
 
 import './sidebar.scss';
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { EuiSpacer } from '@elastic/eui';
 import { I18nProvider } from '@osd/i18n/react';
 import { batch, useDispatch, useSelector } from 'react-redux';
 import {
+  addSelectedMetric,
   availableMetricsSelector,
-  deSelectMetric,
-  selectMetric,
+  clearSelectedMetrics,
   loadMetrics,
+  removeSelectedMetric,
+  selectedMetricsIdsSelector,
   selectedMetricsSelector,
+  selectMetricByIdSelector,
 } from '../redux/slices/metrics_slice';
-import { CoreStart } from '../../../../../../src/core/public';
-import PPLService from '../../../services/requests/ppl';
 import { MetricsAccordion } from './metrics_accordion';
 import { SearchBar } from './search_bar';
 
-export const Sidebar = () => {
+export const Sidebar = ({
+  additionalSelectedMetricId,
+}: {
+  additionalSelectedMetricId?: string;
+}) => {
   const dispatch = useDispatch();
 
   const availableMetrics = useSelector(availableMetricsSelector);
   const selectedMetrics = useSelector(selectedMetricsSelector);
+  const selectedMetricsIds = useSelector(selectedMetricsIdsSelector);
+
+  const additionalMetric = useSelector(selectMetricByIdSelector(additionalSelectedMetricId));
 
   useEffect(() => {
     batch(() => {
@@ -33,10 +41,21 @@ export const Sidebar = () => {
     });
   }, [dispatch]);
 
-  const handleAddMetric = (metric: any) => dispatch(selectMetric(metric));
+  useEffect(() => {
+    if (additionalMetric) {
+      dispatch(clearSelectedMetrics());
+      dispatch(addSelectedMetric(additionalMetric));
+    }
+  }, [additionalMetric]);
+
+  const selectedMetricsList = useMemo(() => {
+    return selectedMetricsIds.map((id) => selectedMetrics[id]).filter((m) => m); // filter away null entries
+  }, [selectedMetrics, selectedMetricsIds]);
+
+  const handleAddMetric = (metric: any) => dispatch(addSelectedMetric(metric));
 
   const handleRemoveMetric = (metric: any) => {
-    dispatch(deSelectMetric(metric));
+    dispatch(removeSelectedMetric(metric));
   };
 
   return (
@@ -46,7 +65,7 @@ export const Sidebar = () => {
         <EuiSpacer size="s" />
 
         <MetricsAccordion
-          metricsList={selectedMetrics}
+          metricsList={selectedMetricsList}
           headerName="Selected Metrics"
           handleClick={handleRemoveMetric}
           dataTestSubj="metricsListItems_selectedMetrics"
diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
index ab196dced..b37e5a422 100644
--- a/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
+++ b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
@@ -22,7 +22,11 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
         Object {
           "h": 2,
           "id": "Y4muP4QBiaYaSxpXk7r8",
-          "metricType": "savedCustomMetric",
+          "query": Object {
+            "aggregation": "avg",
+            "attributesGroupBy": Array [],
+            "type": "savedCustomMetric",
+          },
           "savedVisualizationId": "Y4muP4QBiaYaSxpXk7r8",
           "w": 12,
           "x": 0,
@@ -31,7 +35,11 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
         Object {
           "h": 2,
           "id": "prometheus.process_resident_memory_bytes",
-          "metricType": "prometheusMetric",
+          "query": Object {
+            "aggregation": "avg",
+            "attributesGroupBy": Array [],
+            "type": "prometheusMetric",
+          },
           "savedVisualizationId": "prometheus.process_resident_memory_bytes",
           "w": 12,
           "x": 0,
diff --git a/public/components/metrics/top_menu/metrics_export.tsx b/public/components/metrics/top_menu/metrics_export.tsx
new file mode 100644
index 000000000..402e0a45b
--- /dev/null
+++ b/public/components/metrics/top_menu/metrics_export.tsx
@@ -0,0 +1,399 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiPopover,
+  EuiPopoverFooter,
+} from '@elastic/eui';
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { max } from 'lodash';
+import semver from 'semver';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { MetricsExportPanel } from './metrics_export_panel';
+import { OSDSavedVisualizationClient } from '../../../services/saved_objects/saved_object_client/osd_saved_objects/saved_visualization';
+import { getSavedObjectsClient } from '../../../services/saved_objects/saved_object_client/client_factory';
+import { addMultipleVizToPanels, isUuid } from '../../custom_panels/redux/panel_slice';
+import { MetricType } from '../../../../common/types/metrics';
+import {
+  dateSpanFilterSelector,
+  selectedMetricsIdsSelector,
+  selectedMetricsSelector,
+} from '../redux/slices/metrics_slice';
+import { coreRefs } from '../../../framework/core_refs';
+import { selectPanelList } from '../../../../public/components/custom_panels/redux/panel_slice';
+import { SavedVisualization } from '../../../../common/types/explorer';
+import { visualizationFromMetric } from '../helpers/utils';
+import { updateCatalogVisualizationQuery } from '../../custom_panels/helpers/utils';
+import { PROMQL_METRIC_SUBTYPE } from '../../../../common/constants/shared';
+import { SavedObjectLoader } from '../../../../../../src/plugins/saved_objects/public';
+import { MountPoint } from '../../../../../../src/core/public';
+import { I18nProvider } from '../../../../../../packages/osd-i18n/src/react/provider';
+
+const Savebutton = ({
+  setIsPanelOpen,
+}: {
+  setIsPanelOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  return (
+    <EuiButton
+      iconSide="right"
+      onClick={() => {
+        setIsPanelOpen((staleState) => !staleState);
+      }}
+      data-test-subj="metrics__saveManagementPopover"
+      iconType="arrowDown"
+    >
+      Save
+    </EuiButton>
+  );
+};
+
+const MetricsExportPopOver = () => {
+  const availableObservabilityDashboards = useSelector(selectPanelList);
+  const [availableDashboards, setAvailableDashboards] = React.useState([]);
+  const [osdCoreDashboards, setOsdCoreDashboards] = React.useState([]);
+
+  const [isPanelOpen, setIsPanelOpen] = React.useState(false);
+
+  const selectedMetrics = useSelector(selectedMetricsSelector);
+  const selectedMetricsIds = useSelector(selectedMetricsIdsSelector);
+
+  const dateSpanFilter = useSelector(dateSpanFilterSelector);
+  const [metricsToExport, setMetricsToExport] = React.useState<MetricType[]>([]);
+
+  const [selectedPanelOptions, setSelectedPanelOptions] = React.useState<any[]>([]);
+
+  const { toasts } = coreRefs;
+
+  const getCoreDashboards = async () => {
+    if (!coreRefs.dashboard) return [];
+
+    const dashboardsLoader = coreRefs.dashboard.getSavedDashboardLoader();
+
+    const client = dashboardsLoader.savedObjectsClient;
+    const ds = await client.find({ type: 'dashboard' });
+
+    return ds?.savedObjects.map((so) => ({
+      ...so,
+      objectId: so.type + ':' + so.id,
+      title: so.attributes?.title,
+      panelConfig: JSON.parse(so.attributes?.panelsJSON || '[]'),
+    }));
+  };
+
+  useEffect(() => {
+    (async function () {
+      setOsdCoreDashboards(await getCoreDashboards());
+    })();
+  }, []);
+
+  useEffect(() => {
+    setAvailableDashboards([
+      ...osdCoreDashboards,
+      ...availableObservabilityDashboards.filter((d) => isUuid(d.id)),
+    ]);
+  }, [osdCoreDashboards, availableObservabilityDashboards]);
+
+  useEffect(() => {
+    if (selectedMetrics && selectedMetricsIds) {
+      const metricsArray = selectedMetricsIds.map((id) => selectedMetrics[id]);
+      setMetricsToExport(metricsArray);
+    }
+  }, [selectedMetrics, selectedMetricsIds]);
+
+  const savedObjectInputFromObject = (currentObject: SavedVisualization) => {
+    return {
+      ...currentObject,
+      dateRange: ['now-1d', 'now'],
+      fields: [],
+      timestamp: 'timestamp',
+    };
+  };
+
+  const updateSavedVisualization = async (metric: MetricType): string => {
+    const client = getSavedObjectsClient({
+      objectId: metric.savedVisualizationId,
+      objectType: 'savedVisualization',
+    });
+    const res = await client.get({ objectId: metric.savedVisualizationId });
+    const currentObject = res.observabilityObjectList[0];
+    const updateParams = {
+      objectId: metric.savedVisualizationId,
+      ...savedObjectInputFromObject(currentObject.savedVisualization),
+      name: metric.name,
+    };
+    const savedObject = await client.update(updateParams);
+    return savedObject;
+  };
+
+  const datasourceMetaFrom = (catalog) =>
+    JSON.stringify([
+      { name: catalog, title: catalog, id: catalog, label: catalog, type: 'prometheus' },
+    ]);
+
+  const createSavedVisualization = async (metric): Promise<any> => {
+    const [ds, index] = metric.index.split('.');
+    const queryMetaData = {
+      catalogSourceName: ds,
+      catalogTableName: index,
+      aggregation: metric.aggregation,
+      attributesGroupBy: metric.attributesGroupBy,
+    };
+    const visMetaData = visualizationFromMetric(
+      {
+        ...metric,
+        dataSources: datasourceMetaFrom(metric.catalog),
+        query: updateCatalogVisualizationQuery({
+          ...queryMetaData,
+          ...dateSpanFilter,
+        }),
+        queryMetaData,
+        subType: PROMQL_METRIC_SUBTYPE,
+        dateRange: ['now-1d', 'now'],
+        fields: ['@value'],
+        timestamp: '@timestamp',
+      },
+      dateSpanFilter.span,
+      dateSpanFilter.reoslution
+    );
+
+    const savedObject = await OSDSavedVisualizationClient.getInstance().create(visMetaData);
+    return savedObject;
+  };
+
+  const panelXYorGreaterThanValue = (value, panel) => {
+    const sum = panel.gridData.y + panel.gridData.h;
+    return sum > value ? sum : value;
+  };
+
+  const panelVersionOrGreaterThanValue = (value, panel) => {
+    return semver.compare(value, panel.version) < 0 ? panel.version : value;
+  };
+
+  const defaultPanelHeight = 12;
+  const defaultPanelWidth = 24;
+  const panelGutter = 1;
+
+  const pushNewPanelToDashboardForMetricWith = ({
+    dashboard,
+    referenceCount,
+    maxPanelY,
+    maxPanelVersion,
+    maxPanelIndex,
+  }: {
+    dashboard: unknown;
+    referenceCount: number;
+    maxPanelY: number;
+    maxPanelVersion: string;
+    maxPanelIndex: number;
+  }) => (metric, index) => {
+    const { type, id } = metric.object;
+    const panelIndex = maxPanelIndex + 1 + index;
+    const newPanelConfig = {
+      gridData: {
+        x: 0,
+        y: maxPanelY + panelGutter + index * (panelGutter + defaultPanelHeight),
+        w: defaultPanelWidth,
+        h: defaultPanelHeight,
+        i: `${panelIndex}`,
+      },
+      panelIndex: `${panelIndex}`,
+      version: maxPanelVersion,
+      panelRefName: `panel_${referenceCount + index}`,
+      embeddableConfig: {},
+    };
+
+    const newPanel = {
+      name: `panel_${referenceCount + index}`,
+      type,
+      id,
+    };
+    dashboard.panelConfig.push(newPanelConfig);
+    dashboard.references.push(newPanel);
+  };
+  const addMultipleVizToODSCoreDashbaords = (osdCoreSelectedDashboards, metricsToAdd) => {
+    const dashboardsLoader: SavedObjectLoader = coreRefs.dashboard!.getSavedDashboardLoader();
+
+    const client = dashboardsLoader.savedObjectsClient;
+
+    Promise.all(
+      osdCoreSelectedDashboards.map(async ({ panel: dashboard }, index) => {
+        const referenceCount = dashboard.references.length;
+        const maxPanelY = dashboard.panelConfig.reduce(panelXYorGreaterThanValue, 0);
+        const maxPanelVersion = dashboard.panelConfig.reduce(
+          panelVersionOrGreaterThanValue,
+          '0.0.0'
+        );
+        const maxPanelIndex =
+          max(dashboard.panelConfig.map((p) => parseInt(p.panelIndex, 10))) ?? 0;
+
+        metricsToAdd.forEach(
+          pushNewPanelToDashboardForMetricWith({
+            dashboard,
+            referenceCount,
+            maxPanelY,
+            maxPanelVersion,
+            maxPanelIndex,
+          })
+        );
+
+        const panelsJSON = JSON.stringify(dashboard.panelConfig);
+
+        const updateRes = await client.update(
+          dashboard.type,
+          dashboard.id,
+          { ...dashboard.attributes, panelsJSON },
+          {
+            references: dashboard.references,
+          }
+        );
+      })
+    );
+  };
+
+  const mountableToastElement = (node: React.ReactNode): MountPoint => (element: HTMLElement) => {
+    render(<I18nProvider>{node}</I18nProvider>, element);
+    return () => unmountComponentAtNode(element);
+  };
+
+  const appFor = (objectType) => {
+    switch (objectType) {
+      case 'dashboard':
+        return 'dashboards';
+      case 'observability-panel':
+        return 'observability-dashboards';
+      default:
+        return 'observability-visualization';
+    }
+  };
+
+  const euiLinkFor = ({ panel: dashboard }) => {
+    return (
+      <EuiLink
+        onClick={() =>
+          coreRefs?.application!.navigateToApp(appFor(dashboard.type), {
+            path: `#/view/${dashboard.id}`,
+          })
+        }
+      >
+        {dashboard.title}
+      </EuiLink>
+    );
+  };
+
+  const linkedDashboardsList = (dashboards) => {
+    const label = dashboards.length > 1 ? 'Dashboards ' : 'Dashboard ';
+
+    const links = dashboards.map((d) => euiLinkFor(d));
+    return [label, ...links];
+  };
+
+  const handleSavingObjects = async () => {
+    let savedMetrics = [];
+
+    try {
+      savedMetrics = await Promise.all(
+        metricsToExport.map(async (metric, index) => {
+          if (metric.savedVisualizationId === undefined) {
+            console.log('createSavedVisualization', metric);
+
+            return createSavedVisualization(metric);
+          } else {
+            console.log('updateSavedVisualization', metric);
+
+            return updateSavedVisualization(metric);
+          }
+        })
+      );
+    } catch (e) {
+      const message = 'Issue in saving metrics';
+      console.error(message, e);
+      toasts!.addDanger(message);
+      return;
+    }
+
+    toasts!.add('Saved metrics successfully!');
+
+    if (selectedPanelOptions.length > 0) {
+      const osdCoreSelectedDashboards = selectedPanelOptions.filter(
+        (panel) => panel.panel?.type === 'dashboard'
+      );
+      const observabilityDashboards = selectedPanelOptions.filter(
+        (panel) => panel.panel?.type !== 'dashboard'
+      );
+
+      try {
+        if (observabilityDashboards.length > 0) {
+          const savedVisualizationIds = savedMetrics.map((p) => p.objectId);
+          console.log(savedMetrics);
+          await addMultipleVizToPanels(observabilityDashboards, savedVisualizationIds);
+        }
+        if (osdCoreSelectedDashboards.length > 0)
+          await addMultipleVizToODSCoreDashbaords(osdCoreSelectedDashboards, savedMetrics);
+
+        toasts!.add({
+          text: mountableToastElement(
+            <div>Saved metrics to {linkedDashboardsList(selectedPanelOptions)} successfully!</div>
+          ),
+        });
+      } catch (e) {
+        const message = 'Issue in saving metrics to panels';
+        console.error(message, e);
+        toasts!.addDanger('Issue in saving metrics');
+      }
+    }
+  };
+
+  return (
+    <EuiPopover
+      button={<Savebutton setIsPanelOpen={setIsPanelOpen} />}
+      isOpen={isPanelOpen}
+      closePopover={() => setIsPanelOpen(false)}
+    >
+      <MetricsExportPanel
+        availableDashboards={availableDashboards ?? []}
+        metricsToExport={metricsToExport ?? []}
+        setMetricsToExport={setMetricsToExport}
+        selectedPanelOptions={selectedPanelOptions}
+        setSelectedPanelOptions={setSelectedPanelOptions}
+      />
+      <EuiPopoverFooter>
+        <EuiFlexGroup justifyContent="flexEnd">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              size="s"
+              onClick={() => setIsPanelOpen(false)}
+              data-test-subj="metrics__SaveCancel"
+            >
+              Cancel
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              size="s"
+              fill
+              onClick={() => {
+                handleSavingObjects().then(() => setIsPanelOpen(false));
+              }}
+              data-test-subj="metrics__SaveConfirm"
+            >
+              Save
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPopoverFooter>
+    </EuiPopover>
+  );
+};
+
+export const MetricsExport = () => {
+  return <MetricsExportPopOver />;
+};
diff --git a/public/components/metrics/top_menu/metrics_export_panel.tsx b/public/components/metrics/top_menu/metrics_export_panel.tsx
index e7a4a3f04..3884a55c2 100644
--- a/public/components/metrics/top_menu/metrics_export_panel.tsx
+++ b/public/components/metrics/top_menu/metrics_export_panel.tsx
@@ -3,36 +3,25 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import {
   EuiComboBox,
-  EuiComboBoxOptionOption,
   EuiFieldText,
   EuiFlexGroup,
   EuiFormRow,
   EuiFlexItem,
   EuiForm,
 } from '@elastic/eui';
-import { useDispatch, useSelector } from 'react-redux';
-import { CoreStart } from '../../../../../../src/core/public';
-import { createPrometheusMetricById } from '../helpers/utils';
+import { useDispatch } from 'react-redux';
 import { MetricType } from '../../../../common/types/metrics';
-import { fetchVisualizationById } from '../../custom_panels/helpers/utils';
-import {
-  fetchPanels,
-  selectPanelList,
-} from '../../../../public/components/custom_panels/redux/panel_slice';
-import { coreRefs } from '../../../framework/core_refs';
+import { fetchPanels } from '../../../../public/components/custom_panels/redux/panel_slice';
 
 interface MetricsExportPanelProps {
-  http: CoreStart['http'];
-  visualizationsMetaData: any;
-  setVisualizationsMetaData: React.Dispatch<any>;
-  sortedMetricsLayout: MetricType[];
-  selectedPanelOptions: Array<EuiComboBoxOptionOption<unknown>> | undefined;
-  setSelectedPanelOptions: React.Dispatch<
-    React.SetStateAction<Array<EuiComboBoxOptionOption<unknown>> | undefined>
-  >;
+  metricsToExport: MetricType[];
+  setMetricsToExport: React.Dispatch<React.SetStateAction<MetricType[]>>;
+  availableDashboards: any[];
+  selectedPanelOptions: any[];
+  setSelectedPanelOptions: React.Dispatch<React.SetStateAction<any[]>>;
 }
 
 interface CustomPanelOptions {
@@ -43,45 +32,23 @@ interface CustomPanelOptions {
 }
 
 export const MetricsExportPanel = ({
-  visualizationsMetaData,
-  setVisualizationsMetaData,
-  sortedMetricsLayout,
+  metricsToExport,
+  setMetricsToExport,
+  availableDashboards,
   selectedPanelOptions,
   setSelectedPanelOptions,
 }: MetricsExportPanelProps) => {
-  const [options, setOptions] = useState([]);
-
-  const [errorResponse, setErrorResponse] = useState('');
-
-  const customPanels = useSelector(selectPanelList);
-
   const dispatch = useDispatch();
 
-  const { http } = coreRefs;
-
   useEffect(() => {
     dispatch(fetchPanels());
   }, [dispatch]);
 
-  const fetchAllvisualizationsById = async () => {
-    const tempVisualizationsMetaData = await Promise.all(
-      sortedMetricsLayout.map(async (metricLayout) => {
-        return metricLayout.metricType === 'savedCustomMetric'
-          ? await fetchVisualizationById(http, metricLayout.id, setErrorResponse)
-          : createPrometheusMetricById(metricLayout.id);
-      })
-    );
-    setVisualizationsMetaData(tempVisualizationsMetaData);
-  };
-
-  useEffect(() => {
-    fetchAllvisualizationsById();
-  }, []);
-
   const onNameChange = (index: number, name: string) => {
-    const tempVisualizationsMetaData = [...visualizationsMetaData];
-    tempVisualizationsMetaData[index].name = name;
-    setVisualizationsMetaData(tempVisualizationsMetaData);
+    const tempMetrics = metricsToExport.map((metric, idx) =>
+      idx === index ? { ...metric, name } : metric
+    );
+    setMetricsToExport(tempMetrics);
   };
 
   return (
@@ -96,28 +63,30 @@ export const MetricsExportPanel = ({
             setSelectedPanelOptions(newOptions);
           }}
           selectedOptions={selectedPanelOptions}
-          options={customPanels.map((option: any) => {
-            return {
-              panel: option,
-              label: option.title,
-            };
-          })}
+          options={
+            availableDashboards?.map((option: any) => {
+              return {
+                panel: option,
+                label: option.title,
+              };
+            }) ?? []
+          }
           isClearable={true}
           data-test-subj="eventExplorer__querySaveComboBox"
         />
       </EuiFormRow>
 
-      {visualizationsMetaData.length > 0 && (
+      {metricsToExport.length > 0 && (
         <div style={{ maxHeight: '30vh', overflowY: 'scroll', width: 'auto', overflowX: 'hidden' }}>
-          {visualizationsMetaData.map((metaData: any, index: number) => {
+          {metricsToExport.map((metaData: any, index: number) => {
             return (
-              <EuiForm component="form">
+              <EuiForm component="form" key={`save-panel-id-${index}`}>
                 <EuiFlexGroup>
                   <EuiFlexItem>
                     <EuiFormRow label={'Metric Name #' + (index + 1)}>
                       <EuiFieldText
-                        key={'save-panel-id'}
-                        value={visualizationsMetaData[index].name}
+                        key={`metric-name-input-id-${index}`}
+                        value={metaData.name}
                         onChange={(e) => onNameChange(index, e.target.value)}
                         data-test-subj="metrics__querySaveName"
                       />
diff --git a/public/components/metrics/top_menu/top_menu.tsx b/public/components/metrics/top_menu/top_menu.tsx
index a3c02a3be..521300b5f 100644
--- a/public/components/metrics/top_menu/top_menu.tsx
+++ b/public/components/metrics/top_menu/top_menu.tsx
@@ -4,280 +4,66 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiComboBoxOptionOption,
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPopover,
-  EuiPopoverFooter,
   EuiSelect,
-  EuiSpacer,
   EuiSuperDatePicker,
-  OnTimeChangeProps,
-  ShortDate,
 } from '@elastic/eui';
-import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
-import React, { useState } from 'react';
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { CoreStart } from '../../../../../../src/core/public';
-import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
 import { resolutionOptions } from '../../../../common/constants/metrics';
-import { MetricType } from '../../../../common/types/metrics';
 import { uiSettingsService } from '../../../../common/utils';
-import { getSavedObjectsClient } from '../../../services/saved_objects/saved_object_client/client_factory';
-import { OSDSavedVisualizationClient } from '../../../services/saved_objects/saved_object_client/osd_saved_objects/saved_visualization';
-import { addMultipleVizToPanels, uuidRx } from '../../custom_panels/redux/panel_slice';
-import { sortMetricLayout, updateMetricsWithSelections } from '../helpers/utils';
-import {
-  dateSpanFilterSelector,
-  metricsLayoutSelector,
-  setRefresh,
-  updateDateSpan,
-  updateStartEndDate,
-} from '../redux/slices/metrics_slice';
-import { MetricsExportPanel } from './metrics_export_panel';
+import { dateSpanFilterSelector, setDateSpan } from '../redux/slices/metrics_slice';
+import { MetricsExport } from './metrics_export';
 import './top_menu.scss';
 
-interface TopMenuProps {
-  IsTopPanelDisabled: boolean;
-  editMode: boolean;
-  setEditMode: React.Dispatch<React.SetStateAction<boolean>>;
-  setEditActionType: React.Dispatch<React.SetStateAction<string>>;
-  panelVisualizations: MetricType[];
-  setPanelVisualizations: React.Dispatch<React.SetStateAction<MetricType[]>>;
-  setToast: (title: string, color?: string, text?: any, side?: string) => void;
-}
-
-export const TopMenu = ({
-  IsTopPanelDisabled,
-  editMode,
-  setEditActionType,
-  setEditMode,
-  panelVisualizations,
-  setPanelVisualizations,
-  setToast,
-}: TopMenuProps) => {
+export const TopMenu = () => {
   // Redux tools
   const dispatch = useDispatch();
-  const metricsLayout = useSelector(metricsLayoutSelector);
-  const sortedMetricsLayout = sortMetricLayout([...metricsLayout]);
   const dateSpanFilter = useSelector(dateSpanFilterSelector);
 
-  const [visualizationsMetaData, setVisualizationsMetaData] = useState<any>([]);
-  const [originalPanelVisualizations, setOriginalPanelVisualizations] = useState<MetricType[]>([]);
-  const [isSavePanelOpen, setIsSavePanelOpen] = useState(false);
-  const [selectedPanelOptions, setSelectedPanelOptions] = useState<
-    Array<EuiComboBoxOptionOption<unknown>> | undefined
-  >([]);
-
-  // toggle between panel edit mode
-  const editPanel = (editType: string) => {
-    setEditMode(!editMode);
-    switch (editType) {
-      case 'edit': {
-        if (panelVisualizations.length > 0) {
-          setOriginalPanelVisualizations([...panelVisualizations]);
-        } else {
-          setOriginalPanelVisualizations([]);
-        }
-        break;
-      }
-      case 'cancel': {
-        setPanelVisualizations(originalPanelVisualizations);
-        setOriginalPanelVisualizations([]);
-        break;
-      }
-      default: {
-        break;
-      }
-    }
-    setEditActionType(editType);
-  };
-
-  const cancelButton = (
-    <EuiButton size="s" iconType="cross" color="danger" onClick={() => editPanel('cancel')}>
-      Cancel
-    </EuiButton>
-  );
-
-  const saveButton = (
-    <EuiButton
-      size="s"
-      iconType="save"
-      data-test-subj="metrics__saveView"
-      onClick={() => editPanel('save')}
-    >
-      Save view
-    </EuiButton>
-  );
-
-  const editButton = (
-    <EuiButton
-      size="s"
-      data-test-subj="metrics__editView"
-      iconType="pencil"
-      onClick={() => editPanel('edit')}
-      isDisabled={IsTopPanelDisabled}
-    >
-      Edit view
-    </EuiButton>
-  );
-
-  const Savebutton = (
-    <EuiButton
-      iconSide="right"
-      onClick={() => {
-        setIsSavePanelOpen((staleState) => !staleState);
-      }}
-      data-test-subj="metrics__saveManagementPopover"
-      iconType="arrowDown"
-      isDisabled={IsTopPanelDisabled}
-    >
-      Save
-    </EuiButton>
-  );
-
-  const handleSavingObjects = async () => {
-    let savedMetricIds = [];
-
-    try {
-      savedMetricIds = await Promise.all(
-        sortedMetricsLayout.map(async (metricLayout, index) => {
-          const updatedMetric = updateMetricsWithSelections(
-            visualizationsMetaData[index],
-            dateSpanFilter.start,
-            dateSpanFilter.end,
-            dateSpanFilter.span + dateSpanFilter.resolution
-          );
-
-          if (metricLayout.metricType === 'prometheusMetric') {
-            return OSDSavedVisualizationClient.getInstance().create(updatedMetric);
-          } else {
-            return getSavedObjectsClient({
-              objectId: metricLayout.id,
-              objectType: 'savedVisualization',
-            }).update({
-              ...updatedMetric,
-              objectId: metricLayout.id,
-            });
-          }
-        })
-      );
-    } catch (e) {
-      const message = 'Issue in saving metrics';
-      console.error(message, e);
-      setToast(message, 'danger');
-      return;
-    }
-
-    setToast('Saved metrics successfully!');
-
-    if (selectedPanelOptions.length > 0) {
-      try {
-        const allMetricIds = savedMetricIds.map((metric) => metric.objectId);
-        const soPanels = selectedPanelOptions.filter((panel) => uuidRx.test(panel.panel.id));
-
-        dispatch(addMultipleVizToPanels(soPanels, allMetricIds));
-      } catch (e) {
-        const message = 'Issue in saving metrics to panels';
-        console.error(message, e);
-        setToast('Issue in saving metrics', 'danger');
-      }
-      setToast('Saved metrics to Dashboards successfully!');
-    }
-  };
-
   return (
-    <>
-      <EuiFlexGroup gutterSize="s" justifyContent={'flexEnd'}>
-        <EuiFlexItem grow={false}>
-          <div className="resolutionSelect">
-            <EuiFieldText
-              className="resolutionSelectText"
-              prepend="Span Interval"
-              value={dateSpanFilter.span}
-              isInvalid={dateSpanFilter.span < 1}
-              onChange={(e) => dispatch(updateDateSpan({ span: e.target.value }))}
-              data-test-subj="metrics__spanValue"
-              append={
-                <EuiSelect
-                  className="resolutionSelectOption"
-                  options={resolutionOptions}
-                  value={dateSpanFilter.resolution}
-                  onChange={(e) => dispatch(updateDateSpan({ resolution: e.target.value }))}
-                  aria-label="resolutionSelect"
-                  data-test-subj="metrics__spanResolutionSelect"
-                />
-              }
-              disabled={IsTopPanelDisabled}
-              aria-label="resolutionField"
-            />
-          </div>
-        </EuiFlexItem>
-        <EuiFlexItem className="metrics-search-bar-datepicker">
-          <EuiSuperDatePicker
-            dateFormat={uiSettingsService.get('dateFormat')}
-            start={dateSpanFilter.start}
-            end={dateSpanFilter.end}
-            onTimeChange={(e) => dispatch(updateStartEndDate(e))}
-            recentlyUsedRanges={dateSpanFilter.recentlyUsedRanges}
-            isDisabled={IsTopPanelDisabled}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiPopover
-            button={Savebutton}
-            isOpen={isSavePanelOpen}
-            closePopover={() => setIsSavePanelOpen(false)}
-          >
-            <MetricsExportPanel
-              visualizationsMetaData={visualizationsMetaData}
-              setVisualizationsMetaData={setVisualizationsMetaData}
-              sortedMetricsLayout={sortedMetricsLayout}
-              selectedPanelOptions={selectedPanelOptions}
-              setSelectedPanelOptions={setSelectedPanelOptions}
+    dateSpanFilter && (
+      <>
+        <EuiFlexGroup gutterSize="s" justifyContent={'flexEnd'}>
+          <EuiFlexItem grow={false}>
+            <div className="resolutionSelect">
+              <EuiFieldText
+                className="resolutionSelectText"
+                prepend="Span Interval"
+                value={dateSpanFilter.span}
+                isInvalid={dateSpanFilter.span < 1}
+                onChange={(e) => dispatch(setDateSpan({ span: e.target.value }))}
+                data-test-subj="metrics__spanValue"
+                append={
+                  <EuiSelect
+                    className="resolutionSelectOption"
+                    options={resolutionOptions}
+                    value={dateSpanFilter.resolution}
+                    onChange={(e) => dispatch(setDateSpan({ resolution: e.target.value }))}
+                    aria-label="resolutionSelect"
+                    data-test-subj="metrics__spanResolutionSelect"
+                  />
+                }
+                aria-label="resolutionField"
+              />
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem className="metrics-search-bar-datepicker">
+            <EuiSuperDatePicker
+              dateFormat={uiSettingsService.get('dateFormat')}
+              start={dateSpanFilter.start}
+              end={dateSpanFilter.end}
+              onTimeChange={(dateSpan) => dispatch(setDateSpan(dateSpan))}
+              recentlyUsedRanges={dateSpanFilter.recentlyUsedRanges}
             />
-            <EuiPopoverFooter>
-              <EuiFlexGroup justifyContent="flexEnd">
-                <EuiFlexItem grow={false}>
-                  <EuiButtonEmpty
-                    size="s"
-                    onClick={() => setIsSavePanelOpen(false)}
-                    data-test-subj="metrics__SaveCancel"
-                  >
-                    Cancel
-                  </EuiButtonEmpty>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiButton
-                    size="s"
-                    fill
-                    onClick={() => {
-                      handleSavingObjects().then(() => setIsSavePanelOpen(false));
-                    }}
-                    data-test-subj="metrics__SaveConfirm"
-                  >
-                    Save
-                  </EuiButton>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPopoverFooter>
-          </EuiPopover>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer size="m" />
-      <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
-        {editMode ? (
-          <>
-            <EuiFlexItem grow={false}>{cancelButton}</EuiFlexItem>
-            <EuiFlexItem grow={false}>{saveButton}</EuiFlexItem>
-          </>
-        ) : (
-          <EuiFlexItem grow={false}>{editButton}</EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-    </>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <MetricsExport />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </>
+    )
   );
 };
diff --git a/public/components/metrics/view/metrics_grid.tsx b/public/components/metrics/view/metrics_grid.tsx
index b5c20b14f..5aa62885b 100644
--- a/public/components/metrics/view/metrics_grid.tsx
+++ b/public/components/metrics/view/metrics_grid.tsx
@@ -3,142 +3,124 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
-import { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout';
+import React, { useEffect, useMemo } from 'react';
+import { EuiDragDropContext, EuiDraggable, EuiDroppable } from '@elastic/eui';
 import { useObservable } from 'react-use';
-import _ from 'lodash';
-import { useDispatch, useSelector } from 'react-redux';
+import { connect } from 'react-redux';
 import { CoreStart } from '../../../../../../src/core/public';
 import { VisualizationContainer } from '../../custom_panels/panel_modules/visualization_container';
-import { MetricType } from '../../../../common/types/metrics';
-import { mergeLayoutAndVisualizations } from '../../custom_panels/helpers/utils';
+import { updateCatalogVisualizationQuery } from '../../custom_panels/helpers/utils';
 import {
-  updateMetricsLayout,
-  deSelectMetric,
+  allMetricsSelector,
   dateSpanFilterSelector,
+  moveMetric as moveMetricAction,
   refreshSelector,
+  selectedMetricsIdsSelector,
+  selectedMetricsSelector,
 } from '../redux/slices/metrics_slice';
-import { mergeLayoutAndMetrics } from '../helpers/utils';
 
 import './metrics_grid.scss';
+import { coreRefs } from '../../../framework/core_refs';
+import { PROMQL_METRIC_SUBTYPE } from '../../../../common/constants/shared';
+import { MetricsEditInline } from '../sidebar/metrics_edit_inline';
+import { EmptyMetricsView } from './empty_view';
 
 // HOC container to provide dynamic width for Grid layout
-const ResponsiveGridLayout = WidthProvider(Responsive);
 
 interface MetricsGridProps {
   chrome: CoreStart['chrome'];
-  panelVisualizations: MetricType[];
-  setPanelVisualizations: React.Dispatch<React.SetStateAction<MetricType[]>>;
-  editMode: boolean;
   moveToEvents: (savedVisualizationId: string) => any;
-  editActionType: string;
-  setEditActionType: React.Dispatch<React.SetStateAction<string>>;
 }
 
-export const MetricsGrid = ({
-  chrome,
-  panelVisualizations,
-  setPanelVisualizations,
-  editMode,
-  moveToEvents,
-  editActionType,
-  setEditActionType,
-}: MetricsGridProps) => {
-  // Redux tools
-  const dispatch = useDispatch();
-  const dateSpanFilter = useSelector(dateSpanFilterSelector);
-  const refresh = useSelector(refreshSelector);
-
-  const updateLayout = (metric: any) => dispatch(updateMetricsLayout(metric));
-  const handleRemoveMetric = (metric: any) => {
-    dispatch(deSelectMetric(metric));
-  };
+const visualizationFromMetric = (metric, dateSpanFilter): SavedVisualizationType => ({
+  ...metric,
+  query: updateCatalogVisualizationQuery({ ...metric, ...dateSpanFilter }),
+  queryMetaData: {
+    catalogSourceName: metric.catalogSourceName,
+    catalogTableName: metric.catalogTableName,
+    aggregation: metric.aggregation,
+    attributesGroupBy: metric.attributesGroupBy,
+  },
+
+  timeField: '@timestamp',
+  selected_date_range: dateSpanFilter,
+  userConfigs: {
+    dataConfig: {
+      type: 'line',
+      fillOpacity: 0,
+      lineWidth: 2,
+    },
+    layout: { height: 280 },
+  },
+});
+
+const navigateToEventExplorerVisualization = (savedVisualizationId: string) => {
+  window.location.assign(`${observabilityLogsID}#/explorer/${savedVisualizationId}`);
+};
 
-  const [currentLayout, setCurrentLayout] = useState<Layout[]>([]);
-  const [postEditLayout, setPostEditLayout] = useState<Layout[]>([]);
-  const [gridData, setGridData] = useState(panelVisualizations.map(() => <></>));
-  const [removeMetricsList, setRemoveMetricsList] = useState<Array<{ id: string }>>([]);
-  const isLocked = useObservable(chrome.getIsNavDrawerLocked$());
+export const InnerGridVisualization = ({ id, idx, dateSpanFilter, metric, refresh }) => {
+  if (!metric) return <></>;
 
-  // Reset Size of Visualizations when layout is changed
-  const layoutChanged = (currLayouts: Layout[], allLayouts: Layouts) => {
-    window.dispatchEvent(new Event('resize'));
-    setPostEditLayout(currLayouts);
-  };
-
-  const loadVizComponents = () => {
-    const gridDataComps = panelVisualizations.map((panelVisualization: MetricType, index) => (
+  console.log('vis', { metric });
+  return (
+    <EuiDraggable key={id} index={idx} draggableId={id}>
       <VisualizationContainer
-        key={panelVisualization.id}
-        editMode={editMode}
-        visualizationId={panelVisualization.id}
-        savedVisualizationId={panelVisualization.savedVisualizationId}
+        key={id}
+        visualizationId={id}
+        savedVisualizationId={metric.savedVisualizationId}
+        inputMetaData={
+          metric.savedVisualizationId ? undefined : visualizationFromMetric(metric, dateSpanFilter)
+        }
         fromTime={dateSpanFilter.start}
         toTime={dateSpanFilter.end}
         onRefresh={refresh}
-        onEditClick={moveToEvents}
-        usedInNotebooks={true}
+        onEditClick={navigateToEventExplorerVisualization}
+        // usedInNotebooks={true}
         pplFilterValue=""
-        removeVisualization={removeVisualization}
-        catalogVisualization={
-          panelVisualization.metricType === 'savedCustomMetric' ? undefined : true
+        span={dateSpanFilter.span}
+        resolution={dateSpanFilter.resolution}
+        contextMenuId="metrics"
+        inlineEditor={
+          metric.subType === PROMQL_METRIC_SUBTYPE && <MetricsEditInline visualization={metric} />
         }
-        spanParam={`${dateSpanFilter.span}${dateSpanFilter.resolution}`}
       />
-    ));
-    setGridData(gridDataComps);
-  };
+    </EuiDraggable>
+  );
+};
 
-  // Reload the Layout
-  const reloadLayout = () => {
-    const tempLayout: Layout[] = panelVisualizations.map((panelVisualization) => {
-      return {
-        i: panelVisualization.id,
-        x: panelVisualization.x,
-        y: panelVisualization.y,
-        w: panelVisualization.w,
-        h: panelVisualization.h,
-        minW: 12, // restricting width of the metric visualization
-        maxW: 12,
-        static: !editMode,
-      } as Layout;
-    });
-    setCurrentLayout(tempLayout);
-  };
+// Memoize each Grid Visualization panel
+const GridVisualization = React.memo(InnerGridVisualization);
 
-  // remove visualization from panel in edit mode
-  const removeVisualization = (visualizationId: string) => {
-    const newVisualizationList = _.reject(panelVisualizations, {
-      id: visualizationId,
-    });
-    setRemoveMetricsList([...removeMetricsList, { id: visualizationId }]);
-    mergeLayoutAndVisualizations(postEditLayout, newVisualizationList, setPanelVisualizations);
-  };
+export const InnerMetricsGrid = ({
+  dateSpanFilter,
+  selectedMetrics,
+  selectedMetricsIds,
+  moveMetric,
+  allMetrics,
+}: MetricsGridProps) => {
+  const { chrome } = coreRefs;
+  const isLocked = useObservable(chrome!.getIsNavDrawerLocked$());
 
-  // Update layout whenever user edit gets completed
-  useEffect(() => {
-    if (editMode) {
-      reloadLayout();
-      loadVizComponents();
-    }
-  }, [editMode]);
+  const onDragEnd = ({ source, destination }) => {
+    moveMetric({ source, destination });
+  };
 
-  useEffect(() => {
-    if (editActionType === 'cancel') {
-      setRemoveMetricsList([]);
-    }
-    if (editActionType === 'save') {
-      removeMetricsList.map((value) => handleRemoveMetric(value));
-      updateLayout(mergeLayoutAndMetrics(postEditLayout, panelVisualizations));
-      setEditActionType('');
-    }
-  }, [editActionType]);
-
-  // Update layout whenever visualizations are updated
-  useEffect(() => {
-    reloadLayout();
-    loadVizComponents();
-  }, [panelVisualizations]);
+  const visualizationComponents = useMemo(() => {
+    if (selectedMetrics.length < 1) return <EmptyMetricsView />;
+
+    return selectedMetricsIds.map((id, idx) => {
+      const metric = allMetrics[id];
+      return (
+        <GridVisualization
+          id={id}
+          idx={idx}
+          key={id}
+          dateSpanFilter={dateSpanFilter}
+          metric={metric}
+        />
+      );
+    });
+  }, [selectedMetrics, dateSpanFilter]);
 
   // Reset Size of Panel Grid when Nav Dock is Locked
   useEffect(() => {
@@ -147,25 +129,23 @@ export const MetricsGrid = ({
     }, 300);
   }, [isLocked]);
 
-  useEffect(() => {
-    loadVizComponents();
-  }, [refresh]);
-
-  useEffect(() => {
-    loadVizComponents();
-  }, []);
-
   return (
-    <ResponsiveGridLayout
-      layouts={{ lg: currentLayout, md: currentLayout, sm: currentLayout }}
-      className="layout full-width"
-      breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-      cols={{ lg: 12, md: 12, sm: 12, xs: 1, xxs: 1 }}
-      onLayoutChange={layoutChanged}
-    >
-      {panelVisualizations.map((panelVisualization: MetricType, index) => (
-        <div key={panelVisualization.id}>{gridData[index]}</div>
-      ))}
-    </ResponsiveGridLayout>
+    <EuiDragDropContext onDragEnd={onDragEnd}>
+      <EuiDroppable droppableId="DROPPABLE_AREA_BARE">{visualizationComponents}</EuiDroppable>
+    </EuiDragDropContext>
   );
 };
+
+const mapStateToProps = (state) => ({
+  dateSpanFilter: dateSpanFilterSelector(state),
+  selectedMetrics: selectedMetricsSelector(state),
+  selectedMetricsIds: selectedMetricsIdsSelector(state),
+  allMetrics: allMetricsSelector(state),
+  refresh: refreshSelector(state),
+});
+
+const mapDispatchToProps = {
+  moveMetric: moveMetricAction,
+};
+
+export const MetricsGrid = connect(mapStateToProps, mapDispatchToProps)(InnerMetricsGrid);
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap
index fc29baee6..a56281a10 100644
--- a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap
+++ b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ParaOutput /> spec renders markdown outputs 1`] = `
 <div
-  class="euiText euiText--medium wrapAll markdown-output-text"
+  class="euiText euiText--medium markdown-output-text"
 >
   <div
     class="markdown-body "
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap
index bc5be1116..0fb456810 100644
--- a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap
+++ b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap
@@ -275,7 +275,7 @@ exports[`<Paragraphs /> spec renders the component 1`] = `
       style="opacity: 1; padding: 15px;"
     >
       <div
-        class="euiText euiText--medium wrapAll markdown-output-text"
+        class="euiText euiText--medium markdown-output-text"
       >
         <div
           class="markdown-body "
diff --git a/public/components/notebooks/components/paragraph_components/para_output.tsx b/public/components/notebooks/components/paragraph_components/para_output.tsx
index ee6a1a52b..984062150 100644
--- a/public/components/notebooks/components/paragraph_components/para_output.tsx
+++ b/public/components/notebooks/components/paragraph_components/para_output.tsx
@@ -8,7 +8,6 @@ import MarkdownRender from '@nteract/markdown';
 import { Media } from '@nteract/outputs';
 import moment from 'moment';
 import React, { useState } from 'react';
-import { set } from '@elastic/safer-lodash-set';
 import { VisualizationContainer } from '../../../../components/custom_panels/panel_modules/visualization_container';
 import PPLService from '../../../../services/requests/ppl';
 import { CoreStart } from '../../../../../../../src/core/public';
@@ -20,29 +19,23 @@ import { ParaType } from '../../../../../common/types/notebooks';
 import { uiSettingsService } from '../../../../../common/utils';
 import { QueryDataGridMemo } from './para_query_grid';
 
-const OutputBody = ({
-  key,
-  typeOut,
-  val,
-  inp,
-  visInput,
-  setVisInput,
-  DashboardContainerByValueRenderer,
-}: {
-  key: string;
-  typeOut: string;
-  val: string;
-  inp: string;
+/*
+ * "ParaOutput" component is used by notebook to populate paragraph outputs for an open notebook.
+ *
+ * Props taken in as params are:
+ * para - parsed paragraph from notebook
+ *
+ * Outputs component of nteract used as a container for notebook UI.
+ * https://components.nteract.io/#outputs
+ */
+export const ParaOutput = (props: {
+  http: CoreStart['http'];
+  pplService: PPLService;
+  para: ParaType;
   visInput: DashboardContainerInput;
   setVisInput: (input: DashboardContainerInput) => void;
   DashboardContainerByValueRenderer: DashboardStart['DashboardContainerByValueRenderer'];
 }) => {
-  /* Returns a component to render paragraph outputs using the para.typeOut property
-   * Currently supports HTML, TABLE, IMG
-   * TODO: add table rendering
-   */
-  const dateFormat = uiSettingsService.get('dateFormat');
-
   const createQueryColumns = (jsonColumns: any[]) => {
     let index = 0;
     const datagridColumns = [];
@@ -77,118 +70,114 @@ const OutputBody = ({
     return data;
   };
 
-  if (typeOut !== undefined) {
-    switch (typeOut) {
-      case 'QUERY':
-        const inputQuery = inp.substring(4, inp.length);
-        const queryObject = JSON.parse(val);
-        if (queryObject.hasOwnProperty('error')) {
-          return <EuiCodeBlock key={key}>{val}</EuiCodeBlock>;
-        } else {
-          const columns = createQueryColumns(queryObject.schema);
-          const data = getQueryOutputData(queryObject);
+  const QueryOutput = ({ typeOut, val }: { typeOut: string; val: string }) => {
+    const inputQuery = para.inp.substring(4, para.inp.length);
+    const queryObject = JSON.parse(val);
+    const columns = createQueryColumns(queryObject.schema);
+    const data = getQueryOutputData(queryObject);
+    const [visibleColumns, setVisibleColumns] = useState(() => columns.map(({ id }) => id));
+    if (queryObject.hasOwnProperty('error')) {
+      return <EuiCodeBlock>{val}</EuiCodeBlock>;
+    } else {
+      return (
+        <div>
+          <EuiText className="wrapAll">
+            <b>{inputQuery}</b>
+          </EuiText>
+          <EuiSpacer />
+          <QueryDataGridMemo
+            rowCount={queryObject.datarows.length}
+            queryColumns={columns}
+            visibleColumns={visibleColumns}
+            setVisibleColumns={setVisibleColumns}
+            dataValues={data}
+          />
+        </div>
+      );
+    }
+  };
+
+  const OutputBody = ({ typeOut, val }: { typeOut: string; val: string }) => {
+    /* Returns a component to render paragraph outputs using the para.typeOut property
+     * Currently supports HTML, TABLE, IMG
+     * TODO: add table rendering
+     */
+    const dateFormat = uiSettingsService.get('dateFormat');
+
+    if (typeOut !== undefined) {
+      switch (typeOut) {
+        case 'QUERY':
+          return <QueryOutput typeOut={typeOut} val={val} />;
+        case 'MARKDOWN':
+          return (
+            <EuiText className="wrapAll markdown-output-text">
+              <MarkdownRender source={val} />
+            </EuiText>
+          );
+        case 'VISUALIZATION':
+          let from = moment(visInput?.timeRange?.from).format(dateFormat);
+          let to = moment(visInput?.timeRange?.to).format(dateFormat);
+          from = from === 'Invalid date' ? visInput.timeRange.from : from;
+          to = to === 'Invalid date' ? visInput.timeRange.to : to;
           return (
-            <div>
-              <EuiText key={'query-input-key'}>
-                <b>{inputQuery}</b>
+            <>
+              <EuiText size="s" style={{ marginLeft: 9 }}>
+                {`${from} - ${to}`}
               </EuiText>
-              <EuiSpacer />
-              <QueryDataGridMemo
-                key={key}
-                rowCount={queryObject.datarows.length}
-                queryColumns={columns}
-                dataValues={data}
-              />
-            </div>
+              <DashboardContainerByValueRenderer input={visInput} onInputUpdated={setVisInput} />
+            </>
           );
-        }
-      case 'MARKDOWN':
-        return (
-          <EuiText className="wrapAll markdown-output-text">
-            <MarkdownRender source={val} />
-          </EuiText>
-        );
-      case 'VISUALIZATION':
-        let from = moment(visInput?.timeRange?.from).format(dateFormat);
-        let to = moment(visInput?.timeRange?.to).format(dateFormat);
-        from = from === 'Invalid date' ? visInput.timeRange.from : from;
-        to = to === 'Invalid date' ? visInput.timeRange.to : to;
-        return (
-          <>
-            <EuiText size="s" style={{ marginLeft: 9 }}>
-              {`${from} - ${to}`}
-            </EuiText>
-            <DashboardContainerByValueRenderer input={visInput} onInputUpdated={setVisInput} />
-          </>
-        );
-      case 'OBSERVABILITY_VISUALIZATION':
-        let fromObs = moment(visInput?.timeRange?.from).format(dateFormat);
-        let toObs = moment(visInput?.timeRange?.to).format(dateFormat);
-        fromObs = fromObs === 'Invalid date' ? visInput.timeRange.from : fromObs;
-        toObs = toObs === 'Invalid date' ? visInput.timeRange.to : toObs;
-        const onEditClick = (savedVisualizationId: string) => {
-          window.location.assign(`observability-logs#/explorer/${savedVisualizationId}`);
-        };
-        return (
-          <>
-            <EuiText size="s" style={{ marginLeft: 9 }}>
-              {`${fromObs} - ${toObs}`}
+        case 'OBSERVABILITY_VISUALIZATION':
+          let fromObs = moment(visInput?.timeRange?.from).format(dateFormat);
+          let toObs = moment(visInput?.timeRange?.to).format(dateFormat);
+          fromObs = fromObs === 'Invalid date' ? visInput.timeRange.from : fromObs;
+          toObs = toObs === 'Invalid date' ? visInput.timeRange.to : toObs;
+          const onEditClick = (savedVisualizationId: string) => {
+            window.location.assign(`observability-logs#/explorer/${savedVisualizationId}`);
+          };
+          return (
+            <>
+              <EuiText size="s" style={{ marginLeft: 9 }}>
+                {`${fromObs} - ${toObs}`}
+              </EuiText>
+              <div style={{ height: '300px', width: '100%' }}>
+                <VisualizationContainer
+                  http={props.http}
+                  editMode={false}
+                  visualizationId={''}
+                  onEditClick={onEditClick}
+                  savedVisualizationId={para.visSavedObjId}
+                  pplService={props.pplService}
+                  fromTime={para.visStartTime}
+                  toTime={para.visEndTime}
+                  onRefresh={false}
+                  pplFilterValue={''}
+                  usedInNotebooks={true}
+                  contextMenuId="notebook"
+                />
+              </div>
+            </>
+          );
+        case 'HTML':
+          return (
+            <EuiText>
+              {/* eslint-disable-next-line react/jsx-pascal-case */}
+              <Media.HTML data={val} />
             </EuiText>
-            <div style={{ height: '300px', width: '100%' }}>
-              <VisualizationContainer
-                http={props.http}
-                editMode={false}
-                visualizationId={''}
-                onEditClick={onEditClick}
-                savedVisualizationId={para.visSavedObjId}
-                pplService={props.pplService}
-                fromTime={para.visStartTime}
-                toTime={para.visEndTime}
-                onRefresh={false}
-                pplFilterValue={''}
-                usedInNotebooks={true}
-                contextMenuId="notebook"
-              />
-            </div>
-          </>
-        );
-      case 'HTML':
-        return (
-          <EuiText>
-            {/* eslint-disable-next-line react/jsx-pascal-case */}
-            <Media.HTML data={val} />
-          </EuiText>
-        );
-      case 'TABLE':
-        return <pre>{val}</pre>;
-      case 'IMG':
-        return <img alt="" src={'data:image/gif;base64,' + val} />;
-      default:
-        return <pre>{val}</pre>;
+          );
+        case 'TABLE':
+          return <pre>{val}</pre>;
+        case 'IMG':
+          return <img alt="" src={'data:image/gif;base64,' + val} />;
+        default:
+          return <pre>{val}</pre>;
+      }
+    } else {
+      console.log('output not supported', typeOut);
+      return <pre />;
     }
-  } else {
-    console.log('output not supported', typeOut);
-    return <pre />;
-  }
-};
+  };
 
-/*
- * "ParaOutput" component is used by notebook to populate paragraph outputs for an open notebook.
- *
- * Props taken in as params are:
- * para - parsed paragraph from notebook
- *
- * Outputs component of nteract used as a container for notebook UI.
- * https://components.nteract.io/#outputs
- */
-export const ParaOutput = (props: {
-  http: CoreStart['http'];
-  pplService: PPLService;
-  para: ParaType;
-  visInput: DashboardContainerInput;
-  setVisInput: (input: DashboardContainerInput) => void;
-  DashboardContainerByValueRenderer: DashboardStart['DashboardContainerByValueRenderer'];
-}) => {
   const { para, DashboardContainerByValueRenderer, visInput, setVisInput } = props;
 
   return !para.isOutputHidden ? (
@@ -199,10 +188,6 @@ export const ParaOutput = (props: {
             key={para.uniqueId + '_paraOutputBody_' + tIdx}
             typeOut={typeOut}
             val={para.out[tIdx]}
-            inp={para.inp}
-            visInput={visInput}
-            setVisInput={setVisInput}
-            DashboardContainerByValueRenderer={DashboardContainerByValueRenderer}
           />
         );
       })}
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
index 1529919ed..c15eee1f2 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
@@ -480,7 +480,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "v",
+                            "id": "h",
                             "name": "Right",
                           },
                         ],
@@ -643,7 +643,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "v",
+        "legendposition": "h",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
@@ -703,7 +703,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
         "height": 220,
         "hovermode": "closest",
         "legend": Object {
-          "orientation": "v",
+          "orientation": "h",
         },
         "margin": Object {
           "b": 30,
@@ -761,7 +761,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
           "height": 220,
           "hovermode": "closest",
           "legend": Object {
-            "orientation": "v",
+            "orientation": "h",
           },
           "margin": Object {
             "b": 30,
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
index 013b2106b..9c1c72dfb 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
@@ -484,7 +484,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "v",
+                            "id": "h",
                             "name": "Right",
                           },
                         ],
@@ -647,7 +647,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "v",
+        "legendposition": "h",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
index f56257ba0..1a61654df 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
@@ -480,7 +480,7 @@ exports[`Histogram component Renders histogram component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "v",
+                            "id": "h",
                             "name": "Right",
                           },
                         ],
@@ -643,7 +643,7 @@ exports[`Histogram component Renders histogram component 1`] = `
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "v",
+        "legendposition": "h",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
@@ -715,7 +715,7 @@ exports[`Histogram component Renders histogram component 1`] = `
         ],
         "height": 220,
         "legend": Object {
-          "orientation": "v",
+          "orientation": "h",
         },
         "margin": Object {
           "b": 30,
@@ -772,7 +772,7 @@ exports[`Histogram component Renders histogram component 1`] = `
           "height": 220,
           "hovermode": "closest",
           "legend": Object {
-            "orientation": "v",
+            "orientation": "h",
           },
           "margin": Object {
             "b": 30,
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
index fd5d086b1..3e532cf5f 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
@@ -480,7 +480,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "v",
+                            "id": "h",
                             "name": "Right",
                           },
                         ],
@@ -643,7 +643,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
         "id": "horizontal_bar",
         "label": "Horizontal bar",
         "labelangle": 0,
-        "legendposition": "v",
+        "legendposition": "h",
         "linewidth": 0,
         "mode": "group",
         "name": "horizontal_bar",
@@ -703,7 +703,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
         "height": 220,
         "hovermode": "closest",
         "legend": Object {
-          "orientation": "v",
+          "orientation": "h",
         },
         "margin": Object {
           "b": 30,
@@ -761,7 +761,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
           "height": 220,
           "hovermode": "closest",
           "legend": Object {
-            "orientation": "v",
+            "orientation": "h",
           },
           "margin": Object {
             "b": 30,
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
index 87f23bc1d..aecd16a2e 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
@@ -480,7 +480,7 @@ exports[`Line component Renders line component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "v",
+                            "id": "h",
                             "name": "Right",
                           },
                         ],
@@ -643,7 +643,7 @@ exports[`Line component Renders line component 1`] = `
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "v",
+        "legendposition": "h",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
@@ -701,7 +701,7 @@ exports[`Line component Renders line component 1`] = `
         ],
         "height": 220,
         "legend": Object {
-          "orientation": "v",
+          "orientation": "h",
         },
         "margin": Object {
           "b": 30,
@@ -754,7 +754,7 @@ exports[`Line component Renders line component 1`] = `
           "height": 220,
           "hovermode": "closest",
           "legend": Object {
-            "orientation": "v",
+            "orientation": "h",
           },
           "margin": Object {
             "b": 30,
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
index 67b8a1360..99ccc5b59 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
@@ -480,7 +480,7 @@ exports[`Pie component Renders pie component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "v",
+                            "id": "h",
                             "name": "Right",
                           },
                         ],
@@ -643,7 +643,7 @@ exports[`Pie component Renders pie component 1`] = `
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "v",
+        "legendposition": "h",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
@@ -697,7 +697,7 @@ exports[`Pie component Renders pie component 1`] = `
         },
         "height": 220,
         "legend": Object {
-          "orientation": "v",
+          "orientation": "h",
         },
         "margin": Object {
           "b": 30,
@@ -745,7 +745,7 @@ exports[`Pie component Renders pie component 1`] = `
           "height": 220,
           "hovermode": "closest",
           "legend": Object {
-            "orientation": "v",
+            "orientation": "h",
           },
           "margin": Object {
             "b": 30,
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
index a0e8bf52a..0c0965317 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
@@ -463,7 +463,7 @@ exports[`Text component Renders text component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "v",
+                            "id": "h",
                             "name": "Right",
                           },
                         ],
@@ -626,7 +626,7 @@ exports[`Text component Renders text component 1`] = `
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "v",
+        "legendposition": "h",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
index 483149850..a10546c95 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
@@ -480,7 +480,7 @@ exports[`Treemap component Renders treemap component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "v",
+                            "id": "h",
                             "name": "Right",
                           },
                         ],
@@ -643,7 +643,7 @@ exports[`Treemap component Renders treemap component 1`] = `
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "v",
+        "legendposition": "h",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
diff --git a/public/components/visualizations/saved_object_visualization.tsx b/public/components/visualizations/saved_object_visualization.tsx
index 1b30e9d76..220271ad8 100644
--- a/public/components/visualizations/saved_object_visualization.tsx
+++ b/public/components/visualizations/saved_object_visualization.tsx
@@ -5,7 +5,6 @@
 
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { SizeMe } from 'react-sizeme';
 import { Filter, Query, TimeRange } from '../../../../../src/plugins/data/common';
 import { QueryManager } from '../../../common/query_manager';
 import { IVisualizationContainerProps, SavedVisualization } from '../../../common/types/explorer';
@@ -13,6 +12,9 @@ import { getPPLService, preprocessQuery, removeBacktick } from '../../../common/
 import { getDefaultVisConfig } from '../event_analytics/utils';
 import { getVizContainerProps } from './charts/helpers';
 import { Visualization } from './visualization';
+import { PROMQL_METRIC_SUBTYPE } from '../../../common/constants/shared';
+import { getMetricVisConfig } from '../event_analytics/utils/utils';
+import { preprocessMetricQuery } from '../common/query_utils';
 
 interface SavedObjectVisualizationProps {
   savedVisualization: SavedVisualization;
@@ -30,13 +32,22 @@ export const SavedObjectVisualization: React.FC<SavedObjectVisualizationProps> =
 
   useEffect(() => {
     const pplService = getPPLService();
-    const metaData = { ...props.savedVisualization, query: props.savedVisualization.query };
-    const userConfigs = metaData.user_configs ? JSON.parse(metaData.user_configs) : {};
+    const isMetric = props.savedVisualization?.subType === PROMQL_METRIC_SUBTYPE;
+    const metaData = {
+      ...props.savedVisualization,
+      query: props.savedVisualization.query,
+      queryMetaData: props.savedVisualization.queryMetaData,
+      isMetric,
+    };
+    const userConfigs = JSON.parse(metaData.user_configs || metaData.userConfigs || '{}');
     const dataConfig = { ...(userConfigs.dataConfig || {}) };
     const hasBreakdowns = !_.isEmpty(dataConfig.breakdowns);
-    const realTimeParsedStats = {
-      ...getDefaultVisConfig(new QueryManager().queryParser().parse(metaData.query).getStats()),
-    };
+    const realTimeParsedStats = isMetric
+      ? getMetricVisConfig(metaData)
+      : {
+          ...getDefaultVisConfig(new QueryManager().queryParser().parse(metaData.query).getStats()),
+        };
+
     let finalDimensions = [...(realTimeParsedStats.dimensions || [])];
     const breakdowns = [...(dataConfig.breakdowns || [])];
 
@@ -69,14 +80,22 @@ export const SavedObjectVisualization: React.FC<SavedObjectVisualizationProps> =
     let query = metaData.query;
 
     if (props.timeRange) {
-      query = preprocessQuery({
-        rawQuery: metaData.query,
-        startTime: props.timeRange.from,
-        endTime: props.timeRange.to,
-        timeField: props.savedVisualization.selected_timestamp.name,
-        isLiveQuery: false,
-        whereClause: props.whereClause,
-      });
+      if (isMetric) {
+        query = preprocessMetricQuery({
+          metaData,
+          startTime: props.timeRange.from,
+          endTime: props.timeRange.to,
+        });
+      } else {
+        query = preprocessQuery({
+          rawQuery: metaData.query,
+          startTime: props.timeRange.from,
+          endTime: props.timeRange.to,
+          timeField: props.savedVisualization.selected_timestamp.name,
+          isLiveQuery: false,
+          whereClause: props.whereClause,
+        });
+      }
     }
 
     pplService
@@ -97,7 +116,5 @@ export const SavedObjectVisualization: React.FC<SavedObjectVisualizationProps> =
       });
   }, [props]);
 
-  return visContainerProps ? (
-    <SizeMe>{({ size }) => <Visualization visualizations={visContainerProps} />}</SizeMe>
-  ) : null;
+  return visContainerProps ? <Visualization visualizations={visContainerProps} /> : null;
 };
diff --git a/public/components/visualizations/visualization.tsx b/public/components/visualizations/visualization.tsx
index 313f43cf7..25e7bbf36 100644
--- a/public/components/visualizations/visualization.tsx
+++ b/public/components/visualizations/visualization.tsx
@@ -8,7 +8,11 @@ import { isEmpty } from 'lodash';
 import { VisualizationChart } from './visualization_chart';
 import { VisWorkspaceDefault } from '../event_analytics/explorer/visualizations/shared_components';
 import { IVisualizationContainerProps } from '../../../common/types/explorer';
-import { VIS_CHART_TYPES, VISUALIZATION_ERROR } from '../../../common/constants/shared';
+import {
+  PROMQL_METRIC_SUBTYPE,
+  VIS_CHART_TYPES,
+  VISUALIZATION_ERROR,
+} from '../../../common/constants/shared';
 import { AGGREGATIONS, GROUPBY } from '../../../common/constants/explorer';
 
 export const Visualization = ({
@@ -20,12 +24,25 @@ export const Visualization = ({
     const {
       data: {
         userConfigs: {
-          dataConfig: { span = {}, [GROUPBY]: dimensions = [], [AGGREGATIONS]: series = [] } = {},
+          dataConfig: {
+            span = {},
+            [GROUPBY]: dimensions = [],
+            [AGGREGATIONS]: series = [],
+            queryMetaData = {},
+            subType = '',
+          } = {},
         } = {},
       },
       vis = {},
     }: IVisualizationContainerProps = vs;
 
+    if (subType === PROMQL_METRIC_SUBTYPE) {
+      if (isEmpty(queryMetaData)) return [false, VISUALIZATION_ERROR.NO_METRIC];
+
+      // Metric checks OK.
+      return [true, ''];
+    }
+
     // Markdown, it does not depend on if there is data
     if (vis.id === VIS_CHART_TYPES.Text) return [true, ''];
 
diff --git a/public/components/visualizations/visualization_chart.tsx b/public/components/visualizations/visualization_chart.tsx
index cc5a667ff..7f8461978 100644
--- a/public/components/visualizations/visualization_chart.tsx
+++ b/public/components/visualizations/visualization_chart.tsx
@@ -5,9 +5,7 @@
 
 import React, { useMemo } from 'react';
 
-interface IVisualizationChart {}
-
-export const VisualizationChart = ({ visualizations }: IVisualizationChart) => {
+export const VisualizationChart = ({ visualizations }) => {
   const { vis } = visualizations;
   const { layout = {}, config = {} } = visualizations?.data?.userConfigs;
   const Visualization = visualizations?.vis?.component;
@@ -29,7 +27,7 @@ export const VisualizationChart = ({ visualizations }: IVisualizationChart) => {
   return (
     <Visualization
       visualizations={visualizations}
-      layout={finalFigureLayout}
+      layout={finalFigureLayout()}
       config={finalFigureConfig}
     />
   );
diff --git a/public/embeddable/observability_embeddable.tsx b/public/embeddable/observability_embeddable.tsx
index 49fbb75cb..3cf75f404 100644
--- a/public/embeddable/observability_embeddable.tsx
+++ b/public/embeddable/observability_embeddable.tsx
@@ -14,10 +14,11 @@ import {
   SavedObjectEmbeddableInput,
 } from '../../../../src/plugins/embeddable/public';
 import {
-  VisualizationSavedObjectAttributes,
   VISUALIZATION_SAVED_OBJECT,
+  VisualizationSavedObjectAttributes,
 } from '../../common/types/observability_saved_object_attributes';
 import { ObservabilityEmbeddableComponent } from './observability_embeddable_component';
+import { observabilityMetricsID, PROMQL_METRIC_SUBTYPE } from '../../common/constants/shared';
 
 // this needs to match the saved object type for the clone and replace panel actions to work
 export const OBSERVABILITY_EMBEDDABLE = VISUALIZATION_SAVED_OBJECT;
@@ -27,6 +28,8 @@ export const OBSERVABILITY_EMBEDDABLE_DESCRIPTION =
   'Create a visualization with Piped Processing Language (PPL). PPL can query data in your indices and also supports federated data sources like Prometheus.';
 export const OBSERVABILITY_EMBEDDABLE_ICON = 'visQueryPPL';
 
+export const OBSERVABILITY_EMBEDDABLE_METRIC_DISPLAY_NAME = 'PPL Metric';
+
 export interface ObservabilityOutput extends EmbeddableOutput {
   /**
    * Will contain the saved object attributes of the Observability Saved Object that matches
@@ -78,11 +81,26 @@ export class ObservabilityEmbeddable extends Embeddable<
   public async reload() {
     this.attributes = await this.attributeService.unwrapAttributes(this.input);
 
-    this.updateOutput({
-      attributes: this.attributes,
-      title: this.input.title || this.attributes.title,
-      defaultTitle: this.attributes.title,
-    });
+    const isMetric = this.attributes?.savedVisualization?.subType === PROMQL_METRIC_SUBTYPE;
+    if (isMetric) {
+      const editPath = `#/${VISUALIZATION_SAVED_OBJECT}:${this.savedObjectId}`;
+      const editUrl = `/app/${observabilityMetricsID}${editPath}`;
+
+      this.updateOutput({
+        attributes: this.attributes,
+        title: this.input.title || this.attributes.title,
+        defaultTitle: this.attributes.title,
+        editPath,
+        editUrl,
+        editApp: observabilityMetricsID,
+      });
+    } else {
+      this.updateOutput({
+        attributes: this.attributes,
+        title: this.input.title || this.attributes.title,
+        defaultTitle: this.attributes.title,
+      });
+    }
   }
 
   public destroy() {
diff --git a/public/embeddable/observability_embeddable_component.tsx b/public/embeddable/observability_embeddable_component.tsx
index 276539be8..c37c1a7e0 100644
--- a/public/embeddable/observability_embeddable_component.tsx
+++ b/public/embeddable/observability_embeddable_component.tsx
@@ -22,6 +22,7 @@ const ObservabilityEmbeddableComponentInner: React.FC<ObservabilityEmbeddableCom
   props
 ) => {
   const visualization = props.output.attributes?.savedVisualization;
+  console.log('ObservabilityEmbeddableComponentInner', visualization);
   return visualization ? (
     <SavedObjectVisualization
       savedVisualization={visualization}
diff --git a/public/framework/core_refs.ts b/public/framework/core_refs.ts
index 652bb3d62..c12e3d323 100644
--- a/public/framework/core_refs.ts
+++ b/public/framework/core_refs.ts
@@ -5,6 +5,7 @@
 
 import { ApplicationStart, ChromeStart, HttpStart, IToasts } from '../../../../src/core/public';
 import { SavedObjectsClientContract } from '../../../../src/core/public';
+import { DashboardStart } from '../../../../src/plugins/dashboard/public';
 import PPLService from '../services/requests/ppl';
 
 class CoreRefs {
@@ -16,6 +17,8 @@ class CoreRefs {
   public toasts?: IToasts;
   public chrome?: ChromeStart;
   public application?: ApplicationStart;
+  public dashboard?: DashboardStart;
+  public dashboardProviders?: unknown;
   private constructor() {
     // ...
   }
diff --git a/public/plugin.ts b/public/plugin.ts
index 9ac1fe588..4348eb479 100644
--- a/public/plugin.ts
+++ b/public/plugin.ts
@@ -320,6 +320,7 @@ export class ObservabilityPlugin
     coreRefs.chrome = core.chrome;
     coreRefs.dataSources = startDeps.data.dataSources;
     coreRefs.application = core.application;
+    coreRefs.dashboard = startDeps.dashboard;
 
     const { dataSourceService, dataSourceFactory } = startDeps.data.dataSources;
 
diff --git a/public/services/saved_objects/event_analytics/saved_objects.ts b/public/services/saved_objects/event_analytics/saved_objects.ts
index 1741723f3..cb423f657 100644
--- a/public/services/saved_objects/event_analytics/saved_objects.ts
+++ b/public/services/saved_objects/event_analytics/saved_objects.ts
@@ -3,11 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { has, isEmpty, isArray } from 'lodash';
+import { has, isArray, isEmpty } from 'lodash';
 import { IField } from 'common/types/explorer';
 import {
-  OBSERVABILITY_BASE,
   EVENT_ANALYTICS,
+  OBSERVABILITY_BASE,
   SAVED_OBJECTS,
   SAVED_QUERY,
   SAVED_VISUALIZATION,
@@ -91,11 +91,11 @@ export default class SavedObjects {
     }
 
     if (!isEmpty(userConfigs)) {
-      objRequest.object.user_configs = userConfigs;
+      objRequest.object.userConfigs = userConfigs;
     }
 
     if (!isEmpty(subType)) {
-      objRequest.object.sub_type = subType;
+      objRequest.object.subType = subType;
     }
 
     if (!isEmpty(unitsOfMeasure)) {
diff --git a/public/services/saved_objects/saved_object_client/osd_saved_objects/osd_saved_object_client.ts b/public/services/saved_objects/saved_object_client/osd_saved_objects/osd_saved_object_client.ts
index ac3204b7a..323242eb0 100644
--- a/public/services/saved_objects/saved_object_client/osd_saved_objects/osd_saved_object_client.ts
+++ b/public/services/saved_objects/saved_object_client/osd_saved_objects/osd_saved_object_client.ts
@@ -77,6 +77,7 @@ export abstract class OSDSavedObjectClient extends SavedObjectClientBase {
     unitsOfMeasure = '',
     selectedLabels,
     objectId = '',
+    queryMetaData = {},
   }: any) {
     const objRequest: any = {
       object: {
@@ -110,11 +111,11 @@ export abstract class OSDSavedObjectClient extends SavedObjectClientBase {
     }
 
     if (!isEmpty(userConfigs)) {
-      objRequest.object.user_configs = userConfigs;
+      objRequest.object.userConfigs = userConfigs;
     }
 
     if (!isEmpty(subType)) {
-      objRequest.object.sub_type = subType;
+      objRequest.object.subType = subType;
     }
 
     if (!isEmpty(unitsOfMeasure)) {
@@ -129,6 +130,10 @@ export abstract class OSDSavedObjectClient extends SavedObjectClientBase {
       objRequest.object_id = objectId;
     }
 
+    if (!isEmpty(queryMetaData)) {
+      objRequest.object.queryMetaData = queryMetaData;
+    }
+
     return objRequest;
   }
 }
diff --git a/public/services/saved_objects/saved_object_client/osd_saved_objects/saved_visualization.ts b/public/services/saved_objects/saved_object_client/osd_saved_objects/saved_visualization.ts
index f0adf13f8..045fa3e50 100644
--- a/public/services/saved_objects/saved_object_client/osd_saved_objects/saved_visualization.ts
+++ b/public/services/saved_objects/saved_object_client/osd_saved_objects/saved_visualization.ts
@@ -20,6 +20,7 @@ import {
 } from '../types';
 import { OSDSavedObjectClient } from './osd_saved_object_client';
 import { OSDSavedObjectCreateResponse, OSDSavedObjectUpdateResponse } from './types';
+import { QueryManager } from '../../../../../common/query_manager/ppl_query_manager';
 
 interface CommonParams {
   query: string;
@@ -36,6 +37,7 @@ interface CommonParams {
   selectedLabels: string;
   dataSources: string; // list of type SelectedDataSources that is stringified
   queryLang: string;
+  queryMetaData: object;
 }
 
 type CreateParams = CommonParams & { applicationId: string };
@@ -66,6 +68,7 @@ export class OSDSavedVisualizationClient extends OSDSavedObjectClient {
       selectedLabels: params.selectedLabels,
       dataSources: params.dataSources,
       queryLang: params.queryLang,
+      queryMetaData: params.queryMetaData,
     });
 
     const response = await this.client.create<VisualizationSavedObjectAttributes>(
diff --git a/public/services/saved_objects/saved_object_client/ppl/ppl_client.ts b/public/services/saved_objects/saved_object_client/ppl/ppl_client.ts
index 3416def29..e7573820d 100644
--- a/public/services/saved_objects/saved_object_client/ppl/ppl_client.ts
+++ b/public/services/saved_objects/saved_object_client/ppl/ppl_client.ts
@@ -26,9 +26,11 @@ export class PPLSavedObjectClient extends SavedObjectClientBase implements ISave
   constructor(protected readonly client: HttpStart) {
     super();
   }
+
   create(params: any): Promise<any> {
     throw new Error('Method not implemented.');
   }
+
   get(params: ISavedObjectRequestParams): Promise<SavedObjectsGetResponse> {
     return this.client.get(`${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}`, {
       query: {
@@ -36,6 +38,7 @@ export class PPLSavedObjectClient extends SavedObjectClientBase implements ISave
       },
     });
   }
+
   getBulk(params: ISavedObjectRequestParams): Promise<SavedObjectsGetResponse> {
     CONCAT_FIELDS.map((arrayField) => {
       this.stringifyList(params, arrayField, ',');
@@ -47,22 +50,27 @@ export class PPLSavedObjectClient extends SavedObjectClientBase implements ISave
       },
     });
   }
+
   update(params: any): Promise<any> {
     throw new Error('Method not implemented.');
   }
+
   updateBulk(params: any): Promise<Array<Promise<any>>> {
     throw new Error('Method not implemented.');
   }
+
   delete(params: SavedObjectsDeleteParams): Promise<SavedObjectsDeleteResponse> {
     return this.client.delete(
       `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/${params.objectId}`
     );
   }
+
   deleteBulk(params: SavedObjectsDeleteBulkParams): Promise<SavedObjectsDeleteResponse> {
     return this.client.delete(
       `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/${params.objectIdList.join(',')}`
     );
   }
+
   buildRequestBody({
     query,
     fields,
@@ -108,11 +116,11 @@ export class PPLSavedObjectClient extends SavedObjectClientBase implements ISave
     }
 
     if (!isEmpty(userConfigs)) {
-      objRequest.object.user_configs = userConfigs;
+      objRequest.object.userConfigs = userConfigs;
     }
 
     if (!isEmpty(subType)) {
-      objRequest.object.sub_type = subType;
+      objRequest.object.subType = subType;
     }
 
     if (!isEmpty(unitsOfMeasure)) {
diff --git a/public/services/saved_objects/saved_object_loaders/explorer_saved_object_loader.ts b/public/services/saved_objects/saved_object_loaders/explorer_saved_object_loader.ts
index 1e65d045b..582678953 100644
--- a/public/services/saved_objects/saved_object_loaders/explorer_saved_object_loader.ts
+++ b/public/services/saved_objects/saved_object_loaders/explorer_saved_object_loader.ts
@@ -131,6 +131,7 @@ const parseStringDataSource = (
 
 export class ExplorerSavedObjectLoader extends SavedObjectLoaderBase implements ISavedObjectLoader {
   private pollingInstance: UsePolling<any, any> | undefined;
+
   constructor(
     protected readonly savedObjectClient: ISavedObjectsClient,
     protected readonly notifications: NotificationsStart,
@@ -246,7 +247,9 @@ export class ExplorerSavedObjectLoader extends SavedObjectLoaderBase implements
     const { tabId, queryManager, getDefaultVisConfig } = this.loadContext;
     // fill saved user configs
     let visConfig = {};
-    const customConfig = objectData.user_configs ? JSON.parse(objectData.user_configs) : {};
+    const customConfig = objectData.userConfigs
+      ? JSON.parse(objectData.user_configs || objectData.userConfigs)
+      : {};
     if (!isEmpty(customConfig.dataConfig) && !isEmpty(customConfig.dataConfig?.series)) {
       visConfig = { ...customConfig };
     } else {
@@ -279,11 +282,11 @@ export class ExplorerSavedObjectLoader extends SavedObjectLoaderBase implements
       return objectData?.query || staleTempQuery;
     });
     if (isInnerObjectSavedVisualization(objectData)) {
-      if (objectData.sub_type === 'metric') {
+      if (objectData.subType === 'metric') {
         setMetricChecked(true);
         setMetricMeasure(objectData.units_of_measure || '');
       }
-      setSubType(objectData.sub_type);
+      setSubType(objectData.subType);
     }
     const tabToBeFocused = isInnerObjectSavedVisualization(objectData)
       ? TYPE_TAB_MAPPING[SAVED_VISUALIZATION]
diff --git a/public/services/saved_objects/saved_object_loaders/ppl/ppl_loader.ts b/public/services/saved_objects/saved_object_loaders/ppl/ppl_loader.ts
index d10a78086..0af1ddf87 100644
--- a/public/services/saved_objects/saved_object_loaders/ppl/ppl_loader.ts
+++ b/public/services/saved_objects/saved_object_loaders/ppl/ppl_loader.ts
@@ -5,7 +5,6 @@
 
 import { isEmpty } from 'lodash';
 import { batch as Batch } from 'react-redux';
-import { update } from 'public/components/event_analytics/redux/slices/search_meta_data_slice';
 import { updateFields as updateFieldsAction } from '../../../../components/event_analytics/redux/slices/field_slice';
 import { changeQuery as changeQueryAction } from '../../../../components/event_analytics/redux/slices/query_slice';
 import { updateTabName as updateTabNameAction } from '../../../../components/event_analytics/redux/slices/query_tab_slice';
@@ -202,7 +201,9 @@ export class PPLSavedObjectLoader extends SavedObjectLoaderBase implements ISave
     const { tabId, queryManager, getDefaultVisConfig } = this.loadContext;
     // fill saved user configs
     let visConfig = {};
-    const customConfig = objectData.user_configs ? JSON.parse(objectData.user_configs) : {};
+    const customConfig = objectData.userConfigs
+      ? JSON.parse(objectData.user_configs || objectData.userConfigs)
+      : {};
     if (!isEmpty(customConfig.dataConfig) && !isEmpty(customConfig.dataConfig?.series)) {
       visConfig = { ...customConfig };
     } else {
@@ -235,11 +236,11 @@ export class PPLSavedObjectLoader extends SavedObjectLoaderBase implements ISave
       return objectData?.query || staleTempQuery;
     });
     if (isInnerObjectSavedVisualization(objectData)) {
-      if (objectData.sub_type === 'metric') {
+      if (objectData.subType === 'metric') {
         setMetricChecked(true);
         setMetricMeasure(objectData.units_of_measure || '');
       }
-      setSubType(objectData.sub_type);
+      setSubType(objectData.subType);
     }
     const tabToBeFocused = isInnerObjectSavedVisualization(objectData)
       ? TYPE_TAB_MAPPING[SAVED_VISUALIZATION]
diff --git a/server/adaptors/custom_panels/custom_panel_adaptor.ts b/server/adaptors/custom_panels/custom_panel_adaptor.ts
index fbcc5c27e..d82251ab9 100644
--- a/server/adaptors/custom_panels/custom_panel_adaptor.ts
+++ b/server/adaptors/custom_panels/custom_panel_adaptor.ts
@@ -217,11 +217,16 @@ export class CustomPanelsAdaptor {
       timeField: visualization.savedVisualization.selected_timestamp.name,
       selected_date_range: visualization.savedVisualization.selected_date_range,
       selected_fields: visualization.savedVisualization.selected_fields,
-      user_configs: visualization.savedVisualization.hasOwnProperty('user_configs')
-        ? JSON.parse(visualization.savedVisualization.user_configs)
-        : {},
-      sub_type: visualization.savedVisualization.hasOwnProperty('sub_type')
-        ? visualization.savedVisualization.sub_type
+      userConfigs:
+        visualization.savedVisualization.hasOwnProperty('userConfigs') ||
+        visualization.savedVisualization.hasOwnProperty('user_configs')
+          ? JSON.parse(
+              visualization.savedVisualization.user_configs ||
+                visualization.savedVisualization.userConfigs
+            )
+          : {},
+      subType: visualization.savedVisualization.hasOwnProperty('subType')
+        ? visualization.savedVisualization.subType
         : '',
       units_of_measure: visualization.savedVisualization.hasOwnProperty('units_of_measure')
         ? visualization.savedVisualization.units_of_measure
diff --git a/server/routes/event_analytics/event_analytics_router.ts b/server/routes/event_analytics/event_analytics_router.ts
index f180f88b5..b23cfc181 100644
--- a/server/routes/event_analytics/event_analytics_router.ts
+++ b/server/routes/event_analytics/event_analytics_router.ts
@@ -5,13 +5,13 @@
 
 import { schema } from '@osd/config-schema';
 import {
-  IRouter,
   IOpenSearchDashboardsResponse,
+  IRouter,
   ResponseError,
 } from '../../../../../src/core/server';
 import {
-  OBSERVABILITY_BASE,
   EVENT_ANALYTICS,
+  OBSERVABILITY_BASE,
   SAVED_OBJECTS,
   SAVED_QUERY,
   SAVED_VISUALIZATION,
@@ -137,8 +137,8 @@ export const registerEventAnalyticsRouter = ({
             name: schema.string(),
             description: schema.string(),
             application_id: schema.maybe(schema.string()),
-            user_configs: schema.maybe(schema.string()),
-            sub_type: schema.maybe(schema.string()),
+            userConfigs: schema.maybe(schema.string()),
+            subType: schema.maybe(schema.string()),
             units_of_measure: schema.maybe(schema.string()),
             selected_labels: schema.maybe(
               schema.object({
@@ -231,8 +231,8 @@ export const registerEventAnalyticsRouter = ({
             name: schema.string(),
             description: schema.string(),
             application_id: schema.maybe(schema.string()),
-            user_configs: schema.maybe(schema.string()),
-            sub_type: schema.maybe(schema.string()),
+            userConfigs: schema.maybe(schema.string()),
+            subType: schema.maybe(schema.string()),
             units_of_measure: schema.maybe(schema.string()),
             selected_labels: schema.maybe(
               schema.object({
diff --git a/test/metrics_contants.ts b/test/metrics_contants.ts
index 7fd210468..ad9c4e28e 100644
--- a/test/metrics_contants.ts
+++ b/test/metrics_contants.ts
@@ -7,7 +7,7 @@ export const sampleMetricsVisualizations = [
   {
     h: 2,
     id: 'Y4muP4QBiaYaSxpXk7r8',
-    metricType: 'savedCustomMetric',
+    query: { type: 'savedCustomMetric', aggregation: 'avg', attributesGroupBy: [] },
     savedVisualizationId: 'Y4muP4QBiaYaSxpXk7r8',
     w: 12,
     x: 0,
@@ -25,7 +25,7 @@ export const sampleMetricsVisualizations = [
   {
     h: 2,
     id: 'prometheus.process_resident_memory_bytes',
-    metricType: 'prometheusMetric',
+    query: { type: 'prometheusMetric', aggregation: 'avg', attributesGroupBy: [] },
     savedVisualizationId: 'prometheus.process_resident_memory_bytes',
     w: 12,
     x: 0,
@@ -51,15 +51,15 @@ export const sampleMetric = {
     text: '',
     tokens: [],
   },
-  user_configs: '{}',
-  sub_type: 'metric',
+  userConfigs: '{}',
+  subType: 'metric',
 };
 
 export const sampleSortedMetricsLayout = [
   {
     h: 2,
     id: 'Y4muP4QBiaYaSxpXk7r8',
-    metricType: 'savedCustomMetric',
+    query: { type: 'savedCustomMetric', aggregation: 'avg', attributesGroupBy: [] },
     savedVisualizationId: 'Y4muP4QBiaYaSxpXk7r8',
     w: 12,
     x: 0,
@@ -68,7 +68,7 @@ export const sampleSortedMetricsLayout = [
   {
     h: 2,
     id: 'prometheus.process_resident_memory_bytes',
-    metricType: 'prometheusMetric',
+    query: { type: 'prometheusMetric', aggregation: 'avg', attributesGroupBy: [] },
     savedVisualizationId: 'prometheus.process_resident_memory_bytes',
     w: 12,
     x: 0,
@@ -99,8 +99,8 @@ export const sampleVisualizationById = {
   timeField: 'timestamp',
   selected_date_range: {},
   selected_fields: {},
-  user_configs: {},
-  sub_type: 'metric',
+  userConfigs: {},
+  subType: 'metric',
 };
 
 export const sampleAllAvailableMetrics = [
@@ -157,7 +157,7 @@ export const samplenewDimensions1 = {
   x: 0,
   y: 2,
   w: 12,
-  h: 2,
+  h: 3,
 };
 
 export const samplePanelVisualizations2 = [
@@ -168,7 +168,7 @@ export const samplePanelVisualizations2 = [
     y: 0,
     h: 2,
     w: 12,
-    metricType: 'savedCustomMetric',
+    query: { type: 'savedCustomMetric', aggregation: 'avg', attributesGroupBy: [] },
   },
   {
     id: 'tomAP4QBiaYaSxpXALls',
@@ -177,7 +177,7 @@ export const samplePanelVisualizations2 = [
     y: 2,
     h: 2,
     w: 12,
-    metricType: 'savedCustomMetric',
+    query: { type: 'savedCustomMetric', aggregation: 'avg', attributesGroupBy: [] },
   },
 ];
 
@@ -185,7 +185,7 @@ export const samplenewDimensions2 = {
   x: 0,
   y: 4,
   w: 12,
-  h: 2,
+  h: 3,
 };
 
 export const samplePrometheusVisualizationId = 'prometheus.process_resident_memory_bytes';
@@ -201,8 +201,8 @@ export const samplePrometheusVisualizationComponent = {
     text: '',
     tokens: [],
   },
-  sub_type: 'metric',
-  user_configs: {},
+  subType: 'metric',
+  userConfigs: {},
 };
 
 export const sampleVisualizationsList = [
@@ -258,7 +258,7 @@ export const samplePrometheusSampleUpdateWithSelections = {
   subType: 'metric',
   timestamp: '@timestamp',
   type: 'line',
-  userConfigs: '{}',
+  userConfigs: {},
 };
 
 export const sampleSavedMetric = {
@@ -277,7 +277,7 @@ export const sampleSavedMetric = {
     text: '',
     tokens: [],
   },
-  user_configs: {
+  userConfigs: {
     dataConfig: {
       series: [
         {
@@ -307,7 +307,7 @@ export const sampleSavedMetric = {
       },
     },
   },
-  sub_type: 'metric',
+  subType: 'metric',
 };
 
 export const sampleSavedMetricUpdate = {
@@ -320,6 +320,22 @@ export const sampleSavedMetricUpdate = {
   subType: 'metric',
   timestamp: 'timestamp',
   type: 'line',
-  userConfigs:
-    '{"dataConfig":{"series":[{"label":"machine.ram","name":"machine.ram","aggregation":"avg","customLabel":""}],"dimensions":[],"span":{"time_field":[{"name":"timestamp","type":"timestamp","label":"timestamp"}],"unit":[{"text":"Day","value":"d","label":"Day"}],"interval":"1"}}}',
+  userConfigs: {
+    dataConfig: {
+      series: [
+        {
+          label: 'machine.ram',
+          name: 'machine.ram',
+          aggregation: 'avg',
+          customLabel: '',
+        },
+      ],
+      dimensions: [],
+      span: {
+        time_field: [{ name: 'timestamp', type: 'timestamp', label: 'timestamp' }],
+        unit: [{ text: 'Day', value: 'd', label: 'Day' }],
+        interval: '1',
+      },
+    },
+  },
 };

From 3d6f8ef053f1fe0098d1fdf0b74da7464f7b4c21 Mon Sep 17 00:00:00 2001
From: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
Date: Thu, 7 Dec 2023 12:55:33 -0800
Subject: [PATCH 2/8] Correct circular dependency

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
---
 public/components/common/query_utils/index.ts | 32 ++++++++++++++++++-
 .../custom_panels/helpers/utils.tsx           | 31 ------------------
 .../metrics/top_menu/metrics_export.tsx       |  2 +-
 .../components/metrics/view/metrics_grid.tsx  |  2 +-
 .../__snapshots__/para_output.test.tsx.snap   |  4 +--
 5 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/public/components/common/query_utils/index.ts b/public/components/common/query_utils/index.ts
index 819ba3bc2..e200bf013 100644
--- a/public/components/common/query_utils/index.ts
+++ b/public/components/common/query_utils/index.ts
@@ -20,7 +20,6 @@ import {
   PPL_NEWLINE_REGEX,
 } from '../../../../common/constants/shared';
 import { IExplorerFields, IQuery } from '../../../../common/types/explorer';
-import { updateCatalogVisualizationQuery } from '../../custom_panels/helpers/utils';
 
 /*
  * "Query Utils" This file contains different reused functions in operational panels
@@ -83,6 +82,37 @@ export const convertDateTime = (
   return returnTime;
 };
 
+export const updateCatalogVisualizationQuery = ({
+  catalogSourceName,
+  catalogTableName,
+  aggregation,
+  attributesGroupBy,
+  start,
+  end,
+  span = '1',
+  resolution = 'h',
+}: {
+  catalogSourceName: string;
+  catalogTableName: string;
+  aggregation: string;
+  attributesGroupBy: string[];
+  start: string;
+  end: string;
+  span: string;
+  resolution: string;
+}) => {
+  const attributesGroupString = attributesGroupBy.join(',');
+  const startEpochTime = convertDateTime(start, true, false, true);
+  const endEpochTime = convertDateTime(end, false, false, true);
+  const promQuery =
+    attributesGroupBy.length === 0
+      ? `${aggregation} (${catalogTableName})`
+      : `${aggregation} by(${attributesGroupString}) (${catalogTableName})`;
+
+  const newQuery = `source = ${catalogSourceName}.query_range('${promQuery}', ${startEpochTime}, ${endEpochTime}, '${span}${resolution}')`;
+  return newQuery;
+};
+
 const PROMQL_DEFAULT_AGGREGATION = 'avg';
 const PROMQL_CATALOG_ONLY_INDEX = /^(?<connection>[^|\s]+)\.(?<metric>\S+)$/i;
 const PROMQL_INDEX_REGEX = /(?<connection>[^|\s]+)\.query_range\('(?<promql>.+?)'/i;
diff --git a/public/components/custom_panels/helpers/utils.tsx b/public/components/custom_panels/helpers/utils.tsx
index 8586ed8f4..53ac325c8 100644
--- a/public/components/custom_panels/helpers/utils.tsx
+++ b/public/components/custom_panels/helpers/utils.tsx
@@ -304,37 +304,6 @@ const createCatalogVisualizationMetaData = (
   };
 };
 
-export const updateCatalogVisualizationQuery = ({
-  catalogSourceName,
-  catalogTableName,
-  aggregation,
-  attributesGroupBy,
-  start,
-  end,
-  span = '1',
-  resolution = 'h',
-}: {
-  catalogSourceName: string;
-  catalogTableName: string;
-  aggregation: string;
-  attributesGroupBy: string[];
-  start: string;
-  end: string;
-  span: string;
-  resolution: string;
-}) => {
-  const attributesGroupString = attributesGroupBy.join(',');
-  const startEpochTime = convertDateTime(start, true, false, true);
-  const endEpochTime = convertDateTime(end, false, false, true);
-  const promQuery =
-    attributesGroupBy.length === 0
-      ? `${aggregation} (${catalogTableName})`
-      : `${aggregation} by(${attributesGroupString}) (${catalogTableName})`;
-
-  const newQuery = `source = ${catalogSourceName}.query_range('${promQuery}', ${startEpochTime}, ${endEpochTime}, '${span}${resolution}')`;
-  return newQuery;
-};
-
 // Creates a catalogVisualization for a runtime catalog based PPL query and runs getQueryResponse
 export const renderCatalogVisualization = async ({
   http,
diff --git a/public/components/metrics/top_menu/metrics_export.tsx b/public/components/metrics/top_menu/metrics_export.tsx
index 402e0a45b..fc1be965d 100644
--- a/public/components/metrics/top_menu/metrics_export.tsx
+++ b/public/components/metrics/top_menu/metrics_export.tsx
@@ -31,7 +31,7 @@ import { coreRefs } from '../../../framework/core_refs';
 import { selectPanelList } from '../../../../public/components/custom_panels/redux/panel_slice';
 import { SavedVisualization } from '../../../../common/types/explorer';
 import { visualizationFromMetric } from '../helpers/utils';
-import { updateCatalogVisualizationQuery } from '../../custom_panels/helpers/utils';
+import { updateCatalogVisualizationQuery } from '../../common/query_utils';
 import { PROMQL_METRIC_SUBTYPE } from '../../../../common/constants/shared';
 import { SavedObjectLoader } from '../../../../../../src/plugins/saved_objects/public';
 import { MountPoint } from '../../../../../../src/core/public';
diff --git a/public/components/metrics/view/metrics_grid.tsx b/public/components/metrics/view/metrics_grid.tsx
index 5aa62885b..16f1c2af8 100644
--- a/public/components/metrics/view/metrics_grid.tsx
+++ b/public/components/metrics/view/metrics_grid.tsx
@@ -9,7 +9,7 @@ import { useObservable } from 'react-use';
 import { connect } from 'react-redux';
 import { CoreStart } from '../../../../../../src/core/public';
 import { VisualizationContainer } from '../../custom_panels/panel_modules/visualization_container';
-import { updateCatalogVisualizationQuery } from '../../custom_panels/helpers/utils';
+import { updateCatalogVisualizationQuery } from '../../common/query_utils';
 import {
   allMetricsSelector,
   dateSpanFilterSelector,
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap
index a56281a10..a149d56be 100644
--- a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap
+++ b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ParaOutput /> spec renders markdown outputs 1`] = `
 <div
-  class="euiText euiText--medium markdown-output-text"
+  class="euiText euiText--medium wrapAll markdown-output-text"
 >
   <div
     class="markdown-body "
@@ -27,7 +27,7 @@ exports[`<ParaOutput /> spec renders other types of outputs 1`] = `
 exports[`<ParaOutput /> spec renders query outputs 1`] = `
 <div>
   <div
-    class="euiText euiText--medium"
+    class="euiText euiText--medium wrapAll"
   >
     <b>
        select * from opensearch_dashboards_sample_data_flights limit 2

From 84d1172df205490d912ad78bd76fe768aa972585 Mon Sep 17 00:00:00 2001
From: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
Date: Thu, 7 Dec 2023 15:09:21 -0800
Subject: [PATCH 3/8] Fix: broken import on MetricExport.   Updated snapshots

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
---
 .../__tests__/query_utils.test.tsx            |   17 +-
 public/components/common/query_utils/index.ts |    6 +-
 .../custom_panel_view.test.tsx.snap           |    8 +-
 .../__snapshots__/utils.test.tsx.snap         |   48 +-
 .../__snapshots__/panel_grid.test.tsx.snap    |    4 +-
 .../visualization_container.test.tsx.snap     |    7 +-
 .../__snapshots__/sidebar.test.tsx.snap       |  238 +-
 .../__snapshots__/config_panel.test.tsx.snap  |  106 +-
 .../saved_query_table.test.tsx.snap           |    4 +
 .../__snapshots__/searchbar.test.tsx.snap     |   16 +-
 .../__snapshots__/sidebar.test.tsx.snap       |    8 +-
 .../metrics_export_panel.test.tsx.snap        |  290 +-
 .../__snapshots__/top_menu.test.tsx.snap      | 2631 +----------------
 .../__tests__/metrics_export_panel.test.tsx   |   15 +-
 .../top_menu/__tests__/top_menu.test.tsx      |  154 +-
 .../metrics/top_menu/metrics_export.tsx       |    2 +-
 .../__snapshots__/metrics_grid.test.tsx.snap  | 1490 ++--------
 .../view/__tests__/metrics_grid.test.tsx      |    2 +
 .../__snapshots__/paragraphs.test.tsx.snap    |    2 +-
 .../__tests__/__snapshots__/bar.test.tsx.snap |    8 +-
 .../__snapshots__/heatmap.test.tsx.snap       |    4 +-
 .../__snapshots__/histogram.test.tsx.snap     |    8 +-
 .../horizontal_bar.test.tsx.snap              |    8 +-
 .../__snapshots__/line.test.tsx.snap          |    8 +-
 .../__tests__/__snapshots__/pie.test.tsx.snap |    8 +-
 .../__snapshots__/text.test.tsx.snap          |    4 +-
 .../__snapshots__/treemap.test.tsx.snap       |    4 +-
 test/metrics_contants.ts                      |   47 +
 28 files changed, 1004 insertions(+), 4143 deletions(-)

diff --git a/public/components/common/query_utils/__tests__/query_utils.test.tsx b/public/components/common/query_utils/__tests__/query_utils.test.tsx
index 1e185316e..2cd7bdfb5 100644
--- a/public/components/common/query_utils/__tests__/query_utils.test.tsx
+++ b/public/components/common/query_utils/__tests__/query_utils.test.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { parsePromQLIntoKeywords } from '../';
+import { findMinInterval, parsePromQLIntoKeywords } from '../';
 
 describe('Query Utils', () => {
   describe('parsePromQLIntoKeywords', () => {
@@ -43,4 +43,19 @@ describe('Query Utils', () => {
       });
     });
   });
+  describe('findMinInterval by moment strings', () => {
+    it.each([
+      ['now-3y', 'y'],
+      ['now-23M', 'w'],
+      ['now-4M', 'w'],
+      ['now-3w', 'd'],
+      ['now-40h', 'h'], // less than 2 days
+      ['now-119m', 'm'],
+      ['now-59s', 's'],
+      ['now-900ms', 'ms'],
+    ])("when input is '{0}' expect span '{3}'", (start, span) => {
+      const minInterval = findMinInterval(start, 'now');
+      expect(minInterval).toEqual(span);
+    });
+  });
 });
diff --git a/public/components/common/query_utils/index.ts b/public/components/common/query_utils/index.ts
index e200bf013..489afad13 100644
--- a/public/components/common/query_utils/index.ts
+++ b/public/components/common/query_utils/index.ts
@@ -51,12 +51,8 @@ export const findMinInterval = (start: string = '', end: string = '') => {
   else if (diffSeconds <= 86400 * 2) minInterval = 'h';
   // less than 1 month
   else if (diffSeconds <= 86400 * 31) minInterval = 'd';
-  // less than 3 months
-  else if (diffSeconds <= 86400 * 93) minInterval = 'w';
   // less than 2 year
-  else if (diffSeconds <= 86400 * 366) minInterval = 'w';
-
-  console.log('findMinInterval', { momentStart, momentEnd, diffSeconds, minInterval });
+  else if (diffSeconds <= 86400 * 366 * 2) minInterval = 'w';
 
   return minInterval;
 };
diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
index 019a73b7a..a39ce7ff2 100644
--- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
+++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
@@ -2245,6 +2245,7 @@ exports[`Panels View Component renders panel view container with visualizations
                           "xxs": 1,
                         }
                       }
+                      draggableHandle=".mouseGrabber"
                       layouts={
                         Object {
                           "lg": Array [],
@@ -2275,6 +2276,7 @@ exports[`Panels View Component renders panel view container with visualizations
                             "xxs": 1,
                           }
                         }
+                        draggableHandle=".mouseGrabber"
                         layouts={
                           Object {
                             "lg": Array [],
@@ -2294,7 +2296,7 @@ exports[`Panels View Component renders panel view container with visualizations
                           compactType="vertical"
                           containerPadding={null}
                           draggableCancel=""
-                          draggableHandle=""
+                          draggableHandle=".mouseGrabber"
                           isDraggable={true}
                           isResizable={true}
                           layout={Array []}
@@ -4332,6 +4334,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                           "xxs": 1,
                         }
                       }
+                      draggableHandle=".mouseGrabber"
                       layouts={
                         Object {
                           "lg": Array [],
@@ -4362,6 +4365,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                             "xxs": 1,
                           }
                         }
+                        draggableHandle=".mouseGrabber"
                         layouts={
                           Object {
                             "lg": Array [],
@@ -4381,7 +4385,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                           compactType="vertical"
                           containerPadding={null}
                           draggableCancel=""
-                          draggableHandle=""
+                          draggableHandle=".mouseGrabber"
                           isDraggable={true}
                           isResizable={true}
                           layout={Array []}
diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
index bd5d1ac5d..60c8ec019 100644
--- a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
+++ b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -257,7 +257,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                         "props": Object {
                           "defaultSelections": Array [
                             Object {
-                              "id": "h",
+                              "id": "v",
                               "name": "Right",
                             },
                           ],
@@ -420,7 +420,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
           "id": "bar",
           "label": "Vertical bar",
           "labelangle": 0,
-          "legendposition": "h",
+          "legendposition": "v",
           "linewidth": 0,
           "mode": "group",
           "name": "bar",
@@ -712,7 +712,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
-                                "id": "h",
+                                "id": "v",
                                 "name": "Right",
                               },
                             ],
@@ -875,7 +875,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
             "id": "bar",
             "label": "Vertical bar",
             "labelangle": 0,
-            "legendposition": "h",
+            "legendposition": "v",
             "linewidth": 0,
             "mode": "group",
             "name": "bar",
@@ -1190,7 +1190,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "h",
+                                  "id": "v",
                                   "name": "Right",
                                 },
                               ],
@@ -1353,7 +1353,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               "id": "bar",
               "label": "Vertical bar",
               "labelangle": 0,
-              "legendposition": "h",
+              "legendposition": "v",
               "linewidth": 0,
               "mode": "group",
               "name": "bar",
@@ -1452,7 +1452,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               "height": 1180,
               "hovermode": "closest",
               "legend": Object {
-                "orientation": "h",
+                "orientation": "v",
                 "traceorder": "normal",
               },
               "margin": Object {
@@ -1547,7 +1547,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 "height": 1180,
                 "hovermode": "closest",
                 "legend": Object {
-                  "orientation": "h",
+                  "orientation": "v",
                   "traceorder": "normal",
                 },
                 "margin": Object {
@@ -1812,7 +1812,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                         "props": Object {
                           "defaultSelections": Array [
                             Object {
-                              "id": "h",
+                              "id": "v",
                               "name": "Right",
                             },
                           ],
@@ -2328,7 +2328,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
-                                "id": "h",
+                                "id": "v",
                                 "name": "Right",
                               },
                             ],
@@ -2652,7 +2652,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
           Object {
             "colorway": Array [
               "#3CA1C7",
-              "#8C55A3",
+              "#54B399",
               "#DB748A",
               "#F2BE4B",
               "#68CCC2",
@@ -2898,7 +2898,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "h",
+                                  "id": "v",
                                   "name": "Right",
                                 },
                               ],
@@ -3267,7 +3267,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
               "autosize": true,
               "colorway": Array [
                 "#3CA1C7",
-                "#8C55A3",
+                "#54B399",
                 "#DB748A",
                 "#F2BE4B",
                 "#68CCC2",
@@ -3279,7 +3279,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
               ],
               "height": 1180,
               "legend": Object {
-                "orientation": "h",
+                "orientation": "v",
                 "traceorder": "normal",
               },
               "margin": Object {
@@ -3373,7 +3373,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                 "barmode": "stack",
                 "colorway": Array [
                   "#3CA1C7",
-                  "#8C55A3",
+                  "#54B399",
                   "#DB748A",
                   "#F2BE4B",
                   "#68CCC2",
@@ -3386,7 +3386,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                 "height": 1180,
                 "hovermode": "closest",
                 "legend": Object {
-                  "orientation": "h",
+                  "orientation": "v",
                   "traceorder": "normal",
                 },
                 "margin": Object {
@@ -3694,7 +3694,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                         "props": Object {
                           "defaultSelections": Array [
                             Object {
-                              "id": "h",
+                              "id": "v",
                               "name": "Right",
                             },
                           ],
@@ -3857,7 +3857,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
           "id": "horizontal_bar",
           "label": "Horizontal bar",
           "labelangle": 0,
-          "legendposition": "h",
+          "legendposition": "v",
           "linewidth": 0,
           "mode": "group",
           "name": "horizontal_bar",
@@ -4149,7 +4149,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
-                                "id": "h",
+                                "id": "v",
                                 "name": "Right",
                               },
                             ],
@@ -4312,7 +4312,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
             "id": "horizontal_bar",
             "label": "Horizontal bar",
             "labelangle": 0,
-            "legendposition": "h",
+            "legendposition": "v",
             "linewidth": 0,
             "mode": "group",
             "name": "horizontal_bar",
@@ -4627,7 +4627,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "h",
+                                  "id": "v",
                                   "name": "Right",
                                 },
                               ],
@@ -4790,7 +4790,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               "id": "horizontal_bar",
               "label": "Horizontal bar",
               "labelangle": 0,
-              "legendposition": "h",
+              "legendposition": "v",
               "linewidth": 0,
               "mode": "group",
               "name": "horizontal_bar",
@@ -4889,7 +4889,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               "height": 1180,
               "hovermode": "closest",
               "legend": Object {
-                "orientation": "h",
+                "orientation": "v",
                 "traceorder": "normal",
               },
               "margin": Object {
@@ -4984,7 +4984,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 "height": 1180,
                 "hovermode": "closest",
                 "legend": Object {
-                  "orientation": "h",
+                  "orientation": "v",
                   "traceorder": "normal",
                 },
                 "margin": Object {
diff --git a/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap b/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
index 51b0c4a75..59c4928e0 100644
--- a/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
+++ b/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
@@ -311,6 +311,7 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat
         "xxs": 1,
       }
     }
+    draggableHandle=".mouseGrabber"
     layouts={
       Object {
         "lg": Array [],
@@ -341,6 +342,7 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat
           "xxs": 1,
         }
       }
+      draggableHandle=".mouseGrabber"
       layouts={
         Object {
           "lg": Array [],
@@ -360,7 +362,7 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat
         compactType="vertical"
         containerPadding={null}
         draggableCancel=""
-        draggableHandle=""
+        draggableHandle=".mouseGrabber"
         isDraggable={true}
         isResizable={true}
         layout={Array []}
diff --git a/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap b/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
index a38755e25..220bde05b 100644
--- a/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
+++ b/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
@@ -42,9 +42,7 @@ exports[`Visualization Container Component renders add visualization container 1
         className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero panel-full-width "
         data-test-subj="VisualizationPanel"
       >
-        <div
-          className="mouseGrabber"
-        >
+        <div>
           <EuiFlexGroup
             justifyContent="spaceBetween"
           >
@@ -52,6 +50,7 @@ exports[`Visualization Container Component renders add visualization container 1
               className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <EuiFlexItem
+                className="mouseGrabber"
                 style={
                   Object {
                     "width": "35%",
@@ -59,7 +58,7 @@ exports[`Visualization Container Component renders add visualization container 1
                 }
               >
                 <div
-                  className="euiFlexItem"
+                  className="euiFlexItem mouseGrabber"
                   style={
                     Object {
                       "width": "35%",
diff --git a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index fe7ab15c3..28c6cd812 100644
--- a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -701,6 +701,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
         "unselectedFields": Array [],
       }
     }
+    tabId="DEFAULT_INDEX_PATTERNS"
   >
     <I18nProvider>
       <IntlProvider
@@ -1152,6 +1153,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={true}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -1283,6 +1285,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -1309,13 +1312,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -1536,6 +1540,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={true}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -1667,6 +1672,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -1693,13 +1699,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -1920,6 +1927,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={true}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -2051,6 +2059,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -2077,13 +2086,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -2304,6 +2314,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={true}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -2435,6 +2446,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -2461,13 +2473,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -2688,6 +2701,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={true}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -2819,6 +2833,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -2845,13 +2860,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -3072,6 +3088,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={true}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -3203,6 +3220,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -3229,13 +3247,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -3614,6 +3633,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -3719,14 +3739,15 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
+                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={false}
+                                                                          disabled={true}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -3800,6 +3821,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -3826,13 +3848,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -4054,6 +4077,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -4185,6 +4209,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -4211,13 +4236,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -4439,6 +4465,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -4570,6 +4597,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -4596,13 +4624,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -4824,6 +4853,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -4955,6 +4985,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -4981,13 +5012,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -5209,6 +5241,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -5314,14 +5347,15 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
+                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={false}
+                                                                          disabled={true}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -5395,6 +5429,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -5421,13 +5456,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -5649,6 +5685,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -5780,6 +5817,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -5806,13 +5844,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -6034,6 +6073,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -6139,14 +6179,15 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
+                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={false}
+                                                                          disabled={true}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -6220,6 +6261,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -6246,13 +6288,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -6474,6 +6517,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -6579,14 +6623,15 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
+                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={false}
+                                                                          disabled={true}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -6660,6 +6705,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -6686,13 +6732,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -6914,6 +6961,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -7045,6 +7093,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -7071,13 +7120,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -7299,6 +7349,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -7430,6 +7481,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -7456,13 +7508,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -7684,6 +7737,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -7815,6 +7869,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -7841,13 +7896,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -8069,6 +8125,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -8174,14 +8231,15 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
+                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={false}
+                                                                          disabled={true}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -8255,6 +8313,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -8281,13 +8340,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -8509,6 +8569,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -8640,6 +8701,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -8666,13 +8728,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -8894,6 +8957,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -8999,14 +9063,15 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
+                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={false}
+                                                                          disabled={true}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -9080,6 +9145,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -9106,13 +9172,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -9334,6 +9401,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -9439,14 +9507,15 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
+                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={false}
+                                                                          disabled={true}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -9520,6 +9589,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -9546,13 +9616,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -9774,6 +9845,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -9879,14 +9951,15 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
+                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={false}
+                                                                          disabled={true}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -9960,6 +10033,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -9986,13 +10060,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -10214,6 +10289,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -10319,14 +10395,15 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
+                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={false}
+                                                                          disabled={true}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -10400,6 +10477,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -10426,13 +10504,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -10654,6 +10733,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -10826,6 +10906,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -10852,13 +10933,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -11080,6 +11162,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -11185,14 +11268,15 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
                                                                         iconType="inputOutput"
+                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_pattern"
-                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                          disabled={false}
+                                                                          disabled={true}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -11266,6 +11350,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -11292,13 +11377,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
@@ -11520,6 +11606,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selected={false}
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
+                                                          tabId="DEFAULT_INDEX_PATTERNS"
                                                         >
                                                           <EuiFlexGroup
                                                             alignItems="center"
@@ -11638,14 +11725,15 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultTimestamp"
                                                                         iconType="inputOutput"
+                                                                        isDisabled={true}
                                                                         onClick={[Function]}
                                                                         size="xs"
                                                                       >
                                                                         <button
                                                                           aria-labelledby="override_timestamp"
-                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
                                                                           data-test-subj="eventExplorer__overrideDefaultTimestamp"
-                                                                          disabled={false}
+                                                                          disabled={true}
                                                                           onClick={[Function]}
                                                                           type="button"
                                                                         >
@@ -11706,6 +11794,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             aria-label="inspect"
                                                                             className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
+                                                                            isDisabled={true}
                                                                             onClick={[Function]}
                                                                             size="xs"
                                                                           />
@@ -11732,13 +11821,14 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                               aria-label="inspect"
                                                                               className="dscSidebarField__actionButton"
                                                                               iconType="inspect"
+                                                                              isDisabled={true}
                                                                               onClick={[Function]}
                                                                               size="xs"
                                                                             >
                                                                               <button
                                                                                 aria-label="inspect"
-                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
-                                                                                disabled={false}
+                                                                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={true}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
index aa52b1155..d22ac352b 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -465,7 +465,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "h",
+                            "id": "v",
                             "name": "Right",
                           },
                         ],
@@ -628,7 +628,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "h",
+        "legendposition": "v",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
@@ -787,7 +787,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "h",
+                                  "id": "v",
                                   "name": "Right",
                                 },
                               ],
@@ -951,7 +951,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
               "id": "bar",
               "label": "Vertical bar",
               "labelangle": 0,
-              "legendposition": "h",
+              "legendposition": "v",
               "linewidth": 0,
               "mode": "group",
               "name": "bar",
@@ -1092,7 +1092,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "h",
+                                  "id": "v",
                                   "name": "Right",
                                 },
                               ],
@@ -1255,7 +1255,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
               "id": "horizontal_bar",
               "label": "Horizontal bar",
               "labelangle": 0,
-              "legendposition": "h",
+              "legendposition": "v",
               "linewidth": 0,
               "mode": "group",
               "name": "horizontal_bar",
@@ -1337,7 +1337,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "h",
+                                  "id": "v",
                                   "name": "Right",
                                 },
                               ],
@@ -1688,13 +1688,13 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "h",
+                                  "id": "v",
                                   "name": "Right",
                                 },
                               ],
                               "options": Array [
                                 Object {
-                                  "id": "h",
+                                  "id": "v",
                                   "name": "Right",
                                 },
                                 Object {
@@ -1821,7 +1821,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
               "icontype": "visPie",
               "id": "pie",
               "label": "Pie",
-              "legendposition": "h",
+              "legendposition": "v",
               "mode": "pie",
               "name": "pie",
               "seriesaxis": "yaxis",
@@ -2484,7 +2484,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "h",
+                                  "id": "v",
                                   "name": "Right",
                                 },
                               ],
@@ -2648,7 +2648,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
               "id": "bar",
               "label": "Vertical bar",
               "labelangle": 0,
-              "legendposition": "h",
+              "legendposition": "v",
               "linewidth": 0,
               "mode": "group",
               "name": "bar",
@@ -2821,7 +2821,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 "props": Object {
                                   "defaultSelections": Array [
                                     Object {
-                                      "id": "h",
+                                      "id": "v",
                                       "name": "Right",
                                     },
                                   ],
@@ -2985,7 +2985,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                   "id": "bar",
                   "label": "Vertical bar",
                   "labelangle": 0,
-                  "legendposition": "h",
+                  "legendposition": "v",
                   "linewidth": 0,
                   "mode": "group",
                   "name": "bar",
@@ -3163,7 +3163,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       "props": Object {
                                         "defaultSelections": Array [
                                           Object {
-                                            "id": "h",
+                                            "id": "v",
                                             "name": "Right",
                                           },
                                         ],
@@ -3328,7 +3328,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       id="bar"
                       key="vertical bar"
                       labelangle={0}
-                      legendposition="h"
+                      legendposition="v"
                       linewidth={0}
                       mode="group"
                       name="bar"
@@ -3440,7 +3440,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                         "props": Object {
                                           "defaultSelections": Array [
                                             Object {
-                                              "id": "h",
+                                              "id": "v",
                                               "name": "Right",
                                             },
                                           ],
@@ -3604,7 +3604,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           "id": "bar",
                           "label": "Vertical bar",
                           "labelangle": 0,
-                          "legendposition": "h",
+                          "legendposition": "v",
                           "linewidth": 0,
                           "mode": "group",
                           "name": "bar",
@@ -3783,7 +3783,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                         "props": Object {
                                           "defaultSelections": Array [
                                             Object {
-                                              "id": "h",
+                                              "id": "v",
                                               "name": "Right",
                                             },
                                           ],
@@ -3947,7 +3947,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         icontype="visBarVerticalStacked"
                         id="bar"
                         labelangle={0}
-                        legendposition="h"
+                        legendposition="v"
                         linewidth={0}
                         mode="group"
                         name="bar"
@@ -4096,7 +4096,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             "props": Object {
                                               "defaultSelections": Array [
                                                 Object {
-                                                  "id": "h",
+                                                  "id": "v",
                                                   "name": "Right",
                                                 },
                                               ],
@@ -4259,7 +4259,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             icontype="visBarVerticalStacked"
                             id="bar"
                             labelangle={0}
-                            legendposition="h"
+                            legendposition="v"
                             linewidth={0}
                             mode="group"
                             name="bar"
@@ -4577,7 +4577,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
-                                "id": "h",
+                                "id": "v",
                                 "name": "Right",
                               },
                             ],
@@ -5187,7 +5187,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "props": Object {
                                     "defaultSelections": Array [
                                       Object {
-                                        "id": "h",
+                                        "id": "v",
                                         "name": "Right",
                                       },
                                     ],
@@ -5350,7 +5350,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                     "id": "bar",
                     "label": "Vertical bar",
                     "labelangle": 0,
-                    "legendposition": "h",
+                    "legendposition": "v",
                     "linewidth": 0,
                     "mode": "group",
                     "name": "bar",
@@ -5519,7 +5519,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "h",
+                                  "id": "v",
                                   "name": "Right",
                                 },
                               ],
@@ -6129,7 +6129,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     "props": Object {
                                       "defaultSelections": Array [
                                         Object {
-                                          "id": "h",
+                                          "id": "v",
                                           "name": "Right",
                                         },
                                       ],
@@ -6292,7 +6292,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       "id": "bar",
                       "label": "Vertical bar",
                       "labelangle": 0,
-                      "legendposition": "h",
+                      "legendposition": "v",
                       "linewidth": 0,
                       "mode": "group",
                       "name": "bar",
@@ -6502,7 +6502,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
-                                "id": "h",
+                                "id": "v",
                                 "name": "Right",
                               },
                             ],
@@ -7112,7 +7112,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "props": Object {
                                     "defaultSelections": Array [
                                       Object {
-                                        "id": "h",
+                                        "id": "v",
                                         "name": "Right",
                                       },
                                     ],
@@ -7275,7 +7275,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                     "id": "bar",
                     "label": "Vertical bar",
                     "labelangle": 0,
-                    "legendposition": "h",
+                    "legendposition": "v",
                     "linewidth": 0,
                     "mode": "group",
                     "name": "bar",
@@ -7823,7 +7823,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "props": Object {
                                                   "defaultSelections": Array [
                                                     Object {
-                                                      "id": "h",
+                                                      "id": "v",
                                                       "name": "Right",
                                                     },
                                                   ],
@@ -7986,7 +7986,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "id": "bar",
                                   "label": "Vertical bar",
                                   "labelangle": 0,
-                                  "legendposition": "h",
+                                  "legendposition": "v",
                                   "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
@@ -8802,7 +8802,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "props": Object {
                                                   "defaultSelections": Array [
                                                     Object {
-                                                      "id": "h",
+                                                      "id": "v",
                                                       "name": "Right",
                                                     },
                                                   ],
@@ -8965,7 +8965,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "id": "bar",
                                   "label": "Vertical bar",
                                   "labelangle": 0,
-                                  "legendposition": "h",
+                                  "legendposition": "v",
                                   "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
@@ -9792,7 +9792,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "props": Object {
                                     "defaultSelections": Array [
                                       Object {
-                                        "id": "h",
+                                        "id": "v",
                                         "name": "Right",
                                       },
                                     ],
@@ -10280,7 +10280,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "props": Object {
                                                   "defaultSelections": Array [
                                                     Object {
-                                                      "id": "h",
+                                                      "id": "v",
                                                       "name": "Right",
                                                     },
                                                   ],
@@ -10443,7 +10443,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "id": "bar",
                                   "label": "Vertical bar",
                                   "labelangle": 0,
-                                  "legendposition": "h",
+                                  "legendposition": "v",
                                   "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
@@ -10832,7 +10832,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           defaultSelections={
                                             Array [
                                               Object {
-                                                "id": "h",
+                                                "id": "v",
                                                 "name": "Right",
                                               },
                                             ]
@@ -10852,7 +10852,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             ]
                                           }
                                           handleButtonChange={[Function]}
-                                          idSelected="h"
+                                          idSelected="v"
                                           legend="Position"
                                           options={
                                             Array [
@@ -10895,7 +10895,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             <EuiButtonGroup
                                               buttonSize="compressed"
                                               id="random_html_id"
-                                              idSelected="h"
+                                              idSelected="v"
                                               isFullWidth={false}
                                               legend="Position"
                                               name="Position"
@@ -10936,7 +10936,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                     id="v"
                                                     isDisabled={false}
                                                     isIconOnly={false}
-                                                    isSelected={false}
+                                                    isSelected={true}
                                                     key="0"
                                                     label="Right"
                                                     name="Right"
@@ -10945,7 +10945,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                   >
                                                     <EuiButtonDisplay
                                                       baseClassName="euiButtonGroupButton"
-                                                      className=""
+                                                      className="euiButtonGroupButton-isSelected"
                                                       color="text"
                                                       element="label"
                                                       fill={false}
@@ -10963,7 +10963,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                       }
                                                     >
                                                       <label
-                                                        className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                                        className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected"
                                                         disabled={false}
                                                         htmlFor="random_html_id"
                                                         onClick={[Function]}
@@ -10994,7 +10994,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                               title="Right"
                                                             >
                                                               <input
-                                                                checked={false}
+                                                                checked={true}
                                                                 className="euiScreenReaderOnly"
                                                                 data-test-subj="v"
                                                                 disabled={false}
@@ -11016,7 +11016,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                     id="h"
                                                     isDisabled={false}
                                                     isIconOnly={false}
-                                                    isSelected={true}
+                                                    isSelected={false}
                                                     key="1"
                                                     label="Bottom"
                                                     name="Bottom"
@@ -11025,7 +11025,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                   >
                                                     <EuiButtonDisplay
                                                       baseClassName="euiButtonGroupButton"
-                                                      className="euiButtonGroupButton-isSelected"
+                                                      className=""
                                                       color="text"
                                                       element="label"
                                                       fill={false}
@@ -11043,7 +11043,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                       }
                                                     >
                                                       <label
-                                                        className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected"
+                                                        className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
                                                         disabled={false}
                                                         htmlFor="random_html_id"
                                                         onClick={[Function]}
@@ -11074,7 +11074,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                               title="Bottom"
                                                             >
                                                               <input
-                                                                checked={true}
+                                                                checked={false}
                                                                 className="euiScreenReaderOnly"
                                                                 data-test-subj="h"
                                                                 disabled={false}
@@ -11779,7 +11779,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "props": Object {
                                                   "defaultSelections": Array [
                                                     Object {
-                                                      "id": "h",
+                                                      "id": "v",
                                                       "name": "Right",
                                                     },
                                                   ],
@@ -11942,7 +11942,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "id": "bar",
                                   "label": "Vertical bar",
                                   "labelangle": 0,
-                                  "legendposition": "h",
+                                  "legendposition": "v",
                                   "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
@@ -14843,7 +14843,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "props": Object {
                                                   "defaultSelections": Array [
                                                     Object {
-                                                      "id": "h",
+                                                      "id": "v",
                                                       "name": "Right",
                                                     },
                                                   ],
@@ -15006,7 +15006,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "id": "bar",
                                   "label": "Vertical bar",
                                   "labelangle": 0,
-                                  "legendposition": "h",
+                                  "legendposition": "v",
                                   "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
diff --git a/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap b/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap
index 5cd192bb4..2fbfe3658 100644
--- a/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap
+++ b/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap
@@ -97,6 +97,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
             "objectId": "Kocoln0BYMuJGDsOwDma",
             "objectType": "savedVisualization",
             "query": "source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier",
+            "subType": undefined,
             "timestamp": "timestamp",
           },
           "id": "Kocoln0BYMuJGDsOwDma",
@@ -112,6 +113,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
             "objectId": "KIcoln0BYMuJGDsOhDmk",
             "objectType": "savedVisualization",
             "query": "source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier",
+            "subType": undefined,
             "timestamp": "timestamp",
           },
           "id": "KIcoln0BYMuJGDsOhDmk",
@@ -597,6 +599,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
                 "objectId": "Kocoln0BYMuJGDsOwDma",
                 "objectType": "savedVisualization",
                 "query": "source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier",
+                "subType": undefined,
                 "timestamp": "timestamp",
               },
               "id": "Kocoln0BYMuJGDsOwDma",
@@ -612,6 +615,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
                 "objectId": "KIcoln0BYMuJGDsOhDmk",
                 "objectType": "savedVisualization",
                 "query": "source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier",
+                "subType": undefined,
                 "timestamp": "timestamp",
               },
               "id": "KIcoln0BYMuJGDsOhDmk",
diff --git a/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap b/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
index 8ad8b6d5f..1db2b355b 100644
--- a/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
+++ b/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`Search Bar Component Search Side Bar Component with available metrics 1
         box={
           Object {
             "incremental": true,
-            "placeholder": "Search for metrics",
+            "placeholder": "Search to filter Available Metrics",
           }
         }
         defaultQuery=""
@@ -49,7 +49,7 @@ exports[`Search Bar Component Search Side Bar Component with available metrics 1
                   incremental={true}
                   isInvalid={false}
                   onSearch={[Function]}
-                  placeholder="Search for metrics"
+                  placeholder="Search to filter Available Metrics"
                   query=""
                 >
                   <EuiFieldSearch
@@ -63,7 +63,7 @@ exports[`Search Bar Component Search Side Bar Component with available metrics 1
                     isInvalid={false}
                     isLoading={false}
                     onSearch={[Function]}
-                    placeholder="Search for metrics"
+                    placeholder="Search to filter Available Metrics"
                   >
                     <EuiFormControlLayout
                       compressed={false}
@@ -85,7 +85,7 @@ exports[`Search Bar Component Search Side Bar Component with available metrics 1
                               className="euiFieldSearch euiFieldSearch--fullWidth"
                               defaultValue=""
                               onKeyUp={[Function]}
-                              placeholder="Search for metrics"
+                              placeholder="Search to filter Available Metrics"
                               type="search"
                             />
                           </EuiValidatableControl>
@@ -176,7 +176,7 @@ exports[`Search Bar Component Search Side Bar Component with no available metric
         box={
           Object {
             "incremental": true,
-            "placeholder": "Search for metrics",
+            "placeholder": "Search to filter Available Metrics",
           }
         }
         defaultQuery=""
@@ -202,7 +202,7 @@ exports[`Search Bar Component Search Side Bar Component with no available metric
                   incremental={true}
                   isInvalid={false}
                   onSearch={[Function]}
-                  placeholder="Search for metrics"
+                  placeholder="Search to filter Available Metrics"
                   query=""
                 >
                   <EuiFieldSearch
@@ -216,7 +216,7 @@ exports[`Search Bar Component Search Side Bar Component with no available metric
                     isInvalid={false}
                     isLoading={false}
                     onSearch={[Function]}
-                    placeholder="Search for metrics"
+                    placeholder="Search to filter Available Metrics"
                   >
                     <EuiFormControlLayout
                       compressed={false}
@@ -238,7 +238,7 @@ exports[`Search Bar Component Search Side Bar Component with no available metric
                               className="euiFieldSearch euiFieldSearch--fullWidth"
                               defaultValue=""
                               onKeyUp={[Function]}
-                              placeholder="Search for metrics"
+                              placeholder="Search to filter Available Metrics"
                               type="search"
                             />
                           </EuiValidatableControl>
diff --git a/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index d4daaa853..8aeeceac5 100644
--- a/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -111,7 +111,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                   box={
                     Object {
                       "incremental": true,
-                      "placeholder": "Search for metrics",
+                      "placeholder": "Search to filter Available Metrics",
                     }
                   }
                   defaultQuery=""
@@ -137,7 +137,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                             incremental={true}
                             isInvalid={false}
                             onSearch={[Function]}
-                            placeholder="Search for metrics"
+                            placeholder="Search to filter Available Metrics"
                             query=""
                           >
                             <EuiFieldSearch
@@ -151,7 +151,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                               isInvalid={false}
                               isLoading={false}
                               onSearch={[Function]}
-                              placeholder="Search for metrics"
+                              placeholder="Search to filter Available Metrics"
                             >
                               <EuiFormControlLayout
                                 compressed={false}
@@ -173,7 +173,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                                         className="euiFieldSearch euiFieldSearch--fullWidth"
                                         defaultValue=""
                                         onKeyUp={[Function]}
-                                        placeholder="Search for metrics"
+                                        placeholder="Search to filter Available Metrics"
                                         type="search"
                                       />
                                     </EuiValidatableControl>
diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
index b37e5a422..e65a3237b 100644
--- a/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
+++ b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
@@ -13,41 +13,53 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
   }
 >
   <Component
-    http={[MockFunction]}
-    selectedPanelOptions={Array []}
-    setSelectedPanelOptions={[MockFunction]}
-    setVisualizationsMetaData={[MockFunction]}
-    sortedMetricsLayout={
+    availableDashboards={
       Array [
         Object {
-          "h": 2,
-          "id": "Y4muP4QBiaYaSxpXk7r8",
-          "query": Object {
-            "aggregation": "avg",
-            "attributesGroupBy": Array [],
-            "type": "savedCustomMetric",
+          "attributes": Object {
+            "title": "[Flights] Global Flight Dashboard",
           },
-          "savedVisualizationId": "Y4muP4QBiaYaSxpXk7r8",
-          "w": 12,
-          "x": 0,
-          "y": 0,
+          "id": "7adfa750-4c81-11e8-b3d7-01146121b73d",
+          "title": "[Flights] Global Flight Dashboard",
+          "type": "dashboard",
         },
         Object {
-          "h": 2,
-          "id": "prometheus.process_resident_memory_bytes",
-          "query": Object {
-            "aggregation": "avg",
-            "attributesGroupBy": Array [],
-            "type": "prometheusMetric",
-          },
-          "savedVisualizationId": "prometheus.process_resident_memory_bytes",
-          "w": 12,
-          "x": 0,
-          "y": 2,
+          "id": "fdf2bb60-7a5b-11ee-929a-5f1a2dc08039",
+          "name": "[Logs] Web traffic Panel",
+          "objectId": "observability-panel:fdf2bb60-7a5b-11ee-929a-5f1a2dc08039",
+          "savedObject": true,
+          "title": "[Logs] Web traffic Panel",
+          "type": "observability-panel",
+        },
+      ]
+    }
+    metricsToExport={
+      Array [
+        Object {
+          "aggregation": "avg",
+          "attributesGroupBy": Array [],
+          "availableAttributes": Array [],
+          "catalog": "my_prometheus",
+          "catalogSourceName": "my_prometheus",
+          "catalogTableName": "go_memstats_alloc_bytes",
+          "id": "my_prometheus.go_memstats_alloc_bytes",
+          "index": "my_prometheus.go_memstats_alloc_bytes",
+          "name": "my_prometheus.go_memstats_alloc_bytes",
+          "recentlyCreated": false,
+          "sub_type": "promqlmetric",
+          "type": "line",
+        },
+        Object {
+          "catalog": "CUSTOM_METRICS",
+          "id": "observability-visualization:84c73aa0-84aa-11ee-96e0-7bfa0b41d0fc",
+          "name": "my_prometheus.go_memstats_alloc_bytes_total",
+          "query": "source = my_prometheus.query_range('sum by(instance,job) (go_memstats_alloc_bytes_total)', 1700071440, 1700157840, '1h')",
+          "recentlyCreated": false,
+          "savedVisualizationId": "observability-visualization:84c73aa0-84aa-11ee-96e0-7bfa0b41d0fc",
+          "type": "line",
         },
       ]
     }
-    visualizationsMetaData={Array []}
   >
     <div
       style={
@@ -101,7 +113,32 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
-              options={Array []}
+              options={
+                Array [
+                  Object {
+                    "label": "[Flights] Global Flight Dashboard",
+                    "panel": Object {
+                      "attributes": Object {
+                        "title": "[Flights] Global Flight Dashboard",
+                      },
+                      "id": "7adfa750-4c81-11e8-b3d7-01146121b73d",
+                      "title": "[Flights] Global Flight Dashboard",
+                      "type": "dashboard",
+                    },
+                  },
+                  Object {
+                    "label": "[Logs] Web traffic Panel",
+                    "panel": Object {
+                      "id": "fdf2bb60-7a5b-11ee-929a-5f1a2dc08039",
+                      "name": "[Logs] Web traffic Panel",
+                      "objectId": "observability-panel:fdf2bb60-7a5b-11ee-929a-5f1a2dc08039",
+                      "savedObject": true,
+                      "title": "[Logs] Web traffic Panel",
+                      "type": "observability-panel",
+                    },
+                  },
+                ]
+              }
               placeholder="Select dashboards/applications"
               selectedOptions={Array []}
               singleSelection={false}
@@ -316,6 +353,203 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
           </div>
         </div>
       </EuiFormRow>
+      <div
+        style={
+          Object {
+            "maxHeight": "30vh",
+            "overflowX": "hidden",
+            "overflowY": "scroll",
+            "width": "auto",
+          }
+        }
+      >
+        <EuiForm
+          component="form"
+          key="save-panel-id-0"
+        >
+          <form
+            className="euiForm"
+          >
+            <EuiFlexGroup>
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+              >
+                <EuiFlexItem>
+                  <div
+                    className="euiFlexItem"
+                  >
+                    <EuiFormRow
+                      describedByIds={Array []}
+                      display="row"
+                      fullWidth={false}
+                      hasChildLabel={true}
+                      hasEmptyLabelSpace={false}
+                      label="Metric Name #1"
+                      labelType="label"
+                    >
+                      <div
+                        className="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__labelWrapper"
+                        >
+                          <EuiFormLabel
+                            className="euiFormRow__label"
+                            htmlFor="random_html_id"
+                            isFocused={false}
+                            type="label"
+                          >
+                            <label
+                              className="euiFormLabel euiFormRow__label"
+                              htmlFor="random_html_id"
+                            >
+                              Metric Name #1
+                            </label>
+                          </EuiFormLabel>
+                        </div>
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <EuiFieldText
+                            data-test-subj="metrics__querySaveName"
+                            id="random_html_id"
+                            key="metric-name-input-id-0"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            value="my_prometheus.go_memstats_alloc_bytes"
+                          >
+                            <EuiFormControlLayout
+                              fullWidth={false}
+                              inputId="random_html_id"
+                            >
+                              <div
+                                className="euiFormControlLayout"
+                              >
+                                <div
+                                  className="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <EuiValidatableControl>
+                                    <input
+                                      className="euiFieldText"
+                                      data-test-subj="metrics__querySaveName"
+                                      id="random_html_id"
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onFocus={[Function]}
+                                      type="text"
+                                      value="my_prometheus.go_memstats_alloc_bytes"
+                                    />
+                                  </EuiValidatableControl>
+                                  <EuiFormControlLayoutIcons />
+                                </div>
+                              </div>
+                            </EuiFormControlLayout>
+                          </EuiFieldText>
+                        </div>
+                      </div>
+                    </EuiFormRow>
+                  </div>
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+          </form>
+        </EuiForm>
+        <EuiForm
+          component="form"
+          key="save-panel-id-1"
+        >
+          <form
+            className="euiForm"
+          >
+            <EuiFlexGroup>
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+              >
+                <EuiFlexItem>
+                  <div
+                    className="euiFlexItem"
+                  >
+                    <EuiFormRow
+                      describedByIds={Array []}
+                      display="row"
+                      fullWidth={false}
+                      hasChildLabel={true}
+                      hasEmptyLabelSpace={false}
+                      label="Metric Name #2"
+                      labelType="label"
+                    >
+                      <div
+                        className="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__labelWrapper"
+                        >
+                          <EuiFormLabel
+                            className="euiFormRow__label"
+                            htmlFor="random_html_id"
+                            isFocused={false}
+                            type="label"
+                          >
+                            <label
+                              className="euiFormLabel euiFormRow__label"
+                              htmlFor="random_html_id"
+                            >
+                              Metric Name #2
+                            </label>
+                          </EuiFormLabel>
+                        </div>
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <EuiFieldText
+                            data-test-subj="metrics__querySaveName"
+                            id="random_html_id"
+                            key="metric-name-input-id-1"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            value="my_prometheus.go_memstats_alloc_bytes_total"
+                          >
+                            <EuiFormControlLayout
+                              fullWidth={false}
+                              inputId="random_html_id"
+                            >
+                              <div
+                                className="euiFormControlLayout"
+                              >
+                                <div
+                                  className="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <EuiValidatableControl>
+                                    <input
+                                      className="euiFieldText"
+                                      data-test-subj="metrics__querySaveName"
+                                      id="random_html_id"
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onFocus={[Function]}
+                                      type="text"
+                                      value="my_prometheus.go_memstats_alloc_bytes_total"
+                                    />
+                                  </EuiValidatableControl>
+                                  <EuiFormControlLayoutIcons />
+                                </div>
+                              </div>
+                            </EuiFormControlLayout>
+                          </EuiFieldText>
+                        </div>
+                      </div>
+                    </EuiFormRow>
+                  </div>
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+          </form>
+        </EuiForm>
+      </div>
     </div>
   </Component>
 </Provider>
diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
index dc2ff2760..4ed0c0b16 100644
--- a/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
+++ b/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
@@ -1,2279 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Metrics Top Menu Component renders Top Menu Component when disabled in edit mode 1`] = `
-<Provider
-  store={
-    Object {
-      "dispatch": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-      Symbol(Symbol.observable): [Function],
-    }
-  }
->
-  <Component
-    IsTopPanelDisabled={true}
-    editMode={true}
-    endTime="now"
-    http={[MockFunction]}
-    onDatePickerChange={[MockFunction]}
-    panelVisualizations={
-      Array [
-        Object {
-          "h": 2,
-          "id": "Y4muP4QBiaYaSxpXk7r8",
-          "metricType": "savedCustomMetric",
-          "savedVisualizationId": "Y4muP4QBiaYaSxpXk7r8",
-          "w": 12,
-          "x": 0,
-          "y": 0,
-        },
-        Object {
-          "h": 2,
-          "id": "tomAP4QBiaYaSxpXALls",
-          "metricType": "savedCustomMetric",
-          "savedVisualizationId": "tomAP4QBiaYaSxpXALls",
-          "w": 12,
-          "x": 0,
-          "y": 2,
-        },
-        Object {
-          "h": 2,
-          "id": "prometheus.process_resident_memory_bytes",
-          "metricType": "prometheusMetric",
-          "savedVisualizationId": "prometheus.process_resident_memory_bytes",
-          "w": 12,
-          "x": 0,
-          "y": 4,
-        },
-      ]
-    }
-    recentlyUsedRanges={Array []}
-    resolutionSelectId="select_123"
-    resolutionValue="h"
-    savedObjects={
-      SavedObjects {
-        "http": [MockFunction],
-      }
-    }
-    setEditActionType={[MockFunction]}
-    setEditMode={[MockFunction]}
-    setPanelVisualizations={[MockFunction]}
-    setResolutionValue={[MockFunction]}
-    setSpanValue={[MockFunction]}
-    setToast={[MockFunction]}
-    spanValue={1}
-    startTime="now-1d"
-  >
-    <EuiFlexGroup
-      gutterSize="s"
-      justifyContent="flexEnd"
-    >
-      <div
-        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
-      >
-        <EuiFlexItem
-          grow={false}
-        >
-          <div
-            className="euiFlexItem euiFlexItem--flexGrowZero"
-          >
-            <div
-              className="resolutionSelect"
-            >
-              <EuiFieldText
-                append={
-                  <EuiSelect
-                    aria-label="resolutionSelect"
-                    className="resolutionSelectOption"
-                    data-test-subj="metrics__spanResolutionSelect"
-                    onChange={[Function]}
-                    options={
-                      Array [
-                        Object {
-                          "text": "seconds",
-                          "value": "s",
-                        },
-                        Object {
-                          "text": "minutes",
-                          "value": "m",
-                        },
-                        Object {
-                          "text": "hours",
-                          "value": "h",
-                        },
-                        Object {
-                          "text": "days",
-                          "value": "d",
-                        },
-                        Object {
-                          "text": "years",
-                          "value": "y",
-                        },
-                      ]
-                    }
-                    value="h"
-                  />
-                }
-                aria-label="resolutionField"
-                className="resolutionSelectText"
-                data-test-subj="metrics__spanValue"
-                disabled={true}
-                isInvalid={false}
-                onChange={[Function]}
-                prepend="Span Interval"
-                value={1}
-              >
-                <EuiFormControlLayout
-                  append={
-                    <EuiSelect
-                      aria-label="resolutionSelect"
-                      className="resolutionSelectOption"
-                      data-test-subj="metrics__spanResolutionSelect"
-                      onChange={[Function]}
-                      options={
-                        Array [
-                          Object {
-                            "text": "seconds",
-                            "value": "s",
-                          },
-                          Object {
-                            "text": "minutes",
-                            "value": "m",
-                          },
-                          Object {
-                            "text": "hours",
-                            "value": "h",
-                          },
-                          Object {
-                            "text": "days",
-                            "value": "d",
-                          },
-                          Object {
-                            "text": "years",
-                            "value": "y",
-                          },
-                        ]
-                      }
-                      value="h"
-                    />
-                  }
-                  fullWidth={false}
-                  prepend="Span Interval"
-                >
-                  <div
-                    className="euiFormControlLayout euiFormControlLayout--group"
-                  >
-                    <EuiFormLabel
-                      className="euiFormControlLayout__prepend"
-                    >
-                      <label
-                        className="euiFormLabel euiFormControlLayout__prepend"
-                      >
-                        Span Interval
-                      </label>
-                    </EuiFormLabel>
-                    <div
-                      className="euiFormControlLayout__childrenWrapper"
-                    >
-                      <EuiValidatableControl
-                        isInvalid={false}
-                      >
-                        <input
-                          aria-label="resolutionField"
-                          className="euiFieldText resolutionSelectText euiFieldText--inGroup"
-                          data-test-subj="metrics__spanValue"
-                          disabled={true}
-                          onChange={[Function]}
-                          type="text"
-                          value={1}
-                        />
-                      </EuiValidatableControl>
-                      <EuiFormControlLayoutIcons />
-                    </div>
-                    <EuiSelect
-                      aria-label="resolutionSelect"
-                      className="euiFormControlLayout__append resolutionSelectOption"
-                      data-test-subj="metrics__spanResolutionSelect"
-                      key="0/.0"
-                      onChange={[Function]}
-                      options={
-                        Array [
-                          Object {
-                            "text": "seconds",
-                            "value": "s",
-                          },
-                          Object {
-                            "text": "minutes",
-                            "value": "m",
-                          },
-                          Object {
-                            "text": "hours",
-                            "value": "h",
-                          },
-                          Object {
-                            "text": "days",
-                            "value": "d",
-                          },
-                          Object {
-                            "text": "years",
-                            "value": "y",
-                          },
-                        ]
-                      }
-                      value="h"
-                    >
-                      <EuiFormControlLayout
-                        compressed={false}
-                        fullWidth={false}
-                        icon={
-                          Object {
-                            "side": "right",
-                            "type": "arrowDown",
-                          }
-                        }
-                        isLoading={false}
-                      >
-                        <div
-                          className="euiFormControlLayout"
-                        >
-                          <div
-                            className="euiFormControlLayout__childrenWrapper"
-                          >
-                            <EuiValidatableControl>
-                              <select
-                                aria-label="resolutionSelect"
-                                className="euiSelect euiFormControlLayout__append resolutionSelectOption"
-                                data-test-subj="metrics__spanResolutionSelect"
-                                onChange={[Function]}
-                                onMouseUp={[Function]}
-                                value="h"
-                              >
-                                <option
-                                  key="0"
-                                  value="s"
-                                >
-                                  seconds
-                                </option>
-                                <option
-                                  key="1"
-                                  value="m"
-                                >
-                                  minutes
-                                </option>
-                                <option
-                                  key="2"
-                                  value="h"
-                                >
-                                  hours
-                                </option>
-                                <option
-                                  key="3"
-                                  value="d"
-                                >
-                                  days
-                                </option>
-                                <option
-                                  key="4"
-                                  value="y"
-                                >
-                                  years
-                                </option>
-                              </select>
-                            </EuiValidatableControl>
-                            <EuiFormControlLayoutIcons
-                              compressed={false}
-                              icon={
-                                Object {
-                                  "side": "right",
-                                  "type": "arrowDown",
-                                }
-                              }
-                              isLoading={false}
-                            >
-                              <div
-                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                              >
-                                <EuiFormControlLayoutCustomIcon
-                                  size="m"
-                                  type="arrowDown"
-                                >
-                                  <span
-                                    className="euiFormControlLayoutCustomIcon"
-                                  >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
-                                      type="arrowDown"
-                                    >
-                                      <EuiIconArrowDown
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                        focusable="false"
-                                        role="img"
-                                        style={null}
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                          focusable="false"
-                                          height={16}
-                                          role="img"
-                                          style={null}
-                                          viewBox="0 0 16 16"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                                            fillRule="non-zero"
-                                          />
-                                        </svg>
-                                      </EuiIconArrowDown>
-                                    </EuiIcon>
-                                  </span>
-                                </EuiFormControlLayoutCustomIcon>
-                              </div>
-                            </EuiFormControlLayoutIcons>
-                          </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </EuiSelect>
-                  </div>
-                </EuiFormControlLayout>
-              </EuiFieldText>
-            </div>
-          </div>
-        </EuiFlexItem>
-        <EuiFlexItem
-          className="metrics-search-bar-datepicker"
-        >
-          <div
-            className="euiFlexItem metrics-search-bar-datepicker"
-          >
-            <EuiSuperDatePicker
-              commonlyUsedRanges={
-                Array [
-                  Object {
-                    "end": "now/d",
-                    "label": "Today",
-                    "start": "now/d",
-                  },
-                  Object {
-                    "end": "now/w",
-                    "label": "This week",
-                    "start": "now/w",
-                  },
-                  Object {
-                    "end": "now/M",
-                    "label": "This month",
-                    "start": "now/M",
-                  },
-                  Object {
-                    "end": "now/y",
-                    "label": "This year",
-                    "start": "now/y",
-                  },
-                  Object {
-                    "end": "now-1d/d",
-                    "label": "Yesterday",
-                    "start": "now-1d/d",
-                  },
-                  Object {
-                    "end": "now",
-                    "label": "Week to date",
-                    "start": "now/w",
-                  },
-                  Object {
-                    "end": "now",
-                    "label": "Month to date",
-                    "start": "now/M",
-                  },
-                  Object {
-                    "end": "now",
-                    "label": "Year to date",
-                    "start": "now/y",
-                  },
-                ]
-              }
-              dateFormat=""
-              end="now"
-              isAutoRefreshOnly={false}
-              isDisabled={true}
-              isPaused={true}
-              onTimeChange={[Function]}
-              recentlyUsedRanges={Array []}
-              refreshInterval={0}
-              showUpdateButton={true}
-              start="now-1d"
-              timeFormat="HH:mm"
-            >
-              <EuiFlexGroup
-                className="euiSuperDatePicker__flexWrapper"
-                gutterSize="s"
-                responsive={false}
-              >
-                <div
-                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
-                >
-                  <EuiFlexItem>
-                    <div
-                      className="euiFlexItem"
-                    >
-                      <EuiFormControlLayout
-                        className="euiSuperDatePicker"
-                        isDisabled={true}
-                        prepend={
-                          <EuiQuickSelectPopover
-                            applyTime={[Function]}
-                            commonlyUsedRanges={
-                              Array [
-                                Object {
-                                  "end": "now/d",
-                                  "label": "Today",
-                                  "start": "now/d",
-                                },
-                                Object {
-                                  "end": "now/w",
-                                  "label": "This week",
-                                  "start": "now/w",
-                                },
-                                Object {
-                                  "end": "now/M",
-                                  "label": "This month",
-                                  "start": "now/M",
-                                },
-                                Object {
-                                  "end": "now/y",
-                                  "label": "This year",
-                                  "start": "now/y",
-                                },
-                                Object {
-                                  "end": "now-1d/d",
-                                  "label": "Yesterday",
-                                  "start": "now-1d/d",
-                                },
-                                Object {
-                                  "end": "now",
-                                  "label": "Week to date",
-                                  "start": "now/w",
-                                },
-                                Object {
-                                  "end": "now",
-                                  "label": "Month to date",
-                                  "start": "now/M",
-                                },
-                                Object {
-                                  "end": "now",
-                                  "label": "Year to date",
-                                  "start": "now/y",
-                                },
-                              ]
-                            }
-                            dateFormat=""
-                            end="now"
-                            isAutoRefreshOnly={false}
-                            isDisabled={true}
-                            isPaused={true}
-                            recentlyUsedRanges={Array []}
-                            refreshInterval={0}
-                            start="now-1d"
-                          />
-                        }
-                      >
-                        <div
-                          className="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout-isDisabled euiSuperDatePicker"
-                        >
-                          <EuiQuickSelectPopover
-                            applyTime={[Function]}
-                            className="euiFormControlLayout__prepend"
-                            commonlyUsedRanges={
-                              Array [
-                                Object {
-                                  "end": "now/d",
-                                  "label": "Today",
-                                  "start": "now/d",
-                                },
-                                Object {
-                                  "end": "now/w",
-                                  "label": "This week",
-                                  "start": "now/w",
-                                },
-                                Object {
-                                  "end": "now/M",
-                                  "label": "This month",
-                                  "start": "now/M",
-                                },
-                                Object {
-                                  "end": "now/y",
-                                  "label": "This year",
-                                  "start": "now/y",
-                                },
-                                Object {
-                                  "end": "now-1d/d",
-                                  "label": "Yesterday",
-                                  "start": "now-1d/d",
-                                },
-                                Object {
-                                  "end": "now",
-                                  "label": "Week to date",
-                                  "start": "now/w",
-                                },
-                                Object {
-                                  "end": "now",
-                                  "label": "Month to date",
-                                  "start": "now/M",
-                                },
-                                Object {
-                                  "end": "now",
-                                  "label": "Year to date",
-                                  "start": "now/y",
-                                },
-                              ]
-                            }
-                            dateFormat=""
-                            end="now"
-                            isAutoRefreshOnly={false}
-                            isDisabled={true}
-                            isPaused={true}
-                            key="0/.0"
-                            recentlyUsedRanges={Array []}
-                            refreshInterval={0}
-                            start="now-1d"
-                          >
-                            <EuiPopover
-                              anchorClassName="euiQuickSelectPopover__anchor"
-                              anchorPosition="downLeft"
-                              button={
-                                <EuiButtonEmpty
-                                  aria-label="Date quick select"
-                                  className="euiFormControlLayout__prepend"
-                                  data-test-subj="superDatePickerToggleQuickMenuButton"
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  isDisabled={true}
-                                  onClick={[Function]}
-                                  size="xs"
-                                  textProps={
-                                    Object {
-                                      "className": "euiQuickSelectPopover__buttonText",
-                                    }
-                                  }
-                                >
-                                  <EuiIcon
-                                    type="calendar"
-                                  />
-                                </EuiButtonEmpty>
-                              }
-                              closePopover={[Function]}
-                              display="inlineBlock"
-                              hasArrow={true}
-                              isOpen={false}
-                              ownFocus={true}
-                              panelPaddingSize="m"
-                            >
-                              <div
-                                className="euiPopover euiPopover--anchorDownLeft"
-                              >
-                                <div
-                                  className="euiPopover__anchor euiQuickSelectPopover__anchor"
-                                >
-                                  <EuiButtonEmpty
-                                    aria-label="Date quick select"
-                                    className="euiFormControlLayout__prepend"
-                                    data-test-subj="superDatePickerToggleQuickMenuButton"
-                                    iconSide="right"
-                                    iconType="arrowDown"
-                                    isDisabled={true}
-                                    onClick={[Function]}
-                                    size="xs"
-                                    textProps={
-                                      Object {
-                                        "className": "euiQuickSelectPopover__buttonText",
-                                      }
-                                    }
-                                  >
-                                    <button
-                                      aria-label="Date quick select"
-                                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiFormControlLayout__prepend"
-                                      data-test-subj="superDatePickerToggleQuickMenuButton"
-                                      disabled={true}
-                                      onClick={[Function]}
-                                      type="button"
-                                    >
-                                      <EuiButtonContent
-                                        className="euiButtonEmpty__content"
-                                        iconSide="right"
-                                        iconSize="s"
-                                        iconType="arrowDown"
-                                        textProps={
-                                          Object {
-                                            "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
-                                          }
-                                        }
-                                      >
-                                        <span
-                                          className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                                        >
-                                          <EuiIcon
-                                            className="euiButtonContent__icon"
-                                            color="inherit"
-                                            size="s"
-                                            type="arrowDown"
-                                          >
-                                            <EuiIconArrowDown
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
-                                                focusable="false"
-                                                height={16}
-                                                role="img"
-                                                style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                                                  fillRule="non-zero"
-                                                />
-                                              </svg>
-                                            </EuiIconArrowDown>
-                                          </EuiIcon>
-                                          <span
-                                            className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
-                                          >
-                                            <EuiIcon
-                                              type="calendar"
-                                            >
-                                              <EuiIconCalendar
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--medium"
-                                                focusable="false"
-                                                role="img"
-                                                style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium"
-                                                  focusable="false"
-                                                  height={16}
-                                                  role="img"
-                                                  style={null}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0 1 12.994 15H3.006A2.005 2.005 0 0 1 1 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
-                                                    fillRule="evenodd"
-                                                  />
-                                                </svg>
-                                              </EuiIconCalendar>
-                                            </EuiIcon>
-                                          </span>
-                                        </span>
-                                      </EuiButtonContent>
-                                    </button>
-                                  </EuiButtonEmpty>
-                                </div>
-                              </div>
-                            </EuiPopover>
-                          </EuiQuickSelectPopover>
-                          <div
-                            className="euiFormControlLayout__childrenWrapper"
-                          >
-                            <EuiDatePickerRange
-                              className="euiDatePickerRange--inGroup"
-                              endDateControl={<div />}
-                              iconType={false}
-                              isCustom={true}
-                              startDateControl={<div />}
-                            >
-                              <div
-                                className="euiDatePickerRange euiDatePickerRange--inGroup"
-                              >
-                                <button
-                                  className="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled"
-                                  data-test-subj="superDatePickerShowDatesButton"
-                                  disabled={true}
-                                  onClick={[Function]}
-                                >
-                                  Last 1 day
-                                  <span
-                                    className="euiSuperDatePicker__prettyFormatLink"
-                                  >
-                                    <EuiI18n
-                                      default="Show dates"
-                                      token="euiSuperDatePicker.showDatesButtonLabel"
-                                    >
-                                      Show dates
-                                    </EuiI18n>
-                                  </span>
-                                </button>
-                              </div>
-                            </EuiDatePickerRange>
-                            <EuiFormControlLayoutIcons />
-                          </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiFlexItem
-                    grow={false}
-                  >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                    >
-                      <EuiSuperUpdateButton
-                        data-test-subj="superDatePickerApplyTimeButton"
-                        isDisabled={true}
-                        isLoading={false}
-                        needsUpdate={false}
-                        onClick={[Function]}
-                        showTooltip={true}
-                      >
-                        <EuiToolTip
-                          content={
-                            <EuiI18n
-                              default="Cannot update"
-                              token="euiSuperUpdateButton.cannotUpdateTooltip"
-                            />
-                          }
-                          delay="regular"
-                          position="bottom"
-                        >
-                          <span
-                            className="euiToolTipAnchor"
-                            onKeyUp={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                          >
-                            <EuiButton
-                              className="euiSuperUpdateButton"
-                              color="primary"
-                              data-test-subj="superDatePickerApplyTimeButton"
-                              fill={true}
-                              iconType="refresh"
-                              isDisabled={true}
-                              isLoading={false}
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              textProps={
-                                Object {
-                                  "className": "euiSuperUpdateButton__text",
-                                }
-                              }
-                            >
-                              <EuiButtonDisplay
-                                baseClassName="euiButton"
-                                className="euiSuperUpdateButton"
-                                color="primary"
-                                data-test-subj="superDatePickerApplyTimeButton"
-                                disabled={true}
-                                element="button"
-                                fill={true}
-                                iconType="refresh"
-                                isDisabled={true}
-                                isLoading={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                textProps={
-                                  Object {
-                                    "className": "euiSuperUpdateButton__text",
-                                  }
-                                }
-                                type="button"
-                              >
-                                <button
-                                  className="euiButton euiButton--primary euiButton--fill euiButton-isDisabled euiSuperUpdateButton"
-                                  data-test-subj="superDatePickerApplyTimeButton"
-                                  disabled={true}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  style={
-                                    Object {
-                                      "minWidth": undefined,
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <EuiButtonContent
-                                    className="euiButton__content"
-                                    iconSide="left"
-                                    iconType="refresh"
-                                    isLoading={false}
-                                    textProps={
-                                      Object {
-                                        "className": "euiButton__text euiSuperUpdateButton__text",
-                                      }
-                                    }
-                                  >
-                                    <span
-                                      className="euiButtonContent euiButton__content"
-                                    >
-                                      <EuiIcon
-                                        className="euiButtonContent__icon"
-                                        color="inherit"
-                                        size="m"
-                                        type="refresh"
-                                      >
-                                        <EuiIconRefresh
-                                          aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                          focusable="false"
-                                          role="img"
-                                          style={null}
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                            focusable="false"
-                                            height={16}
-                                            role="img"
-                                            style={null}
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.228 2.942a.5.5 0 1 1-.538.842A5 5 0 1 0 13 8a.5.5 0 1 1 1 0 6 6 0 1 1-2.772-5.058ZM14 1.5v3A1.5 1.5 0 0 1 12.5 6h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 1 1 1 0Z"
-                                            />
-                                          </svg>
-                                        </EuiIconRefresh>
-                                      </EuiIcon>
-                                      <span
-                                        className="euiButton__text euiSuperUpdateButton__text"
-                                      >
-                                        <EuiI18n
-                                          default="Refresh"
-                                          token="euiSuperUpdateButton.refreshButtonLabel"
-                                        >
-                                          Refresh
-                                        </EuiI18n>
-                                      </span>
-                                    </span>
-                                  </EuiButtonContent>
-                                </button>
-                              </EuiButtonDisplay>
-                            </EuiButton>
-                          </span>
-                        </EuiToolTip>
-                      </EuiSuperUpdateButton>
-                    </div>
-                  </EuiFlexItem>
-                </div>
-              </EuiFlexGroup>
-            </EuiSuperDatePicker>
-          </div>
-        </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
-        >
-          <div
-            className="euiFlexItem euiFlexItem--flexGrowZero"
-          >
-            <EuiPopover
-              anchorPosition="downCenter"
-              button={
-                <EuiButton
-                  data-test-subj="metrics__saveManagementPopover"
-                  iconSide="right"
-                  iconType="arrowDown"
-                  isDisabled={true}
-                  onClick={[Function]}
-                >
-                  Save
-                </EuiButton>
-              }
-              closePopover={[Function]}
-              display="inlineBlock"
-              hasArrow={true}
-              isOpen={false}
-              ownFocus={true}
-              panelPaddingSize="m"
-            >
-              <div
-                className="euiPopover euiPopover--anchorDownCenter"
-              >
-                <div
-                  className="euiPopover__anchor"
-                >
-                  <EuiButton
-                    data-test-subj="metrics__saveManagementPopover"
-                    iconSide="right"
-                    iconType="arrowDown"
-                    isDisabled={true}
-                    onClick={[Function]}
-                  >
-                    <EuiButtonDisplay
-                      baseClassName="euiButton"
-                      data-test-subj="metrics__saveManagementPopover"
-                      disabled={true}
-                      element="button"
-                      iconSide="right"
-                      iconType="arrowDown"
-                      isDisabled={true}
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <button
-                        className="euiButton euiButton--primary euiButton-isDisabled"
-                        data-test-subj="metrics__saveManagementPopover"
-                        disabled={true}
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "minWidth": undefined,
-                          }
-                        }
-                        type="button"
-                      >
-                        <EuiButtonContent
-                          className="euiButton__content"
-                          iconSide="right"
-                          iconType="arrowDown"
-                          textProps={
-                            Object {
-                              "className": "euiButton__text",
-                            }
-                          }
-                        >
-                          <span
-                            className="euiButtonContent euiButtonContent--iconRight euiButton__content"
-                          >
-                            <EuiIcon
-                              className="euiButtonContent__icon"
-                              color="inherit"
-                              size="m"
-                              type="arrowDown"
-                            >
-                              <EuiIconArrowDown
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                  focusable="false"
-                                  height={16}
-                                  role="img"
-                                  style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                                    fillRule="non-zero"
-                                  />
-                                </svg>
-                              </EuiIconArrowDown>
-                            </EuiIcon>
-                            <span
-                              className="euiButton__text"
-                            >
-                              Save
-                            </span>
-                          </span>
-                        </EuiButtonContent>
-                      </button>
-                    </EuiButtonDisplay>
-                  </EuiButton>
-                </div>
-              </div>
-            </EuiPopover>
-          </div>
-        </EuiFlexItem>
-      </div>
-    </EuiFlexGroup>
-    <EuiSpacer
-      size="m"
-    >
-      <div
-        className="euiSpacer euiSpacer--m"
-      />
-    </EuiSpacer>
-    <EuiFlexGroup
-      gutterSize="s"
-      justifyContent="flexEnd"
-    >
-      <div
-        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
-      >
-        <EuiFlexItem
-          grow={false}
-        >
-          <div
-            className="euiFlexItem euiFlexItem--flexGrowZero"
-          >
-            <EuiButton
-              color="danger"
-              iconType="cross"
-              onClick={[Function]}
-              size="s"
-            >
-              <EuiButtonDisplay
-                baseClassName="euiButton"
-                color="danger"
-                disabled={false}
-                element="button"
-                iconType="cross"
-                isDisabled={false}
-                onClick={[Function]}
-                size="s"
-                type="button"
-              >
-                <button
-                  className="euiButton euiButton--danger euiButton--small"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "minWidth": undefined,
-                    }
-                  }
-                  type="button"
-                >
-                  <EuiButtonContent
-                    className="euiButton__content"
-                    iconSide="left"
-                    iconType="cross"
-                    textProps={
-                      Object {
-                        "className": "euiButton__text",
-                      }
-                    }
-                  >
-                    <span
-                      className="euiButtonContent euiButton__content"
-                    >
-                      <EuiIcon
-                        className="euiButtonContent__icon"
-                        color="inherit"
-                        size="m"
-                        type="cross"
-                      >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                          focusable="false"
-                          role="img"
-                          style={null}
-                        >
-                          <svg
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                            focusable="false"
-                            height={16}
-                            role="img"
-                            style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                      <span
-                        className="euiButton__text"
-                      >
-                        Cancel
-                      </span>
-                    </span>
-                  </EuiButtonContent>
-                </button>
-              </EuiButtonDisplay>
-            </EuiButton>
-          </div>
-        </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
-        >
-          <div
-            className="euiFlexItem euiFlexItem--flexGrowZero"
-          >
-            <EuiButton
-              data-test-subj="metrics__saveView"
-              iconType="save"
-              onClick={[Function]}
-              size="s"
-            >
-              <EuiButtonDisplay
-                baseClassName="euiButton"
-                data-test-subj="metrics__saveView"
-                disabled={false}
-                element="button"
-                iconType="save"
-                isDisabled={false}
-                onClick={[Function]}
-                size="s"
-                type="button"
-              >
-                <button
-                  className="euiButton euiButton--primary euiButton--small"
-                  data-test-subj="metrics__saveView"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "minWidth": undefined,
-                    }
-                  }
-                  type="button"
-                >
-                  <EuiButtonContent
-                    className="euiButton__content"
-                    iconSide="left"
-                    iconType="save"
-                    textProps={
-                      Object {
-                        "className": "euiButton__text",
-                      }
-                    }
-                  >
-                    <span
-                      className="euiButtonContent euiButton__content"
-                    >
-                      <EuiIcon
-                        className="euiButtonContent__icon"
-                        color="inherit"
-                        size="m"
-                        type="save"
-                      >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                          focusable="false"
-                          role="img"
-                          style={null}
-                        >
-                          <svg
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                            focusable="false"
-                            height={16}
-                            role="img"
-                            style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                      <span
-                        className="euiButton__text"
-                      >
-                        Save view
-                      </span>
-                    </span>
-                  </EuiButtonContent>
-                </button>
-              </EuiButtonDisplay>
-            </EuiButton>
-          </div>
-        </EuiFlexItem>
-      </div>
-    </EuiFlexGroup>
-  </Component>
-</Provider>
-`;
-
-exports[`Metrics Top Menu Component renders Top Menu Component when disabled with no metric visualizations 1`] = `
-<Provider
-  store={
-    Object {
-      "dispatch": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-      Symbol(Symbol.observable): [Function],
-    }
-  }
->
-  <Component
-    IsTopPanelDisabled={true}
-    editMode={false}
-    endTime="now"
-    http={[MockFunction]}
-    onDatePickerChange={[MockFunction]}
-    panelVisualizations={Array []}
-    recentlyUsedRanges={Array []}
-    resolutionSelectId="select_123"
-    resolutionValue="h"
-    savedObjects={
-      SavedObjects {
-        "http": [MockFunction],
-      }
-    }
-    setEditActionType={[MockFunction]}
-    setEditMode={[MockFunction]}
-    setPanelVisualizations={[MockFunction]}
-    setResolutionValue={[MockFunction]}
-    setSpanValue={[MockFunction]}
-    setToast={[MockFunction]}
-    spanValue={1}
-    startTime="now-1d"
-  >
-    <EuiFlexGroup
-      gutterSize="s"
-      justifyContent="flexEnd"
-    >
-      <div
-        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
-      >
-        <EuiFlexItem
-          grow={false}
-        >
-          <div
-            className="euiFlexItem euiFlexItem--flexGrowZero"
-          >
-            <div
-              className="resolutionSelect"
-            >
-              <EuiFieldText
-                append={
-                  <EuiSelect
-                    aria-label="resolutionSelect"
-                    className="resolutionSelectOption"
-                    data-test-subj="metrics__spanResolutionSelect"
-                    onChange={[Function]}
-                    options={
-                      Array [
-                        Object {
-                          "text": "seconds",
-                          "value": "s",
-                        },
-                        Object {
-                          "text": "minutes",
-                          "value": "m",
-                        },
-                        Object {
-                          "text": "hours",
-                          "value": "h",
-                        },
-                        Object {
-                          "text": "days",
-                          "value": "d",
-                        },
-                        Object {
-                          "text": "years",
-                          "value": "y",
-                        },
-                      ]
-                    }
-                    value="h"
-                  />
-                }
-                aria-label="resolutionField"
-                className="resolutionSelectText"
-                data-test-subj="metrics__spanValue"
-                disabled={true}
-                isInvalid={false}
-                onChange={[Function]}
-                prepend="Span Interval"
-                value={1}
-              >
-                <EuiFormControlLayout
-                  append={
-                    <EuiSelect
-                      aria-label="resolutionSelect"
-                      className="resolutionSelectOption"
-                      data-test-subj="metrics__spanResolutionSelect"
-                      onChange={[Function]}
-                      options={
-                        Array [
-                          Object {
-                            "text": "seconds",
-                            "value": "s",
-                          },
-                          Object {
-                            "text": "minutes",
-                            "value": "m",
-                          },
-                          Object {
-                            "text": "hours",
-                            "value": "h",
-                          },
-                          Object {
-                            "text": "days",
-                            "value": "d",
-                          },
-                          Object {
-                            "text": "years",
-                            "value": "y",
-                          },
-                        ]
-                      }
-                      value="h"
-                    />
-                  }
-                  fullWidth={false}
-                  prepend="Span Interval"
-                >
-                  <div
-                    className="euiFormControlLayout euiFormControlLayout--group"
-                  >
-                    <EuiFormLabel
-                      className="euiFormControlLayout__prepend"
-                    >
-                      <label
-                        className="euiFormLabel euiFormControlLayout__prepend"
-                      >
-                        Span Interval
-                      </label>
-                    </EuiFormLabel>
-                    <div
-                      className="euiFormControlLayout__childrenWrapper"
-                    >
-                      <EuiValidatableControl
-                        isInvalid={false}
-                      >
-                        <input
-                          aria-label="resolutionField"
-                          className="euiFieldText resolutionSelectText euiFieldText--inGroup"
-                          data-test-subj="metrics__spanValue"
-                          disabled={true}
-                          onChange={[Function]}
-                          type="text"
-                          value={1}
-                        />
-                      </EuiValidatableControl>
-                      <EuiFormControlLayoutIcons />
-                    </div>
-                    <EuiSelect
-                      aria-label="resolutionSelect"
-                      className="euiFormControlLayout__append resolutionSelectOption"
-                      data-test-subj="metrics__spanResolutionSelect"
-                      key="0/.0"
-                      onChange={[Function]}
-                      options={
-                        Array [
-                          Object {
-                            "text": "seconds",
-                            "value": "s",
-                          },
-                          Object {
-                            "text": "minutes",
-                            "value": "m",
-                          },
-                          Object {
-                            "text": "hours",
-                            "value": "h",
-                          },
-                          Object {
-                            "text": "days",
-                            "value": "d",
-                          },
-                          Object {
-                            "text": "years",
-                            "value": "y",
-                          },
-                        ]
-                      }
-                      value="h"
-                    >
-                      <EuiFormControlLayout
-                        compressed={false}
-                        fullWidth={false}
-                        icon={
-                          Object {
-                            "side": "right",
-                            "type": "arrowDown",
-                          }
-                        }
-                        isLoading={false}
-                      >
-                        <div
-                          className="euiFormControlLayout"
-                        >
-                          <div
-                            className="euiFormControlLayout__childrenWrapper"
-                          >
-                            <EuiValidatableControl>
-                              <select
-                                aria-label="resolutionSelect"
-                                className="euiSelect euiFormControlLayout__append resolutionSelectOption"
-                                data-test-subj="metrics__spanResolutionSelect"
-                                onChange={[Function]}
-                                onMouseUp={[Function]}
-                                value="h"
-                              >
-                                <option
-                                  key="0"
-                                  value="s"
-                                >
-                                  seconds
-                                </option>
-                                <option
-                                  key="1"
-                                  value="m"
-                                >
-                                  minutes
-                                </option>
-                                <option
-                                  key="2"
-                                  value="h"
-                                >
-                                  hours
-                                </option>
-                                <option
-                                  key="3"
-                                  value="d"
-                                >
-                                  days
-                                </option>
-                                <option
-                                  key="4"
-                                  value="y"
-                                >
-                                  years
-                                </option>
-                              </select>
-                            </EuiValidatableControl>
-                            <EuiFormControlLayoutIcons
-                              compressed={false}
-                              icon={
-                                Object {
-                                  "side": "right",
-                                  "type": "arrowDown",
-                                }
-                              }
-                              isLoading={false}
-                            >
-                              <div
-                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                              >
-                                <EuiFormControlLayoutCustomIcon
-                                  size="m"
-                                  type="arrowDown"
-                                >
-                                  <span
-                                    className="euiFormControlLayoutCustomIcon"
-                                  >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
-                                      type="arrowDown"
-                                    >
-                                      <EuiIconArrowDown
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                        focusable="false"
-                                        role="img"
-                                        style={null}
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                          focusable="false"
-                                          height={16}
-                                          role="img"
-                                          style={null}
-                                          viewBox="0 0 16 16"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                                            fillRule="non-zero"
-                                          />
-                                        </svg>
-                                      </EuiIconArrowDown>
-                                    </EuiIcon>
-                                  </span>
-                                </EuiFormControlLayoutCustomIcon>
-                              </div>
-                            </EuiFormControlLayoutIcons>
-                          </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </EuiSelect>
-                  </div>
-                </EuiFormControlLayout>
-              </EuiFieldText>
-            </div>
-          </div>
-        </EuiFlexItem>
-        <EuiFlexItem
-          className="metrics-search-bar-datepicker"
-        >
-          <div
-            className="euiFlexItem metrics-search-bar-datepicker"
-          >
-            <EuiSuperDatePicker
-              commonlyUsedRanges={
-                Array [
-                  Object {
-                    "end": "now/d",
-                    "label": "Today",
-                    "start": "now/d",
-                  },
-                  Object {
-                    "end": "now/w",
-                    "label": "This week",
-                    "start": "now/w",
-                  },
-                  Object {
-                    "end": "now/M",
-                    "label": "This month",
-                    "start": "now/M",
-                  },
-                  Object {
-                    "end": "now/y",
-                    "label": "This year",
-                    "start": "now/y",
-                  },
-                  Object {
-                    "end": "now-1d/d",
-                    "label": "Yesterday",
-                    "start": "now-1d/d",
-                  },
-                  Object {
-                    "end": "now",
-                    "label": "Week to date",
-                    "start": "now/w",
-                  },
-                  Object {
-                    "end": "now",
-                    "label": "Month to date",
-                    "start": "now/M",
-                  },
-                  Object {
-                    "end": "now",
-                    "label": "Year to date",
-                    "start": "now/y",
-                  },
-                ]
-              }
-              dateFormat=""
-              end="now"
-              isAutoRefreshOnly={false}
-              isDisabled={true}
-              isPaused={true}
-              onTimeChange={[Function]}
-              recentlyUsedRanges={Array []}
-              refreshInterval={0}
-              showUpdateButton={true}
-              start="now-1d"
-              timeFormat="HH:mm"
-            >
-              <EuiFlexGroup
-                className="euiSuperDatePicker__flexWrapper"
-                gutterSize="s"
-                responsive={false}
-              >
-                <div
-                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
-                >
-                  <EuiFlexItem>
-                    <div
-                      className="euiFlexItem"
-                    >
-                      <EuiFormControlLayout
-                        className="euiSuperDatePicker"
-                        isDisabled={true}
-                        prepend={
-                          <EuiQuickSelectPopover
-                            applyTime={[Function]}
-                            commonlyUsedRanges={
-                              Array [
-                                Object {
-                                  "end": "now/d",
-                                  "label": "Today",
-                                  "start": "now/d",
-                                },
-                                Object {
-                                  "end": "now/w",
-                                  "label": "This week",
-                                  "start": "now/w",
-                                },
-                                Object {
-                                  "end": "now/M",
-                                  "label": "This month",
-                                  "start": "now/M",
-                                },
-                                Object {
-                                  "end": "now/y",
-                                  "label": "This year",
-                                  "start": "now/y",
-                                },
-                                Object {
-                                  "end": "now-1d/d",
-                                  "label": "Yesterday",
-                                  "start": "now-1d/d",
-                                },
-                                Object {
-                                  "end": "now",
-                                  "label": "Week to date",
-                                  "start": "now/w",
-                                },
-                                Object {
-                                  "end": "now",
-                                  "label": "Month to date",
-                                  "start": "now/M",
-                                },
-                                Object {
-                                  "end": "now",
-                                  "label": "Year to date",
-                                  "start": "now/y",
-                                },
-                              ]
-                            }
-                            dateFormat=""
-                            end="now"
-                            isAutoRefreshOnly={false}
-                            isDisabled={true}
-                            isPaused={true}
-                            recentlyUsedRanges={Array []}
-                            refreshInterval={0}
-                            start="now-1d"
-                          />
-                        }
-                      >
-                        <div
-                          className="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout-isDisabled euiSuperDatePicker"
-                        >
-                          <EuiQuickSelectPopover
-                            applyTime={[Function]}
-                            className="euiFormControlLayout__prepend"
-                            commonlyUsedRanges={
-                              Array [
-                                Object {
-                                  "end": "now/d",
-                                  "label": "Today",
-                                  "start": "now/d",
-                                },
-                                Object {
-                                  "end": "now/w",
-                                  "label": "This week",
-                                  "start": "now/w",
-                                },
-                                Object {
-                                  "end": "now/M",
-                                  "label": "This month",
-                                  "start": "now/M",
-                                },
-                                Object {
-                                  "end": "now/y",
-                                  "label": "This year",
-                                  "start": "now/y",
-                                },
-                                Object {
-                                  "end": "now-1d/d",
-                                  "label": "Yesterday",
-                                  "start": "now-1d/d",
-                                },
-                                Object {
-                                  "end": "now",
-                                  "label": "Week to date",
-                                  "start": "now/w",
-                                },
-                                Object {
-                                  "end": "now",
-                                  "label": "Month to date",
-                                  "start": "now/M",
-                                },
-                                Object {
-                                  "end": "now",
-                                  "label": "Year to date",
-                                  "start": "now/y",
-                                },
-                              ]
-                            }
-                            dateFormat=""
-                            end="now"
-                            isAutoRefreshOnly={false}
-                            isDisabled={true}
-                            isPaused={true}
-                            key="0/.0"
-                            recentlyUsedRanges={Array []}
-                            refreshInterval={0}
-                            start="now-1d"
-                          >
-                            <EuiPopover
-                              anchorClassName="euiQuickSelectPopover__anchor"
-                              anchorPosition="downLeft"
-                              button={
-                                <EuiButtonEmpty
-                                  aria-label="Date quick select"
-                                  className="euiFormControlLayout__prepend"
-                                  data-test-subj="superDatePickerToggleQuickMenuButton"
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  isDisabled={true}
-                                  onClick={[Function]}
-                                  size="xs"
-                                  textProps={
-                                    Object {
-                                      "className": "euiQuickSelectPopover__buttonText",
-                                    }
-                                  }
-                                >
-                                  <EuiIcon
-                                    type="calendar"
-                                  />
-                                </EuiButtonEmpty>
-                              }
-                              closePopover={[Function]}
-                              display="inlineBlock"
-                              hasArrow={true}
-                              isOpen={false}
-                              ownFocus={true}
-                              panelPaddingSize="m"
-                            >
-                              <div
-                                className="euiPopover euiPopover--anchorDownLeft"
-                              >
-                                <div
-                                  className="euiPopover__anchor euiQuickSelectPopover__anchor"
-                                >
-                                  <EuiButtonEmpty
-                                    aria-label="Date quick select"
-                                    className="euiFormControlLayout__prepend"
-                                    data-test-subj="superDatePickerToggleQuickMenuButton"
-                                    iconSide="right"
-                                    iconType="arrowDown"
-                                    isDisabled={true}
-                                    onClick={[Function]}
-                                    size="xs"
-                                    textProps={
-                                      Object {
-                                        "className": "euiQuickSelectPopover__buttonText",
-                                      }
-                                    }
-                                  >
-                                    <button
-                                      aria-label="Date quick select"
-                                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiFormControlLayout__prepend"
-                                      data-test-subj="superDatePickerToggleQuickMenuButton"
-                                      disabled={true}
-                                      onClick={[Function]}
-                                      type="button"
-                                    >
-                                      <EuiButtonContent
-                                        className="euiButtonEmpty__content"
-                                        iconSide="right"
-                                        iconSize="s"
-                                        iconType="arrowDown"
-                                        textProps={
-                                          Object {
-                                            "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
-                                          }
-                                        }
-                                      >
-                                        <span
-                                          className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                                        >
-                                          <EuiIcon
-                                            className="euiButtonContent__icon"
-                                            color="inherit"
-                                            size="s"
-                                            type="arrowDown"
-                                          >
-                                            <EuiIconArrowDown
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
-                                                focusable="false"
-                                                height={16}
-                                                role="img"
-                                                style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                                                  fillRule="non-zero"
-                                                />
-                                              </svg>
-                                            </EuiIconArrowDown>
-                                          </EuiIcon>
-                                          <span
-                                            className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
-                                          >
-                                            <EuiIcon
-                                              type="calendar"
-                                            >
-                                              <EuiIconCalendar
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--medium"
-                                                focusable="false"
-                                                role="img"
-                                                style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium"
-                                                  focusable="false"
-                                                  height={16}
-                                                  role="img"
-                                                  style={null}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0 1 12.994 15H3.006A2.005 2.005 0 0 1 1 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
-                                                    fillRule="evenodd"
-                                                  />
-                                                </svg>
-                                              </EuiIconCalendar>
-                                            </EuiIcon>
-                                          </span>
-                                        </span>
-                                      </EuiButtonContent>
-                                    </button>
-                                  </EuiButtonEmpty>
-                                </div>
-                              </div>
-                            </EuiPopover>
-                          </EuiQuickSelectPopover>
-                          <div
-                            className="euiFormControlLayout__childrenWrapper"
-                          >
-                            <EuiDatePickerRange
-                              className="euiDatePickerRange--inGroup"
-                              endDateControl={<div />}
-                              iconType={false}
-                              isCustom={true}
-                              startDateControl={<div />}
-                            >
-                              <div
-                                className="euiDatePickerRange euiDatePickerRange--inGroup"
-                              >
-                                <button
-                                  className="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled"
-                                  data-test-subj="superDatePickerShowDatesButton"
-                                  disabled={true}
-                                  onClick={[Function]}
-                                >
-                                  Last 1 day
-                                  <span
-                                    className="euiSuperDatePicker__prettyFormatLink"
-                                  >
-                                    <EuiI18n
-                                      default="Show dates"
-                                      token="euiSuperDatePicker.showDatesButtonLabel"
-                                    >
-                                      Show dates
-                                    </EuiI18n>
-                                  </span>
-                                </button>
-                              </div>
-                            </EuiDatePickerRange>
-                            <EuiFormControlLayoutIcons />
-                          </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiFlexItem
-                    grow={false}
-                  >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                    >
-                      <EuiSuperUpdateButton
-                        data-test-subj="superDatePickerApplyTimeButton"
-                        isDisabled={true}
-                        isLoading={false}
-                        needsUpdate={false}
-                        onClick={[Function]}
-                        showTooltip={true}
-                      >
-                        <EuiToolTip
-                          content={
-                            <EuiI18n
-                              default="Cannot update"
-                              token="euiSuperUpdateButton.cannotUpdateTooltip"
-                            />
-                          }
-                          delay="regular"
-                          position="bottom"
-                        >
-                          <span
-                            className="euiToolTipAnchor"
-                            onKeyUp={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                          >
-                            <EuiButton
-                              className="euiSuperUpdateButton"
-                              color="primary"
-                              data-test-subj="superDatePickerApplyTimeButton"
-                              fill={true}
-                              iconType="refresh"
-                              isDisabled={true}
-                              isLoading={false}
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              textProps={
-                                Object {
-                                  "className": "euiSuperUpdateButton__text",
-                                }
-                              }
-                            >
-                              <EuiButtonDisplay
-                                baseClassName="euiButton"
-                                className="euiSuperUpdateButton"
-                                color="primary"
-                                data-test-subj="superDatePickerApplyTimeButton"
-                                disabled={true}
-                                element="button"
-                                fill={true}
-                                iconType="refresh"
-                                isDisabled={true}
-                                isLoading={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                textProps={
-                                  Object {
-                                    "className": "euiSuperUpdateButton__text",
-                                  }
-                                }
-                                type="button"
-                              >
-                                <button
-                                  className="euiButton euiButton--primary euiButton--fill euiButton-isDisabled euiSuperUpdateButton"
-                                  data-test-subj="superDatePickerApplyTimeButton"
-                                  disabled={true}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  style={
-                                    Object {
-                                      "minWidth": undefined,
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <EuiButtonContent
-                                    className="euiButton__content"
-                                    iconSide="left"
-                                    iconType="refresh"
-                                    isLoading={false}
-                                    textProps={
-                                      Object {
-                                        "className": "euiButton__text euiSuperUpdateButton__text",
-                                      }
-                                    }
-                                  >
-                                    <span
-                                      className="euiButtonContent euiButton__content"
-                                    >
-                                      <EuiIcon
-                                        className="euiButtonContent__icon"
-                                        color="inherit"
-                                        size="m"
-                                        type="refresh"
-                                      >
-                                        <EuiIconRefresh
-                                          aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                          focusable="false"
-                                          role="img"
-                                          style={null}
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                            focusable="false"
-                                            height={16}
-                                            role="img"
-                                            style={null}
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.228 2.942a.5.5 0 1 1-.538.842A5 5 0 1 0 13 8a.5.5 0 1 1 1 0 6 6 0 1 1-2.772-5.058ZM14 1.5v3A1.5 1.5 0 0 1 12.5 6h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 1 1 1 0Z"
-                                            />
-                                          </svg>
-                                        </EuiIconRefresh>
-                                      </EuiIcon>
-                                      <span
-                                        className="euiButton__text euiSuperUpdateButton__text"
-                                      >
-                                        <EuiI18n
-                                          default="Refresh"
-                                          token="euiSuperUpdateButton.refreshButtonLabel"
-                                        >
-                                          Refresh
-                                        </EuiI18n>
-                                      </span>
-                                    </span>
-                                  </EuiButtonContent>
-                                </button>
-                              </EuiButtonDisplay>
-                            </EuiButton>
-                          </span>
-                        </EuiToolTip>
-                      </EuiSuperUpdateButton>
-                    </div>
-                  </EuiFlexItem>
-                </div>
-              </EuiFlexGroup>
-            </EuiSuperDatePicker>
-          </div>
-        </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
-        >
-          <div
-            className="euiFlexItem euiFlexItem--flexGrowZero"
-          >
-            <EuiPopover
-              anchorPosition="downCenter"
-              button={
-                <EuiButton
-                  data-test-subj="metrics__saveManagementPopover"
-                  iconSide="right"
-                  iconType="arrowDown"
-                  isDisabled={true}
-                  onClick={[Function]}
-                >
-                  Save
-                </EuiButton>
-              }
-              closePopover={[Function]}
-              display="inlineBlock"
-              hasArrow={true}
-              isOpen={false}
-              ownFocus={true}
-              panelPaddingSize="m"
-            >
-              <div
-                className="euiPopover euiPopover--anchorDownCenter"
-              >
-                <div
-                  className="euiPopover__anchor"
-                >
-                  <EuiButton
-                    data-test-subj="metrics__saveManagementPopover"
-                    iconSide="right"
-                    iconType="arrowDown"
-                    isDisabled={true}
-                    onClick={[Function]}
-                  >
-                    <EuiButtonDisplay
-                      baseClassName="euiButton"
-                      data-test-subj="metrics__saveManagementPopover"
-                      disabled={true}
-                      element="button"
-                      iconSide="right"
-                      iconType="arrowDown"
-                      isDisabled={true}
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <button
-                        className="euiButton euiButton--primary euiButton-isDisabled"
-                        data-test-subj="metrics__saveManagementPopover"
-                        disabled={true}
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "minWidth": undefined,
-                          }
-                        }
-                        type="button"
-                      >
-                        <EuiButtonContent
-                          className="euiButton__content"
-                          iconSide="right"
-                          iconType="arrowDown"
-                          textProps={
-                            Object {
-                              "className": "euiButton__text",
-                            }
-                          }
-                        >
-                          <span
-                            className="euiButtonContent euiButtonContent--iconRight euiButton__content"
-                          >
-                            <EuiIcon
-                              className="euiButtonContent__icon"
-                              color="inherit"
-                              size="m"
-                              type="arrowDown"
-                            >
-                              <EuiIconArrowDown
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                  focusable="false"
-                                  height={16}
-                                  role="img"
-                                  style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                                    fillRule="non-zero"
-                                  />
-                                </svg>
-                              </EuiIconArrowDown>
-                            </EuiIcon>
-                            <span
-                              className="euiButton__text"
-                            >
-                              Save
-                            </span>
-                          </span>
-                        </EuiButtonContent>
-                      </button>
-                    </EuiButtonDisplay>
-                  </EuiButton>
-                </div>
-              </div>
-            </EuiPopover>
-          </div>
-        </EuiFlexItem>
-      </div>
-    </EuiFlexGroup>
-    <EuiSpacer
-      size="m"
-    >
-      <div
-        className="euiSpacer euiSpacer--m"
-      />
-    </EuiSpacer>
-    <EuiFlexGroup
-      gutterSize="s"
-      justifyContent="flexEnd"
-    >
-      <div
-        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
-      >
-        <EuiFlexItem
-          grow={false}
-        >
-          <div
-            className="euiFlexItem euiFlexItem--flexGrowZero"
-          >
-            <EuiButton
-              data-test-subj="metrics__editView"
-              iconType="pencil"
-              isDisabled={true}
-              onClick={[Function]}
-              size="s"
-            >
-              <EuiButtonDisplay
-                baseClassName="euiButton"
-                data-test-subj="metrics__editView"
-                disabled={true}
-                element="button"
-                iconType="pencil"
-                isDisabled={true}
-                onClick={[Function]}
-                size="s"
-                type="button"
-              >
-                <button
-                  className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
-                  data-test-subj="metrics__editView"
-                  disabled={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "minWidth": undefined,
-                    }
-                  }
-                  type="button"
-                >
-                  <EuiButtonContent
-                    className="euiButton__content"
-                    iconSide="left"
-                    iconType="pencil"
-                    textProps={
-                      Object {
-                        "className": "euiButton__text",
-                      }
-                    }
-                  >
-                    <span
-                      className="euiButtonContent euiButton__content"
-                    >
-                      <EuiIcon
-                        className="euiButtonContent__icon"
-                        color="inherit"
-                        size="m"
-                        type="pencil"
-                      >
-                        <EuiIconPencil
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                          focusable="false"
-                          role="img"
-                          style={null}
-                        >
-                          <svg
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                            focusable="false"
-                            height={16}
-                            role="img"
-                            style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M12.148 3.148 11 2l-9 9v3h3l9-9-1.144-1.144-8.002 7.998a.502.502 0 0 1-.708 0 .502.502 0 0 1 0-.708l8.002-7.998ZM11 1c.256 0 .512.098.707.293l3 3a.999.999 0 0 1 0 1.414l-9 9A.997.997 0 0 1 5 15H2a1 1 0 0 1-1-1v-3c0-.265.105-.52.293-.707l9-9A.997.997 0 0 1 11 1ZM5 14H2v-3l3 3Z"
-                            />
-                          </svg>
-                        </EuiIconPencil>
-                      </EuiIcon>
-                      <span
-                        className="euiButton__text"
-                      >
-                        Edit view
-                      </span>
-                    </span>
-                  </EuiButtonContent>
-                </button>
-              </EuiButtonDisplay>
-            </EuiButton>
-          </div>
-        </EuiFlexItem>
-      </div>
-    </EuiFlexGroup>
-  </Component>
-</Provider>
-`;
-
 exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`] = `
 <Provider
   store={
@@ -2286,60 +12,7 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
     }
   }
 >
-  <Component
-    IsTopPanelDisabled={false}
-    editMode={false}
-    endTime="now"
-    http={[MockFunction]}
-    onDatePickerChange={[MockFunction]}
-    panelVisualizations={
-      Array [
-        Object {
-          "h": 2,
-          "id": "Y4muP4QBiaYaSxpXk7r8",
-          "metricType": "savedCustomMetric",
-          "savedVisualizationId": "Y4muP4QBiaYaSxpXk7r8",
-          "w": 12,
-          "x": 0,
-          "y": 0,
-        },
-        Object {
-          "h": 2,
-          "id": "tomAP4QBiaYaSxpXALls",
-          "metricType": "savedCustomMetric",
-          "savedVisualizationId": "tomAP4QBiaYaSxpXALls",
-          "w": 12,
-          "x": 0,
-          "y": 2,
-        },
-        Object {
-          "h": 2,
-          "id": "prometheus.process_resident_memory_bytes",
-          "metricType": "prometheusMetric",
-          "savedVisualizationId": "prometheus.process_resident_memory_bytes",
-          "w": 12,
-          "x": 0,
-          "y": 4,
-        },
-      ]
-    }
-    recentlyUsedRanges={Array []}
-    resolutionSelectId="select_123"
-    resolutionValue="h"
-    savedObjects={
-      SavedObjects {
-        "http": [MockFunction],
-      }
-    }
-    setEditActionType={[MockFunction]}
-    setEditMode={[MockFunction]}
-    setPanelVisualizations={[MockFunction]}
-    setResolutionValue={[MockFunction]}
-    setSpanValue={[MockFunction]}
-    setToast={[MockFunction]}
-    spanValue={1}
-    startTime="now-1d"
-  >
+  <Component>
     <EuiFlexGroup
       gutterSize="s"
       justifyContent="flexEnd"
@@ -2393,7 +66,6 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                 aria-label="resolutionField"
                 className="resolutionSelectText"
                 data-test-subj="metrics__spanValue"
-                disabled={false}
                 isInvalid={false}
                 onChange={[Function]}
                 prepend="Span Interval"
@@ -2458,7 +130,6 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                           aria-label="resolutionField"
                           className="euiFieldText resolutionSelectText euiFieldText--inGroup"
                           data-test-subj="metrics__spanValue"
-                          disabled={false}
                           onChange={[Function]}
                           type="text"
                           value={1}
@@ -3133,217 +804,115 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
           <div
             className="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <EuiPopover
-              anchorPosition="downCenter"
-              button={
-                <EuiButton
-                  data-test-subj="metrics__saveManagementPopover"
-                  iconSide="right"
-                  iconType="arrowDown"
-                  isDisabled={false}
-                  onClick={[Function]}
-                >
-                  Save
-                </EuiButton>
-              }
-              closePopover={[Function]}
-              display="inlineBlock"
-              hasArrow={true}
-              isOpen={false}
-              ownFocus={true}
-              panelPaddingSize="m"
-            >
-              <div
-                className="euiPopover euiPopover--anchorDownCenter"
-              >
-                <div
-                  className="euiPopover__anchor"
+            <Component>
+              <MetricsExportPopOver>
+                <EuiPopover
+                  anchorPosition="downCenter"
+                  button={
+                    <Savebutton
+                      setIsPanelOpen={[Function]}
+                    />
+                  }
+                  closePopover={[Function]}
+                  display="inlineBlock"
+                  hasArrow={true}
+                  isOpen={false}
+                  ownFocus={true}
+                  panelPaddingSize="m"
                 >
-                  <EuiButton
-                    data-test-subj="metrics__saveManagementPopover"
-                    iconSide="right"
-                    iconType="arrowDown"
-                    isDisabled={false}
-                    onClick={[Function]}
+                  <div
+                    className="euiPopover euiPopover--anchorDownCenter"
                   >
-                    <EuiButtonDisplay
-                      baseClassName="euiButton"
-                      data-test-subj="metrics__saveManagementPopover"
-                      disabled={false}
-                      element="button"
-                      iconSide="right"
-                      iconType="arrowDown"
-                      isDisabled={false}
-                      onClick={[Function]}
-                      type="button"
+                    <div
+                      className="euiPopover__anchor"
                     >
-                      <button
-                        className="euiButton euiButton--primary"
-                        data-test-subj="metrics__saveManagementPopover"
-                        disabled={false}
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "minWidth": undefined,
-                          }
-                        }
-                        type="button"
+                      <Savebutton
+                        setIsPanelOpen={[Function]}
                       >
-                        <EuiButtonContent
-                          className="euiButton__content"
+                        <EuiButton
+                          data-test-subj="metrics__saveManagementPopover"
                           iconSide="right"
                           iconType="arrowDown"
-                          textProps={
-                            Object {
-                              "className": "euiButton__text",
-                            }
-                          }
+                          onClick={[Function]}
                         >
-                          <span
-                            className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                          <EuiButtonDisplay
+                            baseClassName="euiButton"
+                            data-test-subj="metrics__saveManagementPopover"
+                            disabled={false}
+                            element="button"
+                            iconSide="right"
+                            iconType="arrowDown"
+                            isDisabled={false}
+                            onClick={[Function]}
+                            type="button"
                           >
-                            <EuiIcon
-                              className="euiButtonContent__icon"
-                              color="inherit"
-                              size="m"
-                              type="arrowDown"
+                            <button
+                              className="euiButton euiButton--primary"
+                              data-test-subj="metrics__saveManagementPopover"
+                              disabled={false}
+                              onClick={[Function]}
+                              style={
+                                Object {
+                                  "minWidth": undefined,
+                                }
+                              }
+                              type="button"
                             >
-                              <EuiIconEmpty
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
+                              <EuiButtonContent
+                                className="euiButton__content"
+                                iconSide="right"
+                                iconType="arrowDown"
+                                textProps={
+                                  Object {
+                                    "className": "euiButton__text",
+                                  }
+                                }
                               >
-                                <svg
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                  focusable="false"
-                                  height={16}
-                                  role="img"
-                                  style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                />
-                              </EuiIconEmpty>
-                            </EuiIcon>
-                            <span
-                              className="euiButton__text"
-                            >
-                              Save
-                            </span>
-                          </span>
-                        </EuiButtonContent>
-                      </button>
-                    </EuiButtonDisplay>
-                  </EuiButton>
-                </div>
-              </div>
-            </EuiPopover>
-          </div>
-        </EuiFlexItem>
-      </div>
-    </EuiFlexGroup>
-    <EuiSpacer
-      size="m"
-    >
-      <div
-        className="euiSpacer euiSpacer--m"
-      />
-    </EuiSpacer>
-    <EuiFlexGroup
-      gutterSize="s"
-      justifyContent="flexEnd"
-    >
-      <div
-        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
-      >
-        <EuiFlexItem
-          grow={false}
-        >
-          <div
-            className="euiFlexItem euiFlexItem--flexGrowZero"
-          >
-            <EuiButton
-              data-test-subj="metrics__editView"
-              iconType="pencil"
-              isDisabled={false}
-              onClick={[Function]}
-              size="s"
-            >
-              <EuiButtonDisplay
-                baseClassName="euiButton"
-                data-test-subj="metrics__editView"
-                disabled={false}
-                element="button"
-                iconType="pencil"
-                isDisabled={false}
-                onClick={[Function]}
-                size="s"
-                type="button"
-              >
-                <button
-                  className="euiButton euiButton--primary euiButton--small"
-                  data-test-subj="metrics__editView"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "minWidth": undefined,
-                    }
-                  }
-                  type="button"
-                >
-                  <EuiButtonContent
-                    className="euiButton__content"
-                    iconSide="left"
-                    iconType="pencil"
-                    textProps={
-                      Object {
-                        "className": "euiButton__text",
-                      }
-                    }
-                  >
-                    <span
-                      className="euiButtonContent euiButton__content"
-                    >
-                      <EuiIcon
-                        className="euiButtonContent__icon"
-                        color="inherit"
-                        size="m"
-                        type="pencil"
-                      >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                          focusable="false"
-                          role="img"
-                          style={null}
-                        >
-                          <svg
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                            focusable="false"
-                            height={16}
-                            role="img"
-                            style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                      <span
-                        className="euiButton__text"
-                      >
-                        Edit view
-                      </span>
-                    </span>
-                  </EuiButtonContent>
-                </button>
-              </EuiButtonDisplay>
-            </EuiButton>
+                                <span
+                                  className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                >
+                                  <EuiIcon
+                                    className="euiButtonContent__icon"
+                                    color="inherit"
+                                    size="m"
+                                    type="arrowDown"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                  <span
+                                    className="euiButton__text"
+                                  >
+                                    Save
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonDisplay>
+                        </EuiButton>
+                      </Savebutton>
+                    </div>
+                  </div>
+                </EuiPopover>
+              </MetricsExportPopOver>
+            </Component>
           </div>
         </EuiFlexItem>
       </div>
diff --git a/public/components/metrics/top_menu/__tests__/metrics_export_panel.test.tsx b/public/components/metrics/top_menu/__tests__/metrics_export_panel.test.tsx
index ca1759beb..75cce864e 100644
--- a/public/components/metrics/top_menu/__tests__/metrics_export_panel.test.tsx
+++ b/public/components/metrics/top_menu/__tests__/metrics_export_panel.test.tsx
@@ -8,7 +8,12 @@ import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
 import httpClientMock from '../../../../../test/__mocks__/httpClientMock';
-import { sampleSavedMetric, sampleSortedMetricsLayout } from '../../../../../test/metrics_contants';
+import {
+  sampleAvailableDashboards,
+  sampleMetricsToExport,
+  sampleSavedMetric,
+  sampleSortedMetricsLayout,
+} from '../../../../../test/metrics_contants';
 import { applyMiddleware, createStore } from '@reduxjs/toolkit';
 import { rootReducer } from '../../../../framework/redux/reducers';
 import { Provider } from 'react-redux';
@@ -40,12 +45,8 @@ describe('Export Metrics Panel Component', () => {
     const wrapper = mount(
       <Provider store={store}>
         <MetricsExportPanel
-          http={http}
-          visualizationsMetaData={visualizationsMetaData}
-          setVisualizationsMetaData={setVisualizationsMetaData}
-          sortedMetricsLayout={sortedMetricsLayout}
-          selectedPanelOptions={[]}
-          setSelectedPanelOptions={setSelectedPanelOptions}
+          metricsToExport={sampleMetricsToExport}
+          availableDashboards={sampleAvailableDashboards}
         />
       </Provider>
     );
diff --git a/public/components/metrics/top_menu/__tests__/top_menu.test.tsx b/public/components/metrics/top_menu/__tests__/top_menu.test.tsx
index 17822d22f..bca6805a9 100644
--- a/public/components/metrics/top_menu/__tests__/top_menu.test.tsx
+++ b/public/components/metrics/top_menu/__tests__/top_menu.test.tsx
@@ -7,171 +7,19 @@ import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
-import httpClientMock from '../../../../../test/__mocks__/httpClientMock';
-import { sampleMetric, sampleMetricsVisualizations } from '../../../../../test/metrics_contants';
 import { createStore } from '@reduxjs/toolkit';
 import { rootReducer } from '../../../../framework/redux/reducers';
 import { Provider } from 'react-redux';
-import { HttpResponse } from '../../../../../../../src/core/public';
 import { TopMenu } from '../top_menu';
-import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
-import SavedObjects from '../../../../services/saved_objects/event_analytics/saved_objects';
-import { MetricType } from '../../../../../common/types/metrics';
 
 describe('Metrics Top Menu Component', () => {
   configure({ adapter: new Adapter() });
   const store = createStore(rootReducer);
 
   it('renders Top Menu Component when enabled', async () => {
-    httpClientMock.get = jest.fn(() => Promise.resolve((sampleMetric as unknown) as HttpResponse));
-
-    const http = httpClientMock;
-    const IsTopPanelDisabled = false;
-    const startTime = 'now-1d';
-    const endTime = 'now';
-    const onDatePickerChange = jest.fn();
-    const recentlyUsedRanges: DurationRange[] = [];
-    const editMode = false;
-    const setEditMode = jest.fn();
-    const setEditActionType = jest.fn();
-    const panelVisualizations = sampleMetricsVisualizations;
-    const setPanelVisualizations = jest.fn();
-    const resolutionValue = 'h';
-    const setResolutionValue = jest.fn();
-    const spanValue = 1;
-    const setSpanValue = jest.fn();
-    const resolutionSelectId = 'select_123';
-    const savedObjects = new SavedObjects(httpClientMock);
-    const setToast = jest.fn();
-
-    const wrapper = mount(
-      <Provider store={store}>
-        <TopMenu
-          http={http}
-          IsTopPanelDisabled={IsTopPanelDisabled}
-          startTime={startTime}
-          endTime={endTime}
-          onDatePickerChange={onDatePickerChange}
-          recentlyUsedRanges={recentlyUsedRanges}
-          editMode={editMode}
-          setEditMode={setEditMode}
-          setEditActionType={setEditActionType}
-          panelVisualizations={panelVisualizations}
-          setPanelVisualizations={setPanelVisualizations}
-          resolutionValue={resolutionValue}
-          setResolutionValue={setResolutionValue}
-          spanValue={spanValue}
-          setSpanValue={setSpanValue}
-          resolutionSelectId={resolutionSelectId}
-          savedObjects={savedObjects}
-          setToast={setToast}
-        />
-      </Provider>
-    );
-    wrapper.update();
-
-    await waitFor(() => {
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-
-  it('renders Top Menu Component when disabled with no metric visualizations', async () => {
-    httpClientMock.get = jest.fn();
-
-    const http = httpClientMock;
-    const IsTopPanelDisabled = true;
-    const startTime = 'now-1d';
-    const endTime = 'now';
-    const onDatePickerChange = jest.fn();
-    const recentlyUsedRanges: DurationRange[] = [];
-    const editMode = false;
-    const setEditMode = jest.fn();
-    const setEditActionType = jest.fn();
-    const panelVisualizations: MetricType[] = [];
-    const setPanelVisualizations = jest.fn();
-    const resolutionValue = 'h';
-    const setResolutionValue = jest.fn();
-    const spanValue = 1;
-    const setSpanValue = jest.fn();
-    const resolutionSelectId = 'select_123';
-    const savedObjects = new SavedObjects(httpClientMock);
-    const setToast = jest.fn();
-
-    const wrapper = mount(
-      <Provider store={store}>
-        <TopMenu
-          http={http}
-          IsTopPanelDisabled={IsTopPanelDisabled}
-          startTime={startTime}
-          endTime={endTime}
-          onDatePickerChange={onDatePickerChange}
-          recentlyUsedRanges={recentlyUsedRanges}
-          editMode={editMode}
-          setEditMode={setEditMode}
-          setEditActionType={setEditActionType}
-          panelVisualizations={panelVisualizations}
-          setPanelVisualizations={setPanelVisualizations}
-          resolutionValue={resolutionValue}
-          setResolutionValue={setResolutionValue}
-          spanValue={spanValue}
-          setSpanValue={setSpanValue}
-          resolutionSelectId={resolutionSelectId}
-          savedObjects={savedObjects}
-          setToast={setToast}
-        />
-      </Provider>
-    );
-    wrapper.update();
-
-    await waitFor(() => {
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-
-  it('renders Top Menu Component when disabled in edit mode', async () => {
-    httpClientMock.get = jest.fn(() => Promise.resolve((sampleMetric as unknown) as HttpResponse));
-
-    const http = httpClientMock;
-    const IsTopPanelDisabled = true;
-    const startTime = 'now-1d';
-    const endTime = 'now';
-    const onDatePickerChange = jest.fn();
-    const recentlyUsedRanges: DurationRange[] = [];
-    const editMode = true;
-    const setEditMode = jest.fn();
-    const setEditActionType = jest.fn();
-    const panelVisualizations = sampleMetricsVisualizations;
-    const setPanelVisualizations = jest.fn();
-    const resolutionValue = 'h';
-    const setResolutionValue = jest.fn();
-    const spanValue = 1;
-    const setSpanValue = jest.fn();
-    const resolutionSelectId = 'select_123';
-    const savedObjects = new SavedObjects(httpClientMock);
-    const setToast = jest.fn();
-
     const wrapper = mount(
       <Provider store={store}>
-        <TopMenu
-          http={http}
-          IsTopPanelDisabled={IsTopPanelDisabled}
-          startTime={startTime}
-          endTime={endTime}
-          onDatePickerChange={onDatePickerChange}
-          recentlyUsedRanges={recentlyUsedRanges}
-          editMode={editMode}
-          setEditMode={setEditMode}
-          setEditActionType={setEditActionType}
-          panelVisualizations={panelVisualizations}
-          setPanelVisualizations={setPanelVisualizations}
-          resolutionValue={resolutionValue}
-          setResolutionValue={setResolutionValue}
-          spanValue={spanValue}
-          setSpanValue={setSpanValue}
-          resolutionSelectId={resolutionSelectId}
-          savedObjects={savedObjects}
-          setToast={setToast}
-        />
+        <TopMenu />
       </Provider>
     );
     wrapper.update();
diff --git a/public/components/metrics/top_menu/metrics_export.tsx b/public/components/metrics/top_menu/metrics_export.tsx
index fc1be965d..bf0b52ef6 100644
--- a/public/components/metrics/top_menu/metrics_export.tsx
+++ b/public/components/metrics/top_menu/metrics_export.tsx
@@ -17,6 +17,7 @@ import { useSelector } from 'react-redux';
 import { max } from 'lodash';
 import semver from 'semver';
 import { render, unmountComponentAtNode } from 'react-dom';
+import { I18nProvider } from '@osd/i18n/react';
 import { MetricsExportPanel } from './metrics_export_panel';
 import { OSDSavedVisualizationClient } from '../../../services/saved_objects/saved_object_client/osd_saved_objects/saved_visualization';
 import { getSavedObjectsClient } from '../../../services/saved_objects/saved_object_client/client_factory';
@@ -35,7 +36,6 @@ import { updateCatalogVisualizationQuery } from '../../common/query_utils';
 import { PROMQL_METRIC_SUBTYPE } from '../../../../common/constants/shared';
 import { SavedObjectLoader } from '../../../../../../src/plugins/saved_objects/public';
 import { MountPoint } from '../../../../../../src/core/public';
-import { I18nProvider } from '../../../../../../packages/osd-i18n/src/react/provider';
 
 const Savebutton = ({
   setIsPanelOpen,
diff --git a/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
index 1fac9b7f1..8bfdd0f91 100644
--- a/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
+++ b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
     }
   }
 >
-  <Component
+  <Connect(Component)
     chrome={
       Object {
         "addApplicationClass": [MockFunction],
@@ -26,165 +26,7 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
         "getCustomNavLink$": [MockFunction],
         "getHeaderComponent": [MockFunction],
         "getHelpExtension$": [MockFunction],
-        "getIsNavDrawerLocked$": [MockFunction] {
-          "calls": Array [
-            Array [],
-            Array [],
-            Array [],
-          ],
-          "results": Array [
-            Object {
-              "type": "return",
-              "value": BehaviorSubject {
-                "_isScalar": false,
-                "_value": false,
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [
-                  Subscriber {
-                    "_parentOrParents": null,
-                    "_subscriptions": Array [
-                      SubjectSubscription {
-                        "_parentOrParents": [Circular],
-                        "_subscriptions": null,
-                        "closed": false,
-                        "subject": [Circular],
-                        "subscriber": [Circular],
-                      },
-                    ],
-                    "closed": false,
-                    "destination": SafeSubscriber {
-                      "_complete": undefined,
-                      "_context": [Circular],
-                      "_error": undefined,
-                      "_next": [Function],
-                      "_parentOrParents": null,
-                      "_parentSubscriber": [Circular],
-                      "_subscriptions": null,
-                      "closed": false,
-                      "destination": Object {
-                        "closed": true,
-                        "complete": [Function],
-                        "error": [Function],
-                        "next": [Function],
-                      },
-                      "isStopped": false,
-                      "syncErrorThrowable": false,
-                      "syncErrorThrown": false,
-                      "syncErrorValue": null,
-                    },
-                    "isStopped": false,
-                    "syncErrorThrowable": true,
-                    "syncErrorThrown": false,
-                    "syncErrorValue": null,
-                  },
-                ],
-                "thrownError": null,
-              },
-            },
-            Object {
-              "type": "return",
-              "value": BehaviorSubject {
-                "_isScalar": false,
-                "_value": false,
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [
-                  Subscriber {
-                    "_parentOrParents": null,
-                    "_subscriptions": Array [
-                      SubjectSubscription {
-                        "_parentOrParents": [Circular],
-                        "_subscriptions": null,
-                        "closed": false,
-                        "subject": [Circular],
-                        "subscriber": [Circular],
-                      },
-                    ],
-                    "closed": false,
-                    "destination": SafeSubscriber {
-                      "_complete": undefined,
-                      "_context": [Circular],
-                      "_error": undefined,
-                      "_next": [Function],
-                      "_parentOrParents": null,
-                      "_parentSubscriber": [Circular],
-                      "_subscriptions": null,
-                      "closed": false,
-                      "destination": Object {
-                        "closed": true,
-                        "complete": [Function],
-                        "error": [Function],
-                        "next": [Function],
-                      },
-                      "isStopped": false,
-                      "syncErrorThrowable": false,
-                      "syncErrorThrown": false,
-                      "syncErrorValue": null,
-                    },
-                    "isStopped": false,
-                    "syncErrorThrowable": true,
-                    "syncErrorThrown": false,
-                    "syncErrorValue": null,
-                  },
-                ],
-                "thrownError": null,
-              },
-            },
-            Object {
-              "type": "return",
-              "value": BehaviorSubject {
-                "_isScalar": false,
-                "_value": false,
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [
-                  Subscriber {
-                    "_parentOrParents": null,
-                    "_subscriptions": Array [
-                      SubjectSubscription {
-                        "_parentOrParents": [Circular],
-                        "_subscriptions": null,
-                        "closed": false,
-                        "subject": [Circular],
-                        "subscriber": [Circular],
-                      },
-                    ],
-                    "closed": false,
-                    "destination": SafeSubscriber {
-                      "_complete": undefined,
-                      "_context": [Circular],
-                      "_error": undefined,
-                      "_next": [Function],
-                      "_parentOrParents": null,
-                      "_parentSubscriber": [Circular],
-                      "_subscriptions": null,
-                      "closed": false,
-                      "destination": Object {
-                        "closed": true,
-                        "complete": [Function],
-                        "error": [Function],
-                        "next": [Function],
-                      },
-                      "isStopped": false,
-                      "syncErrorThrowable": false,
-                      "syncErrorThrown": false,
-                      "syncErrorValue": null,
-                    },
-                    "isStopped": false,
-                    "syncErrorThrowable": true,
-                    "syncErrorThrown": false,
-                    "syncErrorValue": null,
-                  },
-                ],
-                "thrownError": null,
-              },
-            },
-          ],
-        },
+        "getIsNavDrawerLocked$": [MockFunction],
         "getIsVisible$": [MockFunction],
         "logos": Object {
           "AnimatedMark": Object {
@@ -292,7 +134,11 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
         Object {
           "h": 2,
           "id": "Y4muP4QBiaYaSxpXk7r8",
-          "metricType": "savedCustomMetric",
+          "query": Object {
+            "aggregation": "avg",
+            "attributesGroupBy": Array [],
+            "type": "savedCustomMetric",
+          },
           "savedVisualizationId": "Y4muP4QBiaYaSxpXk7r8",
           "w": 12,
           "x": 0,
@@ -310,7 +156,11 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
         Object {
           "h": 2,
           "id": "prometheus.process_resident_memory_bytes",
-          "metricType": "prometheusMetric",
+          "query": Object {
+            "aggregation": "avg",
+            "attributesGroupBy": Array [],
+            "type": "prometheusMetric",
+          },
           "savedVisualizationId": "prometheus.process_resident_memory_bytes",
           "w": 12,
           "x": 0,
@@ -318,1097 +168,297 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
         },
       ]
     }
-    setEditActionType={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            "",
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
+    setEditActionType={[MockFunction]}
     setPanelVisualizations={[MockFunction]}
     spanParam="1h"
     startTime="now-30m"
   >
-    <WidthProvider
-      breakpoints={
-        Object {
-          "lg": 1200,
-          "md": 996,
-          "sm": 768,
-          "xs": 480,
-          "xxs": 0,
-        }
-      }
-      className="layout full-width"
-      cols={
+    <Component
+      allMetrics={Object {}}
+      chrome={
         Object {
-          "lg": 12,
-          "md": 12,
-          "sm": 12,
-          "xs": 1,
-          "xxs": 1,
-        }
-      }
-      layouts={
-        Object {
-          "lg": Array [
-            Object {
-              "h": 2,
-              "i": "Y4muP4QBiaYaSxpXk7r8",
-              "maxW": 12,
-              "minW": 12,
-              "static": true,
-              "w": 12,
-              "x": 0,
-              "y": 0,
-            },
-            Object {
-              "h": 2,
-              "i": "tomAP4QBiaYaSxpXALls",
-              "maxW": 12,
-              "minW": 12,
-              "static": true,
-              "w": 12,
-              "x": 0,
-              "y": 2,
-            },
-            Object {
-              "h": 2,
-              "i": "prometheus.process_resident_memory_bytes",
-              "maxW": 12,
-              "minW": 12,
-              "static": true,
-              "w": 12,
-              "x": 0,
-              "y": 4,
-            },
-          ],
-          "md": Array [
-            Object {
-              "h": 2,
-              "i": "Y4muP4QBiaYaSxpXk7r8",
-              "maxW": 12,
-              "minW": 12,
-              "static": true,
-              "w": 12,
-              "x": 0,
-              "y": 0,
-            },
-            Object {
-              "h": 2,
-              "i": "tomAP4QBiaYaSxpXALls",
-              "maxW": 12,
-              "minW": 12,
-              "static": true,
-              "w": 12,
-              "x": 0,
-              "y": 2,
-            },
-            Object {
-              "h": 2,
-              "i": "prometheus.process_resident_memory_bytes",
-              "maxW": 12,
-              "minW": 12,
-              "static": true,
-              "w": 12,
-              "x": 0,
-              "y": 4,
-            },
-          ],
-          "sm": Array [
-            Object {
-              "h": 2,
-              "i": "Y4muP4QBiaYaSxpXk7r8",
-              "maxW": 12,
-              "minW": 12,
-              "static": true,
-              "w": 12,
-              "x": 0,
-              "y": 0,
-            },
-            Object {
-              "h": 2,
-              "i": "tomAP4QBiaYaSxpXALls",
-              "maxW": 12,
-              "minW": 12,
-              "static": true,
-              "w": 12,
-              "x": 0,
-              "y": 2,
-            },
-            Object {
-              "h": 2,
-              "i": "prometheus.process_resident_memory_bytes",
-              "maxW": 12,
-              "minW": 12,
-              "static": true,
-              "w": 12,
-              "x": 0,
-              "y": 4,
-            },
-          ],
-        }
-      }
-      measureBeforeMount={false}
-      onLayoutChange={[Function]}
-    >
-      <ResponsiveReactGridLayout
-        breakpoints={
-          Object {
-            "lg": 1200,
-            "md": 996,
-            "sm": 768,
-            "xs": 480,
-            "xxs": 0,
-          }
-        }
-        className="layout full-width"
-        cols={
-          Object {
-            "lg": 12,
-            "md": 12,
-            "sm": 12,
-            "xs": 1,
-            "xxs": 1,
-          }
-        }
-        layouts={
-          Object {
-            "lg": Array [
-              Object {
-                "h": 2,
-                "i": "Y4muP4QBiaYaSxpXk7r8",
-                "maxW": 12,
-                "minW": 12,
-                "static": true,
-                "w": 12,
-                "x": 0,
-                "y": 0,
+          "addApplicationClass": [MockFunction],
+          "docTitle": Object {
+            "change": [MockFunction],
+            "reset": [MockFunction],
+          },
+          "getApplicationClasses$": [MockFunction],
+          "getBadge$": [MockFunction],
+          "getBreadcrumbs$": [MockFunction],
+          "getCustomNavLink$": [MockFunction],
+          "getHeaderComponent": [MockFunction],
+          "getHelpExtension$": [MockFunction],
+          "getIsNavDrawerLocked$": [MockFunction],
+          "getIsVisible$": [MockFunction],
+          "logos": Object {
+            "AnimatedMark": Object {
+              "dark": Object {
+                "type": "default",
+                "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+              },
+              "light": Object {
+                "type": "default",
+                "url": "/ui/logos/opensearch_spinner_on_light.svg",
               },
-              Object {
-                "h": 2,
-                "i": "tomAP4QBiaYaSxpXALls",
-                "maxW": 12,
-                "minW": 12,
-                "static": true,
-                "w": 12,
-                "x": 0,
-                "y": 2,
+              "type": "default",
+              "url": "/ui/logos/opensearch_spinner_on_light.svg",
+            },
+            "Application": Object {
+              "dark": Object {
+                "type": "default",
+                "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
               },
-              Object {
-                "h": 2,
-                "i": "prometheus.process_resident_memory_bytes",
-                "maxW": 12,
-                "minW": 12,
-                "static": true,
-                "w": 12,
-                "x": 0,
-                "y": 4,
+              "light": Object {
+                "type": "default",
+                "url": "/ui/logos/opensearch_dashboards_on_light.svg",
               },
-            ],
-            "md": Array [
-              Object {
-                "h": 2,
-                "i": "Y4muP4QBiaYaSxpXk7r8",
-                "maxW": 12,
-                "minW": 12,
-                "static": true,
-                "w": 12,
-                "x": 0,
-                "y": 0,
+              "type": "default",
+              "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+            },
+            "CenterMark": Object {
+              "dark": Object {
+                "type": "default",
+                "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
               },
-              Object {
-                "h": 2,
-                "i": "tomAP4QBiaYaSxpXALls",
-                "maxW": 12,
-                "minW": 12,
-                "static": true,
-                "w": 12,
-                "x": 0,
-                "y": 2,
+              "light": Object {
+                "type": "default",
+                "url": "/ui/logos/opensearch_center_mark_on_light.svg",
               },
-              Object {
-                "h": 2,
-                "i": "prometheus.process_resident_memory_bytes",
-                "maxW": 12,
-                "minW": 12,
-                "static": true,
-                "w": 12,
-                "x": 0,
-                "y": 4,
+              "type": "default",
+              "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+            },
+            "Mark": Object {
+              "dark": Object {
+                "type": "default",
+                "url": "/ui/logos/opensearch_mark_on_dark.svg",
               },
-            ],
-            "sm": Array [
-              Object {
-                "h": 2,
-                "i": "Y4muP4QBiaYaSxpXk7r8",
-                "maxW": 12,
-                "minW": 12,
-                "static": true,
-                "w": 12,
-                "x": 0,
-                "y": 0,
+              "light": Object {
+                "type": "default",
+                "url": "/ui/logos/opensearch_mark_on_light.svg",
               },
-              Object {
-                "h": 2,
-                "i": "tomAP4QBiaYaSxpXALls",
-                "maxW": 12,
-                "minW": 12,
-                "static": true,
-                "w": 12,
-                "x": 0,
-                "y": 2,
+              "type": "default",
+              "url": "/ui/logos/opensearch_mark_on_light.svg",
+            },
+            "OpenSearch": Object {
+              "dark": Object {
+                "type": "default",
+                "url": "/ui/logos/opensearch_on_dark.svg",
               },
-              Object {
-                "h": 2,
-                "i": "prometheus.process_resident_memory_bytes",
-                "maxW": 12,
-                "minW": 12,
-                "static": true,
-                "w": 12,
-                "x": 0,
-                "y": 4,
+              "light": Object {
+                "type": "default",
+                "url": "/ui/logos/opensearch_on_light.svg",
               },
-            ],
-          }
+              "type": "default",
+              "url": "/ui/logos/opensearch_on_light.svg",
+            },
+            "colorScheme": "light",
+          },
+          "navControls": Object {
+            "getCenter$": [MockFunction],
+            "getLeft$": [MockFunction],
+            "getRight$": [MockFunction],
+            "registerCenter": [MockFunction],
+            "registerLeft": [MockFunction],
+            "registerRight": [MockFunction],
+          },
+          "navLinks": Object {
+            "enableForcedAppSwitcherNavigation": [MockFunction],
+            "get": [MockFunction],
+            "getAll": [MockFunction],
+            "getForceAppSwitcherNavigation$": [MockFunction],
+            "getNavLinks$": [MockFunction],
+            "has": [MockFunction],
+            "showOnly": [MockFunction],
+            "update": [MockFunction],
+          },
+          "recentlyAccessed": Object {
+            "add": [MockFunction],
+            "get": [MockFunction],
+            "get$": [MockFunction],
+          },
+          "removeApplicationClass": [MockFunction],
+          "setAppTitle": [MockFunction],
+          "setBadge": [MockFunction],
+          "setBreadcrumbs": [MockFunction],
+          "setCustomNavLink": [MockFunction],
+          "setHelpExtension": [MockFunction],
+          "setHelpSupportUrl": [MockFunction],
+          "setIsVisible": [MockFunction],
         }
-        onBreakpointChange={[Function]}
-        onLayoutChange={[Function]}
-        onWidthChange={[Function]}
-        width={0}
+      }
+      dateSpanFilter={
+        Object {
+          "end": "now",
+          "recentlyUsedRanges": Array [],
+          "resolution": "h",
+          "span": 1,
+          "start": "now-1d",
+        }
+      }
+      editActionType="save"
+      editMode={false}
+      endTime="now"
+      moveMetric={[Function]}
+      moveToEvents={[MockFunction]}
+      onRefresh={true}
+      panelVisualizations={
+        Array [
+          Object {
+            "h": 2,
+            "id": "Y4muP4QBiaYaSxpXk7r8",
+            "query": Object {
+              "aggregation": "avg",
+              "attributesGroupBy": Array [],
+              "type": "savedCustomMetric",
+            },
+            "savedVisualizationId": "Y4muP4QBiaYaSxpXk7r8",
+            "w": 12,
+            "x": 0,
+            "y": 0,
+          },
+          Object {
+            "h": 2,
+            "id": "tomAP4QBiaYaSxpXALls",
+            "metricType": "savedCustomMetric",
+            "savedVisualizationId": "tomAP4QBiaYaSxpXALls",
+            "w": 12,
+            "x": 0,
+            "y": 2,
+          },
+          Object {
+            "h": 2,
+            "id": "prometheus.process_resident_memory_bytes",
+            "query": Object {
+              "aggregation": "avg",
+              "attributesGroupBy": Array [],
+              "type": "prometheusMetric",
+            },
+            "savedVisualizationId": "prometheus.process_resident_memory_bytes",
+            "w": 12,
+            "x": 0,
+            "y": 4,
+          },
+        ]
+      }
+      refresh={0}
+      selectedMetrics={Object {}}
+      selectedMetricsIds={Array []}
+      setEditActionType={[MockFunction]}
+      setPanelVisualizations={[MockFunction]}
+      spanParam="1h"
+      startTime="now-30m"
+    >
+      <EuiDragDropContext
+        onDragEnd={[Function]}
       >
-        <ReactGridLayout
-          autoSize={true}
-          className="layout full-width"
-          cols={1}
-          compactType="vertical"
-          containerPadding={null}
-          draggableCancel=""
-          draggableHandle=""
-          isDraggable={true}
-          isResizable={true}
-          layout={
-            Array [
-              Object {
-                "h": 2,
-                "i": "Y4muP4QBiaYaSxpXk7r8",
-                "isDraggable": undefined,
-                "isResizable": undefined,
-                "maxH": undefined,
-                "maxW": 12,
-                "minH": undefined,
-                "minW": 12,
-                "moved": false,
-                "static": true,
-                "w": 1,
-                "x": 0,
-                "y": 0,
-              },
-              Object {
-                "h": 2,
-                "i": "tomAP4QBiaYaSxpXALls",
-                "isDraggable": undefined,
-                "isResizable": undefined,
-                "maxH": undefined,
-                "maxW": 12,
-                "minH": undefined,
-                "minW": 12,
-                "moved": false,
-                "static": true,
-                "w": 1,
-                "x": 0,
-                "y": 2,
-              },
-              Object {
-                "h": 2,
-                "i": "prometheus.process_resident_memory_bytes",
-                "isDraggable": undefined,
-                "isResizable": undefined,
-                "maxH": undefined,
-                "maxW": 12,
-                "minH": undefined,
-                "minW": 12,
-                "moved": false,
-                "static": true,
-                "w": 1,
-                "x": 0,
-                "y": 4,
-              },
-            ]
-          }
-          margin={
-            Array [
-              10,
-              10,
-            ]
-          }
-          maxRows={Infinity}
-          onDrag={[Function]}
+        <DragDropContext
+          onDragEnd={[Function]}
           onDragStart={[Function]}
-          onDragStop={[Function]}
-          onLayoutChange={[Function]}
-          onResize={[Function]}
-          onResizeStart={[Function]}
-          onResizeStop={[Function]}
-          preventCollision={false}
-          rowHeight={150}
-          style={Object {}}
-          useCSSTransforms={true}
-          verticalCompact={true}
-          width={0}
         >
-          <div
-            className="react-grid-layout layout full-width"
-            style={
-              Object {
-                "height": "970px",
-              }
-            }
-          >
-            <GridItem
-              cancel=""
-              className=""
-              cols={1}
-              containerPadding={
-                Array [
-                  10,
-                  10,
-                ]
-              }
-              containerWidth={0}
-              h={2}
-              handle=""
-              i="Y4muP4QBiaYaSxpXk7r8"
-              isDraggable={false}
-              isResizable={false}
-              key=".$Y4muP4QBiaYaSxpXk7r8"
-              margin={
-                Array [
-                  10,
-                  10,
-                ]
-              }
-              maxH={Infinity}
-              maxRows={Infinity}
-              maxW={12}
-              minH={1}
-              minW={12}
-              onDrag={[Function]}
-              onDragStart={[Function]}
-              onDragStop={[Function]}
-              onResize={[Function]}
-              onResizeStart={[Function]}
-              onResizeStop={[Function]}
-              rowHeight={150}
-              static={true}
-              useCSSTransforms={true}
-              usePercentages={false}
-              w={1}
-              x={0}
-              y={0}
-            >
-              <div
-                className="react-grid-item static cssTransforms"
-                key="Y4muP4QBiaYaSxpXk7r8"
-                style={
-                  Object {
-                    "MozTransform": "translate(10px,10px)",
-                    "OTransform": "translate(10px,10px)",
-                    "WebkitTransform": "translate(10px,10px)",
-                    "height": "310px",
-                    "msTransform": "translate(10px,10px)",
-                    "position": "absolute",
-                    "transform": "translate(10px,10px)",
-                    "width": "-20px",
-                  }
-                }
-              >
-                <Component
-                  editMode={false}
-                  fromTime="now-1d"
-                  key="Y4muP4QBiaYaSxpXk7r8"
-                  onEditClick={[MockFunction]}
-                  onRefresh={0}
-                  pplFilterValue=""
-                  removeVisualization={[Function]}
-                  savedVisualizationId="Y4muP4QBiaYaSxpXk7r8"
-                  spanParam="1h"
-                  toTime="now"
-                  usedInNotebooks={true}
-                  visualizationId="Y4muP4QBiaYaSxpXk7r8"
-                >
-                  <EuiPanel
-                    className="panel-full-width"
-                    data-test-subj="VisualizationPanel"
-                    grow={false}
-                  >
-                    <div
-                      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero panel-full-width"
-                      data-test-subj="VisualizationPanel"
-                    >
-                      <div
-                        className=""
-                      >
-                        <EuiFlexGroup
-                          justifyContent="spaceBetween"
-                        >
-                          <div
-                            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                          >
-                            <EuiFlexItem
-                              style={
-                                Object {
-                                  "width": "35%",
-                                }
-                              }
-                            >
-                              <div
-                                className="euiFlexItem"
-                                style={
-                                  Object {
-                                    "width": "35%",
-                                  }
-                                }
-                              >
-                                <EuiText
-                                  className="panels-title-text"
-                                  grow={false}
-                                >
-                                  <div
-                                    className="euiText euiText--medium panels-title-text euiText--constrainedWidth"
-                                  >
-                                    <EuiToolTip
-                                      content=""
-                                      delay="long"
-                                      position="top"
-                                    >
-                                      <span
-                                        className="euiToolTipAnchor"
-                                        onKeyUp={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                      >
-                                        <h5
-                                          data-test-subj="visualizationHeader"
-                                          onBlur={[Function]}
-                                          onFocus={[Function]}
-                                        />
-                                      </span>
-                                    </EuiToolTip>
-                                  </div>
-                                </EuiText>
-                              </div>
-                            </EuiFlexItem>
-                            <EuiFlexItem
-                              className="visualization-action-button"
-                              grow={false}
-                            >
-                              <div
-                                className="euiFlexItem euiFlexItem--flexGrowZero visualization-action-button"
-                              >
-                                <EuiPopover
-                                  anchorPosition="downLeft"
-                                  button={
-                                    <EuiButtonIcon
-                                      aria-label="actionMenuButton"
-                                      iconType="boxesHorizontal"
-                                      onClick={[Function]}
-                                    />
-                                  }
-                                  closePopover={[Function]}
-                                  display="inlineBlock"
-                                  hasArrow={true}
-                                  isOpen={false}
-                                  ownFocus={true}
-                                  panelPaddingSize="m"
-                                >
-                                  <div
-                                    className="euiPopover euiPopover--anchorDownLeft"
-                                  >
-                                    <div
-                                      className="euiPopover__anchor"
-                                    >
-                                      <EuiButtonIcon
-                                        aria-label="actionMenuButton"
-                                        iconType="boxesHorizontal"
-                                        onClick={[Function]}
-                                      >
-                                        <button
-                                          aria-label="actionMenuButton"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                          disabled={false}
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="boxesHorizontal"
-                                          >
-                                            <EuiIconEmpty
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                focusable="false"
-                                                height={16}
-                                                role="img"
-                                                style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              />
-                                            </EuiIconEmpty>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
-                                    </div>
-                                  </div>
-                                </EuiPopover>
-                              </div>
-                            </EuiFlexItem>
-                          </div>
-                        </EuiFlexGroup>
-                      </div>
-                      <div
-                        className="visualization-div"
-                      >
-                        <EuiLoadingChart
-                          className="visualization-loading-chart"
-                          mono={true}
-                          size="xl"
-                        >
-                          <span
-                            className="euiLoadingChart euiLoadingChart--mono visualization-loading-chart euiLoadingChart--xLarge"
-                          >
-                            <span
-                              className="euiLoadingChart__bar"
-                            />
-                            <span
-                              className="euiLoadingChart__bar"
-                            />
-                            <span
-                              className="euiLoadingChart__bar"
-                            />
-                            <span
-                              className="euiLoadingChart__bar"
-                            />
-                          </span>
-                        </EuiLoadingChart>
-                      </div>
-                    </div>
-                  </EuiPanel>
-                </Component>
-              </div>
-            </GridItem>
-            <GridItem
-              cancel=""
-              className=""
-              cols={1}
-              containerPadding={
-                Array [
-                  10,
-                  10,
-                ]
-              }
-              containerWidth={0}
-              h={2}
-              handle=""
-              i="tomAP4QBiaYaSxpXALls"
-              isDraggable={false}
-              isResizable={false}
-              key=".$tomAP4QBiaYaSxpXALls"
-              margin={
-                Array [
-                  10,
-                  10,
-                ]
-              }
-              maxH={Infinity}
-              maxRows={Infinity}
-              maxW={12}
-              minH={1}
-              minW={12}
-              onDrag={[Function]}
+          <ErrorBoundary>
+            <App
+              contextId="0"
+              dragHandleUsageInstructions="
+  Press space bar to start a drag.
+  When dragging you can use the arrow keys to move the item around and escape to cancel.
+  Some screen readers may require you to be in focus mode or to use your pass through key
+"
+              onDragEnd={[Function]}
               onDragStart={[Function]}
-              onDragStop={[Function]}
-              onResize={[Function]}
-              onResizeStart={[Function]}
-              onResizeStop={[Function]}
-              rowHeight={150}
-              static={true}
-              useCSSTransforms={true}
-              usePercentages={false}
-              w={1}
-              x={0}
-              y={2}
+              setCallbacks={[Function]}
             >
-              <div
-                className="react-grid-item static cssTransforms"
-                key="tomAP4QBiaYaSxpXALls"
-                style={
+              <Provider
+                context={
                   Object {
-                    "MozTransform": "translate(10px,330px)",
-                    "OTransform": "translate(10px,330px)",
-                    "WebkitTransform": "translate(10px,330px)",
-                    "height": "310px",
-                    "msTransform": "translate(10px,330px)",
-                    "position": "absolute",
-                    "transform": "translate(10px,330px)",
-                    "width": "-20px",
+                    "$$typeof": Symbol(react.context),
+                    "Consumer": Object {
+                      "$$typeof": Symbol(react.context),
+                      "_calculateChangedBits": null,
+                      "_context": [Circular],
+                    },
+                    "Provider": Object {
+                      "$$typeof": Symbol(react.provider),
+                      "_context": [Circular],
+                    },
+                    "_calculateChangedBits": null,
+                    "_currentRenderer": Object {},
+                    "_currentRenderer2": null,
+                    "_currentValue": null,
+                    "_currentValue2": null,
+                    "_threadCount": 0,
                   }
                 }
-              >
-                <Component
-                  editMode={false}
-                  fromTime="now-1d"
-                  key="tomAP4QBiaYaSxpXALls"
-                  onEditClick={[MockFunction]}
-                  onRefresh={0}
-                  pplFilterValue=""
-                  removeVisualization={[Function]}
-                  savedVisualizationId="tomAP4QBiaYaSxpXALls"
-                  spanParam="1h"
-                  toTime="now"
-                  usedInNotebooks={true}
-                  visualizationId="tomAP4QBiaYaSxpXALls"
-                >
-                  <EuiPanel
-                    className="panel-full-width"
-                    data-test-subj="VisualizationPanel"
-                    grow={false}
-                  >
-                    <div
-                      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero panel-full-width"
-                      data-test-subj="VisualizationPanel"
-                    >
-                      <div
-                        className=""
-                      >
-                        <EuiFlexGroup
-                          justifyContent="spaceBetween"
-                        >
-                          <div
-                            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                          >
-                            <EuiFlexItem
-                              style={
-                                Object {
-                                  "width": "35%",
-                                }
-                              }
-                            >
-                              <div
-                                className="euiFlexItem"
-                                style={
-                                  Object {
-                                    "width": "35%",
-                                  }
-                                }
-                              >
-                                <EuiText
-                                  className="panels-title-text"
-                                  grow={false}
-                                >
-                                  <div
-                                    className="euiText euiText--medium panels-title-text euiText--constrainedWidth"
-                                  >
-                                    <EuiToolTip
-                                      content=""
-                                      delay="long"
-                                      position="top"
-                                    >
-                                      <span
-                                        className="euiToolTipAnchor"
-                                        onKeyUp={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                      >
-                                        <h5
-                                          data-test-subj="visualizationHeader"
-                                          onBlur={[Function]}
-                                          onFocus={[Function]}
-                                        />
-                                      </span>
-                                    </EuiToolTip>
-                                  </div>
-                                </EuiText>
-                              </div>
-                            </EuiFlexItem>
-                            <EuiFlexItem
-                              className="visualization-action-button"
-                              grow={false}
-                            >
-                              <div
-                                className="euiFlexItem euiFlexItem--flexGrowZero visualization-action-button"
-                              >
-                                <EuiPopover
-                                  anchorPosition="downLeft"
-                                  button={
-                                    <EuiButtonIcon
-                                      aria-label="actionMenuButton"
-                                      iconType="boxesHorizontal"
-                                      onClick={[Function]}
-                                    />
-                                  }
-                                  closePopover={[Function]}
-                                  display="inlineBlock"
-                                  hasArrow={true}
-                                  isOpen={false}
-                                  ownFocus={true}
-                                  panelPaddingSize="m"
-                                >
-                                  <div
-                                    className="euiPopover euiPopover--anchorDownLeft"
-                                  >
-                                    <div
-                                      className="euiPopover__anchor"
-                                    >
-                                      <EuiButtonIcon
-                                        aria-label="actionMenuButton"
-                                        iconType="boxesHorizontal"
-                                        onClick={[Function]}
-                                      >
-                                        <button
-                                          aria-label="actionMenuButton"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                          disabled={false}
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="boxesHorizontal"
-                                          >
-                                            <EuiIconEmpty
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                focusable="false"
-                                                height={16}
-                                                role="img"
-                                                style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              />
-                                            </EuiIconEmpty>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
-                                    </div>
-                                  </div>
-                                </EuiPopover>
-                              </div>
-                            </EuiFlexItem>
-                          </div>
-                        </EuiFlexGroup>
-                      </div>
-                      <div
-                        className="visualization-div"
-                      >
-                        <EuiLoadingChart
-                          className="visualization-loading-chart"
-                          mono={true}
-                          size="xl"
-                        >
-                          <span
-                            className="euiLoadingChart euiLoadingChart--mono visualization-loading-chart euiLoadingChart--xLarge"
-                          >
-                            <span
-                              className="euiLoadingChart__bar"
-                            />
-                            <span
-                              className="euiLoadingChart__bar"
-                            />
-                            <span
-                              className="euiLoadingChart__bar"
-                            />
-                            <span
-                              className="euiLoadingChart__bar"
-                            />
-                          </span>
-                        </EuiLoadingChart>
-                      </div>
-                    </div>
-                  </EuiPanel>
-                </Component>
-              </div>
-            </GridItem>
-            <GridItem
-              cancel=""
-              className=""
-              cols={1}
-              containerPadding={
-                Array [
-                  10,
-                  10,
-                ]
-              }
-              containerWidth={0}
-              h={2}
-              handle=""
-              i="prometheus.process_resident_memory_bytes"
-              isDraggable={false}
-              isResizable={false}
-              key=".$prometheus.process_resident_memory_bytes"
-              margin={
-                Array [
-                  10,
-                  10,
-                ]
-              }
-              maxH={Infinity}
-              maxRows={Infinity}
-              maxW={12}
-              minH={1}
-              minW={12}
-              onDrag={[Function]}
-              onDragStart={[Function]}
-              onDragStop={[Function]}
-              onResize={[Function]}
-              onResizeStart={[Function]}
-              onResizeStop={[Function]}
-              rowHeight={150}
-              static={true}
-              useCSSTransforms={true}
-              usePercentages={false}
-              w={1}
-              x={0}
-              y={4}
-            >
-              <div
-                className="react-grid-item static cssTransforms"
-                key="prometheus.process_resident_memory_bytes"
-                style={
+                store={
                   Object {
-                    "MozTransform": "translate(10px,650px)",
-                    "OTransform": "translate(10px,650px)",
-                    "WebkitTransform": "translate(10px,650px)",
-                    "height": "310px",
-                    "msTransform": "translate(10px,650px)",
-                    "position": "absolute",
-                    "transform": "translate(10px,650px)",
-                    "width": "-20px",
+                    "dispatch": [Function],
+                    "getState": [Function],
+                    "replaceReducer": [Function],
+                    "subscribe": [Function],
+                    Symbol(Symbol.observable): [Function],
                   }
                 }
               >
-                <Component
-                  catalogVisualization={true}
-                  editMode={false}
-                  fromTime="now-1d"
-                  key="prometheus.process_resident_memory_bytes"
-                  onEditClick={[MockFunction]}
-                  onRefresh={0}
-                  pplFilterValue=""
-                  removeVisualization={[Function]}
-                  savedVisualizationId="prometheus.process_resident_memory_bytes"
-                  spanParam="1h"
-                  toTime="now"
-                  usedInNotebooks={true}
-                  visualizationId="prometheus.process_resident_memory_bytes"
+                <EuiDroppable
+                  droppableId="DROPPABLE_AREA_BARE"
                 >
-                  <EuiPanel
-                    className="panel-full-width"
-                    data-test-subj="prometheus.process_resident_memory_bytesVisualizationPanel"
-                    grow={false}
+                  <Connect(Droppable)
+                    direction="vertical"
+                    droppableId="DROPPABLE_AREA_BARE"
+                    getContainerForClone={[Function]}
+                    ignoreContainerClipping={false}
+                    isCombineEnabled={false}
+                    isDropDisabled={false}
+                    mode="standard"
+                    renderClone={null}
+                    type="EUI_DEFAULT"
                   >
-                    <div
-                      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero panel-full-width"
-                      data-test-subj="prometheus.process_resident_memory_bytesVisualizationPanel"
+                    <Droppable
+                      direction="vertical"
+                      droppableId="DROPPABLE_AREA_BARE"
+                      getContainerForClone={[Function]}
+                      ignoreContainerClipping={false}
+                      isCombineEnabled={false}
+                      isDropDisabled={false}
+                      mode="standard"
+                      placeholder={null}
+                      renderClone={null}
+                      shouldAnimatePlaceholder={false}
+                      snapshot={
+                        Object {
+                          "draggingFromThisWith": null,
+                          "draggingOverWith": null,
+                          "isDraggingOver": false,
+                          "isUsingPlaceholder": false,
+                        }
+                      }
+                      type="EUI_DEFAULT"
+                      updateViewportMaxScroll={[Function]}
+                      useClone={null}
                     >
                       <div
-                        className=""
-                      >
-                        <EuiFlexGroup
-                          justifyContent="spaceBetween"
-                        >
-                          <div
-                            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                          >
-                            <EuiFlexItem
-                              style={
-                                Object {
-                                  "width": "35%",
-                                }
-                              }
-                            >
-                              <div
-                                className="euiFlexItem"
-                                style={
-                                  Object {
-                                    "width": "35%",
-                                  }
-                                }
-                              >
-                                <EuiText
-                                  className="panels-title-text"
-                                  grow={false}
-                                >
-                                  <div
-                                    className="euiText euiText--medium panels-title-text euiText--constrainedWidth"
-                                  >
-                                    <EuiToolTip
-                                      content="prometheus.process_resident_memory_bytes"
-                                      delay="long"
-                                      position="top"
-                                    >
-                                      <span
-                                        className="euiToolTipAnchor"
-                                        onKeyUp={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                      >
-                                        <h5
-                                          data-test-subj="visualizationHeader"
-                                          onBlur={[Function]}
-                                          onFocus={[Function]}
-                                        >
-                                          prometheus.process_resident_memory_bytes
-                                        </h5>
-                                      </span>
-                                    </EuiToolTip>
-                                  </div>
-                                </EuiText>
-                              </div>
-                            </EuiFlexItem>
-                            <EuiFlexItem
-                              className="visualization-action-button"
-                              grow={false}
-                            >
-                              <div
-                                className="euiFlexItem euiFlexItem--flexGrowZero visualization-action-button"
-                              >
-                                <EuiPopover
-                                  anchorPosition="downLeft"
-                                  button={
-                                    <EuiButtonIcon
-                                      aria-label="actionMenuButton"
-                                      iconType="boxesHorizontal"
-                                      onClick={[Function]}
-                                    />
-                                  }
-                                  closePopover={[Function]}
-                                  display="inlineBlock"
-                                  hasArrow={true}
-                                  isOpen={false}
-                                  ownFocus={true}
-                                  panelPaddingSize="m"
-                                >
-                                  <div
-                                    className="euiPopover euiPopover--anchorDownLeft"
-                                  >
-                                    <div
-                                      className="euiPopover__anchor"
-                                    >
-                                      <EuiButtonIcon
-                                        aria-label="actionMenuButton"
-                                        iconType="boxesHorizontal"
-                                        onClick={[Function]}
-                                      >
-                                        <button
-                                          aria-label="actionMenuButton"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                          disabled={false}
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="boxesHorizontal"
-                                          >
-                                            <EuiIconEmpty
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                focusable="false"
-                                                height={16}
-                                                role="img"
-                                                style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              />
-                                            </EuiIconEmpty>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
-                                    </div>
-                                  </div>
-                                </EuiPopover>
-                              </div>
-                            </EuiFlexItem>
-                          </div>
-                        </EuiFlexGroup>
-                      </div>
-                      <div
-                        className="visualization-div"
+                        className="euiDroppable euiDroppable--noGrow"
+                        data-rbd-droppable-context-id="0"
+                        data-rbd-droppable-id="DROPPABLE_AREA_BARE"
+                        data-test-subj="droppable"
                       >
-                        <EuiLoadingChart
-                          className="visualization-loading-chart"
-                          mono={true}
-                          size="xl"
+                        <div
+                          className="euiDroppable__placeholder"
                         >
-                          <span
-                            className="euiLoadingChart euiLoadingChart--mono visualization-loading-chart euiLoadingChart--xLarge"
-                          >
-                            <span
-                              className="euiLoadingChart__bar"
-                            />
-                            <span
-                              className="euiLoadingChart__bar"
-                            />
-                            <span
-                              className="euiLoadingChart__bar"
-                            />
-                            <span
-                              className="euiLoadingChart__bar"
-                            />
-                          </span>
-                        </EuiLoadingChart>
+                          <AnimateInOut
+                            on={null}
+                            shouldAnimate={false}
+                          />
+                        </div>
                       </div>
-                    </div>
-                  </EuiPanel>
-                </Component>
-              </div>
-            </GridItem>
-          </div>
-        </ReactGridLayout>
-      </ResponsiveReactGridLayout>
-    </WidthProvider>
-  </Component>
+                    </Droppable>
+                  </Connect(Droppable)>
+                </EuiDroppable>
+              </Provider>
+            </App>
+          </ErrorBoundary>
+        </DragDropContext>
+      </EuiDragDropContext>
+    </Component>
+  </Connect(Component)>
 </Provider>
 `;
diff --git a/public/components/metrics/view/__tests__/metrics_grid.test.tsx b/public/components/metrics/view/__tests__/metrics_grid.test.tsx
index c38a34cdf..ddf5949b0 100644
--- a/public/components/metrics/view/__tests__/metrics_grid.test.tsx
+++ b/public/components/metrics/view/__tests__/metrics_grid.test.tsx
@@ -16,6 +16,7 @@ import { Provider } from 'react-redux';
 import PPLService from '../../../../services/requests/ppl';
 import httpClientMock from '../../../../../test/__mocks__/httpClientMock';
 import { coreRefs } from '../../../../framework/core_refs';
+import { of } from 'rxjs';
 
 describe('Metrics Grid Component', () => {
   configure({ adapter: new Adapter() });
@@ -48,6 +49,7 @@ describe('Metrics Grid Component', () => {
         then: () => Promise.resolve(),
       })
     );
+    coreRefs.chrome = { getIsNavDrawerLocked$: () => of(false) };
 
     const wrapper = mount(
       <Provider store={store}>
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap
index 0fb456810..bc5be1116 100644
--- a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap
+++ b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap
@@ -275,7 +275,7 @@ exports[`<Paragraphs /> spec renders the component 1`] = `
       style="opacity: 1; padding: 15px;"
     >
       <div
-        class="euiText euiText--medium markdown-output-text"
+        class="euiText euiText--medium wrapAll markdown-output-text"
       >
         <div
           class="markdown-body "
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
index c15eee1f2..1529919ed 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
@@ -480,7 +480,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "h",
+                            "id": "v",
                             "name": "Right",
                           },
                         ],
@@ -643,7 +643,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "h",
+        "legendposition": "v",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
@@ -703,7 +703,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
         "height": 220,
         "hovermode": "closest",
         "legend": Object {
-          "orientation": "h",
+          "orientation": "v",
         },
         "margin": Object {
           "b": 30,
@@ -761,7 +761,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
           "height": 220,
           "hovermode": "closest",
           "legend": Object {
-            "orientation": "h",
+            "orientation": "v",
           },
           "margin": Object {
             "b": 30,
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
index 9c1c72dfb..013b2106b 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
@@ -484,7 +484,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "h",
+                            "id": "v",
                             "name": "Right",
                           },
                         ],
@@ -647,7 +647,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "h",
+        "legendposition": "v",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
index 1a61654df..f56257ba0 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
@@ -480,7 +480,7 @@ exports[`Histogram component Renders histogram component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "h",
+                            "id": "v",
                             "name": "Right",
                           },
                         ],
@@ -643,7 +643,7 @@ exports[`Histogram component Renders histogram component 1`] = `
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "h",
+        "legendposition": "v",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
@@ -715,7 +715,7 @@ exports[`Histogram component Renders histogram component 1`] = `
         ],
         "height": 220,
         "legend": Object {
-          "orientation": "h",
+          "orientation": "v",
         },
         "margin": Object {
           "b": 30,
@@ -772,7 +772,7 @@ exports[`Histogram component Renders histogram component 1`] = `
           "height": 220,
           "hovermode": "closest",
           "legend": Object {
-            "orientation": "h",
+            "orientation": "v",
           },
           "margin": Object {
             "b": 30,
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
index 3e532cf5f..fd5d086b1 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
@@ -480,7 +480,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "h",
+                            "id": "v",
                             "name": "Right",
                           },
                         ],
@@ -643,7 +643,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
         "id": "horizontal_bar",
         "label": "Horizontal bar",
         "labelangle": 0,
-        "legendposition": "h",
+        "legendposition": "v",
         "linewidth": 0,
         "mode": "group",
         "name": "horizontal_bar",
@@ -703,7 +703,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
         "height": 220,
         "hovermode": "closest",
         "legend": Object {
-          "orientation": "h",
+          "orientation": "v",
         },
         "margin": Object {
           "b": 30,
@@ -761,7 +761,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
           "height": 220,
           "hovermode": "closest",
           "legend": Object {
-            "orientation": "h",
+            "orientation": "v",
           },
           "margin": Object {
             "b": 30,
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
index aecd16a2e..87f23bc1d 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
@@ -480,7 +480,7 @@ exports[`Line component Renders line component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "h",
+                            "id": "v",
                             "name": "Right",
                           },
                         ],
@@ -643,7 +643,7 @@ exports[`Line component Renders line component 1`] = `
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "h",
+        "legendposition": "v",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
@@ -701,7 +701,7 @@ exports[`Line component Renders line component 1`] = `
         ],
         "height": 220,
         "legend": Object {
-          "orientation": "h",
+          "orientation": "v",
         },
         "margin": Object {
           "b": 30,
@@ -754,7 +754,7 @@ exports[`Line component Renders line component 1`] = `
           "height": 220,
           "hovermode": "closest",
           "legend": Object {
-            "orientation": "h",
+            "orientation": "v",
           },
           "margin": Object {
             "b": 30,
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
index 99ccc5b59..67b8a1360 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
@@ -480,7 +480,7 @@ exports[`Pie component Renders pie component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "h",
+                            "id": "v",
                             "name": "Right",
                           },
                         ],
@@ -643,7 +643,7 @@ exports[`Pie component Renders pie component 1`] = `
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "h",
+        "legendposition": "v",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
@@ -697,7 +697,7 @@ exports[`Pie component Renders pie component 1`] = `
         },
         "height": 220,
         "legend": Object {
-          "orientation": "h",
+          "orientation": "v",
         },
         "margin": Object {
           "b": 30,
@@ -745,7 +745,7 @@ exports[`Pie component Renders pie component 1`] = `
           "height": 220,
           "hovermode": "closest",
           "legend": Object {
-            "orientation": "h",
+            "orientation": "v",
           },
           "margin": Object {
             "b": 30,
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
index 0c0965317..a0e8bf52a 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
@@ -463,7 +463,7 @@ exports[`Text component Renders text component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "h",
+                            "id": "v",
                             "name": "Right",
                           },
                         ],
@@ -626,7 +626,7 @@ exports[`Text component Renders text component 1`] = `
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "h",
+        "legendposition": "v",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
index a10546c95..483149850 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
@@ -480,7 +480,7 @@ exports[`Treemap component Renders treemap component 1`] = `
                       "props": Object {
                         "defaultSelections": Array [
                           Object {
-                            "id": "h",
+                            "id": "v",
                             "name": "Right",
                           },
                         ],
@@ -643,7 +643,7 @@ exports[`Treemap component Renders treemap component 1`] = `
         "id": "bar",
         "label": "Vertical bar",
         "labelangle": 0,
-        "legendposition": "h",
+        "legendposition": "v",
         "linewidth": 0,
         "mode": "group",
         "name": "bar",
diff --git a/test/metrics_contants.ts b/test/metrics_contants.ts
index ad9c4e28e..d0dbb616a 100644
--- a/test/metrics_contants.ts
+++ b/test/metrics_contants.ts
@@ -55,6 +55,53 @@ export const sampleMetric = {
   subType: 'metric',
 };
 
+export const sampleAvailableDashboards = [
+  {
+    attributes: {
+      title: '[Flights] Global Flight Dashboard',
+    },
+    id: '7adfa750-4c81-11e8-b3d7-01146121b73d',
+    type: 'dashboard',
+
+    title: '[Flights] Global Flight Dashboard',
+  },
+  {
+    id: 'fdf2bb60-7a5b-11ee-929a-5f1a2dc08039',
+    type: 'observability-panel',
+    objectId: 'observability-panel:fdf2bb60-7a5b-11ee-929a-5f1a2dc08039',
+    name: '[Logs] Web traffic Panel',
+    title: '[Logs] Web traffic Panel',
+    savedObject: true,
+  },
+];
+
+export const sampleMetricsToExport: MetricType[] = [
+  {
+    id: 'my_prometheus.go_memstats_alloc_bytes',
+    name: 'my_prometheus.go_memstats_alloc_bytes',
+    catalog: 'my_prometheus',
+    catalogSourceName: 'my_prometheus',
+    catalogTableName: 'go_memstats_alloc_bytes',
+    index: 'my_prometheus.go_memstats_alloc_bytes',
+    aggregation: 'avg',
+    attributesGroupBy: [],
+    availableAttributes: [],
+    type: 'line',
+    sub_type: 'promqlmetric',
+    recentlyCreated: false,
+  },
+  {
+    id: 'observability-visualization:84c73aa0-84aa-11ee-96e0-7bfa0b41d0fc',
+    savedVisualizationId: 'observability-visualization:84c73aa0-84aa-11ee-96e0-7bfa0b41d0fc',
+    query:
+      "source = my_prometheus.query_range('sum by(instance,job) (go_memstats_alloc_bytes_total)', 1700071440, 1700157840, '1h')",
+    name: 'my_prometheus.go_memstats_alloc_bytes_total',
+    catalog: 'CUSTOM_METRICS',
+    type: 'line',
+    recentlyCreated: false,
+  },
+];
+
 export const sampleSortedMetricsLayout = [
   {
     h: 2,

From d30ad618bae18a1692ee2cf520eb36ed815bb3e3 Mon Sep 17 00:00:00 2001
From: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
Date: Fri, 8 Dec 2023 08:29:45 -0800
Subject: [PATCH 4/8] Cleanup console.logs, unused code

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
---
 .../__tests__/query_utils.test.tsx            |   2 -
 .../visualization_container.scss              |  13 +-
 public/components/metrics/index.tsx           |  44 +----
 .../components/metrics/sidebar/sidebar.scss   | 157 ------------------
 .../metrics/top_menu/metrics_export.tsx       |   5 -
 .../components/metrics/view/metrics_grid.tsx  |   3 -
 .../observability_embeddable_component.tsx    |   1 -
 7 files changed, 6 insertions(+), 219 deletions(-)

diff --git a/public/components/common/query_utils/__tests__/query_utils.test.tsx b/public/components/common/query_utils/__tests__/query_utils.test.tsx
index 2cd7bdfb5..da81fe446 100644
--- a/public/components/common/query_utils/__tests__/query_utils.test.tsx
+++ b/public/components/common/query_utils/__tests__/query_utils.test.tsx
@@ -20,7 +20,6 @@ describe('Query Utils', () => {
     });
 
     test('should parse simple ppl query_range into keywords', () => {
-      console.log('should parse simple ppl query_range into keywords');
       const query = "source = test_catalog.query_range('metric')";
       const keywords = parsePromQLIntoKeywords(query);
       expect(keywords).toEqual({
@@ -32,7 +31,6 @@ describe('Query Utils', () => {
     });
 
     test('should parse promql into keywords', () => {
-      console.log('should parse promql into keywords');
       const query = "source = test_catalog.query_range('count by(one,two) (metric)')";
       const keywords = parsePromQLIntoKeywords(query);
       expect(keywords).toEqual({
diff --git a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss
index da61c2f65..9b2e60063 100644
--- a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss
+++ b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss
@@ -51,24 +51,13 @@
     }
   }
 
-  //  #explorerPlotComponent {
-  //    //overflow: hidden;
-  //  }
-  //
   .svg-container {
-    //height: 425px !important;
-    margin-top: -25px !important;
+    margin-top: -25px;
   }
 
-  //  .main-svg {
-  //    //margin-top: -10px;
-  //    //height: calc(100% - 10px);
-  //  }
-  //
 
   .main-svg {
     margin-top: -10px;
-    //height: calc(100% - 60px);
   }
 }
 
diff --git a/public/components/metrics/index.tsx b/public/components/metrics/index.tsx
index 8303a4e82..2e7f7a1cf 100644
--- a/public/components/metrics/index.tsx
+++ b/public/components/metrics/index.tsx
@@ -4,14 +4,13 @@
  */
 
 import './index.scss';
-import { EuiGlobalToastList, EuiPage, EuiPageBody, EuiResizableContainer } from '@elastic/eui';
-import React, { ReactChild, useEffect, useState } from 'react';
+import { EuiPage, EuiPageBody, EuiResizableContainer } from '@elastic/eui';
+import React, { useEffect } from 'react';
 import { HashRouter, Route, RouteComponentProps, StaticContext } from 'react-router-dom';
-import { ChromeBreadcrumb, Toast } from '../../../../../src/core/public';
+import { ChromeBreadcrumb } from '../../../../../src/core/public';
 import { Sidebar } from './sidebar/sidebar';
 import PPLService from '../../services/requests/ppl';
 import { TopMenu } from './top_menu/top_menu';
-import { MetricType } from '../../../common/types/metrics';
 import { MetricsGrid } from './view/metrics_grid';
 import SavedObjects from '../../services/saved_objects/event_analytics/saved_objects';
 
@@ -24,24 +23,6 @@ interface MetricsProps {
 }
 
 export const Home = ({ chrome, parentBreadcrumb }: MetricsProps) => {
-  // Date picker constants
-  const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<DurationRange[]>([]);
-  const [onRefresh, setOnRefresh] = useState(false);
-
-  // Top panel
-  const [editMode, setEditMode] = useState(false);
-  const [toasts, setToasts] = useState<Toast[]>([]);
-  const [toastRightSide, setToastRightSide] = useState<boolean>(true);
-
-  // Metrics constants
-  const [panelVisualizations, setPanelVisualizations] = useState<MetricType[]>([]);
-
-  const setToast = (title: string, color = 'success', text?: ReactChild, side?: string) => {
-    if (!text) text = '';
-    setToastRightSide(!side);
-    setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
-  };
-
   useEffect(() => {
     chrome.setBreadcrumbs([
       parentBreadcrumb,
@@ -54,14 +35,6 @@ export const Home = ({ chrome, parentBreadcrumb }: MetricsProps) => {
 
   return (
     <>
-      <EuiGlobalToastList
-        toasts={toasts}
-        dismissToast={(removedToast) => {
-          setToasts(toasts.filter((toast) => toast.id !== removedToast.id));
-        }}
-        side={toastRightSide ? 'right' : 'left'}
-        toastLifeTimeMs={6000}
-      />
       <HashRouter>
         <Route
           exact
@@ -70,15 +43,8 @@ export const Home = ({ chrome, parentBreadcrumb }: MetricsProps) => {
             <div>
               <EuiPage>
                 <EuiPageBody component="div">
-                  <TopMenu
-                    editMode={editMode}
-                    setEditMode={setEditMode}
-                    setEditActionType={setEditActionType}
-                    panelVisualizations={panelVisualizations}
-                    setPanelVisualizations={setPanelVisualizations}
-                    setToast={setToast}
-                  />
-                  <div className="dscAppContainer">
+                  <TopMenu />
+                  <div className="metricsContainer">
                     <EuiResizableContainer>
                       {(EuiResizablePanel, EuiResizableButton) => (
                         <>
diff --git a/public/components/metrics/sidebar/sidebar.scss b/public/components/metrics/sidebar/sidebar.scss
index 3af1086c9..7cadecd53 100644
--- a/public/components/metrics/sidebar/sidebar.scss
+++ b/public/components/metrics/sidebar/sidebar.scss
@@ -3,163 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-.dscSidebar__container {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  background-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-}
-
-.dscIndexPattern__container {
-  display: flex;
-  align-items: center;
-  height: $euiSize * 3;
-  margin-top: -$euiSizeS;
-}
-
-.dscIndexPattern__triggerButton {
-  @include euiTitle('xs');
-  line-height: $euiSizeXXL;
-}
-
-.dscFieldList {
-  list-style: none;
-  margin-bottom: 0;
-}
-
-.dscFieldListHeader {
-  padding: $euiSizeS $euiSizeS 0 $euiSizeS;
-  background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
-}
-
-.dscFieldList--popular {
-  background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
-}
-
-.dscFieldChooser__toggle {
-  color: $euiColorMediumShade;
-  margin-left: $euiSizeS  !important;
-}
-
-/**
- * 1. Only visually hide the action, so that it's still accessible to screen readers.
- * 2. When tabbed to, this element needs to be visible for keyboard accessibility.
- */
-.dscSidebarItem__action {
-  opacity: 0;
-  /* 1 */
-  transition: none;
-
-  &:focus {
-    opacity: 1;
-    /* 2 */
-  }
-
-  font-size: $euiFontSizeXS;
-  padding: 2px 6px !important;
-  height: 22px !important;
-  min-width: auto !important;
-
-  .euiButton__content {
-    padding: 0 4px;
-  }
-}
-
-.dscFieldSearch {
-  padding: $euiSizeS;
-}
-
-.dscFieldSearch__toggleButton {
-  width: calc(100% - #{$euiSizeS});
-  color: $euiColorPrimary;
-  padding-left: $euiSizeXS;
-  margin-left: $euiSizeXS;
-}
-
-.dscFieldSearch__filterWrapper {
-  flex-grow: 0;
-}
-
-.dscFieldSearch__formWrapper {
-  padding: $euiSizeM;
-}
-
-.dscFieldDetails {
-  color: $euiTextColor;
-  margin-bottom: $euiSizeS;
-}
-
-.dscSidebarItem__fieldPopoverPanel {
-  min-width: 300px;
-  max-width: 600px;
-  max-height: 600px;
-  overflow-y: scroll;
-}
-
-.override_timestamp_loading {
-  vertical-align: middle;
-}
-
-.explorerFieldSelector {
-  padding: $euiSizeS;
-}
-
-// #vis__mainContent {
-//   .explorer__insights, .explorer__configPanel-markdown {
-//     .explorerFieldSelector,
-//     .explorer__vizDataConfig {
-//       padding: $euiSizeS;
-//       overflow: auto;
-
-//       &__fieldGroups {
-//         @include euiYScrollWithShadows;
-
-//         overflow-y: auto;
-//         margin-right: -$euiSizeS;
-//         padding-right: $euiSizeS;
-//         margin-top: $euiSizeS;
-//       }
-
-//       &__fieldGroup {
-//         margin-top: $euiSizeS;
-
-//         &:first-child {
-//           margin-top: 0;
-//         }
-//       }
-//     }
-
-//     // .explorerFieldSelector {
-//     //   @include euiYScrollWithShadows;
-//     //   .sidebar-list {
-//     //     height: 100%;
-//     //   }
-//     // }
-//     .metricsSideBar {
-//       @include euiYScrollWithShadows;
-//       .sidebarHeight{
-//       .sidebar-list {
-//         height: 100%;
-//       }
-//     }
-//     }
-//   }
-// }
-
-#vis__mainContent .explorer__insights {
-  min-height: 0;
-  display: grid;
-  grid-template-columns: 50% 50%;
-  height: 100%;
-}
-
-.sidebarHeight {
-  line-height: normal;
-  overflow: auto;
-  max-height: 100vh;
-}
-
 .metricsList {
   line-height: normal;
 }
diff --git a/public/components/metrics/top_menu/metrics_export.tsx b/public/components/metrics/top_menu/metrics_export.tsx
index bf0b52ef6..f23f0543d 100644
--- a/public/components/metrics/top_menu/metrics_export.tsx
+++ b/public/components/metrics/top_menu/metrics_export.tsx
@@ -303,12 +303,8 @@ const MetricsExportPopOver = () => {
       savedMetrics = await Promise.all(
         metricsToExport.map(async (metric, index) => {
           if (metric.savedVisualizationId === undefined) {
-            console.log('createSavedVisualization', metric);
-
             return createSavedVisualization(metric);
           } else {
-            console.log('updateSavedVisualization', metric);
-
             return updateSavedVisualization(metric);
           }
         })
@@ -333,7 +329,6 @@ const MetricsExportPopOver = () => {
       try {
         if (observabilityDashboards.length > 0) {
           const savedVisualizationIds = savedMetrics.map((p) => p.objectId);
-          console.log(savedMetrics);
           await addMultipleVizToPanels(observabilityDashboards, savedVisualizationIds);
         }
         if (osdCoreSelectedDashboards.length > 0)
diff --git a/public/components/metrics/view/metrics_grid.tsx b/public/components/metrics/view/metrics_grid.tsx
index 16f1c2af8..4fc5d5fd1 100644
--- a/public/components/metrics/view/metrics_grid.tsx
+++ b/public/components/metrics/view/metrics_grid.tsx
@@ -50,7 +50,6 @@ const visualizationFromMetric = (metric, dateSpanFilter): SavedVisualizationType
       fillOpacity: 0,
       lineWidth: 2,
     },
-    layout: { height: 280 },
   },
 });
 
@@ -61,7 +60,6 @@ const navigateToEventExplorerVisualization = (savedVisualizationId: string) => {
 export const InnerGridVisualization = ({ id, idx, dateSpanFilter, metric, refresh }) => {
   if (!metric) return <></>;
 
-  console.log('vis', { metric });
   return (
     <EuiDraggable key={id} index={idx} draggableId={id}>
       <VisualizationContainer
@@ -75,7 +73,6 @@ export const InnerGridVisualization = ({ id, idx, dateSpanFilter, metric, refres
         toTime={dateSpanFilter.end}
         onRefresh={refresh}
         onEditClick={navigateToEventExplorerVisualization}
-        // usedInNotebooks={true}
         pplFilterValue=""
         span={dateSpanFilter.span}
         resolution={dateSpanFilter.resolution}
diff --git a/public/embeddable/observability_embeddable_component.tsx b/public/embeddable/observability_embeddable_component.tsx
index c37c1a7e0..276539be8 100644
--- a/public/embeddable/observability_embeddable_component.tsx
+++ b/public/embeddable/observability_embeddable_component.tsx
@@ -22,7 +22,6 @@ const ObservabilityEmbeddableComponentInner: React.FC<ObservabilityEmbeddableCom
   props
 ) => {
   const visualization = props.output.attributes?.savedVisualization;
-  console.log('ObservabilityEmbeddableComponentInner', visualization);
   return visualization ? (
     <SavedObjectVisualization
       savedVisualization={visualization}

From 1f751eeb3b85eaff63816525e091ab4bdf0eef0d Mon Sep 17 00:00:00 2001
From: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
Date: Fri, 8 Dec 2023 08:31:50 -0800
Subject: [PATCH 5/8] Simplify PromQL data query.  Calculate CSS height of
 Metric Grid panels based upon attribute-labels legend list.

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
---
 .../application_analytics/helpers/utils.tsx   |   3 +
 .../custom_panels/helpers/utils.tsx           | 189 ++++++++----------
 public/components/metrics/index.scss          |  10 +-
 .../components/metrics/sidebar/sidebar.scss   |   4 +
 public/components/metrics/sidebar/sidebar.tsx |   6 +-
 .../components/metrics/view/metrics_grid.scss |   4 +-
 .../components/metrics/view/metrics_grid.tsx  |   8 +-
 .../saved_object_visualization.tsx            |   4 +-
 8 files changed, 115 insertions(+), 113 deletions(-)

diff --git a/public/components/application_analytics/helpers/utils.tsx b/public/components/application_analytics/helpers/utils.tsx
index 8c66cc215..41f0b7048 100644
--- a/public/components/application_analytics/helpers/utils.tsx
+++ b/public/components/application_analytics/helpers/utils.tsx
@@ -218,6 +218,9 @@ export const calculateAvailability = async (
     const visData = await fetchVisualizationById(http, visualizationId, (value: string) =>
       console.error(value)
     );
+
+    // resolved mismatched use of user_configs/userConfigs.  This fall-back
+    // silently loads legacy configs.  They will be stored in new userConfigs upon save.
     const userConfigs = visData.userConfigs
       ? JSON.parse(visData.user_configs || visData.userConfigs)
       : {};
diff --git a/public/components/custom_panels/helpers/utils.tsx b/public/components/custom_panels/helpers/utils.tsx
index 53ac325c8..9abc0d8d7 100644
--- a/public/components/custom_panels/helpers/utils.tsx
+++ b/public/components/custom_panels/helpers/utils.tsx
@@ -5,7 +5,7 @@
 
 import { ShortDate } from '@elastic/eui';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
-import _, { forEach, isEmpty } from 'lodash';
+import _, { forEach, isEmpty, min } from 'lodash';
 import { Moment } from 'moment-timezone';
 import React from 'react';
 import { Layout } from 'react-grid-layout';
@@ -26,19 +26,28 @@ import { ObservabilitySavedVisualization } from '../../../services/saved_objects
 import { getDefaultVisConfig } from '../../event_analytics/utils';
 import { Visualization } from '../../visualizations/visualization';
 import { MetricType } from '../../../../common/types/metrics';
-import { convertDateTime } from '../../common/query_utils';
+import { convertDateTime, updateCatalogVisualizationQuery } from '../../common/query_utils';
 
 /*
  * "Utils" This file contains different reused functions in operational panels
  *
- * isNameValid - Validates string to length > 0 and < 50
- * mergeLayoutAndVisualizations - Function to merge current panel layout into the visualizations list
+ * checkIndexExists - Function to test if query string includes an index
+ * checkWhereClauseExists - Function to test if query string includes where clause
+ * createCatalogVisualizationMetaData - create Visualization metaData from visualization, query details
+ * displayVisualization - Function to render the visualzation based of its type
+ * fetchVisualizationById - Fetch visualization from SavedObject store by id
  * getQueryResponse - Get response of PPL query to load visualizations
- * renderSavedVisualization - Fetches savedVisualization by Id and runs getQueryResponse
- * onTimeChange - Function to store recently used time filters and set start and end time.
  * isDateValid - Function to check date validity
+ * isNameValid - Validates string to length > 0 and < 50
  * isPPLFilterValid - Validate if the panel PPL query doesn't contain any Index/Time/Field filters
- * displayVisualization - Function to render the visualzation based of its type
+ * mergeLayoutAndVisualizations - Function to merge current panel layout into the visualizations list
+ * onTimeChange - Function to store recently used time filters and set start and end time.
+ * parseSavedVisualizations - Transform SavedObject visualization into mapped record object
+ * prepareMetricsData - Create visualization schema metadata from jsonData scheama list
+ * prependRecentlyUsedRange - Maintain MRU list of datePicker selected ranges
+ * processMetricsData - validate and transform jsonData schema into visualization schema metadata
+ * renderCatalogVisualization - Query OS for visualization Data from PromQL metric schema
+ * renderSavedVisualization - Query OS for visualization Data from PPL metric schema
  */
 
 // Name validation 0>Name<=50
@@ -77,7 +86,7 @@ export const mergeLayoutAndVisualizations = (
  * Updates the span command interval
  * Returns -> source = opensearch_dashboards_sample_data_logs | stats avg(bytes) by span(timestamp,1M)
  */
-export const updateQuerySpanInterval = (
+const updateQuerySpanInterval = (
   query: string,
   timestampField: string,
   span: number | string = '1',
@@ -119,35 +128,6 @@ const queryAccumulator = (
   return indexPartOfQuery + timeQueryFilter + pplFilterQuery + filterPartOfQuery;
 };
 
-// PPL Service requestor
-const pplServiceRequestor = async (
-  pplService: PPLService,
-  finalQuery: string,
-  type: string,
-  setVisualizationData: React.Dispatch<React.SetStateAction<any[]>>,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
-  setIsError: React.Dispatch<React.SetStateAction<VizContainerError>>
-) => {
-  await pplService
-    .fetch({ query: finalQuery, format: 'jdbc' })
-    .then((res) => {
-      if (res === undefined)
-        setIsError({ errorMessage: 'Please check the validity of PPL Filter' });
-      setVisualizationData(res);
-    })
-    .catch((error: Error) => {
-      const errorMessage = JSON.parse(error.body.message);
-      setIsError({
-        errorMessage: errorMessage.error.reason || 'Issue in fetching visualization',
-        errorDetails: errorMessage.error.details,
-      });
-      console.error(error.body);
-    })
-    .finally(() => {
-      setIsLoading(false);
-    });
-};
-
 // Fetched Saved Visualization By Id
 export const fetchVisualizationById = async (
   http: CoreStart['http'],
@@ -176,38 +156,25 @@ export const fetchVisualizationById = async (
 };
 
 // Get PPL Query Response
-export const getQueryResponse = (
+export const getQueryResponse = async (
   pplService: PPLService,
   query: string,
   type: string,
   startTime: string,
   endTime: string,
-  setVisualizationData: React.Dispatch<React.SetStateAction<any[]>>,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
-  setIsError: React.Dispatch<React.SetStateAction<VizContainerError>>,
   filterQuery = '',
   timestampField = 'timestamp',
   metricVisualization = false
 ) => {
-  setIsLoading(true);
-  setIsError({} as VizContainerError);
+  const finalQuery = metricVisualization
+    ? query
+    : queryAccumulator(query, timestampField, startTime, endTime, filterQuery);
 
-  let finalQuery = '';
-  try {
-    if (!metricVisualization) {
-      finalQuery = queryAccumulator(query, timestampField, startTime, endTime, filterQuery);
-    } else {
-      finalQuery = query;
-    }
-  } catch (error) {
-    const errorMessage = 'Issue in building final query';
-    setIsError({ errorMessage });
-    console.error(errorMessage, error);
-    setIsLoading(false);
-    return;
-  }
+  const res = await pplService.fetch({ query: finalQuery, format: 'jdbc' });
+
+  if (res === undefined) throw new Error('Please check the validity of PPL Filter');
 
-  pplServiceRequestor(pplService, finalQuery, type, setVisualizationData, setIsLoading, setIsError);
+  return res;
 };
 
 // Fetches savedVisualization by Id and runs getQueryResponse
@@ -263,25 +230,41 @@ export const renderSavedVisualization = async ({
 
   setVisualizationMetaData({ ...visualization, query: updatedVisualizationQuery });
 
-  getQueryResponse(
-    pplService,
-    updatedVisualizationQuery,
-    visualization.type,
-    startTime,
-    endTime,
-    setVisualizationData,
-    setIsLoading,
-    setIsError,
-    filterQuery,
-    visualization.timeField
-  );
+  try {
+    const queryData = await getQueryResponse(
+      pplService,
+      updatedVisualizationQuery,
+      visualization.type,
+      startTime,
+      endTime,
+      filterQuery,
+      visualization.timeField
+    );
+    setVisualizationData(queryData);
+  } catch (error) {
+    setIsError({ error });
+  }
+  setIsLoading(false);
+};
+
+const dynamicLayoutFromQueryData = (queryData) => {
+  const labelCount = queryData.jsonData.length;
+  const legendLines = min([labelCount, 10]);
+
+  const height = 230 + legendLines * 30;
+  const y = -0.35 + -0.15 * legendLines;
+  return {
+    height,
+    legend: { orientation: 'h', x: 0, y },
+  };
 };
 
 const createCatalogVisualizationMetaData = (
   catalogSource: string,
   visualizationQuery: string,
   visualizationType: string,
-  visualizationTimeField: string
+  visualizationTimeField: string,
+  queryData: object
 ) => {
   return {
     name: catalogSource,
@@ -301,6 +284,9 @@ const createCatalogVisualizationMetaData = (
       text: '',
       tokens: [],
     },
+    userConfigs: {
+      layout: dynamicLayoutFromQueryData(queryData),
+    },
   };
 };
 
@@ -355,38 +341,37 @@ export const renderCatalogVisualization = async ({
     resolution,
   });
 
-  const visualizationMetaData = createCatalogVisualizationMetaData(
-    catalogSource,
-    visualizationQuery,
-    visualizationType,
-    visualizationTimeField
-  );
-
-  visualizationMetaData.userConfigs = {
-    layoutConfig: {
-      height: 280,
-      legend: { orientation: 'h', y: -0.3 },
-    },
-  };
-
   setVisualizationTitle(visualization.name);
   setVisualizationType(visualizationType);
 
-  setVisualizationMetaData(visualizationMetaData);
-
-  getQueryResponse(
-    pplService,
-    visualizationQuery,
-    visualizationType,
-    startTime,
-    endTime,
-    setVisualizationData,
-    setIsLoading,
-    setIsError,
-    filterQuery,
-    visualizationTimeField,
-    true
-  );
+  try {
+    const queryData = await getQueryResponse(
+      pplService,
+      visualizationQuery,
+      visualizationType,
+      startTime,
+      endTime,
+      filterQuery,
+      visualizationTimeField,
+      true
+    );
+    setVisualizationData(queryData);
+
+    const visualizationMetaData = createCatalogVisualizationMetaData(
+      catalogSource,
+      visualizationQuery,
+      visualizationType,
+      visualizationTimeField,
+      queryData
+    );
+
+    console.log('renderCatalogVisualization', { visualizationMetaData });
+    setVisualizationMetaData(visualizationMetaData);
+  } catch (error) {
+    setIsError({ error });
+  }
+
+  setIsLoading(false);
 };
 
 // Function to store recently used time filters and set start and end time.
@@ -550,8 +535,8 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
     dataConfig: {
       ...finalDataConfig,
     },
-    layoutConfig: {
-      ...(metaData.userConfigs?.layoutConfig || {}),
+    layout: {
+      ...(metaData.userConfigs?.layout || {}),
     },
   };
 
diff --git a/public/components/metrics/index.scss b/public/components/metrics/index.scss
index abfeba374..905d61b06 100644
--- a/public/components/metrics/index.scss
+++ b/public/components/metrics/index.scss
@@ -17,4 +17,12 @@
 .mainContentTabs .euiResizableContainer {
   height: calc(100vh - 194px);
 }
-  
\ No newline at end of file
+
+.metricsContainer {
+  height: calc(100vh - 194px);
+
+  section {
+    line-height: normal;
+    overflow: auto;  
+  }
+}
\ No newline at end of file
diff --git a/public/components/metrics/sidebar/sidebar.scss b/public/components/metrics/sidebar/sidebar.scss
index 7cadecd53..4286170fc 100644
--- a/public/components/metrics/sidebar/sidebar.scss
+++ b/public/components/metrics/sidebar/sidebar.scss
@@ -7,6 +7,10 @@
   line-height: normal;
 }
 
+section.sidebar {
+  height: calc(100vh - 240px);
+}
+
 .metricsListContainer {
   margin-left: 15px;
   margin-right: 5px;
diff --git a/public/components/metrics/sidebar/sidebar.tsx b/public/components/metrics/sidebar/sidebar.tsx
index 71a92cf42..59fc60506 100644
--- a/public/components/metrics/sidebar/sidebar.tsx
+++ b/public/components/metrics/sidebar/sidebar.tsx
@@ -60,10 +60,10 @@ export const Sidebar = ({
 
   return (
     <I18nProvider>
-      <section className="sidebarHeight">
-        <SearchBar />
-        <EuiSpacer size="s" />
+      <SearchBar />
+      <EuiSpacer size="s" />
 
+      <section className="sidebar">
         <MetricsAccordion
           metricsList={selectedMetricsList}
           headerName="Selected Metrics"
diff --git a/public/components/metrics/view/metrics_grid.scss b/public/components/metrics/view/metrics_grid.scss
index ff866b444..5079c754b 100644
--- a/public/components/metrics/view/metrics_grid.scss
+++ b/public/components/metrics/view/metrics_grid.scss
@@ -3,6 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
- .metrics-grid-div {
-     min-height: 70vh;
+ section.metricsGrid {
+    height: calc(100vh - 195px);
  }
\ No newline at end of file
diff --git a/public/components/metrics/view/metrics_grid.tsx b/public/components/metrics/view/metrics_grid.tsx
index 4fc5d5fd1..2c4122455 100644
--- a/public/components/metrics/view/metrics_grid.tsx
+++ b/public/components/metrics/view/metrics_grid.tsx
@@ -127,9 +127,11 @@ export const InnerMetricsGrid = ({
   }, [isLocked]);
 
   return (
-    <EuiDragDropContext onDragEnd={onDragEnd}>
-      <EuiDroppable droppableId="DROPPABLE_AREA_BARE">{visualizationComponents}</EuiDroppable>
-    </EuiDragDropContext>
+    <section className="metricsGrid">
+      <EuiDragDropContext onDragEnd={onDragEnd}>
+        <EuiDroppable droppableId="DROPPABLE_AREA_BARE">{visualizationComponents}</EuiDroppable>
+      </EuiDragDropContext>
+    </section>
   );
 };
 
diff --git a/public/components/visualizations/saved_object_visualization.tsx b/public/components/visualizations/saved_object_visualization.tsx
index 220271ad8..f9f4e4f32 100644
--- a/public/components/visualizations/saved_object_visualization.tsx
+++ b/public/components/visualizations/saved_object_visualization.tsx
@@ -72,8 +72,8 @@ export const SavedObjectVisualization: React.FC<SavedObjectVisualizationProps> =
       dataConfig: {
         ...finalDataConfig,
       },
-      layoutConfig: {
-        ...(userConfigs.layoutConfig || {}),
+      layout: {
+        ...userConfigs.layout,
       },
     };
 

From 074051f7168d81ecb0ef781f8c5050c1c855e0ae Mon Sep 17 00:00:00 2001
From: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
Date: Fri, 8 Dec 2023 10:08:21 -0800
Subject: [PATCH 6/8] Update snapshots

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
---
 .../__snapshots__/utils.test.tsx.snap         |  18 +-
 .../__snapshots__/sidebar.test.tsx.snap       | 222 +++++++++---------
 .../__snapshots__/metrics_grid.test.tsx.snap  | 168 ++++++-------
 3 files changed, 206 insertions(+), 202 deletions(-)

diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
index 60c8ec019..a6c47b9fe 100644
--- a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
+++ b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -147,7 +147,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               ],
               "span": undefined,
             },
-            "layoutConfig": Object {},
+            "layout": Object {},
           },
         },
         "vis": Object {
@@ -602,7 +602,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 ],
                 "span": undefined,
               },
-              "layoutConfig": Object {},
+              "layout": Object {},
             },
           },
           "vis": Object {
@@ -1080,7 +1080,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                   ],
                   "span": undefined,
                 },
-                "layoutConfig": Object {},
+                "layout": Object {},
               },
             },
             "vis": Object {
@@ -1761,7 +1761,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                 ],
               },
             },
-            "layoutConfig": Object {},
+            "layout": Object {},
           },
         },
         "vis": Object {
@@ -2277,7 +2277,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                   ],
                 },
               },
-              "layoutConfig": Object {},
+              "layout": Object {},
             },
           },
           "vis": Object {
@@ -2847,7 +2847,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                     ],
                   },
                 },
-                "layoutConfig": Object {},
+                "layout": Object {},
               },
             },
             "vis": Object {
@@ -3584,7 +3584,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               ],
               "span": undefined,
             },
-            "layoutConfig": Object {},
+            "layout": Object {},
           },
         },
         "vis": Object {
@@ -4039,7 +4039,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 ],
                 "span": undefined,
               },
-              "layoutConfig": Object {},
+              "layout": Object {},
             },
           },
           "vis": Object {
@@ -4517,7 +4517,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                   ],
                   "span": undefined,
                 },
-                "layoutConfig": Object {},
+                "layout": Object {},
               },
             },
             "vis": Object {
diff --git a/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index 8aeeceac5..348bc61a9 100644
--- a/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -99,148 +99,148 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
         textComponent={Symbol(react.fragment)}
       >
         <PseudoLocaleWrapper>
-          <section
-            className="sidebarHeight"
-          >
-            <Component>
-              <div
-                className="metrics-search-bar-input"
-                data-test-subj="metricsSearch"
-              >
-                <EuiSearchBar
-                  box={
-                    Object {
-                      "incremental": true,
-                      "placeholder": "Search to filter Available Metrics",
-                    }
+          <Component>
+            <div
+              className="metrics-search-bar-input"
+              data-test-subj="metricsSearch"
+            >
+              <EuiSearchBar
+                box={
+                  Object {
+                    "incremental": true,
+                    "placeholder": "Search to filter Available Metrics",
                   }
-                  defaultQuery=""
-                  onChange={[Function]}
-                  query=""
+                }
+                defaultQuery=""
+                onChange={[Function]}
+                query=""
+              >
+                <EuiFlexGroup
+                  alignItems="center"
+                  gutterSize="m"
+                  wrap={true}
                 >
-                  <EuiFlexGroup
-                    alignItems="center"
-                    gutterSize="m"
-                    wrap={true}
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
                   >
-                    <div
-                      className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                    <EuiFlexItem
+                      className="euiSearchBar__searchHolder"
+                      grow={true}
                     >
-                      <EuiFlexItem
-                        className="euiSearchBar__searchHolder"
-                        grow={true}
+                      <div
+                        className="euiFlexItem euiSearchBar__searchHolder"
                       >
-                        <div
-                          className="euiFlexItem euiSearchBar__searchHolder"
+                        <EuiSearchBox
+                          incremental={true}
+                          isInvalid={false}
+                          onSearch={[Function]}
+                          placeholder="Search to filter Available Metrics"
+                          query=""
                         >
-                          <EuiSearchBox
+                          <EuiFieldSearch
+                            aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                            compressed={false}
+                            defaultValue=""
+                            fullWidth={true}
                             incremental={true}
+                            inputRef={[Function]}
+                            isClearable={true}
                             isInvalid={false}
+                            isLoading={false}
                             onSearch={[Function]}
                             placeholder="Search to filter Available Metrics"
-                            query=""
                           >
-                            <EuiFieldSearch
-                              aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                            <EuiFormControlLayout
                               compressed={false}
-                              defaultValue=""
                               fullWidth={true}
-                              incremental={true}
-                              inputRef={[Function]}
-                              isClearable={true}
-                              isInvalid={false}
+                              icon="search"
                               isLoading={false}
-                              onSearch={[Function]}
-                              placeholder="Search to filter Available Metrics"
                             >
-                              <EuiFormControlLayout
-                                compressed={false}
-                                fullWidth={true}
-                                icon="search"
-                                isLoading={false}
+                              <div
+                                className="euiFormControlLayout euiFormControlLayout--fullWidth"
                               >
                                 <div
-                                  className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                  className="euiFormControlLayout__childrenWrapper"
                                 >
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
+                                  <EuiValidatableControl
+                                    isInvalid={false}
+                                  >
+                                    <input
+                                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                                      className="euiFieldSearch euiFieldSearch--fullWidth"
+                                      defaultValue=""
+                                      onKeyUp={[Function]}
+                                      placeholder="Search to filter Available Metrics"
+                                      type="search"
+                                    />
+                                  </EuiValidatableControl>
+                                  <EuiFormControlLayoutIcons
+                                    compressed={false}
+                                    icon="search"
+                                    isLoading={false}
                                   >
-                                    <EuiValidatableControl
-                                      isInvalid={false}
+                                    <div
+                                      className="euiFormControlLayoutIcons"
                                     >
-                                      <input
-                                        aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                                        className="euiFieldSearch euiFieldSearch--fullWidth"
-                                        defaultValue=""
-                                        onKeyUp={[Function]}
-                                        placeholder="Search to filter Available Metrics"
+                                      <EuiFormControlLayoutCustomIcon
+                                        size="m"
                                         type="search"
-                                      />
-                                    </EuiValidatableControl>
-                                    <EuiFormControlLayoutIcons
-                                      compressed={false}
-                                      icon="search"
-                                      isLoading={false}
-                                    >
-                                      <div
-                                        className="euiFormControlLayoutIcons"
                                       >
-                                        <EuiFormControlLayoutCustomIcon
-                                          size="m"
-                                          type="search"
+                                        <span
+                                          className="euiFormControlLayoutCustomIcon"
                                         >
-                                          <span
-                                            className="euiFormControlLayoutCustomIcon"
+                                          <EuiIcon
+                                            aria-hidden="true"
+                                            className="euiFormControlLayoutCustomIcon__icon"
+                                            size="m"
+                                            type="search"
                                           >
-                                            <EuiIcon
-                                              aria-hidden="true"
-                                              className="euiFormControlLayoutCustomIcon__icon"
-                                              size="m"
-                                              type="search"
+                                            <EuiIconEmpty
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
                                             >
-                                              <EuiIconEmpty
+                                              <svg
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                 focusable="false"
+                                                height={16}
                                                 role="img"
                                                 style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                  focusable="false"
-                                                  height={16}
-                                                  role="img"
-                                                  style={null}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiFormControlLayoutCustomIcon>
-                                      </div>
-                                    </EuiFormControlLayoutIcons>
-                                  </div>
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              />
+                                            </EuiIconEmpty>
+                                          </EuiIcon>
+                                        </span>
+                                      </EuiFormControlLayoutCustomIcon>
+                                    </div>
+                                  </EuiFormControlLayoutIcons>
                                 </div>
-                              </EuiFormControlLayout>
-                            </EuiFieldSearch>
-                          </EuiSearchBox>
-                        </div>
-                      </EuiFlexItem>
-                    </div>
-                  </EuiFlexGroup>
-                </EuiSearchBar>
-              </div>
-            </Component>
-            <EuiSpacer
-              size="s"
-            >
-              <div
-                className="euiSpacer euiSpacer--s"
-              />
-            </EuiSpacer>
+                              </div>
+                            </EuiFormControlLayout>
+                          </EuiFieldSearch>
+                        </EuiSearchBox>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSearchBar>
+            </div>
+          </Component>
+          <EuiSpacer
+            size="s"
+          >
+            <div
+              className="euiSpacer euiSpacer--s"
+            />
+          </EuiSpacer>
+          <section
+            className="sidebar"
+          >
             <Component
               dataTestSubj="metricsListItems_selectedMetrics"
               handleClick={[Function]}
diff --git a/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
index 8bfdd0f91..95aa7ab32 100644
--- a/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
+++ b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
@@ -348,71 +348,63 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
       spanParam="1h"
       startTime="now-30m"
     >
-      <EuiDragDropContext
-        onDragEnd={[Function]}
+      <section
+        className="metricsGrid"
       >
-        <DragDropContext
+        <EuiDragDropContext
           onDragEnd={[Function]}
-          onDragStart={[Function]}
         >
-          <ErrorBoundary>
-            <App
-              contextId="0"
-              dragHandleUsageInstructions="
+          <DragDropContext
+            onDragEnd={[Function]}
+            onDragStart={[Function]}
+          >
+            <ErrorBoundary>
+              <App
+                contextId="0"
+                dragHandleUsageInstructions="
   Press space bar to start a drag.
   When dragging you can use the arrow keys to move the item around and escape to cancel.
   Some screen readers may require you to be in focus mode or to use your pass through key
 "
-              onDragEnd={[Function]}
-              onDragStart={[Function]}
-              setCallbacks={[Function]}
-            >
-              <Provider
-                context={
-                  Object {
-                    "$$typeof": Symbol(react.context),
-                    "Consumer": Object {
+                onDragEnd={[Function]}
+                onDragStart={[Function]}
+                setCallbacks={[Function]}
+              >
+                <Provider
+                  context={
+                    Object {
                       "$$typeof": Symbol(react.context),
+                      "Consumer": Object {
+                        "$$typeof": Symbol(react.context),
+                        "_calculateChangedBits": null,
+                        "_context": [Circular],
+                      },
+                      "Provider": Object {
+                        "$$typeof": Symbol(react.provider),
+                        "_context": [Circular],
+                      },
                       "_calculateChangedBits": null,
-                      "_context": [Circular],
-                    },
-                    "Provider": Object {
-                      "$$typeof": Symbol(react.provider),
-                      "_context": [Circular],
-                    },
-                    "_calculateChangedBits": null,
-                    "_currentRenderer": Object {},
-                    "_currentRenderer2": null,
-                    "_currentValue": null,
-                    "_currentValue2": null,
-                    "_threadCount": 0,
+                      "_currentRenderer": Object {},
+                      "_currentRenderer2": null,
+                      "_currentValue": null,
+                      "_currentValue2": null,
+                      "_threadCount": 0,
+                    }
                   }
-                }
-                store={
-                  Object {
-                    "dispatch": [Function],
-                    "getState": [Function],
-                    "replaceReducer": [Function],
-                    "subscribe": [Function],
-                    Symbol(Symbol.observable): [Function],
+                  store={
+                    Object {
+                      "dispatch": [Function],
+                      "getState": [Function],
+                      "replaceReducer": [Function],
+                      "subscribe": [Function],
+                      Symbol(Symbol.observable): [Function],
+                    }
                   }
-                }
-              >
-                <EuiDroppable
-                  droppableId="DROPPABLE_AREA_BARE"
                 >
-                  <Connect(Droppable)
-                    direction="vertical"
+                  <EuiDroppable
                     droppableId="DROPPABLE_AREA_BARE"
-                    getContainerForClone={[Function]}
-                    ignoreContainerClipping={false}
-                    isCombineEnabled={false}
-                    isDropDisabled={false}
-                    mode="standard"
-                    renderClone={null}
-                    type="EUI_DEFAULT"
                   >
-                    <Droppable
+                    <Connect(Droppable)
                       direction="vertical"
                       droppableId="DROPPABLE_AREA_BARE"
                       getContainerForClone={[Function]}
@@ -420,44 +412,56 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
                       isCombineEnabled={false}
                       isDropDisabled={false}
                       mode="standard"
-                      placeholder={null}
                       renderClone={null}
-                      shouldAnimatePlaceholder={false}
-                      snapshot={
-                        Object {
-                          "draggingFromThisWith": null,
-                          "draggingOverWith": null,
-                          "isDraggingOver": false,
-                          "isUsingPlaceholder": false,
-                        }
-                      }
                       type="EUI_DEFAULT"
-                      updateViewportMaxScroll={[Function]}
-                      useClone={null}
                     >
-                      <div
-                        className="euiDroppable euiDroppable--noGrow"
-                        data-rbd-droppable-context-id="0"
-                        data-rbd-droppable-id="DROPPABLE_AREA_BARE"
-                        data-test-subj="droppable"
+                      <Droppable
+                        direction="vertical"
+                        droppableId="DROPPABLE_AREA_BARE"
+                        getContainerForClone={[Function]}
+                        ignoreContainerClipping={false}
+                        isCombineEnabled={false}
+                        isDropDisabled={false}
+                        mode="standard"
+                        placeholder={null}
+                        renderClone={null}
+                        shouldAnimatePlaceholder={false}
+                        snapshot={
+                          Object {
+                            "draggingFromThisWith": null,
+                            "draggingOverWith": null,
+                            "isDraggingOver": false,
+                            "isUsingPlaceholder": false,
+                          }
+                        }
+                        type="EUI_DEFAULT"
+                        updateViewportMaxScroll={[Function]}
+                        useClone={null}
                       >
                         <div
-                          className="euiDroppable__placeholder"
+                          className="euiDroppable euiDroppable--noGrow"
+                          data-rbd-droppable-context-id="0"
+                          data-rbd-droppable-id="DROPPABLE_AREA_BARE"
+                          data-test-subj="droppable"
                         >
-                          <AnimateInOut
-                            on={null}
-                            shouldAnimate={false}
-                          />
+                          <div
+                            className="euiDroppable__placeholder"
+                          >
+                            <AnimateInOut
+                              on={null}
+                              shouldAnimate={false}
+                            />
+                          </div>
                         </div>
-                      </div>
-                    </Droppable>
-                  </Connect(Droppable)>
-                </EuiDroppable>
-              </Provider>
-            </App>
-          </ErrorBoundary>
-        </DragDropContext>
-      </EuiDragDropContext>
+                      </Droppable>
+                    </Connect(Droppable)>
+                  </EuiDroppable>
+                </Provider>
+              </App>
+            </ErrorBoundary>
+          </DragDropContext>
+        </EuiDragDropContext>
+      </section>
     </Component>
   </Connect(Component)>
 </Provider>

From 291f88b8b3459dec9fa885c93fcee58a1e8cf1cc Mon Sep 17 00:00:00 2001
From: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
Date: Thu, 14 Dec 2023 05:10:46 -0800
Subject: [PATCH 7/8] Update testing across Metrics module

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
---
 .../__tests__/visualization_helpers.test.tsx  |  24 +
 common/utils/visualization_helpers.ts         |  19 +
 package.json                                  |   1 +
 .../application_analytics/helpers/utils.tsx   |   6 +-
 .../__tests__/query_utils.test.tsx            |  44 +-
 .../__snapshots__/search.test.tsx.snap        | 910 ++++++++++++++++++
 .../common/search/__tests__/search.test.tsx   |  27 +
 .../metrics/helpers/__tests__/utils.test.tsx  |   2 +-
 public/components/metrics/helpers/utils.tsx   |  12 +-
 .../slices/__tests__/metric_slice.test.tsx    | 207 ++++
 .../metrics/redux/slices/metrics_slice.ts     |  54 +-
 .../__snapshots__/sidebar.test.tsx.snap       | 618 ++++++------
 .../sidebar/__tests__/sidebar.test.tsx        |  43 +-
 public/components/metrics/sidebar/sidebar.tsx |  36 +-
 .../metrics_export.test.tsx.snap              | 125 +++
 .../__tests__/metrics_export.test.tsx         | 188 ++++
 .../__tests__/metrics_export_panel.test.tsx   |   2 +-
 .../metrics/top_menu/metrics_export.tsx       |   1 +
 .../view/__tests__/metrics_grid.test.tsx      |   2 +-
 .../saved_object_visualization.tsx            |   3 +-
 public/services/requests/ppl.ts               |   2 +
 .../explorer_saved_object_loader.ts           |   5 +-
 .../saved_object_loaders/ppl/ppl_loader.ts    |   6 +-
 ...trics_contants.ts => metrics_constants.ts} |   6 +
 test/setup.jest.ts                            |   2 +-
 yarn.lock                                     |   5 +
 26 files changed, 1967 insertions(+), 383 deletions(-)
 create mode 100644 common/utils/__tests__/visualization_helpers.test.tsx
 create mode 100644 common/utils/visualization_helpers.ts
 create mode 100644 public/components/common/search/__tests__/__snapshots__/search.test.tsx.snap
 create mode 100644 public/components/common/search/__tests__/search.test.tsx
 create mode 100644 public/components/metrics/redux/slices/__tests__/metric_slice.test.tsx
 create mode 100644 public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export.test.tsx.snap
 create mode 100644 public/components/metrics/top_menu/__tests__/metrics_export.test.tsx
 rename test/{metrics_contants.ts => metrics_constants.ts} (97%)

diff --git a/common/utils/__tests__/visualization_helpers.test.tsx b/common/utils/__tests__/visualization_helpers.test.tsx
new file mode 100644
index 000000000..6c7f9f857
--- /dev/null
+++ b/common/utils/__tests__/visualization_helpers.test.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { getUserConfigFrom } from '../visualization_helpers';
+
+describe('Utils helper functions', () => {
+  describe('getUserConfigFrom', () => {
+    it('should return empty object from empty input', () => {
+      expect(getUserConfigFrom(undefined)).toEqual({});
+      expect(getUserConfigFrom('')).toEqual({});
+      expect(getUserConfigFrom({})).toEqual({});
+    });
+    it('should get object from user_configs json', () => {
+      const container = { user_configs: '{ "key": "value" }' };
+      expect(getUserConfigFrom(container)).toEqual({ key: 'value' });
+    });
+    it('should get object from userConfigs', () => {
+      const container = { userConfigs: '{ "key": "value" }' };
+      expect(getUserConfigFrom(container)).toEqual({ key: 'value' });
+    });
+  });
+});
diff --git a/common/utils/visualization_helpers.ts b/common/utils/visualization_helpers.ts
new file mode 100644
index 000000000..8a93cd7af
--- /dev/null
+++ b/common/utils/visualization_helpers.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { isEmpty, isString } from 'lodash';
+
+/* The file contains helper functions for visualizaitons operations
+ * getUserConfigFrom - returns input objects'  user_configs or userConfigs, JSON parsed if necessary
+ */
+
+export const getUserConfigFrom = (container: unknown): object => {
+  const config = container?.user_configs || container?.userConfigs || {};
+
+  if (isEmpty(config)) return {};
+
+  if (isString(config)) return JSON.parse(config);
+  else return {};
+};
diff --git a/package.json b/package.json
index d9ac42f9c..ef7ee224b 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
   },
   "devDependencies": {
     "@cypress/skip-test": "^2.6.1",
+    "@testing-library/user-event": "^14.5.1",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/mime": "^3.0.1",
     "@types/react-plotly.js": "^2.5.0",
diff --git a/public/components/application_analytics/helpers/utils.tsx b/public/components/application_analytics/helpers/utils.tsx
index 41f0b7048..67ac27fb7 100644
--- a/public/components/application_analytics/helpers/utils.tsx
+++ b/public/components/application_analytics/helpers/utils.tsx
@@ -16,6 +16,7 @@ import { NEW_SELECTED_QUERY_TAB, TAB_CREATED_TYPE } from '../../../../common/con
 import { SPAN_REGEX } from '../../../../common/constants/shared';
 import { VisualizationType } from '../../../../common/types/custom_panels';
 import { IField } from '../../../../common/types/explorer';
+import { getUserConfigFrom } from '../../../../common/utils/visualization_helpers';
 import { preprocessQuery } from '../../common/query_utils';
 import { fetchVisualizationById } from '../../../components/custom_panels/helpers/utils';
 import {
@@ -221,9 +222,8 @@ export const calculateAvailability = async (
 
     // resolved mismatched use of user_configs/userConfigs.  This fall-back
     // silently loads legacy configs.  They will be stored in new userConfigs upon save.
-    const userConfigs = visData.userConfigs
-      ? JSON.parse(visData.user_configs || visData.userConfigs)
-      : {};
+    const userConfigs = getUserConfigFrom(visData);
+
     // If there are levels, we get the current value
     if (userConfigs.availabilityConfig?.hasOwnProperty('level')) {
       // For every saved visualization with availability levels we push it to visWithAvailability
diff --git a/public/components/common/query_utils/__tests__/query_utils.test.tsx b/public/components/common/query_utils/__tests__/query_utils.test.tsx
index da81fe446..2db7db97d 100644
--- a/public/components/common/query_utils/__tests__/query_utils.test.tsx
+++ b/public/components/common/query_utils/__tests__/query_utils.test.tsx
@@ -4,7 +4,12 @@
  */
 
 import React from 'react';
-import { findMinInterval, parsePromQLIntoKeywords } from '../';
+import {
+  findMinInterval,
+  parsePromQLIntoKeywords,
+  preprocessMetricQuery,
+  updateCatalogVisualizationQuery,
+} from '../';
 
 describe('Query Utils', () => {
   describe('parsePromQLIntoKeywords', () => {
@@ -56,4 +61,41 @@ describe('Query Utils', () => {
       expect(minInterval).toEqual(span);
     });
   });
+  describe('Metric Query processors', () => {
+    const defaultQueryMetaData = {
+      catalogSourceName: 'my_catalog',
+      catalogTableName: 'metricName',
+      aggregation: 'avg',
+      attributesGroupBy: [],
+      start: 'now-1m',
+      end: 'now',
+      span: '1',
+      resolution: 'h',
+    };
+    describe('updateCatalogVisualizationQuery', () => {
+      it('should build plain promQL series query', () => {
+        const query = updateCatalogVisualizationQuery(defaultQueryMetaData);
+        expect(query).toMatch(/avg \(metricName\)/);
+      });
+      it('should build promQL with attributes grouping', () => {
+        const query = updateCatalogVisualizationQuery({
+          ...defaultQueryMetaData,
+          attributesGroupBy: ['label1', 'label2'],
+        });
+        expect(query).toMatch(/avg by\(label1,label2\) \(metricName\)/);
+      });
+    });
+    describe('preprocessMetricQuery', () => {
+      it('should set timestamps and default resolution', () => {
+        const [startDate, endDate] = ['2023-11-11', '2023-12-11'];
+        const [start, end] = [1699660800, 1702252800]; // 2023-11-11 to 2023-12-11
+        const query = preprocessMetricQuery({
+          metaData: { queryMetaData: defaultQueryMetaData },
+          startTime: startDate,
+          endTime: endDate,
+        });
+        expect(query).toMatch(new RegExp(`, ${start}, ${end}, '1d'`));
+      });
+    });
+  });
 });
diff --git a/public/components/common/search/__tests__/__snapshots__/search.test.tsx.snap b/public/components/common/search/__tests__/__snapshots__/search.test.tsx.snap
new file mode 100644
index 000000000..b8a95255a
--- /dev/null
+++ b/public/components/common/search/__tests__/__snapshots__/search.test.tsx.snap
@@ -0,0 +1,910 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Explorer Search component renders basic component 1`] = `
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <Component>
+    <div
+      className="globalQueryBar"
+    >
+      <EuiFlexGroup
+        alignItems="flexStart"
+        gutterSize="s"
+        justifyContent="flexStart"
+        wrap={true}
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+        >
+          <EuiFlexItem
+            className="search-area lang-selector"
+            grow={false}
+            key="lang-selector"
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero search-area lang-selector"
+            >
+              <EuiPopover
+                anchorPosition="downLeft"
+                button={
+                  <EuiButton
+                    color="text"
+                    iconSide="right"
+                    iconType="arrowDown"
+                    onClick={[Function]}
+                  >
+                    PPL
+                  </EuiButton>
+                }
+                closePopover={[Function]}
+                display="inlineBlock"
+                hasArrow={true}
+                id="smallContextMenuExample"
+                isOpen={false}
+                ownFocus={true}
+                panelPaddingSize="none"
+              >
+                <div
+                  className="euiPopover euiPopover--anchorDownLeft"
+                  id="smallContextMenuExample"
+                >
+                  <div
+                    className="euiPopover__anchor"
+                  >
+                    <EuiButton
+                      color="text"
+                      iconSide="right"
+                      iconType="arrowDown"
+                      onClick={[Function]}
+                    >
+                      <EuiButtonDisplay
+                        baseClassName="euiButton"
+                        color="text"
+                        disabled={false}
+                        element="button"
+                        iconSide="right"
+                        iconType="arrowDown"
+                        isDisabled={false}
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <button
+                          className="euiButton euiButton--text"
+                          disabled={false}
+                          onClick={[Function]}
+                          style={
+                            Object {
+                              "minWidth": undefined,
+                            }
+                          }
+                          type="button"
+                        >
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="right"
+                            iconType="arrowDown"
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
+                          >
+                            <span
+                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                            >
+                              <EuiIcon
+                                className="euiButtonContent__icon"
+                                color="inherit"
+                                size="m"
+                                type="arrowDown"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                              <span
+                                className="euiButton__text"
+                              >
+                                PPL
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonDisplay>
+                    </EuiButton>
+                  </div>
+                </div>
+              </EuiPopover>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            className="search-area"
+            grow={5}
+            key="search-bar"
+            style={
+              Object {
+                "minWidth": 400,
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow5 search-area"
+              style={
+                Object {
+                  "minWidth": 400,
+                }
+              }
+            >
+              <Component
+                baseQuery=""
+                handleQuerySearch={[Function]}
+                key="autocomplete-search-bar"
+                tabId=""
+              >
+                <div
+                  aria-expanded={false}
+                  aria-haspopup="listbox"
+                  aria-labelledby="autocomplete-0-label"
+                  className="aa-Autocomplete"
+                  id="autocomplete-root"
+                  role="combobox"
+                >
+                  <EuiTextArea
+                    aria-autocomplete="both"
+                    aria-labelledby="autocomplete-0-label"
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    autoFocus={false}
+                    data-test-subj="searchAutocompleteTextArea"
+                    enterKeyHint="search"
+                    id="autocomplete-textarea"
+                    maxLength={512}
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    placeholder="Enter query"
+                    spellCheck="false"
+                    style={
+                      Object {
+                        "height": "18px",
+                        "marginTop": "0px",
+                        "padding": "8px",
+                      }
+                    }
+                    type="search"
+                    value=""
+                  >
+                    <EuiValidatableControl>
+                      <textarea
+                        aria-autocomplete="both"
+                        aria-labelledby="autocomplete-0-label"
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoFocus={false}
+                        className="euiTextArea euiTextArea--resizeVertical"
+                        data-test-subj="searchAutocompleteTextArea"
+                        enterKeyHint="search"
+                        id="autocomplete-textarea"
+                        maxLength={512}
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        placeholder="Enter query"
+                        rows={6}
+                        spellCheck="false"
+                        style={
+                          Object {
+                            "height": "18px",
+                            "marginTop": "0px",
+                            "padding": "8px",
+                          }
+                        }
+                        type="search"
+                        value=""
+                      />
+                    </EuiValidatableControl>
+                  </EuiTextArea>
+                </div>
+              </Component>
+              <EuiBadge
+                className="ppl-link ppl-link-light"
+                color="hollow"
+                onClick={[Function]}
+                onClickAriaLabel="pplLinkShowFlyout"
+              >
+                <EuiInnerText>
+                  <button
+                    aria-label="pplLinkShowFlyout"
+                    className="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="PPL"
+                  >
+                    <span
+                      className="euiBadge__content"
+                    >
+                      <span
+                        className="euiBadge__text"
+                      >
+                        PPL
+                      </span>
+                    </span>
+                  </button>
+                </EuiInnerText>
+              </EuiBadge>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem
+            className="euiFlexItem--flexGrowZero event-date-picker"
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero euiFlexItem--flexGrowZero event-date-picker"
+            >
+              <DatePicker
+                handleTimePickerChange={[Function]}
+                handleTimeRangePickerRefresh={[Function]}
+              >
+                <EuiSuperDatePicker
+                  className="osdQueryBar__datePicker"
+                  commonlyUsedRanges={
+                    Array [
+                      Object {
+                        "end": "now/d",
+                        "label": "Today",
+                        "start": "now/d",
+                      },
+                      Object {
+                        "end": "now/w",
+                        "label": "This week",
+                        "start": "now/w",
+                      },
+                      Object {
+                        "end": "now/M",
+                        "label": "This month",
+                        "start": "now/M",
+                      },
+                      Object {
+                        "end": "now/y",
+                        "label": "This year",
+                        "start": "now/y",
+                      },
+                      Object {
+                        "end": "now-1d/d",
+                        "label": "Yesterday",
+                        "start": "now-1d/d",
+                      },
+                      Object {
+                        "end": "now",
+                        "label": "Week to date",
+                        "start": "now/w",
+                      },
+                      Object {
+                        "end": "now",
+                        "label": "Month to date",
+                        "start": "now/M",
+                      },
+                      Object {
+                        "end": "now",
+                        "label": "Year to date",
+                        "start": "now/y",
+                      },
+                    ]
+                  }
+                  data-test-subj="pplSearchDatePicker"
+                  dateFormat=""
+                  end="now"
+                  isAutoRefreshOnly={false}
+                  isDisabled={false}
+                  isPaused={true}
+                  onRefresh={[Function]}
+                  onTimeChange={[Function]}
+                  recentlyUsedRanges={Array []}
+                  refreshInterval={0}
+                  showUpdateButton={true}
+                  start="now-15m"
+                  timeFormat="HH:mm"
+                >
+                  <EuiFlexGroup
+                    className="euiSuperDatePicker__flexWrapper"
+                    gutterSize="s"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                    >
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
+                        >
+                          <EuiFormControlLayout
+                            className="euiSuperDatePicker"
+                            isDisabled={false}
+                            prepend={
+                              <EuiQuickSelectPopover
+                                applyTime={[Function]}
+                                commonlyUsedRanges={
+                                  Array [
+                                    Object {
+                                      "end": "now/d",
+                                      "label": "Today",
+                                      "start": "now/d",
+                                    },
+                                    Object {
+                                      "end": "now/w",
+                                      "label": "This week",
+                                      "start": "now/w",
+                                    },
+                                    Object {
+                                      "end": "now/M",
+                                      "label": "This month",
+                                      "start": "now/M",
+                                    },
+                                    Object {
+                                      "end": "now/y",
+                                      "label": "This year",
+                                      "start": "now/y",
+                                    },
+                                    Object {
+                                      "end": "now-1d/d",
+                                      "label": "Yesterday",
+                                      "start": "now-1d/d",
+                                    },
+                                    Object {
+                                      "end": "now",
+                                      "label": "Week to date",
+                                      "start": "now/w",
+                                    },
+                                    Object {
+                                      "end": "now",
+                                      "label": "Month to date",
+                                      "start": "now/M",
+                                    },
+                                    Object {
+                                      "end": "now",
+                                      "label": "Year to date",
+                                      "start": "now/y",
+                                    },
+                                  ]
+                                }
+                                dateFormat=""
+                                end="now"
+                                isAutoRefreshOnly={false}
+                                isDisabled={false}
+                                isPaused={true}
+                                recentlyUsedRanges={Array []}
+                                refreshInterval={0}
+                                start="now-15m"
+                              />
+                            }
+                          >
+                            <div
+                              className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                            >
+                              <EuiQuickSelectPopover
+                                applyTime={[Function]}
+                                className="euiFormControlLayout__prepend"
+                                commonlyUsedRanges={
+                                  Array [
+                                    Object {
+                                      "end": "now/d",
+                                      "label": "Today",
+                                      "start": "now/d",
+                                    },
+                                    Object {
+                                      "end": "now/w",
+                                      "label": "This week",
+                                      "start": "now/w",
+                                    },
+                                    Object {
+                                      "end": "now/M",
+                                      "label": "This month",
+                                      "start": "now/M",
+                                    },
+                                    Object {
+                                      "end": "now/y",
+                                      "label": "This year",
+                                      "start": "now/y",
+                                    },
+                                    Object {
+                                      "end": "now-1d/d",
+                                      "label": "Yesterday",
+                                      "start": "now-1d/d",
+                                    },
+                                    Object {
+                                      "end": "now",
+                                      "label": "Week to date",
+                                      "start": "now/w",
+                                    },
+                                    Object {
+                                      "end": "now",
+                                      "label": "Month to date",
+                                      "start": "now/M",
+                                    },
+                                    Object {
+                                      "end": "now",
+                                      "label": "Year to date",
+                                      "start": "now/y",
+                                    },
+                                  ]
+                                }
+                                dateFormat=""
+                                end="now"
+                                isAutoRefreshOnly={false}
+                                isDisabled={false}
+                                isPaused={true}
+                                key="0/.0"
+                                recentlyUsedRanges={Array []}
+                                refreshInterval={0}
+                                start="now-15m"
+                              >
+                                <EuiPopover
+                                  anchorClassName="euiQuickSelectPopover__anchor"
+                                  anchorPosition="downLeft"
+                                  button={
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <EuiIcon
+                                        type="calendar"
+                                      />
+                                    </EuiButtonEmpty>
+                                  }
+                                  closePopover={[Function]}
+                                  display="inlineBlock"
+                                  hasArrow={true}
+                                  isOpen={false}
+                                  ownFocus={true}
+                                  panelPaddingSize="m"
+                                >
+                                  <div
+                                    className="euiPopover euiPopover--anchorDownLeft"
+                                  >
+                                    <div
+                                      className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                    >
+                                      <EuiButtonEmpty
+                                        aria-label="Date quick select"
+                                        className="euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        iconSide="right"
+                                        iconType="arrowDown"
+                                        isDisabled={false}
+                                        onClick={[Function]}
+                                        size="xs"
+                                        textProps={
+                                          Object {
+                                            "className": "euiQuickSelectPopover__buttonText",
+                                          }
+                                        }
+                                      >
+                                        <button
+                                          aria-label="Date quick select"
+                                          className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                          data-test-subj="superDatePickerToggleQuickMenuButton"
+                                          disabled={false}
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <EuiButtonContent
+                                            className="euiButtonEmpty__content"
+                                            iconSide="right"
+                                            iconSize="s"
+                                            iconType="arrowDown"
+                                            textProps={
+                                              Object {
+                                                "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                            >
+                                              <EuiIcon
+                                                className="euiButtonContent__icon"
+                                                color="inherit"
+                                                size="s"
+                                                type="arrowDown"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                              <span
+                                                className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                              >
+                                                <EuiIcon
+                                                  type="calendar"
+                                                >
+                                                  <EuiIconEmpty
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                    focusable="false"
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                      focusable="false"
+                                                      height={16}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    />
+                                                  </EuiIconEmpty>
+                                                </EuiIcon>
+                                              </span>
+                                            </span>
+                                          </EuiButtonContent>
+                                        </button>
+                                      </EuiButtonEmpty>
+                                    </div>
+                                  </div>
+                                </EuiPopover>
+                              </EuiQuickSelectPopover>
+                              <div
+                                className="euiFormControlLayout__childrenWrapper"
+                              >
+                                <EuiDatePickerRange
+                                  className="euiDatePickerRange--inGroup"
+                                  endDateControl={<div />}
+                                  iconType={false}
+                                  isCustom={true}
+                                  startDateControl={<div />}
+                                >
+                                  <div
+                                    className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                  >
+                                    <button
+                                      className="euiSuperDatePicker__prettyFormat"
+                                      data-test-subj="superDatePickerShowDatesButton"
+                                      disabled={false}
+                                      onClick={[Function]}
+                                    >
+                                      Last 15 minutes
+                                      <span
+                                        className="euiSuperDatePicker__prettyFormatLink"
+                                      >
+                                        <EuiI18n
+                                          default="Show dates"
+                                          token="euiSuperDatePicker.showDatesButtonLabel"
+                                        >
+                                          Show dates
+                                        </EuiI18n>
+                                      </span>
+                                    </button>
+                                  </div>
+                                </EuiDatePickerRange>
+                                <EuiFormControlLayoutIcons />
+                              </div>
+                            </div>
+                          </EuiFormControlLayout>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiSuperUpdateButton
+                            data-test-subj="superDatePickerApplyTimeButton"
+                            isDisabled={false}
+                            isLoading={false}
+                            needsUpdate={false}
+                            onClick={[Function]}
+                            showTooltip={true}
+                          >
+                            <EuiToolTip
+                              delay="regular"
+                              position="bottom"
+                            >
+                              <span
+                                className="euiToolTipAnchor"
+                                onKeyUp={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                              >
+                                <EuiButton
+                                  className="euiSuperUpdateButton"
+                                  color="primary"
+                                  data-test-subj="superDatePickerApplyTimeButton"
+                                  fill={true}
+                                  iconType="refresh"
+                                  isDisabled={false}
+                                  isLoading={false}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  textProps={
+                                    Object {
+                                      "className": "euiSuperUpdateButton__text",
+                                    }
+                                  }
+                                >
+                                  <EuiButtonDisplay
+                                    baseClassName="euiButton"
+                                    className="euiSuperUpdateButton"
+                                    color="primary"
+                                    data-test-subj="superDatePickerApplyTimeButton"
+                                    disabled={false}
+                                    element="button"
+                                    fill={true}
+                                    iconType="refresh"
+                                    isDisabled={false}
+                                    isLoading={false}
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    textProps={
+                                      Object {
+                                        "className": "euiSuperUpdateButton__text",
+                                      }
+                                    }
+                                    type="button"
+                                  >
+                                    <button
+                                      className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
+                                      data-test-subj="superDatePickerApplyTimeButton"
+                                      disabled={false}
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      style={
+                                        Object {
+                                          "minWidth": undefined,
+                                        }
+                                      }
+                                      type="button"
+                                    >
+                                      <EuiButtonContent
+                                        className="euiButton__content"
+                                        iconSide="left"
+                                        iconType="refresh"
+                                        isLoading={false}
+                                        textProps={
+                                          Object {
+                                            "className": "euiButton__text euiSuperUpdateButton__text",
+                                          }
+                                        }
+                                      >
+                                        <span
+                                          className="euiButtonContent euiButton__content"
+                                        >
+                                          <EuiIcon
+                                            className="euiButtonContent__icon"
+                                            color="inherit"
+                                            size="m"
+                                            type="refresh"
+                                          >
+                                            <EuiIconEmpty
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              />
+                                            </EuiIconEmpty>
+                                          </EuiIcon>
+                                          <span
+                                            className="euiButton__text euiSuperUpdateButton__text"
+                                          >
+                                            <EuiI18n
+                                              default="Refresh"
+                                              token="euiSuperUpdateButton.refreshButtonLabel"
+                                            >
+                                              Refresh
+                                            </EuiI18n>
+                                          </span>
+                                        </span>
+                                      </EuiButtonContent>
+                                    </button>
+                                  </EuiButtonDisplay>
+                                </EuiButton>
+                              </span>
+                            </EuiToolTip>
+                          </EuiSuperUpdateButton>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </EuiSuperDatePicker>
+              </DatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            className="euiFlexItem--flexGrowZero live-tail"
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero live-tail"
+            >
+              <EuiPopover
+                anchorPosition="downCenter"
+                button={
+                  <Unknown
+                    dataTestSubj="eventLiveTail"
+                  />
+                }
+                display="inlineBlock"
+                hasArrow={true}
+                isOpen={false}
+                ownFocus={true}
+                panelPaddingSize="none"
+              >
+                <div
+                  className="euiPopover euiPopover--anchorDownCenter"
+                >
+                  <div
+                    className="euiPopover__anchor"
+                  >
+                    <Component
+                      dataTestSubj="eventLiveTail"
+                    >
+                      <EuiButton
+                        data-test-subj="eventLiveTail"
+                        iconSide="left"
+                        iconType="play"
+                        onClick={[Function]}
+                      >
+                        <EuiButtonDisplay
+                          baseClassName="euiButton"
+                          data-test-subj="eventLiveTail"
+                          disabled={false}
+                          element="button"
+                          iconSide="left"
+                          iconType="play"
+                          isDisabled={false}
+                          onClick={[Function]}
+                          type="button"
+                        >
+                          <button
+                            className="euiButton euiButton--primary"
+                            data-test-subj="eventLiveTail"
+                            disabled={false}
+                            onClick={[Function]}
+                            style={
+                              Object {
+                                "minWidth": undefined,
+                              }
+                            }
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButton__content"
+                              iconSide="left"
+                              iconType="play"
+                              textProps={
+                                Object {
+                                  "className": "euiButton__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButton__content"
+                              >
+                                <EuiIcon
+                                  className="euiButtonContent__icon"
+                                  color="inherit"
+                                  size="m"
+                                  type="play"
+                                >
+                                  <EuiIconEmpty
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                    focusable="false"
+                                    role="img"
+                                    style={null}
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                      focusable="false"
+                                      height={16}
+                                      role="img"
+                                      style={null}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    />
+                                  </EuiIconEmpty>
+                                </EuiIcon>
+                                <span
+                                  className="euiButton__text"
+                                />
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonDisplay>
+                      </EuiButton>
+                    </Component>
+                  </div>
+                </div>
+              </EuiPopover>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+    </div>
+  </Component>
+</Provider>
+`;
diff --git a/public/components/common/search/__tests__/search.test.tsx b/public/components/common/search/__tests__/search.test.tsx
new file mode 100644
index 000000000..be1d8b138
--- /dev/null
+++ b/public/components/common/search/__tests__/search.test.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { createStore } from '@reduxjs/toolkit';
+import { rootReducer } from '../../../../framework/redux/reducers';
+import { Provider } from 'react-redux';
+import { Search } from '../search';
+
+describe('Explorer Search component', () => {
+  configure({ adapter: new Adapter() });
+  const store = createStore(rootReducer);
+
+  it('renders basic component', () => {
+    const wrapper = mount(
+      <Provider store={store}>
+        <Search />
+      </Provider>
+    );
+    wrapper.update();
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/metrics/helpers/__tests__/utils.test.tsx b/public/components/metrics/helpers/__tests__/utils.test.tsx
index dde4cdb70..9f92d8b01 100644
--- a/public/components/metrics/helpers/__tests__/utils.test.tsx
+++ b/public/components/metrics/helpers/__tests__/utils.test.tsx
@@ -11,7 +11,7 @@ import {
   sampleMergedVisualizations,
   sampleMetricsVisualizations,
   sampleVisualizationsList,
-} from '../../../../../test/metrics_contants';
+} from '../../../../../test/metrics_constants';
 import _ from 'lodash';
 
 describe('Utils helper functions', () => {
diff --git a/public/components/metrics/helpers/utils.tsx b/public/components/metrics/helpers/utils.tsx
index 9e175f8ec..777c532a8 100644
--- a/public/components/metrics/helpers/utils.tsx
+++ b/public/components/metrics/helpers/utils.tsx
@@ -33,9 +33,15 @@ export const onTimeChange = (
 
 // PPL Service requestor
 export const pplServiceRequestor = (pplService: PPLService, finalQuery: string) => {
-  return pplService.fetch({ query: finalQuery, format: VISUALIZATION }).catch((error: Error) => {
-    console.error(error);
-  });
+  return pplService
+    .fetch({ query: finalQuery, format: VISUALIZATION })
+    .then((res) => {
+      console.log('pplService resolved value', { res });
+      return res;
+    })
+    .catch((error: Error) => {
+      console.error(error);
+    });
 };
 
 // Merges new layout into visualizations
diff --git a/public/components/metrics/redux/slices/__tests__/metric_slice.test.tsx b/public/components/metrics/redux/slices/__tests__/metric_slice.test.tsx
new file mode 100644
index 000000000..f2b74f5d9
--- /dev/null
+++ b/public/components/metrics/redux/slices/__tests__/metric_slice.test.tsx
@@ -0,0 +1,207 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { PropsWithChildren } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import type { RenderOptions } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+
+import { OBSERVABILITY_CUSTOM_METRIC } from '../../../../../../common/constants/metrics';
+import { PROMQL_METRIC_SUBTYPE } from '../../../../../../common/constants/shared';
+import {
+  metricsReducers,
+  mergeMetrics,
+  clearSelectedMetrics,
+  addSelectedMetric,
+  metricSlice,
+} from '../metrics_slice';
+import { sampleSavedMetric } from '../../../../../../test/metrics_constants';
+import httpClientMock from '../../../../../../test/__mocks__/httpClientMock';
+import { Sidebar } from '../../../sidebar/sidebar';
+import { setOSDHttp, setPPLService } from '../../../../../../common/utils';
+import PPLService from '../../../../../services/requests/ppl';
+
+jest.mock('../../../../../services/requests/ppl');
+
+const defaultInitialState = {
+  metrics: {},
+  selectedIds: [],
+  sortedIds: [],
+  search: '',
+  metricsLayout: [],
+  dataSources: [OBSERVABILITY_CUSTOM_METRIC],
+  dataSourceTitles: ['Observability Custom Metrics'],
+  dataSourceIcons: [[OBSERVABILITY_CUSTOM_METRIC, { color: 'blue' }]],
+  dateSpanFilter: {
+    start: 'now-1d',
+    end: 'now',
+    span: 1,
+    resolution: 'h',
+    recentlyUsedRanges: [],
+  },
+  refresh: 0, // set to new Date() to trigger
+};
+
+// This type interface extends the default options for render from RTL, as well
+// as allows the user to specify other things such as initialState, store.
+interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
+  preloadedState?: Partial<RootState>;
+  store?: AppStore;
+}
+
+function configureMetricStore(additionalState = {}) {
+  const preloadedState = {
+    metrics: { ...defaultInitialState, ...additionalState },
+  };
+  return configureStore({ reducer: { metrics: metricsReducers }, preloadedState });
+}
+
+export function renderWithMetricsProviders(
+  ui: React.ReactElement,
+  {
+    preloadedState = {},
+    // Automatically create a store instance if no store was passed in
+    store = configureStore({ reducer: { metrics: metricsReducers }, preloadedState }),
+    ...renderOptions
+  }: ExtendedRenderOptions = {}
+) {
+  function Wrapper({ children }: PropsWithChildren<{}>): JSX.Element {
+    return <Provider store={store}>{children}</Provider>;
+  }
+
+  // Return an object with the store and all of RTL's query functions
+  return { store, ...render(<Provider store={store}>{ui}</Provider>, { ...renderOptions }) };
+}
+
+describe('Add and Remove Selected Metrics', () => {
+  beforeAll(() => {
+    PPLService.mockImplementation(() => {
+      return {
+        fetch: jest
+          .fn()
+          .mockResolvedValueOnce({
+            data: { DATASOURCE_NAME: ['datasource1', 'datasource2'] },
+          })
+          // datasource1 return schema
+          .mockResolvedValueOnce({
+            jsonData: [{ TABLE_CATALOG: 'datasource1', TABLE_NAME: 'testMetric' }],
+          })
+          // datasource2 return schema (none)
+          .mockResolvedValueOnce({
+            jsonData: [],
+          }),
+      };
+    });
+  });
+
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  it('should render available metrics', async () => {
+    const preloadedState = {
+      metrics: {
+        ...defaultInitialState,
+      },
+    };
+
+    setPPLService(new PPLService(httpClientMock));
+
+    setOSDHttp(httpClientMock);
+    httpClientMock.get = jest.fn().mockResolvedValue({
+      observabilityObjectList: [
+        {
+          id: sampleSavedMetric.id,
+          objectId: sampleSavedMetric.id,
+          savedVisualization: sampleSavedMetric,
+        },
+      ],
+    });
+
+    // Act
+    renderWithMetricsProviders(<Sidebar />, { preloadedState });
+
+    // Assert
+
+    // wait for render after loadMetrics
+    expect(await screen.findByText(/Available Metrics 2 of 2/)).toBeInTheDocument();
+    expect(await screen.findByText(/Selected Metrics 0 of 0/)).toBeInTheDocument();
+    expect(screen.getByText(/\[Logs\]/)).toBeInTheDocument();
+
+    // Find the testMetric and click on it to "select" it.
+    const testMetricEl = screen.getByText(/testMetric/);
+    expect(testMetricEl).toBeInTheDocument();
+    fireEvent.click(testMetricEl);
+
+    // Selected and Available now show 1 each -- testMetric has been moved
+    expect(await screen.findByText(/Available Metrics 1 of 1/)).toBeInTheDocument();
+    expect(await screen.findByText(/Selected Metrics 1 of 1/)).toBeInTheDocument();
+  });
+});
+describe('Metrics redux state tests', () => {
+  it('Should initially set metrics state', () => {
+    const store = configureMetricStore();
+    const state = store.getState().metrics;
+    expect(state).toHaveProperty('metrics');
+    expect(state).toHaveProperty('selectedIds');
+  });
+});
+
+describe('metricsSlice actions and reducers', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  it('should handle mergeMetrics', async () => {
+    const newMetrics = {
+      metric1: { name: 'metricName', availableAttributes: undefined },
+    };
+    const store = configureMetricStore();
+
+    store.dispatch(mergeMetrics(newMetrics));
+
+    const newState = store.getState().metrics;
+
+    expect(newState.metrics).toMatchObject(newMetrics);
+  });
+
+  it('should handle clearSelectedMetrics', () => {
+    const store = configureMetricStore({ selectedIds: ['testId'] });
+    store.dispatch(clearSelectedMetrics());
+
+    const newState = store.getState().metrics;
+    expect(newState.selectedIds).toEqual([]);
+  });
+
+  it('should handle updateMetricQuery', () => {
+    const metricsState = {
+      ...defaultInitialState,
+      metrics: { metric1: { name: 'metricName' }, metric2: { name: 'metric2' } },
+    };
+    // const store = configureStore( { metrics: metricsReducers },
+    //   preloadedState: { metrics: metricsState },
+    // });
+
+    // const dispatchedAction = store.dispatch(
+    //   updateMetricQuery('metric1', { availableAttributes: ['label1'] })
+    // );
+    // expect(dispatchedAction.type).toEqual('metrics/setMetric');
+    // expect(dispatchedAction.payload).toMatchObject({
+    //   aggregation: 'avg',
+    //   attributesGroupBy: [],
+    //   availableAttributes: ['label1'],
+    // });
+  });
+
+  describe('loadMetrics', () => {
+    it('should handle setSortedIds', async () => {
+      const store = configureMetricStore();
+      await store.dispatch(metricSlice.actions.setSortedIds(['id1', 'id2']));
+      expect(store.getState().metrics.sortedIds).toEqual(['id1', 'id2']);
+    });
+  });
+});
diff --git a/public/components/metrics/redux/slices/metrics_slice.ts b/public/components/metrics/redux/slices/metrics_slice.ts
index 6de49d48c..d667ab772 100644
--- a/public/components/metrics/redux/slices/metrics_slice.ts
+++ b/public/components/metrics/redux/slices/metrics_slice.ts
@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { createSlice } from '@reduxjs/toolkit';
-import { keyBy, mergeWith, pick, sortBy } from 'lodash';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { keyBy, mergeWith, pick, sortBy, merge } from 'lodash';
 import { ouiPaletteColorBlindBehindText } from '@elastic/eui';
 import {
   OBSERVABILITY_CUSTOM_METRIC,
@@ -18,6 +18,7 @@ import { ObservabilitySavedVisualization } from '../../../../services/saved_obje
 import { pplServiceRequestor } from '../../helpers/utils';
 import { coreRefs } from '../../../../framework/core_refs';
 import { PPL_METRIC_SUBTYPE, PROMQL_METRIC_SUBTYPE } from '../../../../../common/constants/shared';
+import { getOSDHttp, getPPLService } from '../../../../../common/utils';
 
 export interface IconAttributes {
   color: string;
@@ -65,17 +66,12 @@ const mergeMetricCustomizer = function (objValue, srcValue) {
         : srcValue.availableAttributes,
   };
 };
-export const mergeMetrics = (newMetricMap) => (dispatch, getState) => {
-  const { metrics } = getState().metrics;
-  const modifiableMetricsMap = { ...metrics };
 
-  const mergedMetrics = mergeWith(modifiableMetricsMap, newMetricMap, mergeMetricCustomizer);
-  dispatch(setMetrics(mergedMetrics));
-};
+const now = () => new Date().getMilliseconds();
 
 export const loadMetrics = () => async (dispatch) => {
-  const { http, pplService } = coreRefs;
-  const customDataRequest = fetchCustomMetrics(http);
+  const pplService = getPPLService();
+  const customDataRequest = fetchCustomMetrics();
   const remoteDataSourcesResponse = await pplServiceRequestor(pplService!, PPL_DATASOURCES_REQUEST);
   const remoteDataSources = remoteDataSourcesResponse.data.DATASOURCE_NAME;
 
@@ -85,15 +81,15 @@ export const loadMetrics = () => async (dispatch) => {
     setDataSourceIcons(coloredIconsFrom([OBSERVABILITY_CUSTOM_METRIC, ...remoteDataSources]))
   );
 
-  const remoteDataRequests = await fetchRemoteMetrics(remoteDataSources);
+  const remoteDataRequests = fetchRemoteMetrics(remoteDataSources);
   const metricsResultSet = await Promise.all([customDataRequest, ...remoteDataRequests]);
   const metricsResult = metricsResultSet.flat();
 
   const metricsMapById = keyBy(metricsResult.flat(), 'id');
-  dispatch(mergeMetrics(metricsMapById));
+  await dispatch(mergeMetrics(metricsMapById));
 
   const sortedIds = sortBy(metricsResult, 'catalog', 'id').map((m) => m.id);
-  dispatch(setSortedIds(sortedIds));
+  await dispatch(setSortedIds(sortedIds));
 };
 
 const fetchCustomMetrics = async () => {
@@ -103,6 +99,7 @@ const fetchCustomMetrics = async () => {
   const savedMetrics = dataSet.observabilityObjectList.filter((obj) =>
     [PROMQL_METRIC_SUBTYPE, PPL_METRIC_SUBTYPE].includes(obj.savedVisualization?.subType)
   );
+
   return savedMetrics.map((obj: any) => ({
     id: obj.objectId,
     savedVisualizationId: obj.objectId,
@@ -120,8 +117,7 @@ const fetchCustomMetrics = async () => {
 };
 
 const fetchRemoteDataSource = async (dataSource) => {
-  const { pplService } = coreRefs;
-
+  const pplService = getPPLService();
   const response = await pplServiceRequestor(
     pplService,
     `source = ${dataSource}.information_schema.tables`
@@ -129,8 +125,8 @@ const fetchRemoteDataSource = async (dataSource) => {
   return { jsonData: response.jsonData, dataSource };
 };
 
-const fetchRemoteMetrics = async (remoteDataSources: string[]): Promise<any> => {
-  return remoteDataSources.map((dataSource) =>
+const fetchRemoteMetrics = (remoteDataSources: string[]) =>
+  remoteDataSources.map((dataSource) =>
     fetchRemoteDataSource(dataSource).then(({ jsonData }) =>
       jsonData.map((obj: any) => ({
         id: `${obj.TABLE_CATALOG}.${obj.TABLE_NAME}`,
@@ -149,15 +145,22 @@ const fetchRemoteMetrics = async (remoteDataSources: string[]): Promise<any> =>
       }))
     )
   );
-};
 
 export const metricSlice = createSlice({
   name: REDUX_SLICE_METRICS,
   initialState,
   reducers: {
-    setMetrics: (state, { payload }) => {
-      state.metrics = payload;
+    mergeMetrics: (state, { payload }) => {
+      const { metrics } = state;
+      const modifiableMetricsMap = { ...metrics };
+
+      const mergedMetrics = mergeWith(modifiableMetricsMap, payload, mergeMetricCustomizer);
+      state.metrics = mergedMetrics;
     },
+
+    // setMetrics: (state, { payload }) => {
+    //   state.metrics = payload;
+    // },
     setMetric: (state, { payload }) => {
       state.metrics[payload.id] = payload;
     },
@@ -211,7 +214,8 @@ export const metricSlice = createSlice({
 export const {
   deSelectMetric,
   clearSelectedMetrics,
-  selectMetric,
+
+  mergeMetrics,
   moveMetric,
   setSearch,
   setDateSpan,
@@ -223,7 +227,7 @@ export const {
 
 /** private actions */
 
-const { setMetrics, setMetric, setSortedIds } = metricSlice.actions;
+const { selectMetric, setMetric, setSortedIds } = metricSlice.actions;
 
 const getAvailableAttributes = (id, metricIndex) => async (dispatch, getState) => {
   const { pplService, toasts } = coreRefs;
@@ -249,9 +253,9 @@ export const addSelectedMetric = (metric: MetricType) => async (dispatch, getSta
   if (currentSelectedIds.includes(metric.id)) return;
 
   if (metric.subType === PROMQL_METRIC_SUBTYPE) {
-    dispatch(getAvailableAttributes(metric.id, metric.index));
+    await dispatch(getAvailableAttributes(metric.id, metric.index));
   }
-  dispatch(selectMetric(metric));
+  await dispatch(selectMetric(metric));
 };
 
 export const removeSelectedMetric = ({ id }) => async (dispatch, getState) => {
@@ -270,7 +274,7 @@ export const updateMetricQuery = (id, { availableAttributes, aggregation, attrib
     attributesGroupBy: attributesGroupBy || staticMetric.attributesGroupBy || [],
     availableAttributes: availableAttributes || staticMetric.availableAttributes || [],
   };
-  dispatch(setMetric(metric));
+  return dispatch(setMetric(metric));
 };
 
 export const searchOrTrue = (search, metric) => {
diff --git a/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index 348bc61a9..0b9c405df 100644
--- a/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -99,382 +99,386 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
         textComponent={Symbol(react.fragment)}
       >
         <PseudoLocaleWrapper>
-          <Component>
-            <div
-              className="metrics-search-bar-input"
-              data-test-subj="metricsSearch"
-            >
-              <EuiSearchBar
-                box={
-                  Object {
-                    "incremental": true,
-                    "placeholder": "Search to filter Available Metrics",
-                  }
-                }
-                defaultQuery=""
-                onChange={[Function]}
-                query=""
+          <div
+            id="sidebar"
+          >
+            <Component>
+              <div
+                className="metrics-search-bar-input"
+                data-test-subj="metricsSearch"
               >
-                <EuiFlexGroup
-                  alignItems="center"
-                  gutterSize="m"
-                  wrap={true}
+                <EuiSearchBar
+                  box={
+                    Object {
+                      "incremental": true,
+                      "placeholder": "Search to filter Available Metrics",
+                    }
+                  }
+                  defaultQuery=""
+                  onChange={[Function]}
+                  query=""
                 >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                  <EuiFlexGroup
+                    alignItems="center"
+                    gutterSize="m"
+                    wrap={true}
                   >
-                    <EuiFlexItem
-                      className="euiSearchBar__searchHolder"
-                      grow={true}
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
                     >
-                      <div
-                        className="euiFlexItem euiSearchBar__searchHolder"
+                      <EuiFlexItem
+                        className="euiSearchBar__searchHolder"
+                        grow={true}
                       >
-                        <EuiSearchBox
-                          incremental={true}
-                          isInvalid={false}
-                          onSearch={[Function]}
-                          placeholder="Search to filter Available Metrics"
-                          query=""
+                        <div
+                          className="euiFlexItem euiSearchBar__searchHolder"
                         >
-                          <EuiFieldSearch
-                            aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                            compressed={false}
-                            defaultValue=""
-                            fullWidth={true}
+                          <EuiSearchBox
                             incremental={true}
-                            inputRef={[Function]}
-                            isClearable={true}
                             isInvalid={false}
-                            isLoading={false}
                             onSearch={[Function]}
                             placeholder="Search to filter Available Metrics"
+                            query=""
                           >
-                            <EuiFormControlLayout
+                            <EuiFieldSearch
+                              aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                               compressed={false}
+                              defaultValue=""
                               fullWidth={true}
-                              icon="search"
+                              incremental={true}
+                              inputRef={[Function]}
+                              isClearable={true}
+                              isInvalid={false}
                               isLoading={false}
+                              onSearch={[Function]}
+                              placeholder="Search to filter Available Metrics"
                             >
-                              <div
-                                className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                              <EuiFormControlLayout
+                                compressed={false}
+                                fullWidth={true}
+                                icon="search"
+                                isLoading={false}
                               >
                                 <div
-                                  className="euiFormControlLayout__childrenWrapper"
+                                  className="euiFormControlLayout euiFormControlLayout--fullWidth"
                                 >
-                                  <EuiValidatableControl
-                                    isInvalid={false}
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
                                   >
-                                    <input
-                                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                                      className="euiFieldSearch euiFieldSearch--fullWidth"
-                                      defaultValue=""
-                                      onKeyUp={[Function]}
-                                      placeholder="Search to filter Available Metrics"
-                                      type="search"
-                                    />
-                                  </EuiValidatableControl>
-                                  <EuiFormControlLayoutIcons
-                                    compressed={false}
-                                    icon="search"
-                                    isLoading={false}
-                                  >
-                                    <div
-                                      className="euiFormControlLayoutIcons"
+                                    <EuiValidatableControl
+                                      isInvalid={false}
                                     >
-                                      <EuiFormControlLayoutCustomIcon
-                                        size="m"
+                                      <input
+                                        aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                                        className="euiFieldSearch euiFieldSearch--fullWidth"
+                                        defaultValue=""
+                                        onKeyUp={[Function]}
+                                        placeholder="Search to filter Available Metrics"
                                         type="search"
+                                      />
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons
+                                      compressed={false}
+                                      icon="search"
+                                      isLoading={false}
+                                    >
+                                      <div
+                                        className="euiFormControlLayoutIcons"
                                       >
-                                        <span
-                                          className="euiFormControlLayoutCustomIcon"
+                                        <EuiFormControlLayoutCustomIcon
+                                          size="m"
+                                          type="search"
                                         >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiFormControlLayoutCustomIcon__icon"
-                                            size="m"
-                                            type="search"
+                                          <span
+                                            className="euiFormControlLayoutCustomIcon"
                                           >
-                                            <EuiIconEmpty
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiFormControlLayoutCustomIcon__icon"
+                                              size="m"
+                                              type="search"
                                             >
-                                              <svg
+                                              <EuiIconEmpty
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              />
-                                            </EuiIconEmpty>
-                                          </EuiIcon>
-                                        </span>
-                                      </EuiFormControlLayoutCustomIcon>
-                                    </div>
-                                  </EuiFormControlLayoutIcons>
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                          </span>
+                                        </EuiFormControlLayoutCustomIcon>
+                                      </div>
+                                    </EuiFormControlLayoutIcons>
+                                  </div>
                                 </div>
-                              </div>
-                            </EuiFormControlLayout>
-                          </EuiFieldSearch>
-                        </EuiSearchBox>
-                      </div>
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
-              </EuiSearchBar>
-            </div>
-          </Component>
-          <EuiSpacer
-            size="s"
-          >
-            <div
-              className="euiSpacer euiSpacer--s"
-            />
-          </EuiSpacer>
-          <section
-            className="sidebar"
-          >
-            <Component
-              dataTestSubj="metricsListItems_selectedMetrics"
-              handleClick={[Function]}
-              headerName="Selected Metrics"
-              metricsList={Array []}
+                              </EuiFormControlLayout>
+                            </EuiFieldSearch>
+                          </EuiSearchBox>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </EuiSearchBar>
+              </div>
+            </Component>
+            <EuiSpacer
+              size="s"
             >
-              <EuiAccordion
-                arrowDisplay="left"
-                buttonContent={
-                  <EuiTitle
-                    size="xxxs"
-                  >
-                    <span>
-                      Selected Metrics
-                       
-                      0
-                       of 
-                      0
-                    </span>
-                  </EuiTitle>
-                }
-                id="Selected MetricsSelector"
-                initialIsOpen={true}
-                isLoading={false}
-                isLoadingMessage={false}
-                paddingSize="none"
+              <div
+                className="euiSpacer euiSpacer--s"
+              />
+            </EuiSpacer>
+            <section
+              className="sidebar"
+            >
+              <Component
+                dataTestSubj="metricsListItems_selectedMetrics"
+                handleClick={[Function]}
+                headerName="Selected Metrics"
+                metricsList={Array []}
               >
-                <div
-                  className="euiAccordion euiAccordion-isOpen"
+                <EuiAccordion
+                  arrowDisplay="left"
+                  buttonContent={
+                    <EuiTitle
+                      size="xxxs"
+                    >
+                      <span>
+                        Selected Metrics
+                         
+                        0
+                         of 
+                        0
+                      </span>
+                    </EuiTitle>
+                  }
+                  id="Selected MetricsSelector"
+                  initialIsOpen={true}
+                  isLoading={false}
+                  isLoadingMessage={false}
+                  paddingSize="none"
                 >
                   <div
-                    className="euiAccordion__triggerWrapper"
+                    className="euiAccordion euiAccordion-isOpen"
                   >
-                    <button
-                      aria-controls="Selected MetricsSelector"
-                      aria-expanded={true}
-                      className="euiAccordion__button"
-                      id="random_html_id"
-                      onClick={[Function]}
-                      type="button"
+                    <div
+                      className="euiAccordion__triggerWrapper"
                     >
-                      <span
-                        className="euiAccordion__iconWrapper"
+                      <button
+                        aria-controls="Selected MetricsSelector"
+                        aria-expanded={true}
+                        className="euiAccordion__button"
+                        id="random_html_id"
+                        onClick={[Function]}
+                        type="button"
                       >
-                        <EuiIcon
-                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                          size="m"
-                          type="arrowRight"
+                        <span
+                          className="euiAccordion__iconWrapper"
                         >
-                          <EuiIconEmpty
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
-                            focusable="false"
-                            role="img"
-                            style={null}
+                          <EuiIcon
+                            className="euiAccordion__icon euiAccordion__icon-isOpen"
+                            size="m"
+                            type="arrowRight"
                           >
-                            <svg
+                            <EuiIconEmpty
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
-                            />
-                          </EuiIconEmpty>
-                        </EuiIcon>
-                      </span>
-                      <span
-                        className="euiIEFlexWrapFix"
-                      >
-                        <EuiTitle
-                          size="xxxs"
+                            >
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </EuiIconEmpty>
+                          </EuiIcon>
+                        </span>
+                        <span
+                          className="euiIEFlexWrapFix"
                         >
-                          <span
-                            className="euiTitle euiTitle--xxxsmall"
+                          <EuiTitle
+                            size="xxxs"
                           >
-                            Selected Metrics
-                             
-                            0
-                             of 
-                            0
-                          </span>
-                        </EuiTitle>
-                      </span>
-                    </button>
-                  </div>
-                  <div
-                    aria-labelledby="random_html_id"
-                    className="euiAccordion__childWrapper"
-                    id="Selected MetricsSelector"
-                    role="region"
-                    tabIndex={-1}
-                  >
-                    <EuiResizeObserver
-                      onResize={[Function]}
+                            <span
+                              className="euiTitle euiTitle--xxxsmall"
+                            >
+                              Selected Metrics
+                               
+                              0
+                               of 
+                              0
+                            </span>
+                          </EuiTitle>
+                        </span>
+                      </button>
+                    </div>
+                    <div
+                      aria-labelledby="random_html_id"
+                      className="euiAccordion__childWrapper"
+                      id="Selected MetricsSelector"
+                      role="region"
+                      tabIndex={-1}
                     >
-                      <div>
-                        <div
-                          className=""
-                        >
-                          <ul
-                            className="metricsList"
-                          />
+                      <EuiResizeObserver
+                        onResize={[Function]}
+                      >
+                        <div>
+                          <div
+                            className=""
+                          >
+                            <ul
+                              className="metricsList"
+                            />
+                          </div>
                         </div>
-                      </div>
-                    </EuiResizeObserver>
+                      </EuiResizeObserver>
+                    </div>
                   </div>
-                </div>
-              </EuiAccordion>
-            </Component>
-            <EuiSpacer
-              size="s"
-            >
-              <div
-                className="euiSpacer euiSpacer--s"
-              />
-            </EuiSpacer>
-            <Component
-              dataTestSubj="metricsListItems_availableMetrics"
-              handleClick={[Function]}
-              headerName="Available Metrics"
-              metricsList={Array []}
-            >
-              <EuiAccordion
-                arrowDisplay="left"
-                buttonContent={
-                  <EuiTitle
-                    size="xxxs"
-                  >
-                    <span>
-                      Available Metrics
-                       
-                      0
-                       of 
-                      0
-                    </span>
-                  </EuiTitle>
-                }
-                id="Available MetricsSelector"
-                initialIsOpen={true}
-                isLoading={false}
-                isLoadingMessage={false}
-                paddingSize="none"
+                </EuiAccordion>
+              </Component>
+              <EuiSpacer
+                size="s"
               >
                 <div
-                  className="euiAccordion euiAccordion-isOpen"
+                  className="euiSpacer euiSpacer--s"
+                />
+              </EuiSpacer>
+              <Component
+                dataTestSubj="metricsListItems_availableMetrics"
+                handleClick={[Function]}
+                headerName="Available Metrics"
+                metricsList={Array []}
+              >
+                <EuiAccordion
+                  arrowDisplay="left"
+                  buttonContent={
+                    <EuiTitle
+                      size="xxxs"
+                    >
+                      <span>
+                        Available Metrics
+                         
+                        0
+                         of 
+                        0
+                      </span>
+                    </EuiTitle>
+                  }
+                  id="Available MetricsSelector"
+                  initialIsOpen={true}
+                  isLoading={false}
+                  isLoadingMessage={false}
+                  paddingSize="none"
                 >
                   <div
-                    className="euiAccordion__triggerWrapper"
+                    className="euiAccordion euiAccordion-isOpen"
                   >
-                    <button
-                      aria-controls="Available MetricsSelector"
-                      aria-expanded={true}
-                      className="euiAccordion__button"
-                      id="random_html_id"
-                      onClick={[Function]}
-                      type="button"
+                    <div
+                      className="euiAccordion__triggerWrapper"
                     >
-                      <span
-                        className="euiAccordion__iconWrapper"
+                      <button
+                        aria-controls="Available MetricsSelector"
+                        aria-expanded={true}
+                        className="euiAccordion__button"
+                        id="random_html_id"
+                        onClick={[Function]}
+                        type="button"
                       >
-                        <EuiIcon
-                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                          size="m"
-                          type="arrowRight"
+                        <span
+                          className="euiAccordion__iconWrapper"
                         >
-                          <EuiIconEmpty
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
-                            focusable="false"
-                            role="img"
-                            style={null}
+                          <EuiIcon
+                            className="euiAccordion__icon euiAccordion__icon-isOpen"
+                            size="m"
+                            type="arrowRight"
                           >
-                            <svg
+                            <EuiIconEmpty
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
-                            />
-                          </EuiIconEmpty>
-                        </EuiIcon>
-                      </span>
-                      <span
-                        className="euiIEFlexWrapFix"
-                      >
-                        <EuiTitle
-                          size="xxxs"
+                            >
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </EuiIconEmpty>
+                          </EuiIcon>
+                        </span>
+                        <span
+                          className="euiIEFlexWrapFix"
                         >
-                          <span
-                            className="euiTitle euiTitle--xxxsmall"
+                          <EuiTitle
+                            size="xxxs"
                           >
-                            Available Metrics
-                             
-                            0
-                             of 
-                            0
-                          </span>
-                        </EuiTitle>
-                      </span>
-                    </button>
-                  </div>
-                  <div
-                    aria-labelledby="random_html_id"
-                    className="euiAccordion__childWrapper"
-                    id="Available MetricsSelector"
-                    role="region"
-                    tabIndex={-1}
-                  >
-                    <EuiResizeObserver
-                      onResize={[Function]}
+                            <span
+                              className="euiTitle euiTitle--xxxsmall"
+                            >
+                              Available Metrics
+                               
+                              0
+                               of 
+                              0
+                            </span>
+                          </EuiTitle>
+                        </span>
+                      </button>
+                    </div>
+                    <div
+                      aria-labelledby="random_html_id"
+                      className="euiAccordion__childWrapper"
+                      id="Available MetricsSelector"
+                      role="region"
+                      tabIndex={-1}
                     >
-                      <div>
-                        <div
-                          className=""
-                        >
-                          <ul
-                            className="metricsList"
-                          />
+                      <EuiResizeObserver
+                        onResize={[Function]}
+                      >
+                        <div>
+                          <div
+                            className=""
+                          >
+                            <ul
+                              className="metricsList"
+                            />
+                          </div>
                         </div>
-                      </div>
-                    </EuiResizeObserver>
+                      </EuiResizeObserver>
+                    </div>
                   </div>
-                </div>
-              </EuiAccordion>
-            </Component>
-          </section>
+                </EuiAccordion>
+              </Component>
+            </section>
+          </div>
         </PseudoLocaleWrapper>
       </IntlProvider>
     </I18nProvider>
diff --git a/public/components/metrics/sidebar/__tests__/sidebar.test.tsx b/public/components/metrics/sidebar/__tests__/sidebar.test.tsx
index 4c7c2160a..79dab9ad8 100644
--- a/public/components/metrics/sidebar/__tests__/sidebar.test.tsx
+++ b/public/components/metrics/sidebar/__tests__/sidebar.test.tsx
@@ -9,33 +9,44 @@ import React from 'react';
 import { waitFor } from '@testing-library/react';
 import httpClientMock from '../../../../../test/__mocks__/httpClientMock';
 import PPLService from '../../../../services/requests/ppl';
+import { setOSDHttp, setPPLService } from '../../../../../common/utils';
 import { applyMiddleware, createStore } from '@reduxjs/toolkit';
 import { rootReducer } from '../../../../framework/redux/reducers';
 import { Provider } from 'react-redux';
 import { Sidebar } from '../sidebar';
 import thunk from 'redux-thunk';
-import { coreRefs } from '../../../../framework/core_refs';
-import { sampleSavedMetric } from '../../../../../test/metrics_contants';
-import { SavedObjectsActions } from '../../../../services/saved_objects/saved_object_client/saved_objects_actions';
+import { sampleSavedMetric } from '../../../../../test/metrics_constants';
+
+jest.mock('../../../../services/requests/ppl');
 
 describe('Side Bar Component', () => {
   configure({ adapter: new Adapter() });
   const store = createStore(rootReducer, applyMiddleware(thunk));
 
+  beforeAll(() => {
+    PPLService.mockImplementation(() => {
+      return {
+        fetch: jest.fn().mockResolvedValueOnce({
+          data: { DATASOURCE_NAME: [] },
+        }),
+      };
+    });
+
+    setPPLService(new PPLService(httpClientMock));
+  });
+
   it('renders Side Bar Component', async () => {
-    SavedObjectsActions.getBulk = jest
-      .fn()
-      .mockResolvedValue({ observabilityObjectList: [{ savedVisualization: sampleSavedMetric }] });
-
-    httpClientMock.get = jest.fn();
-
-    coreRefs.pplService = new PPLService(httpClientMock);
-    coreRefs.pplService.fetch = jest.fn(() =>
-      Promise.resolve({
-        data: { DATA_SOURCES: ['datasource1', 'datasource2'] },
-        then: () => Promise.resolve(),
-      })
-    );
+    setOSDHttp(httpClientMock);
+    httpClientMock.get = jest.fn().mockResolvedValue({
+      observabilityObjectList: [
+        {
+          id: sampleSavedMetric.id,
+          savedVisualizationId: sampleSavedMetric.id,
+          objectId: sampleSavedMetric.id,
+          savedVisualization: sampleSavedMetric,
+        },
+      ],
+    });
 
     const wrapper = mount(
       <Provider store={store}>
diff --git a/public/components/metrics/sidebar/sidebar.tsx b/public/components/metrics/sidebar/sidebar.tsx
index 59fc60506..6afb40c1f 100644
--- a/public/components/metrics/sidebar/sidebar.tsx
+++ b/public/components/metrics/sidebar/sidebar.tsx
@@ -60,24 +60,26 @@ export const Sidebar = ({
 
   return (
     <I18nProvider>
-      <SearchBar />
-      <EuiSpacer size="s" />
-
-      <section className="sidebar">
-        <MetricsAccordion
-          metricsList={selectedMetricsList}
-          headerName="Selected Metrics"
-          handleClick={handleRemoveMetric}
-          dataTestSubj="metricsListItems_selectedMetrics"
-        />
+      <div id="sidebar">
+        <SearchBar />
         <EuiSpacer size="s" />
-        <MetricsAccordion
-          metricsList={availableMetrics}
-          headerName="Available Metrics"
-          handleClick={handleAddMetric}
-          dataTestSubj="metricsListItems_availableMetrics"
-        />
-      </section>
+
+        <section className="sidebar">
+          <MetricsAccordion
+            metricsList={selectedMetricsList}
+            headerName="Selected Metrics"
+            handleClick={handleRemoveMetric}
+            dataTestSubj="metricsListItems_selectedMetrics"
+          />
+          <EuiSpacer size="s" />
+          <MetricsAccordion
+            metricsList={availableMetrics}
+            headerName="Available Metrics"
+            handleClick={handleAddMetric}
+            dataTestSubj="metricsListItems_availableMetrics"
+          />
+        </section>
+      </div>
     </I18nProvider>
   );
 };
diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export.test.tsx.snap
new file mode 100644
index 000000000..41ad92b3a
--- /dev/null
+++ b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export.test.tsx.snap
@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1`] = `
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <Component>
+    <MetricsExportPopOver>
+      <EuiPopover
+        anchorPosition="downCenter"
+        button={
+          <Savebutton
+            setIsPanelOpen={[Function]}
+          />
+        }
+        closePopover={[Function]}
+        display="inlineBlock"
+        hasArrow={true}
+        isOpen={false}
+        ownFocus={true}
+        panelPaddingSize="m"
+      >
+        <div
+          className="euiPopover euiPopover--anchorDownCenter"
+        >
+          <div
+            className="euiPopover__anchor"
+          >
+            <Savebutton
+              setIsPanelOpen={[Function]}
+            >
+              <EuiButton
+                data-test-subj="metrics__saveManagementPopover"
+                iconSide="right"
+                iconType="arrowDown"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-test-subj="metrics__saveManagementPopover"
+                  disabled={false}
+                  element="button"
+                  iconSide="right"
+                  iconType="arrowDown"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-test-subj="metrics__saveManagementPopover"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="right"
+                      iconType="arrowDown"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="arrowDown"
+                        >
+                          <EuiIconEmpty
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Save
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </Savebutton>
+          </div>
+        </div>
+      </EuiPopover>
+    </MetricsExportPopOver>
+  </Component>
+</Provider>
+`;
diff --git a/public/components/metrics/top_menu/__tests__/metrics_export.test.tsx b/public/components/metrics/top_menu/__tests__/metrics_export.test.tsx
new file mode 100644
index 000000000..62f639554
--- /dev/null
+++ b/public/components/metrics/top_menu/__tests__/metrics_export.test.tsx
@@ -0,0 +1,188 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { PropsWithChildren } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { RenderOptions } from '@testing-library/react';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { waitFor } from '@testing-library/react';
+import { sampleSavedMetric } from '../../../../../test/metrics_constants';
+import { applyMiddleware, createStore } from '@reduxjs/toolkit';
+import { rootReducer } from '../../../../framework/redux/reducers';
+import { MetricsExport } from '../metrics_export';
+import thunk from 'redux-thunk';
+import { coreRefs } from '../../../../framework/core_refs';
+import { mockSavedObjectActions } from '../../../../../test/constants';
+import { OBSERVABILITY_CUSTOM_METRIC } from '../../../../../common/constants/metrics';
+import { metricsReducers } from '../../redux/slices/metrics_slice';
+import { panelReducer } from '../../../custom_panels/redux/panel_slice';
+import { act } from 'react-dom/test-utils';
+
+const defaultInitialState = {
+  metrics: {},
+  selectedIds: [],
+  sortedIds: [],
+  search: '',
+  metricsLayout: [],
+  dataSources: [OBSERVABILITY_CUSTOM_METRIC],
+  dataSourceTitles: ['Observability Custom Metrics'],
+  dataSourceIcons: [[OBSERVABILITY_CUSTOM_METRIC, { color: 'blue' }]],
+  dateSpanFilter: {
+    start: 'now-1d',
+    end: 'now',
+    span: 1,
+    resolution: 'h',
+    recentlyUsedRanges: [],
+  },
+  refresh: 0, // set to new Date() to trigger
+};
+
+export function renderWithMetricsProviders(
+  ui: React.ReactElement,
+  {
+    preloadedState = {},
+    // Automatically create a store instance if no store was passed in
+    store = configureStore({
+      reducer: { metrics: metricsReducers, customPanel: panelReducer },
+      preloadedState,
+    }),
+    ...renderOptions
+  }: ExtendedRenderOptions = {}
+) {
+  function Wrapper({ children }: PropsWithChildren<{}>): JSX.Element {
+    return <Provider store={store}>{children}</Provider>;
+  }
+
+  // Return an object with the store and all of RTL's query functions
+  return { store, ...render(<Provider store={store}>{ui}</Provider>, { ...renderOptions }) };
+}
+
+describe('Export Metrics Panel Component', () => {
+  configure({ adapter: new Adapter() });
+  const store = createStore(rootReducer, applyMiddleware(thunk));
+  coreRefs.savedObjectsClient.find = jest.fn(() =>
+    Promise.resolve({
+      savedObjects: [],
+      then: () => Promise.resolve(),
+    })
+  );
+
+  it('renders Export Metrics Panel Component', async () => {
+    mockSavedObjectActions({ get: [{ savedVisualization: sampleSavedMetric }] });
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <MetricsExport />
+      </Provider>
+    );
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+  it('opens metric export panel on Save button, closes on Cancel', async () => {
+    // Arrange
+    const preloadedState = {
+      metrics: {
+        ...defaultInitialState,
+        metrics: { [sampleSavedMetric.id]: sampleSavedMetric },
+        selectedIds: [sampleSavedMetric.id],
+      },
+      customPanel: {
+        panelList: [],
+      },
+    };
+
+    // Act
+    renderWithMetricsProviders(<MetricsExport />, { preloadedState });
+
+    // Assert
+    const saveButton = await screen.findByText(/Save/);
+    expect(saveButton).toBeInTheDocument();
+    fireEvent.click(saveButton);
+
+    const modalCancelButton = await screen.findByTestId('metrics__SaveCancel');
+    expect(modalCancelButton).toBeInTheDocument();
+    fireEvent.click(modalCancelButton);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('metrics__SaveCancel')).not.toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId('metrics__SaveCancel')).toBeNull();
+  });
+
+  it('opens metric export panel on Save button, closes by clicking away from panel', async () => {
+    // Arrange
+    const preloadedState = {
+      metrics: {
+        ...defaultInitialState,
+        metrics: { [sampleSavedMetric.id]: sampleSavedMetric },
+        selectedIds: [sampleSavedMetric.id],
+      },
+      customPanel: {
+        panelList: [],
+      },
+    };
+
+    // Act
+    renderWithMetricsProviders(
+      <div>
+        <span>A Clickable Target</span>
+        <MetricsExport />
+      </div>,
+      { preloadedState }
+    );
+
+    // Assert
+    const saveButton = await screen.findByText(/Save/);
+    expect(saveButton).toBeInTheDocument();
+    fireEvent.click(saveButton);
+
+    expect(await screen.findByText('Custom operational dashboards/application'));
+
+    userEvent.keyboard('{ESCAPE}');
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('metrics__SaveCancel')).not.toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId('metrics__SaveCancel')).toBeNull();
+  });
+  it('handles saving new metric objects on Save', async () => {
+    // Arrange
+    const preloadedState = {
+      metrics: {
+        ...defaultInitialState,
+        metrics: { [sampleSavedMetric.id]: sampleSavedMetric },
+        selectedIds: [sampleSavedMetric.id],
+      },
+      customPanel: {
+        panelList: [],
+      },
+    };
+
+    // Act
+    renderWithMetricsProviders(<MetricsExport />, { preloadedState });
+
+    // Assert
+    const saveButton = await screen.findByText(/Save/);
+    expect(saveButton).toBeInTheDocument();
+    act(async () => {
+      fireEvent.click(saveButton);
+
+      expect(await screen.findByTestId('metrics__querySaveName')).toBeInTheDocument();
+      const modalSaveButton = await screen.findByTestId('metrics__SaveConfirm');
+      expect(modalSaveButton).toBeInTheDocument();
+      fireEvent.click(modalSaveButton);
+    });
+  });
+});
diff --git a/public/components/metrics/top_menu/__tests__/metrics_export_panel.test.tsx b/public/components/metrics/top_menu/__tests__/metrics_export_panel.test.tsx
index 75cce864e..9b8c0322e 100644
--- a/public/components/metrics/top_menu/__tests__/metrics_export_panel.test.tsx
+++ b/public/components/metrics/top_menu/__tests__/metrics_export_panel.test.tsx
@@ -13,7 +13,7 @@ import {
   sampleMetricsToExport,
   sampleSavedMetric,
   sampleSortedMetricsLayout,
-} from '../../../../../test/metrics_contants';
+} from '../../../../../test/metrics_constants';
 import { applyMiddleware, createStore } from '@reduxjs/toolkit';
 import { rootReducer } from '../../../../framework/redux/reducers';
 import { Provider } from 'react-redux';
diff --git a/public/components/metrics/top_menu/metrics_export.tsx b/public/components/metrics/top_menu/metrics_export.tsx
index f23f0543d..119e00f09 100644
--- a/public/components/metrics/top_menu/metrics_export.tsx
+++ b/public/components/metrics/top_menu/metrics_export.tsx
@@ -103,6 +103,7 @@ const MetricsExportPopOver = () => {
   }, [osdCoreDashboards, availableObservabilityDashboards]);
 
   useEffect(() => {
+    console.log('effect', { selectedMetrics, selectedMetricsIds });
     if (selectedMetrics && selectedMetricsIds) {
       const metricsArray = selectedMetricsIds.map((id) => selectedMetrics[id]);
       setMetricsToExport(metricsArray);
diff --git a/public/components/metrics/view/__tests__/metrics_grid.test.tsx b/public/components/metrics/view/__tests__/metrics_grid.test.tsx
index ddf5949b0..cd968baa8 100644
--- a/public/components/metrics/view/__tests__/metrics_grid.test.tsx
+++ b/public/components/metrics/view/__tests__/metrics_grid.test.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { waitFor } from '@testing-library/react';
 import { MetricsGrid } from '../metrics_grid';
 import { coreStartMock } from '../../../../../test/__mocks__/coreMocks';
-import { sampleMetric, sampleMetricsVisualizations } from '../../../../../test/metrics_contants';
+import { sampleMetric, sampleMetricsVisualizations } from '../../../../../test/metrics_constants';
 import { createStore } from '@reduxjs/toolkit';
 import { rootReducer } from '../../../../framework/redux/reducers';
 import { Provider } from 'react-redux';
diff --git a/public/components/visualizations/saved_object_visualization.tsx b/public/components/visualizations/saved_object_visualization.tsx
index f9f4e4f32..8fbad5911 100644
--- a/public/components/visualizations/saved_object_visualization.tsx
+++ b/public/components/visualizations/saved_object_visualization.tsx
@@ -8,6 +8,7 @@ import React, { useEffect, useState } from 'react';
 import { Filter, Query, TimeRange } from '../../../../../src/plugins/data/common';
 import { QueryManager } from '../../../common/query_manager';
 import { IVisualizationContainerProps, SavedVisualization } from '../../../common/types/explorer';
+import { getUserConfigFrom } from '../../../common/utils/visualization_helpers';
 import { getPPLService, preprocessQuery, removeBacktick } from '../../../common/utils';
 import { getDefaultVisConfig } from '../event_analytics/utils';
 import { getVizContainerProps } from './charts/helpers';
@@ -39,7 +40,7 @@ export const SavedObjectVisualization: React.FC<SavedObjectVisualizationProps> =
       queryMetaData: props.savedVisualization.queryMetaData,
       isMetric,
     };
-    const userConfigs = JSON.parse(metaData.user_configs || metaData.userConfigs || '{}');
+    const userConfigs = getUserConfigFrom(metaData);
     const dataConfig = { ...(userConfigs.dataConfig || {}) };
     const hasBreakdowns = !_.isEmpty(dataConfig.breakdowns);
     const realTimeParsedStats = isMetric
diff --git a/public/services/requests/ppl.ts b/public/services/requests/ppl.ts
index 2cb5f8f7c..72fb58f33 100644
--- a/public/services/requests/ppl.ts
+++ b/public/services/requests/ppl.ts
@@ -6,6 +6,7 @@
 import { CoreStart } from '../../../../../src/core/public';
 import { PPL_BASE, PPL_SEARCH } from '../../../common/constants/shared';
 
+/* eslint-disable import/no-default-export */
 export default class PPLService {
   private http;
   constructor(http: CoreStart['http']) {
@@ -19,6 +20,7 @@ export default class PPLService {
     },
     errorHandler?: (error: any) => void
   ) => {
+    console.log('real fetch');
     return this.http
       .post(`${PPL_BASE}${PPL_SEARCH}`, {
         body: JSON.stringify(params),
diff --git a/public/services/saved_objects/saved_object_loaders/explorer_saved_object_loader.ts b/public/services/saved_objects/saved_object_loaders/explorer_saved_object_loader.ts
index 582678953..c15b38cf9 100644
--- a/public/services/saved_objects/saved_object_loaders/explorer_saved_object_loader.ts
+++ b/public/services/saved_objects/saved_object_loaders/explorer_saved_object_loader.ts
@@ -51,6 +51,7 @@ import {
   DEFAULT_DATA_SOURCE_NAME,
   DEFAULT_DATA_SOURCE_TYPE,
 } from '../../../../common/constants/data_sources';
+import { getUserConfigFrom } from '../../../../common/utils/visualization_helpers';
 
 enum DIRECT_DATA_SOURCE_TYPES {
   DEFAULT_INDEX_PATTERNS = 'DEFAULT_INDEX_PATTERNS',
@@ -247,9 +248,7 @@ export class ExplorerSavedObjectLoader extends SavedObjectLoaderBase implements
     const { tabId, queryManager, getDefaultVisConfig } = this.loadContext;
     // fill saved user configs
     let visConfig = {};
-    const customConfig = objectData.userConfigs
-      ? JSON.parse(objectData.user_configs || objectData.userConfigs)
-      : {};
+    const customConfig = getUserConfigFrom(objectData);
     if (!isEmpty(customConfig.dataConfig) && !isEmpty(customConfig.dataConfig?.series)) {
       visConfig = { ...customConfig };
     } else {
diff --git a/public/services/saved_objects/saved_object_loaders/ppl/ppl_loader.ts b/public/services/saved_objects/saved_object_loaders/ppl/ppl_loader.ts
index 0af1ddf87..5dea7c997 100644
--- a/public/services/saved_objects/saved_object_loaders/ppl/ppl_loader.ts
+++ b/public/services/saved_objects/saved_object_loaders/ppl/ppl_loader.ts
@@ -28,6 +28,7 @@ import {
 import { QueryManager } from '../../../../../common/query_manager';
 import { statsChunk } from '../../../../../common/query_manager/ast/types/stats';
 import { IField, SavedQuery, SavedVisualization } from '../../../../../common/types/explorer';
+import { getUserConfigFrom } from '../../../../common/utils/helpers';
 import { AppDispatch } from '../../../../framework/redux/store';
 import { ISavedObjectsClient } from '../../saved_object_client/client_interface';
 import { ObservabilitySavedObject, ObservabilitySavedQuery } from '../../saved_object_client/types';
@@ -201,9 +202,8 @@ export class PPLSavedObjectLoader extends SavedObjectLoaderBase implements ISave
     const { tabId, queryManager, getDefaultVisConfig } = this.loadContext;
     // fill saved user configs
     let visConfig = {};
-    const customConfig = objectData.userConfigs
-      ? JSON.parse(objectData.user_configs || objectData.userConfigs)
-      : {};
+    const customConfig = getUserConfigFrom(objectData);
+
     if (!isEmpty(customConfig.dataConfig) && !isEmpty(customConfig.dataConfig?.series)) {
       visConfig = { ...customConfig };
     } else {
diff --git a/test/metrics_contants.ts b/test/metrics_constants.ts
similarity index 97%
rename from test/metrics_contants.ts
rename to test/metrics_constants.ts
index d0dbb616a..eecf742ae 100644
--- a/test/metrics_contants.ts
+++ b/test/metrics_constants.ts
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { OBSERVABILITY_CUSTOM_METRIC } from '../common/constants/metrics';
+
 export const sampleMetricsVisualizations = [
   {
     h: 2,
@@ -313,6 +315,10 @@ export const sampleSavedMetric = {
   name: '[Logs] Average ram usage per day by windows os ',
   query:
     "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win')  |  stats avg(machine.ram) by span(timestamp,1h)",
+  aggregation: 'avg',
+  attributesGroupBy: [],
+  catalog: OBSERVABILITY_CUSTOM_METRIC,
+  index: 'opensearch_dashboards_sample_data_logs',
   type: 'line',
   timeField: 'timestamp',
   selected_date_range: {
diff --git a/test/setup.jest.ts b/test/setup.jest.ts
index 94d14cb1a..177e45049 100644
--- a/test/setup.jest.ts
+++ b/test/setup.jest.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-// import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
 import { configure } from '@testing-library/react';
 import { setOSDHttp, setOSDSavedObjectsClient } from '../common/utils';
 import { coreRefs } from '../public/framework/core_refs';
diff --git a/yarn.lock b/yarn.lock
index fb51cc33e..0b53baf83 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -235,6 +235,11 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
   integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
 
+"@testing-library/user-event@^14.5.1":
+  version "14.5.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.1.tgz#27337d72046d5236b32fd977edee3f74c71d332f"
+  integrity sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==
+
 "@types/cheerio@*":
   version "0.22.32"
   resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.32.tgz#1a41608fd072544c3ed6c0d6cc3fcf08d07715de"

From 6a8a299090ef26e517165e521815898f7cc9ac23 Mon Sep 17 00:00:00 2001
From: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
Date: Thu, 14 Dec 2023 08:15:31 -0800
Subject: [PATCH 8/8] Remove debug logging

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
---
 public/components/metrics/helpers/utils.tsx                     | 1 -
 .../metrics/top_menu/__tests__/metrics_export.test.tsx          | 2 +-
 public/components/metrics/top_menu/metrics_export.tsx           | 1 -
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/public/components/metrics/helpers/utils.tsx b/public/components/metrics/helpers/utils.tsx
index 777c532a8..4cd1440d5 100644
--- a/public/components/metrics/helpers/utils.tsx
+++ b/public/components/metrics/helpers/utils.tsx
@@ -36,7 +36,6 @@ export const pplServiceRequestor = (pplService: PPLService, finalQuery: string)
   return pplService
     .fetch({ query: finalQuery, format: VISUALIZATION })
     .then((res) => {
-      console.log('pplService resolved value', { res });
       return res;
     })
     .catch((error: Error) => {
diff --git a/public/components/metrics/top_menu/__tests__/metrics_export.test.tsx b/public/components/metrics/top_menu/__tests__/metrics_export.test.tsx
index 62f639554..d8d9d2390 100644
--- a/public/components/metrics/top_menu/__tests__/metrics_export.test.tsx
+++ b/public/components/metrics/top_menu/__tests__/metrics_export.test.tsx
@@ -176,7 +176,7 @@ describe('Export Metrics Panel Component', () => {
     // Assert
     const saveButton = await screen.findByText(/Save/);
     expect(saveButton).toBeInTheDocument();
-    act(async () => {
+    await act(async () => {
       fireEvent.click(saveButton);
 
       expect(await screen.findByTestId('metrics__querySaveName')).toBeInTheDocument();
diff --git a/public/components/metrics/top_menu/metrics_export.tsx b/public/components/metrics/top_menu/metrics_export.tsx
index 119e00f09..f23f0543d 100644
--- a/public/components/metrics/top_menu/metrics_export.tsx
+++ b/public/components/metrics/top_menu/metrics_export.tsx
@@ -103,7 +103,6 @@ const MetricsExportPopOver = () => {
   }, [osdCoreDashboards, availableObservabilityDashboards]);
 
   useEffect(() => {
-    console.log('effect', { selectedMetrics, selectedMetricsIds });
     if (selectedMetrics && selectedMetricsIds) {
       const metricsArray = selectedMetricsIds.map((id) => selectedMetrics[id]);
       setMetricsToExport(metricsArray);