diff --git a/.cypress/integration/metrics_analytics_test/metrics_analytics.spec.js b/.cypress/integration/metrics_analytics_test/metrics_analytics.spec.js
index d7898ba5ad..c00e2b7045 100644
--- a/.cypress/integration/metrics_analytics_test/metrics_analytics.spec.js
+++ b/.cypress/integration/metrics_analytics_test/metrics_analytics.spec.js
@@ -281,7 +281,7 @@ const createSavedObjectMetric = ({ testMetricIndex }) => {
             name: PPL_METRICS_NAMES[testMetricIndex],
             description: '',
             type: 'line',
-            sub_type: 'metric',
+            subType: 'metric',
           },
         },
       },
diff --git a/.cypress/integration/panels_test/panels.spec.ts b/.cypress/integration/panels_test/panels.spec.ts
index 3750c2e02e..94fc0ac0ca 100644
--- a/.cypress/integration/panels_test/panels.spec.ts
+++ b/.cypress/integration/panels_test/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/common/constants/metrics.ts b/common/constants/metrics.ts
index 853ef28658..7e92e6663b 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 2116454852..9baffcf101 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 a24cbe839f..11834906c3 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 9daf690743..c46a652491 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 64ebd07aba..7cefde98b8 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/common/utils/__tests__/visualization_helpers.test.tsx b/common/utils/__tests__/visualization_helpers.test.tsx
new file mode 100644
index 0000000000..6c7f9f8577
--- /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 0000000000..8a93cd7af3
--- /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 2e040938a8..3929fcd37d 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "cypress": "^12.8.1",
     "cypress-watch-and-reload": "^1.10.6",
     "eslint": "^6.8.0",
-    "husky": "6.0.0",
+    "husky": "^8.0.3",
     "jest-dom": "^4.0.0",
     "lint-staged": "^13.1.0",
     "ts-jest": "^29.1.0"
@@ -82,4 +82,4 @@
     "node_modules/*",
     "target/*"
   ]
-}
+}
\ No newline at end of file
diff --git a/public/components/application_analytics/helpers/utils.tsx b/public/components/application_analytics/helpers/utils.tsx
index 08ba77f32e..67ac27fb7d 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 {
@@ -218,7 +219,11 @@ 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) : {};
+
+    // 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 = 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 1e185316ee..2db7db97d3 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 { parsePromQLIntoKeywords } from '../';
+import {
+  findMinInterval,
+  parsePromQLIntoKeywords,
+  preprocessMetricQuery,
+  updateCatalogVisualizationQuery,
+} from '../';
 
 describe('Query Utils', () => {
   describe('parsePromQLIntoKeywords', () => {
@@ -20,7 +25,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 +36,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({
@@ -43,4 +46,56 @@ 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);
+    });
+  });
+  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/query_utils/index.ts b/public/components/common/query_utils/index.ts
index 9f4024bb31..489afad130 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,
@@ -35,6 +35,28 @@ 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 2 year
+  else if (diffSeconds <= 86400 * 366 * 2) minInterval = 'w';
+
+  return minInterval;
+};
+
 export const convertDateTime = (
   datetime: string,
   isStart = true,
@@ -56,6 +78,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;
@@ -128,13 +181,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 +203,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/__tests__/__snapshots__/search.test.tsx.snap b/public/components/common/search/__tests__/__snapshots__/search.test.tsx.snap
new file mode 100644
index 0000000000..c227af5246
--- /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],
+    }
+  }
+>
+  <Search>
+    <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,
+                }
+              }
+            >
+              <Autocomplete
+                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>
+              </Autocomplete>
+              <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={
+                  <LiveTailButton
+                    dataTestSubj="eventLiveTail"
+                  />
+                }
+                display="inlineBlock"
+                hasArrow={true}
+                isOpen={false}
+                ownFocus={true}
+                panelPaddingSize="none"
+              >
+                <div
+                  className="euiPopover euiPopover--anchorDownCenter"
+                >
+                  <div
+                    className="euiPopover__anchor"
+                  >
+                    <LiveTailButton
+                      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>
+                    </LiveTailButton>
+                  </div>
+                </div>
+              </EuiPopover>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+    </div>
+  </Search>
+</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 0000000000..be1d8b138b
--- /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/common/search/search.tsx b/public/components/common/search/search.tsx
index de450d09c1..c849c25cbd 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/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
index 2ae613aa25..eb407289ce 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/custom_panel_view_so.tsx b/public/components/custom_panels/custom_panel_view_so.tsx
index 65b10416a0..382bc50d0f 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 c631ea0120..0d5e2e56a0 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 {
@@ -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 {
@@ -1064,7 +1080,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                   ],
                   "span": undefined,
                 },
-                "layoutConfig": Object {},
+                "layout": Object {},
               },
             },
             "vis": Object {
@@ -1433,9 +1449,11 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 "#BD6F26",
                 "#4C636F",
               ],
+              "height": 1180,
               "hovermode": "closest",
               "legend": Object {
                 "orientation": "v",
+                "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",
+                  "traceorder": "normal",
                 },
                 "margin": Object {
                   "b": 30,
@@ -1741,7 +1761,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                 ],
               },
             },
-            "layoutConfig": Object {},
+            "layout": Object {},
           },
         },
         "vis": Object {
@@ -2257,7 +2277,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                   ],
                 },
               },
-              "layoutConfig": Object {},
+              "layout": Object {},
             },
           },
           "vis": Object {
@@ -2628,7 +2648,47 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
             },
           }
         }
-        layout={[Function]}
+        layout={
+          Object {
+            "colorway": Array [
+              "#3CA1C7",
+              "#54B399",
+              "#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 {
@@ -2787,7 +2847,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                     ],
                   },
                 },
-                "layoutConfig": Object {},
+                "layout": Object {},
               },
             },
             "vis": Object {
@@ -3205,8 +3265,22 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
           layout={
             Object {
               "autosize": true,
+              "colorway": Array [
+                "#3CA1C7",
+                "#54B399",
+                "#DB748A",
+                "#F2BE4B",
+                "#68CCC2",
+                "#2A7866",
+                "#843769",
+                "#374FB8",
+                "#BD6F26",
+                "#4C636F",
+              ],
+              "height": 1180,
               "legend": Object {
                 "orientation": "v",
+                "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",
+                  "#54B399",
+                  "#DB748A",
+                  "#F2BE4B",
+                  "#68CCC2",
+                  "#2A7866",
+                  "#843769",
+                  "#374FB8",
+                  "#BD6F26",
+                  "#4C636F",
+                ],
+                "height": 1180,
                 "hovermode": "closest",
                 "legend": Object {
                   "orientation": "v",
+                  "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": "",
@@ -3492,7 +3584,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               ],
               "span": undefined,
             },
-            "layoutConfig": Object {},
+            "layout": Object {},
           },
         },
         "vis": Object {
@@ -3947,7 +4039,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 ],
                 "span": undefined,
               },
-              "layoutConfig": Object {},
+              "layout": Object {},
             },
           },
           "vis": Object {
@@ -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 {
@@ -4409,7 +4517,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                   ],
                   "span": undefined,
                 },
-                "layoutConfig": Object {},
+                "layout": Object {},
               },
             },
             "vis": Object {
@@ -4778,9 +4886,11 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 "#BD6F26",
                 "#4C636F",
               ],
+              "height": 1180,
               "hovermode": "closest",
               "legend": Object {
                 "orientation": "v",
+                "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",
+                  "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 aac1477181..9abc0d8d7b 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,14 +86,15 @@ 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,
-  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})`
   );
 };
 
@@ -118,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'],
@@ -175,64 +156,60 @@ 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
-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,37 +223,48 @@ export const renderSavedVisualization = async (
     setVisualizationType(visualization.type);
   }
 
-  if (spanParam !== undefined) {
-    updatedVisualizationQuery = updateQuerySpanInterval(
-      visualization.query,
-      visualization.timeField,
-      spanParam
+  const updatedVisualizationQuery =
+    span !== undefined
+      ? updateQuerySpanInterval(visualization.query, visualization.timeField, span, resolution)
+      : visualization.query;
+
+  setVisualizationMetaData({ ...visualization, query: updatedVisualizationQuery });
+
+  try {
+    const queryData = await getQueryResponse(
+      pplService,
+      updatedVisualizationQuery,
+      visualization.type,
+      startTime,
+      endTime,
+      filterQuery,
+      visualization.timeField
     );
-  } else {
-    updatedVisualizationQuery = visualization.query;
+    setVisualizationData(queryData);
+  } catch (error) {
+    setIsError({ error });
   }
+  setIsLoading(false);
+};
 
-  setVisualizationMetaData({ ...visualization, query: updatedVisualizationQuery });
+const dynamicLayoutFromQueryData = (queryData) => {
+  const labelCount = queryData.jsonData.length;
+  const legendLines = min([labelCount, 10]);
 
-  getQueryResponse(
-    pplService,
-    updatedVisualizationQuery,
-    visualization.type,
-    startTime,
-    endTime,
-    setVisualizationData,
-    setIsLoading,
-    setIsError,
-    filterQuery,
-    visualization.timeField
-  );
+  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,
@@ -296,39 +284,12 @@ const createCatalogVisualizationMetaData = (
       text: '',
       tokens: [],
     },
+    userConfigs: {
+      layout: dynamicLayoutFromQueryData(queryData),
+    },
   };
 };
 
-const updateCatalogVisualizationQuery = ({
-  catalogSourceName,
-  catalogTableName,
-  aggregation,
-  attributesGroupBy,
-  startTime,
-  endTime,
-  spanParam,
-}: {
-  catalogSourceName: string;
-  catalogTableName: string;
-  aggregation: string;
-  attributesGroupBy: string[];
-  startTime: string;
-  endTime: string;
-  spanParam: string | undefined;
-}) => {
-  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}')`;
-};
-
 // Creates a catalogVisualization for a runtime catalog based PPL query and runs getQueryResponse
 export const renderCatalogVisualization = async ({
   http,
@@ -337,7 +298,8 @@ export const renderCatalogVisualization = async ({
   startTime,
   endTime,
   filterQuery,
-  spanParam,
+  span,
+  resolution,
   setVisualizationTitle,
   setVisualizationType,
   setVisualizationData,
@@ -345,7 +307,7 @@ export const renderCatalogVisualization = async ({
   setIsLoading,
   setIsError,
   spanResolution,
-  queryMetaData,
+  visualization,
 }: {
   http: CoreStart['http'];
   pplService: PPLService;
@@ -353,7 +315,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 +325,7 @@ export const renderCatalogVisualization = async ({
   setIsError: React.Dispatch<React.SetStateAction<VizContainerError>>;
   spanResolution?: string;
   queryMetaData?: MetricType;
+  visualization: SavedVisualizationType;
 }) => {
   setIsLoading(true);
   setIsError({} as VizContainerError);
@@ -369,55 +333,45 @@ 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(
-    catalogSource,
-    visualizationQuery,
-    visualizationType,
-    visualizationTimeField
-  );
+  setVisualizationTitle(visualization.name);
+  setVisualizationType(visualizationType);
 
-  visualizationMetaData.user_configs = {
-    layoutConfig: {
-      height: 390,
-      margin: { t: 5 },
-      legend: { visible: false },
-    },
-  };
+  try {
+    const queryData = await getQueryResponse(
+      pplService,
+      visualizationQuery,
+      visualizationType,
+      startTime,
+      endTime,
+      filterQuery,
+      visualizationTimeField,
+      true
+    );
+    setVisualizationData(queryData);
+
+    const visualizationMetaData = createCatalogVisualizationMetaData(
+      catalogSource,
+      visualizationQuery,
+      visualizationType,
+      visualizationTimeField,
+      queryData
+    );
 
-  setVisualizationTitle(catalogSource);
-  setVisualizationType(visualizationType);
+    console.log('renderCatalogVisualization', { visualizationMetaData });
+    setVisualizationMetaData(visualizationMetaData);
+  } catch (error) {
+    setIsError({ error });
+  }
 
-  setVisualizationMetaData({ ...visualizationMetaData, query: visualizationQuery });
-
-  getQueryResponse(
-    pplService,
-    visualizationQuery,
-    visualizationType,
-    startTime,
-    endTime,
-    setVisualizationData,
-    setIsLoading,
-    setIsError,
-    filterQuery,
-    visualizationTimeField,
-    true
-  );
+  setIsLoading(false);
 };
 
 // Function to store recently used time filters and set start and end time.
@@ -449,9 +403,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 +503,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 +530,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 || {}),
+    layout: {
+      ...(metaData.userConfigs?.layout || {}),
     },
   };
 
diff --git a/public/components/custom_panels/home.tsx b/public/components/custom_panels/home.tsx
index 2e2af8de8c..c5067dd573 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/__tests__/__snapshots__/panel_grid.test.tsx.snap b/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
index 554ebc9e5d..b47c7d6296 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/panel_grid/panel_grid.tsx b/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx
index dc70ba7fd9..f7d7de6720 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 a2fa5e02b5..f2a1cff644 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 778d6e1674..4fc2c8ef84 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,168 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Visualization Container Component renders add visualization container 1`] = `
-<VisualizationContainer
-  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}
+  <VisualizationContainer
+    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="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+        <div>
+          <EuiFlexGroup
+            justifyContent="spaceBetween"
           >
-            <EuiFlexItem
-              style={
-                Object {
-                  "width": "35%",
-                }
-              }
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
-              <div
-                className="euiFlexItem"
+              <EuiFlexItem
+                className="mouseGrabber"
                 style={
                   Object {
                     "width": "35%",
                   }
                 }
               >
-                <EuiText
-                  className="panels-title-text"
-                  grow={false}
+                <div
+                  className="euiFlexItem mouseGrabber"
+                  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>
-</VisualizationContainer>
+    </EuiPanel>
+  </VisualizationContainer>
+</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 9ea46f4d42..507208fad0 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 0130b340fb..9b2e600631 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,32 @@
   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
+    }
+  }
+
+  .svg-container {
+    margin-top: -25px;
+  }
+
+
+  .main-svg {
+    margin-top: -10px;
+  }
+}
+
 %center-div {
   top: 50%;
   left: 50%;
@@ -45,8 +72,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 a5fb524740..3d52f9eddd 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 1bad8f4523..82492a09ee 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 1f4806b3c0..fd88697b32 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 51c8b34c92..642adb6d49 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/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 84e5c1528c..a223888b9b 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
@@ -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
@@ -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
@@ -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
@@ -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
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 6ee5397d8f..ef8e17b500 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/__tests__/__snapshots__/saved_query_table.test.tsx.snap b/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap
index 5cd192bb4c..2fbfe36583 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/event_analytics/home/saved_objects_table.tsx b/public/components/event_analytics/home/saved_objects_table.tsx
index 79c76c4ecc..4d42a0b071 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 996a656b6b..b19f3ce022 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 42d099a356..9f92d8b014 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,
-} from '../../../../../test/metrics_contants';
+  sampleMetricsVisualizations,
+  sampleVisualizationsList,
+} from '../../../../../test/metrics_constants';
 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 2736a04679..4cd1440d5b 100644
--- a/public/components/metrics/helpers/utils.tsx
+++ b/public/components/metrics/helpers/utils.tsx
@@ -3,125 +3,46 @@
  * 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';
 
-// PPL Service requestor
-export const pplServiceRequestor = (pplService: PPLService, finalQuery: string) => {
-  return pplService.fetch({ query: finalQuery, format: VISUALIZATION }).catch((error: Error) => {
-    console.error(error);
+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));
 };
 
-// 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] },
+// PPL Service requestor
+export const pplServiceRequestor = (pplService: PPLService, finalQuery: string) => {
+  return pplService
+    .fetch({ query: finalQuery, format: VISUALIZATION })
+    .then((res) => {
+      return res;
     })
-    .catch((err) => {
-      console.error('Issue in fetching all saved visualizations', err);
+    .catch((error: Error) => {
+      console.error(error);
     });
 };
 
-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 +74,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.scss b/public/components/metrics/index.scss
index abfeba3747..905d61b062 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/index.tsx b/public/components/metrics/index.tsx
index 168f68fe4b..2e7f7a1cf8 100644
--- a/public/components/metrics/index.tsx
+++ b/public/components/metrics/index.tsx
@@ -4,30 +4,15 @@
  */
 
 import './index.scss';
-import {
-  EuiGlobalToastList,
-  EuiPage,
-  EuiPageBody,
-  EuiResizableContainer,
-  htmlIdGenerator,
-  OnTimeChangeProps,
-  ShortDate,
-} 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 { ChromeBreadcrumb, Toast } from '../../../../../src/core/public';
+import { EuiPage, EuiPageBody, EuiResizableContainer } from '@elastic/eui';
+import React, { useEffect } from 'react';
+import { HashRouter, Route, RouteComponentProps, StaticContext } from 'react-router-dom';
+import { ChromeBreadcrumb } 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,30 +23,6 @@ interface MetricsProps {
 }
 
 export const Home = ({ chrome, parentBreadcrumb }: MetricsProps) => {
-  // Redux tools
-  const selectedMetrics = useSelector(selectedMetricsSelector);
-  const metricsLayout = useSelector(metricsLayoutSelector);
-
-  // 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);
-
-  // 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]);
-  };
-
-  const onEditClick = (savedVisualizationId: string) => {
-    window.location.assign(`${observabilityLogsID}#/explorer/${savedVisualizationId}`);
-  };
-
   useEffect(() => {
     chrome.setBreadcrumbs([
       parentBreadcrumb,
@@ -72,69 +33,29 @@ 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
-        toasts={toasts}
-        dismissToast={(removedToast) => {
-          setToasts(toasts.filter((toast) => toast.id !== removedToast.id));
-        }}
-        side={toastRightSide ? 'right' : 'left'}
-        toastLifeTimeMs={6000}
-      />
       <HashRouter>
         <Route
           exact
-          path="/"
-          render={() => (
+          path={['/:id', '/']}
+          render={(routerProps) => (
             <div>
               <EuiPage>
                 <EuiPageBody component="div">
-                  <TopMenu
-                    IsTopPanelDisabled={IsTopPanelDisabled}
-                    editMode={editMode}
-                    setEditMode={setEditMode}
-                    setEditActionType={setEditActionType}
-                    panelVisualizations={panelVisualizations}
-                    setPanelVisualizations={setPanelVisualizations}
-                    setToast={setToast}
-                  />
-                  <div className="dscAppContainer">
+                  <TopMenu />
+                  <div className="metricsContainer">
                     <EuiResizableContainer>
                       {(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/__tests__/metric_slice.test.tsx b/public/components/metrics/redux/slices/__tests__/metric_slice.test.tsx
new file mode 100644
index 0000000000..17f3681519
--- /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) plus getAvailableAttributes
+          .mockResolvedValue({
+            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 93e1ff26b9..b372a86cff 100644
--- a/public/components/metrics/redux/slices/metrics_slice.ts
+++ b/public/components/metrics/redux/slices/metrics_slice.ts
@@ -3,24 +3,27 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { createSlice } from '@reduxjs/toolkit';
-import { 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,
   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';
+import { getOSDHttp, getPPLService } from '../../../../../common/utils';
 
 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 +39,9 @@ const coloredIconsFrom = (dataSources: string[]): { [dataSource: string]: IconAt
 };
 
 const initialState = {
-  metrics: [],
-  selected: [],
-  searched: [],
+  metrics: {},
+  selectedIds: [],
+  sortedIds: [],
   search: '',
   metricsLayout: [],
   dataSources: [OBSERVABILITY_CUSTOM_METRIC],
@@ -54,9 +57,21 @@ 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,
+  };
+};
+
+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;
 
@@ -66,30 +81,43 @@ export const loadMetrics = () => async (dispatch) => {
     setDataSourceIcons(coloredIconsFrom([OBSERVABILITY_CUSTOM_METRIC, ...remoteDataSources]))
   );
 
-  const remoteDataRequests = await fetchRemoteMetrics(remoteDataSources);
-  const dataResponses = await Promise.all([customDataRequest, ...remoteDataRequests]);
-  dispatch(setMetrics(dataResponses.flat()));
+  const remoteDataRequests = fetchRemoteMetrics(remoteDataSources);
+  const metricsResultSet = await Promise.all([customDataRequest, ...remoteDataRequests]);
+  const metricsResult = metricsResultSet.flat();
+
+  const metricsMapById = keyBy(metricsResult.flat(), 'id');
+  await dispatch(mergeMetrics(metricsMapById));
+
+  const sortedIds = sortBy(metricsResult, 'catalog', 'id').map((m) => m.id);
+  await 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,
   }));
 };
 
 const fetchRemoteDataSource = async (dataSource) => {
-  const { pplService } = coreRefs;
-
+  const pplService = getPPLService();
   const response = await pplServiceRequestor(
     pplService,
     `source = ${dataSource}.information_schema.tables`
@@ -97,76 +125,74 @@ 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}`,
         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,
   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;
+    },
+    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 +213,96 @@ export const metricSlice = createSlice({
 
 export const {
   deSelectMetric,
-  selectMetric,
-  setDataSourceIcons,
-  setDataSourceTitles,
-  setDataSources,
-  setMetrics,
-  setRefresh,
+  clearSelectedMetrics,
+
+  mergeMetrics,
+  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 { selectMetric, setMetric, setSortedIds } = metricSlice.actions;
+
+const getAvailableAttributes = (id, metricIndex) => async (dispatch, getState) => {
+  const { toasts } = coreRefs;
+  const pplService = getPPLService();
+
+  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 updateDateSpan = (props: { span?: string; resolution?: string }) => (dispatch) => {
-  dispatch(setDateSpan(props)); // specifically use props variable to partial update
+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) {
+    await dispatch(getAvailableAttributes(metric.id, metric.index));
+  }
+  await dispatch(selectMetric(metric));
 };
 
+export const removeSelectedMetric = ({ id }) => async (dispatch, getState) => {
+  dispatch(deSelectMetric(id));
+};
+
+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 || [],
+  };
+  return 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 +310,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/__tests__/__snapshots__/searchbar.test.tsx.snap b/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
index 5ad92839f3..a22b6b5f7b 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 73f3e499ad..898fc9dfd0 100644
--- a/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -99,8 +99,8 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
         textComponent={Symbol(react.fragment)}
       >
         <PseudoLocaleWrapper>
-          <section
-            className="sidebarHeight"
+          <div
+            id="sidebar"
           >
             <SearchBar>
               <div
@@ -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>
@@ -241,240 +241,244 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                 className="euiSpacer euiSpacer--s"
               />
             </EuiSpacer>
-            <MetricsAccordion
-              dataTestSubj="metricsListItems_selectedMetrics"
-              handleClick={[Function]}
-              headerName="Selected Metrics"
-              metricsList={Array []}
+            <section
+              className="sidebar"
             >
-              <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"
+              <MetricsAccordion
+                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>
-            </MetricsAccordion>
-            <EuiSpacer
-              size="s"
-            >
-              <div
-                className="euiSpacer euiSpacer--s"
-              />
-            </EuiSpacer>
-            <MetricsAccordion
-              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>
+              </MetricsAccordion>
+              <EuiSpacer
+                size="s"
               >
                 <div
-                  className="euiAccordion euiAccordion-isOpen"
+                  className="euiSpacer euiSpacer--s"
+                />
+              </EuiSpacer>
+              <MetricsAccordion
+                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>
-            </MetricsAccordion>
-          </section>
+                </EuiAccordion>
+              </MetricsAccordion>
+            </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 4c7c2160a5..79dab9ad89 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/metrics_accordion.tsx b/public/components/metrics/sidebar/metrics_accordion.tsx
index 41a1611c9e..d3168e7102 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 0000000000..83291e518d
--- /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 abb1f97604..46c3341e59 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.scss b/public/components/metrics/sidebar/sidebar.scss
index 3af1086c9b..4286170fcd 100644
--- a/public/components/metrics/sidebar/sidebar.scss
+++ b/public/components/metrics/sidebar/sidebar.scss
@@ -3,165 +3,12 @@
  * 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 {
+.metricsList {
   line-height: normal;
-  overflow: auto;
-  max-height: 100vh;
 }
 
-.metricsList {
-  line-height: normal;
+section.sidebar {
+  height: calc(100vh - 240px);
 }
 
 .metricsListContainer {
diff --git a/public/components/metrics/sidebar/sidebar.tsx b/public/components/metrics/sidebar/sidebar.tsx
index 22bbbaadc0..6afb40c1fb 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,32 +41,45 @@ 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 (
     <I18nProvider>
-      <section className="sidebarHeight">
+      <div id="sidebar">
         <SearchBar />
         <EuiSpacer size="s" />
 
-        <MetricsAccordion
-          metricsList={selectedMetrics}
-          headerName="Selected Metrics"
-          handleClick={handleRemoveMetric}
-          dataTestSubj="metricsListItems_selectedMetrics"
-        />
-        <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 0000000000..5a8ed3fb75
--- /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],
+    }
+  }
+>
+  <MetricsExport>
+    <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>
+  </MetricsExport>
+</Provider>
+`;
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 c2406a01a9..b961492493 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,33 +13,53 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
   }
 >
   <MetricsExportPanel
-    http={[MockFunction]}
-    selectedPanelOptions={Array []}
-    setSelectedPanelOptions={[MockFunction]}
-    setVisualizationsMetaData={[MockFunction]}
-    sortedMetricsLayout={
+    availableDashboards={
       Array [
         Object {
-          "h": 2,
-          "id": "Y4muP4QBiaYaSxpXk7r8",
-          "metricType": "savedCustomMetric",
-          "savedVisualizationId": "Y4muP4QBiaYaSxpXk7r8",
-          "w": 12,
-          "x": 0,
-          "y": 0,
+          "attributes": Object {
+            "title": "[Flights] Global Flight Dashboard",
+          },
+          "id": "7adfa750-4c81-11e8-b3d7-01146121b73d",
+          "title": "[Flights] Global Flight Dashboard",
+          "type": "dashboard",
         },
         Object {
-          "h": 2,
-          "id": "prometheus.process_resident_memory_bytes",
-          "metricType": "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={
@@ -93,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}
@@ -308,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>
   </MetricsExportPanel>
 </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 7a85752536..cb3497bdcf 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],
-    }
-  }
->
-  <TopMenu
-    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>
-  </TopMenu>
-</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],
-    }
-  }
->
-  <TopMenu
-    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>
-  </TopMenu>
-</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`]
     }
   }
 >
-  <TopMenu
-    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"
-  >
+  <TopMenu>
     <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"
+            <MetricsExport>
+              <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>
+            </MetricsExport>
           </div>
         </EuiFlexItem>
       </div>
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 0000000000..5e017873e5
--- /dev/null
+++ b/public/components/metrics/top_menu/__tests__/metrics_export.test.tsx
@@ -0,0 +1,187 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { PropsWithChildren } from 'react';
+import { render, screen, fireEvent } 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'));
+
+    const dialog = screen.getByRole('dialog');
+    fireEvent.keyDown(dialog, { key: 'Escape', code: '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();
+    await 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 ca1759bebe..9b8c0322e9 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_constants';
 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 17822d22f3..bca6805a93 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
new file mode 100644
index 0000000000..f23f0543dd
--- /dev/null
+++ b/public/components/metrics/top_menu/metrics_export.tsx
@@ -0,0 +1,394 @@
+/*
+ * 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 { 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';
+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 '../../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';
+
+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) {
+            return createSavedVisualization(metric);
+          } else {
+            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);
+          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 e7a4a3f04b..3884a55c27 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 a3c02a3be8..521300b5fb 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/__tests__/__snapshots__/metrics_grid.test.tsx.snap b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
index 8708e745b2..1b862c66cc 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`] = `
     }
   }
 >
-  <MetricsGrid
+  <Connect(InnerMetricsGrid)
     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,301 @@ 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={
+    <InnerMetricsGrid
+      allMetrics={Object {}}
+      chrome={
         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,
-            },
-            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",
               },
-              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_spinner_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_spinner_on_light.svg",
+            },
+            "Application": Object {
+              "dark": Object {
+                "type": "default",
+                "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
               },
-            ],
-            "md": 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_dashboards_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_dashboards_on_light.svg",
+            },
+            "CenterMark": Object {
+              "dark": Object {
+                "type": "default",
+                "url": "/ui/logos/opensearch_center_mark_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_center_mark_on_light.svg",
               },
-            ],
-            "sm": Array [
-              Object {
-                "h": 2,
-                "i": "Y4muP4QBiaYaSxpXk7r8",
-                "maxW": 12,
-                "minW": 12,
-                "static": true,
-                "w": 12,
-                "x": 0,
-                "y": 0,
+              "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",
               },
-              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_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_mark_on_light.svg",
+            },
+            "OpenSearch": Object {
+              "dark": Object {
+                "type": "default",
+                "url": "/ui/logos/opensearch_on_dark.svg",
+              },
+              "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],
+        }
+      }
+      dateSpanFilter={
+        Object {
+          "end": "now",
+          "recentlyUsedRanges": Array [],
+          "resolution": "h",
+          "span": 1,
+          "start": "now-1d",
         }
-        onBreakpointChange={[Function]}
-        onLayoutChange={[Function]}
-        onWidthChange={[Function]}
-        width={0}
+      }
+      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"
+    >
+      <section
+        className="metricsGrid"
       >
-        <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]}
-          onDragStart={[Function]}
-          onDragStop={[Function]}
-          onLayoutChange={[Function]}
-          onResize={[Function]}
-          onResizeStart={[Function]}
-          onResizeStop={[Function]}
-          preventCollision={false}
-          rowHeight={150}
-          style={Object {}}
-          useCSSTransforms={true}
-          verticalCompact={true}
-          width={0}
+        <EuiDragDropContext
+          onDragEnd={[Function]}
         >
-          <div
-            className="react-grid-layout layout full-width"
-            style={
-              Object {
-                "height": "970px",
-              }
-            }
+          <DragDropContext
+            onDragEnd={[Function]}
+            onDragStart={[Function]}
           >
-            <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",
-                  }
-                }
+            <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]}
               >
-                <VisualizationContainer
-                  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>
-                </VisualizationContainer>
-              </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]}
-              onDragStart={[Function]}
-              onDragStop={[Function]}
-              onResize={[Function]}
-              onResizeStart={[Function]}
-              onResizeStop={[Function]}
-              rowHeight={150}
-              static={true}
-              useCSSTransforms={true}
-              usePercentages={false}
-              w={1}
-              x={0}
-              y={2}
-            >
-              <div
-                className="react-grid-item static cssTransforms"
-                key="tomAP4QBiaYaSxpXALls"
-                style={
-                  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",
+                <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,
+                      "_currentRenderer": Object {},
+                      "_currentRenderer2": null,
+                      "_currentValue": null,
+                      "_currentValue2": null,
+                      "_threadCount": 0,
+                    }
                   }
-                }
-              >
-                <VisualizationContainer
-                  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>
-                </VisualizationContainer>
-              </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={
-                  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",
+                  store={
+                    Object {
+                      "dispatch": [Function],
+                      "getState": [Function],
+                      "replaceReducer": [Function],
+                      "subscribe": [Function],
+                      Symbol(Symbol.observable): [Function],
+                    }
                   }
-                }
-              >
-                <VisualizationContainer
-                  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"
                 >
-                  <EuiPanel
-                    className="panel-full-width"
-                    data-test-subj="prometheus.process_resident_memory_bytesVisualizationPanel"
-                    grow={false}
+                  <EuiDroppable
+                    droppableId="DROPPABLE_AREA_BARE"
                   >
-                    <div
-                      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero panel-full-width"
-                      data-test-subj="prometheus.process_resident_memory_bytesVisualizationPanel"
+                    <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=""
+                      <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}
                       >
-                        <EuiFlexGroup
-                          justifyContent="spaceBetween"
+                        <div
+                          className="euiDroppable euiDroppable--noGrow"
+                          data-rbd-droppable-context-id="0"
+                          data-rbd-droppable-id="DROPPABLE_AREA_BARE"
+                          data-test-subj="droppable"
                         >
                           <div
-                            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                            className="euiDroppable__placeholder"
                           >
-                            <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"
-                      >
-                        <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"
+                            <AnimateInOut
+                              on={null}
+                              shouldAnimate={false}
                             />
-                            <span
-                              className="euiLoadingChart__bar"
-                            />
-                            <span
-                              className="euiLoadingChart__bar"
-                            />
-                          </span>
-                        </EuiLoadingChart>
-                      </div>
-                    </div>
-                  </EuiPanel>
-                </VisualizationContainer>
-              </div>
-            </GridItem>
-          </div>
-        </ReactGridLayout>
-      </ResponsiveReactGridLayout>
-    </WidthProvider>
-  </MetricsGrid>
+                          </div>
+                        </div>
+                      </Droppable>
+                    </Connect(Droppable)>
+                  </EuiDroppable>
+                </Provider>
+              </App>
+            </ErrorBoundary>
+          </DragDropContext>
+        </EuiDragDropContext>
+      </section>
+    </InnerMetricsGrid>
+  </Connect(InnerMetricsGrid)>
 </Provider>
 `;
diff --git a/public/components/metrics/view/__tests__/metrics_grid.test.tsx b/public/components/metrics/view/__tests__/metrics_grid.test.tsx
index c38a34cdfe..cd968baa84 100644
--- a/public/components/metrics/view/__tests__/metrics_grid.test.tsx
+++ b/public/components/metrics/view/__tests__/metrics_grid.test.tsx
@@ -9,13 +9,14 @@ 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';
 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/metrics/view/metrics_grid.scss b/public/components/metrics/view/metrics_grid.scss
index ff866b444b..5079c754b5 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 b5c20b14f8..2c41224552 100644
--- a/public/components/metrics/view/metrics_grid.tsx
+++ b/public/components/metrics/view/metrics_grid.tsx
@@ -3,142 +3,121 @@
  * 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 '../../common/query_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,
+    },
+  },
+});
+
+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) => (
+  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}
         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 +126,25 @@ 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>
+    <section className="metricsGrid">
+      <EuiDragDropContext onDragEnd={onDragEnd}>
+        <EuiDroppable droppableId="DROPPABLE_AREA_BARE">{visualizationComponents}</EuiDroppable>
+      </EuiDragDropContext>
+    </section>
   );
 };
+
+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/__tests__/__snapshots__/note_table.test.tsx.snap b/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap
index ad0991035a..43e5d8220c 100644
--- a/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap
+++ b/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap
@@ -447,7 +447,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     <div
                       class="euiTableCellContent euiTableCellContent--overflowingContent"
                     >
-                      Invalid date
+                      01/02/2023 12:00 PM
                     </div>
                   </td>
                   <td
@@ -461,7 +461,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     <div
                       class="euiTableCellContent euiTableCellContent--overflowingContent"
                     >
-                      Invalid date
+                      01/01/2023 12:00 PM
                     </div>
                   </td>
                 </tr>
@@ -522,7 +522,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     <div
                       class="euiTableCellContent euiTableCellContent--overflowingContent"
                     >
-                      Invalid date
+                      01/02/2023 12:00 PM
                     </div>
                   </td>
                   <td
@@ -536,7 +536,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     <div
                       class="euiTableCellContent euiTableCellContent--overflowingContent"
                     >
-                      Invalid date
+                      01/01/2023 12:00 PM
                     </div>
                   </td>
                 </tr>
@@ -597,7 +597,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     <div
                       class="euiTableCellContent euiTableCellContent--overflowingContent"
                     >
-                      Invalid date
+                      01/02/2023 12:00 PM
                     </div>
                   </td>
                   <td
@@ -611,7 +611,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     <div
                       class="euiTableCellContent euiTableCellContent--overflowingContent"
                     >
-                      Invalid date
+                      01/01/2023 12:00 PM
                     </div>
                   </td>
                 </tr>
@@ -672,7 +672,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     <div
                       class="euiTableCellContent euiTableCellContent--overflowingContent"
                     >
-                      Invalid date
+                      01/02/2023 12:00 PM
                     </div>
                   </td>
                   <td
@@ -686,7 +686,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     <div
                       class="euiTableCellContent euiTableCellContent--overflowingContent"
                     >
-                      Invalid date
+                      01/01/2023 12:00 PM
                     </div>
                   </td>
                 </tr>
@@ -747,7 +747,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     <div
                       class="euiTableCellContent euiTableCellContent--overflowingContent"
                     >
-                      Invalid date
+                      01/02/2023 12:00 PM
                     </div>
                   </td>
                   <td
@@ -761,7 +761,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     <div
                       class="euiTableCellContent euiTableCellContent--overflowingContent"
                     >
-                      Invalid date
+                      01/01/2023 12:00 PM
                     </div>
                   </td>
                 </tr>
diff --git a/public/components/notebooks/components/__tests__/note_table.test.tsx b/public/components/notebooks/components/__tests__/note_table.test.tsx
index 1f8cf905a2..03ecd93a82 100644
--- a/public/components/notebooks/components/__tests__/note_table.test.tsx
+++ b/public/components/notebooks/components/__tests__/note_table.test.tsx
@@ -17,7 +17,7 @@ jest.mock('react-router-dom', () => ({
     state: null,
     key: '',
   }),
-  useHistory: jest.fn()
+  useHistory: jest.fn(),
 }));
 
 describe('<NoteTable /> spec', () => {
@@ -62,8 +62,8 @@ describe('<NoteTable /> spec', () => {
     const notebooks = Array.from({ length: 5 }, (v, k) => ({
       path: `path-${k}`,
       id: `id-${k}`,
-      dateCreated: 'date-created',
-      dateModified: 'date-modified',
+      dateCreated: '2023-01-01 12:00:00',
+      dateModified: '2023-01-02 12:00:00',
     }));
     const utils = render(
       <NoteTable
@@ -125,7 +125,7 @@ describe('<NoteTable /> spec', () => {
     );
     utils.getByText('Create notebook').click();
     await waitFor(() => {
-      expect(global.window.location.href).toContain('/create')
+      expect(global.window.location.href).toContain('/create');
     });
   });
-});
\ No newline at end of file
+});
diff --git a/public/components/notebooks/components/notebook.tsx b/public/components/notebooks/components/notebook.tsx
index e5494ebed2..d86d8486fe 100644
--- a/public/components/notebooks/components/notebook.tsx
+++ b/public/components/notebooks/components/notebook.tsx
@@ -892,7 +892,6 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
       <div>
         <EuiPopover
           panelPaddingSize="none"
-          withTitle
           button={
             <EuiButton
               id="reportingActionsButton"
@@ -938,7 +937,6 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
               <EuiFlexItem grow={false}>
                 <EuiPopover
                   panelPaddingSize="none"
-                  withTitle
                   button={
                     <EuiButton
                       data-test-subj="notebook-paragraph-actions-button"
@@ -959,7 +957,6 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
               <EuiFlexItem grow={false}>
                 <EuiPopover
                   panelPaddingSize="none"
-                  withTitle
                   button={
                     <EuiButton
                       data-test-subj="notebook-notebook-actions-button"
@@ -1028,7 +1025,6 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
                     <EuiSpacer />
                     <EuiPopover
                       panelPaddingSize="none"
-                      withTitle
                       button={
                         <EuiButton
                           iconType="arrowDown"
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 fc29baee65..a149d56beb 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
@@ -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
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 bc5be11167..c28f96d28d 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
@@ -260,7 +260,7 @@ exports[`<Paragraphs /> spec renders the component 1`] = `
           <div
             class="euiTextColor euiTextColor--subdued"
           >
-            Last successful run Invalid date.
+            Last successful run 11/01/2023 01:02 AM.
           </div>
         </div>
       </div>
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/paragraphs.test.tsx b/public/components/notebooks/components/paragraph_components/__tests__/paragraphs.test.tsx
index 26a8e2c0a5..710499a998 100644
--- a/public/components/notebooks/components/paragraph_components/__tests__/paragraphs.test.tsx
+++ b/public/components/notebooks/components/paragraph_components/__tests__/paragraphs.test.tsx
@@ -41,7 +41,7 @@ describe('<Paragraphs /> spec', () => {
         ref={jest.fn()}
         para={para}
         setPara={setPara}
-        dateModified={'modified-date'}
+        dateModified="2023-11-01 01:02:03"
         index={0}
         paraCount={2}
         paragraphSelector={paragraphSelector}
@@ -63,11 +63,11 @@ describe('<Paragraphs /> spec', () => {
     );
     expect(utils.container.firstChild).toMatchSnapshot();
 
-    utils.getByLabelText('Open paragraph menu').click()
-    utils.getByText('Run input').click()
-    utils.getByLabelText('Open paragraph menu').click()
-    utils.getByText('Duplicate').click()
-    utils.getByLabelText('Open paragraph menu').click()
-    utils.getByText('Delete').click()
+    utils.getByLabelText('Open paragraph menu').click();
+    utils.getByText('Run input').click();
+    utils.getByLabelText('Open paragraph menu').click();
+    utils.getByText('Duplicate').click();
+    utils.getByLabelText('Open paragraph menu').click();
+    utils.getByText('Delete').click();
   });
 });
diff --git a/public/components/notebooks/components/paragraph_components/para_output.tsx b/public/components/notebooks/components/paragraph_components/para_output.tsx
index ee6a1a52b5..1102e98282 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,8 +19,68 @@ import { ParaType } from '../../../../../common/types/notebooks';
 import { uiSettingsService } from '../../../../../common/utils';
 import { QueryDataGridMemo } from './para_query_grid';
 
+const createQueryColumns = (jsonColumns: any[]) => {
+  let index = 0;
+  const datagridColumns = [];
+  for (index = 0; index < jsonColumns.length; ++index) {
+    const datagridColumnObject = {
+      id: jsonColumns[index].name,
+      displayAsText: jsonColumns[index].name,
+    };
+    datagridColumns.push(datagridColumnObject);
+  }
+  return datagridColumns;
+};
+
+const getQueryOutputData = (queryObject: any) => {
+  const data = [];
+  let index = 0;
+  let schemaIndex = 0;
+  for (index = 0; index < queryObject.datarows.length; ++index) {
+    const datarowValue = {};
+    for (schemaIndex = 0; schemaIndex < queryObject.schema.length; ++schemaIndex) {
+      const columnName = queryObject.schema[schemaIndex].name;
+      if (typeof queryObject.datarows[index][schemaIndex] === 'object') {
+        datarowValue[columnName] = JSON.stringify(queryObject.datarows[index][schemaIndex]);
+      } else if (typeof queryObject.datarows[index][schemaIndex] === 'boolean') {
+        datarowValue[columnName] = queryObject.datarows[index][schemaIndex].toString();
+      } else {
+        datarowValue[columnName] = queryObject.datarows[index][schemaIndex];
+      }
+    }
+    data.push(datarowValue);
+  }
+  return data;
+};
+
+const QueryPara = ({ inp, val }) => {
+  const inputQuery = inp.substring(4, inp.length);
+  const queryObject = JSON.parse(val);
+
+  const columns = createQueryColumns(queryObject.schema);
+  const [visibleColumns, setVisibleColumns] = useState(columns.map((c) => c.id));
+  const data = getQueryOutputData(queryObject);
+
+  return queryObject.hasOwnProperty('error') ? (
+    <EuiCodeBlock>{val}</EuiCodeBlock>
+  ) : (
+    <div>
+      <EuiText key={'query-input-key'} className={'wrapAll'}>
+        <b>{inputQuery}</b>
+      </EuiText>
+      <EuiSpacer />
+      <QueryDataGridMemo
+        rowCount={queryObject.datarows.length}
+        queryColumns={columns}
+        visibleColumns={visibleColumns}
+        setVisibleColumns={setVisibleColumns}
+        dataValues={data}
+      />
+    </div>
+  );
+};
+
 const OutputBody = ({
-  key,
   typeOut,
   val,
   inp,
@@ -29,7 +88,6 @@ const OutputBody = ({
   setVisInput,
   DashboardContainerByValueRenderer,
 }: {
-  key: string;
   typeOut: string;
   val: string;
   inp: string;
@@ -43,65 +101,10 @@ const OutputBody = ({
    */
   const dateFormat = uiSettingsService.get('dateFormat');
 
-  const createQueryColumns = (jsonColumns: any[]) => {
-    let index = 0;
-    const datagridColumns = [];
-    for (index = 0; index < jsonColumns.length; ++index) {
-      const datagridColumnObject = {
-        id: jsonColumns[index].name,
-        displayAsText: jsonColumns[index].name,
-      };
-      datagridColumns.push(datagridColumnObject);
-    }
-    return datagridColumns;
-  };
-
-  const getQueryOutputData = (queryObject: any) => {
-    const data = [];
-    let index = 0;
-    let schemaIndex = 0;
-    for (index = 0; index < queryObject.datarows.length; ++index) {
-      const datarowValue = {};
-      for (schemaIndex = 0; schemaIndex < queryObject.schema.length; ++schemaIndex) {
-        const columnName = queryObject.schema[schemaIndex].name;
-        if (typeof queryObject.datarows[index][schemaIndex] === 'object') {
-          datarowValue[columnName] = JSON.stringify(queryObject.datarows[index][schemaIndex]);
-        } else if (typeof queryObject.datarows[index][schemaIndex] === 'boolean') {
-          datarowValue[columnName] = queryObject.datarows[index][schemaIndex].toString();
-        } else {
-          datarowValue[columnName] = queryObject.datarows[index][schemaIndex];
-        }
-      }
-      data.push(datarowValue);
-    }
-    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);
-          return (
-            <div>
-              <EuiText key={'query-input-key'}>
-                <b>{inputQuery}</b>
-              </EuiText>
-              <EuiSpacer />
-              <QueryDataGridMemo
-                key={key}
-                rowCount={queryObject.datarows.length}
-                queryColumns={columns}
-                dataValues={data}
-              />
-            </div>
-          );
-        }
+        return <QueryPara inp={inp} val={val} />;
       case 'MARKDOWN':
         return (
           <EuiText className="wrapAll markdown-output-text">
diff --git a/public/components/notebooks/components/paragraph_components/paragraphs.tsx b/public/components/notebooks/components/paragraph_components/paragraphs.tsx
index 8a1e162977..c37e400bf5 100644
--- a/public/components/notebooks/components/paragraph_components/paragraphs.tsx
+++ b/public/components/notebooks/components/paragraph_components/paragraphs.tsx
@@ -400,7 +400,6 @@ export const Paragraphs = forwardRef((props: ParagraphProps, ref) => {
           <EuiFlexItem grow={false}>
             <EuiPopover
               panelPaddingSize="none"
-              withTitle
               button={
                 <EuiButtonIcon
                   aria-label="Open paragraph menu"
diff --git a/public/components/visualizations/saved_object_visualization.tsx b/public/components/visualizations/saved_object_visualization.tsx
index 1b30e9d760..8fbad59118 100644
--- a/public/components/visualizations/saved_object_visualization.tsx
+++ b/public/components/visualizations/saved_object_visualization.tsx
@@ -5,14 +5,17 @@
 
 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';
+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';
 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 +33,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 = getUserConfigFrom(metaData);
     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 || [])];
 
@@ -61,22 +73,30 @@ export const SavedObjectVisualization: React.FC<SavedObjectVisualizationProps> =
       dataConfig: {
         ...finalDataConfig,
       },
-      layoutConfig: {
-        ...(userConfigs.layoutConfig || {}),
+      layout: {
+        ...userConfigs.layout,
       },
     };
 
     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 +117,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 313f43cf7b..25e7bbf363 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 cc5a667ff0..7f84619785 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 49fbb75cb2..3cf75f404d 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/framework/core_refs.ts b/public/framework/core_refs.ts
index 652bb3d621..c12e3d323b 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 9ac1fe5883..4348eb4790 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/requests/ppl.ts b/public/services/requests/ppl.ts
index 2cb5f8f7cf..72fb58f33b 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/event_analytics/saved_objects.ts b/public/services/saved_objects/event_analytics/saved_objects.ts
index 1741723f31..cb423f657f 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 ac3204b7ad..323242eb07 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 f0adf13f82..045fa3e507 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 3416def295..e7573820d8 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 1e65d045be..c15b38cf9a 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',
@@ -131,6 +132,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 +248,7 @@ 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 = getUserConfigFrom(objectData);
     if (!isEmpty(customConfig.dataConfig) && !isEmpty(customConfig.dataConfig?.series)) {
       visConfig = { ...customConfig };
     } else {
@@ -279,11 +281,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 d10a78086e..5dea7c9978 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';
@@ -29,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';
@@ -202,7 +202,8 @@ 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 = getUserConfigFrom(objectData);
+
     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 fbcc5c27e5..d82251ab96 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 f180f88b5d..b23cfc181f 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_constants.ts
similarity index 70%
rename from test/metrics_contants.ts
rename to test/metrics_constants.ts
index 7fd2104689..eecf742ae9 100644
--- a/test/metrics_contants.ts
+++ b/test/metrics_constants.ts
@@ -3,11 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { OBSERVABILITY_CUSTOM_METRIC } from '../common/constants/metrics';
+
 export const sampleMetricsVisualizations = [
   {
     h: 2,
     id: 'Y4muP4QBiaYaSxpXk7r8',
-    metricType: 'savedCustomMetric',
+    query: { type: 'savedCustomMetric', aggregation: 'avg', attributesGroupBy: [] },
     savedVisualizationId: 'Y4muP4QBiaYaSxpXk7r8',
     w: 12,
     x: 0,
@@ -25,7 +27,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 +53,62 @@ export const sampleMetric = {
     text: '',
     tokens: [],
   },
-  user_configs: '{}',
-  sub_type: 'metric',
+  userConfigs: '{}',
+  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,
     id: 'Y4muP4QBiaYaSxpXk7r8',
-    metricType: 'savedCustomMetric',
+    query: { type: 'savedCustomMetric', aggregation: 'avg', attributesGroupBy: [] },
     savedVisualizationId: 'Y4muP4QBiaYaSxpXk7r8',
     w: 12,
     x: 0,
@@ -68,7 +117,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 +148,8 @@ export const sampleVisualizationById = {
   timeField: 'timestamp',
   selected_date_range: {},
   selected_fields: {},
-  user_configs: {},
-  sub_type: 'metric',
+  userConfigs: {},
+  subType: 'metric',
 };
 
 export const sampleAllAvailableMetrics = [
@@ -157,7 +206,7 @@ export const samplenewDimensions1 = {
   x: 0,
   y: 2,
   w: 12,
-  h: 2,
+  h: 3,
 };
 
 export const samplePanelVisualizations2 = [
@@ -168,7 +217,7 @@ export const samplePanelVisualizations2 = [
     y: 0,
     h: 2,
     w: 12,
-    metricType: 'savedCustomMetric',
+    query: { type: 'savedCustomMetric', aggregation: 'avg', attributesGroupBy: [] },
   },
   {
     id: 'tomAP4QBiaYaSxpXALls',
@@ -177,7 +226,7 @@ export const samplePanelVisualizations2 = [
     y: 2,
     h: 2,
     w: 12,
-    metricType: 'savedCustomMetric',
+    query: { type: 'savedCustomMetric', aggregation: 'avg', attributesGroupBy: [] },
   },
 ];
 
@@ -185,7 +234,7 @@ export const samplenewDimensions2 = {
   x: 0,
   y: 4,
   w: 12,
-  h: 2,
+  h: 3,
 };
 
 export const samplePrometheusVisualizationId = 'prometheus.process_resident_memory_bytes';
@@ -201,8 +250,8 @@ export const samplePrometheusVisualizationComponent = {
     text: '',
     tokens: [],
   },
-  sub_type: 'metric',
-  user_configs: {},
+  subType: 'metric',
+  userConfigs: {},
 };
 
 export const sampleVisualizationsList = [
@@ -258,7 +307,7 @@ export const samplePrometheusSampleUpdateWithSelections = {
   subType: 'metric',
   timestamp: '@timestamp',
   type: 'line',
-  userConfigs: '{}',
+  userConfigs: {},
 };
 
 export const sampleSavedMetric = {
@@ -266,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: {
@@ -277,7 +330,7 @@ export const sampleSavedMetric = {
     text: '',
     tokens: [],
   },
-  user_configs: {
+  userConfigs: {
     dataConfig: {
       series: [
         {
@@ -307,7 +360,7 @@ export const sampleSavedMetric = {
       },
     },
   },
-  sub_type: 'metric',
+  subType: 'metric',
 };
 
 export const sampleSavedMetricUpdate = {
@@ -320,6 +373,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',
+      },
+    },
+  },
 };
diff --git a/test/setup.jest.ts b/test/setup.jest.ts
index 94d14cb1af..177e45049d 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 fb51cc33eb..6dac2a0004 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1759,10 +1759,10 @@ human-signals@^4.3.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-4.3.1.tgz#ab7f811e851fca97ffbd2c1fe9a958964de321b2"
   integrity sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
 
-husky@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-6.0.0.tgz#810f11869adf51604c32ea577edbc377d7f9319e"
-  integrity sha512-SQS2gDTB7tBN486QSoKPKQItZw97BMOd+Kdb6ghfpBc0yXyzrddI0oDV5MkDAbuB4X2mO3/nj60TRMcYxwzZeQ==
+husky@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.3.tgz#4936d7212e46d1dea28fef29bb3a108872cd9184"
+  integrity sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==
 
 iconv-lite@^0.4.24:
   version "0.4.24"