From 776d1edc1914f8fd33b2daa497956f5f389bd517 Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Wed, 24 May 2023 15:05:48 -0700
Subject: [PATCH] Updating 2.x from 2.7 changes  (#482)

* Fix for hover issue on docs of discover/explorer data grid (#329) (#358)

Signed-off-by: Eric Wei <menwe@amazon.com>
(cherry picked from commit 19f29e1099b5e1785696fffa9830792bbad2e913)

Co-authored-by: Eric Wei <menwe@amazon.com>

* [2.7] Refactor Saved objects and add visualization embeddable (#341) (#353)

Signed-off-by: Joshua Li <joshuali925@gmail.com>
Co-authored-by: Eric Wei <menwe@amazon.com>

* Cohesion main to 2.7 (#382)

Signed-off-by: Eric Wei <menwe@amazon.com>
Signed-off-by: Joshua Li <joshuali925@gmail.com>
Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>
Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
Signed-off-by: Derek Ho <dxho@amazon.com>
Co-authored-by: Derek Ho <dxho@amazon.com>
Co-authored-by: Eric Wei <menwe@amazon.com>
Co-authored-by: Joshua Li <joshuali925@gmail.com>
Co-authored-by: Peter Fitzgibbons <pjfitz@amazon.com>
Co-authored-by: Shenoy Pratik <sgguruda@amazon.com>
Co-authored-by: Rupal Mahajan <maharup@amazon.com>

* Fix redirection to legacy event_analytics URL (#383) (#384)

Signed-off-by: Joshua Li <joshuali925@gmail.com>
(cherry picked from commit 23e09e54f86a205443d78ef900b554a4fa66e4a0)

Co-authored-by: Joshua Li <joshuali925@gmail.com>

* [2.7] Redo pick from main to 2.7 (#385)

Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>
Signed-off-by: Derek Ho <dxho@amazon.com>
Signed-off-by: Eric Wei <menwe@amazon.com>
Signed-off-by: Rupal Mahajan <maharup@amazon.com>
Signed-off-by: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
Signed-off-by: Joshua Li <joshuali925@gmail.com>
Co-authored-by: Eric Wei <menwe@amazon.com>
Co-authored-by: Peter Fitzgibbons <pjfitz@amazon.com>
Co-authored-by: Derek Ho <dxho@amazon.com>
Co-authored-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
Co-authored-by: Rupal Mahajan <maharup@amazon.com>
Co-authored-by: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
Co-authored-by: Shenoy Pratik <sgguruda@amazon.com>

* Metrics analytics support for SOpanels  (#386) (#388)

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

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

* change plugin ordering (#389) (#390)

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

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

* notebooks fix for cypress and minor bugs (#392) (#393)

* notebooks fix for cypress and minor bugs

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

* remove comments

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

---------

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

* Update traces integration tests (#391) (#397)

* Update traces cypress tests

Signed-off-by: Rupal Mahajan <maharup@amazon.com>

* Update traces cypress test

Signed-off-by: Rupal Mahajan <maharup@amazon.com>

* Fix traces cypress tests

Signed-off-by: Rupal Mahajan <maharup@amazon.com>

* Fix filters test

Signed-off-by: Rupal Mahajan <maharup@amazon.com>

---------

Signed-off-by: Rupal Mahajan <maharup@amazon.com>
(cherry picked from commit b8f9ca38db4e368d776b11e2c0e431c9165f656e)

Co-authored-by: Rupal Mahajan <maharup@amazon.com>

* Fix redirection to legacy event_analytics URL from dashboards (#399) (#403)

Signed-off-by: Joshua Li <joshuali925@gmail.com>
(cherry picked from commit 05ef1806c44c91ff1099f6f23ec2176005643873)

Co-authored-by: Joshua Li <joshuali925@gmail.com>

* Adjust metrics top menu layout to avoid overflow (#398) (#402)

Signed-off-by: Joshua Li <joshuali925@gmail.com>
(cherry picked from commit 6309e635beb5b3463a2429e6b779155330895897)

Co-authored-by: Joshua Li <joshuali925@gmail.com>

* Support duplicate visualization in dashboard (#400) (#405)

Signed-off-by: Joshua Li <joshuali925@gmail.com>
(cherry picked from commit 3d74bacd8431ee6315dadc3b82463a2d958d1032)

Co-authored-by: Joshua Li <joshuali925@gmail.com>

* fix panel visualization preview, new viz workflow (#401) (#404)

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

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

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

* fix saving multiple metrics to SOpanels

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

* remove unused variable

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

---------

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

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

* Panel table fixes (#406)

* Fix Panel View (legacy)
  - Duplicate
  - Rename
  - Delete

---------

Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>
Co-authored-by: Peter Fitzgibbons <pjfitz@amazon.com>
Co-authored-by: opensearch-trigger-bot[bot] <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Co-authored-by: Joshua Li <joshuali925@gmail.com>
Co-authored-by: Shenoy Pratik <sgguruda@amazon.com>

* Release Notes 2.7.0.0 (#394) (#412)

* Release Notes 2.7.0.0

Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>

* Release Notes 2.7.0.0

Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>

---------

Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>
Co-authored-by: Peter Fitzgibbons <pjfitz@amazon.com>
(cherry picked from commit 969e6397d6187659edafe3a5df64b4cee3d1019d)

Co-authored-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>

* [Dashboard listing] update edit url and view url (#416) (#421)

* [Dashboard listing] update edit url and view url

Update to include BASE_URL if basePath is defined. Since create url is just
a direct nav and needs the basePath when passing props to the provider, the source
code no longer appends the basePath to keep these URLs consistent.

A feature should consolidate the basePaths in the dashboard listing service so that
createUrl also adds the base path. At which point we no longer need the base path.

Also removed some rogue URLs.

Core PR:
https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3922

---------

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
Signed-off-by: Joshua Li <joshuali925@gmail.com>
Co-authored-by: Joshua Li <joshuali925@gmail.com>
(cherry picked from commit f94c21e82cd29c55af6073d366d240328c684710)

Co-authored-by: Kawika Avilla <kavilla414@gmail.com>

* Fix invalid time range in new panels (#419)

Signed-off-by: Joshua Li <joshuali925@gmail.com>

* open new tab for editing panel visualization (#430)

Signed-off-by: Eric Wei <menwe@amazon.com>

* Save new prometheus metrics to OSD saved objects (#428)

* Save new prometheus metrics to OSD saved objects

Signed-off-by: Joshua Li <joshuali925@gmail.com>

* Return if failed at saving metrics

Signed-off-by: Joshua Li <joshuali925@gmail.com>

---------

Signed-off-by: Joshua Li <joshuali925@gmail.com>

* fixes edit mode callback bug in Saved Object Panels (#420)

* fix for SOpanels editMode

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

* rename edit button data-test-subj

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

---------

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

* Add Toasts to Observability Dashboards  (#435)

* Fixes
* Panel View (legacy)
  - Duplicate
  - Rename

Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>

* Toasts use hook from useOpenSearchDashboards context provider

Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>

* Testing for CustomPanel Toast

Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>

* update catches from comments, minor code cleaning

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

* update tests

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

* remove unused redux slice

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

* revert cypress changes

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

* add toasts to SOflyout

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

* fix messaging for multiple delete

Signed-off-by: Derek Ho <dxho@amazon.com>

* fix up toast and error handling for create and delete flows

Signed-off-by: Derek Ho <dxho@amazon.com>

* fix up clone

Signed-off-by: Derek Ho <dxho@amazon.com>

* fix rename in table

Signed-off-by: Derek Ho <dxho@amazon.com>

* fix rename in custom panel so view

Signed-off-by: Derek Ho <dxho@amazon.com>

* fix up panel toasts

Signed-off-by: Derek Ho <dxho@amazon.com>

* fix up for flyout

Signed-off-by: Derek Ho <dxho@amazon.com>

* code cleanup

Signed-off-by: Derek Ho <dxho@amazon.com>

* finish merge

Signed-off-by: Derek Ho <dxho@amazon.com>

* fix up PR comments

Signed-off-by: Derek Ho <dxho@amazon.com>

---------

Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>
Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
Signed-off-by: Derek Ho <dxho@amazon.com>
Co-authored-by: Peter Fitzgibbons <pjfitz@amazon.com>
Co-authored-by: Derek Ho <dxho@amazon.com>

* change samples to saved object (#427) (#436)

* change samples to saved object



* add sample to so



* fix saved object sample



* fix up



* add back toast



* revert file



* refactoring



* use constant



---------


(cherry picked from commit ce06ccb9fc4acd75d3ccbfbacab9db8a521de252)

Signed-off-by: Derek Ho <dxho@amazon.com>

* Add Error handling on duplicate dashboard names (#441)

* Add check for existing panel name

Signed-off-by: Rupal Mahajan <maharup@amazon.com>

* Nit

Signed-off-by: Rupal Mahajan <maharup@amazon.com>

* Remove double await

Signed-off-by: Rupal Mahajan <maharup@amazon.com>

* Add rename name check test

Signed-off-by: Rupal Mahajan <maharup@amazon.com>

* Remove test

Signed-off-by: Rupal Mahajan <maharup@amazon.com>

* Add unique id to sample panel name

Signed-off-by: Rupal Mahajan <maharup@amazon.com>

---------

Signed-off-by: Rupal Mahajan <maharup@amazon.com>

* fix timestamp overriding issue (#449)

Signed-off-by: Eric Wei <menwe@amazon.com>

* Renaming custom panels to Observability Dashboards (#450)

* change custom panels -> observability dashboards

Signed-off-by: Eric Wei <menwe@amazon.com>

* rest of the panel renaming

Signed-off-by: Eric Wei <menwe@amazon.com>

---------

Signed-off-by: Eric Wei <menwe@amazon.com>

* Fix delete failure when no osd item selected (#452)

Signed-off-by: Joshua Li <joshuali925@gmail.com>
(cherry picked from commit a4a310e49aa5feddc47fb2bf572bf232c80465bb)

* Open log patterns by default (#444) (#459)

Signed-off-by: Joshua Li <joshuali925@gmail.com>
(cherry picked from commit 72970aa5af30f6ea7c07271375feae67b11d8b6c)

* diff merging between 2.x and 2.7

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

* add service fields length check in app analytics

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

---------

Signed-off-by: Joshua Li <joshuali925@gmail.com>
Signed-off-by: Eric Wei <menwe@amazon.com>
Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>
Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
Signed-off-by: Derek Ho <dxho@amazon.com>
Signed-off-by: Rupal Mahajan <maharup@amazon.com>
Signed-off-by: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
Co-authored-by: Joshua Li <joshuali925@gmail.com>
Co-authored-by: Eric Wei <menwe@amazon.com>
Co-authored-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
Co-authored-by: Derek Ho <dxho@amazon.com>
Co-authored-by: Peter Fitzgibbons <pjfitz@amazon.com>
Co-authored-by: Rupal Mahajan <maharup@amazon.com>
Co-authored-by: opensearch-trigger-bot[bot] <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Co-authored-by: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
Co-authored-by: Kawika Avilla <kavilla414@gmail.com>
---
 .cypress/.DS_Store                            |  Bin 0 -> 6148 bytes
 .cypress/integration/2_notebooks.spec.js      |   37 +-
 .../{3_panels.spec.js => 3_panels.spec.ts}    |  411 +-
 .cypress/integration/7_app_analytics.spec.js  |    4 +-
 .cypress/plugins/index.js                     |    4 +
 .cypress/support/index.js                     |    2 +
 README.md                                     |    6 +-
 common/constants/custom_panels.ts             |   87 +-
 common/constants/shared.ts                    |   28 +-
 common/types/custom_panels.ts                 |   37 +-
 common/types/explorer.ts                      |    4 +-
 cypress.json                                  |    5 +-
 package.json                                  |    1 +
 public/components/app.tsx                     |  149 +-
 .../components/app_table.tsx                  |   20 +-
 .../components/application.tsx                |   24 +-
 .../components/configuration.tsx              |    4 +-
 .../components/create.tsx                     |   13 +-
 .../service_detail_flyout.tsx                 |    5 +-
 .../components/application_analytics/home.tsx |  110 +-
 public/components/common/side_nav.tsx         |  145 -
 public/components/common/toast/index.tsx      |   37 +
 .../custom_panel_table.test.tsx.snap          | 3592 +++------
 .../custom_panel_view.test.tsx.snap           | 6574 +++++++++--------
 .../__tests__/custom_panel_table.test.tsx     |  104 +-
 .../__tests__/custom_panel_view.test.tsx      |   82 +-
 .../custom_panels/custom_panel_table.tsx      |  155 +-
 .../custom_panels/custom_panel_view.tsx       |  132 +-
 .../custom_panels/custom_panel_view_so.tsx    |  690 ++
 .../helpers/__tests__/utils.test.tsx          |   52 +-
 .../helpers/add_visualization_helper.ts       |  125 +
 .../helpers/add_visualization_popover.tsx     |   10 +-
 .../helpers/modal_containers.tsx              |    4 +-
 .../helpers/panel_state_reducer.ts            |   15 +
 .../custom_panels/helpers/utils.tsx           |   36 +-
 public/components/custom_panels/home.tsx      |  373 +-
 .../panel_modules/empty_panel.tsx             |    2 +-
 .../panel_grid/panel_grid_so.tsx              |  219 +
 .../visualization_flyout.tsx                  |   13 +-
 .../visualization_flyout_so.tsx               |  424 ++
 .../custom_panels/redux/panel_slice.ts        |  342 +
 .../explorer/events_views/docViewer.tsx       |    3 +-
 .../explorer/events_views/doc_flyout.tsx      |   18 +-
 .../events_views/surrounding_flyout.tsx       |   68 +-
 .../event_analytics/explorer/explorer.tsx     |    2 +-
 .../event_analytics/explorer/log_explorer.tsx |    7 +-
 .../explorer/log_patterns/log_patterns.tsx    |   36 +-
 .../__snapshots__/save_panel.test.tsx.snap    | 1288 ++--
 .../save_panel/__tests__/save_panel.test.tsx  |   56 +-
 .../explorer/save_panel/save_panel.tsx        |   26 +-
 .../components/event_analytics/home/home.tsx  |   13 +-
 public/components/event_analytics/index.tsx   |   39 +-
 public/components/index.tsx                   |    4 +-
 public/components/metrics/index.tsx           |  167 +-
 .../__snapshots__/searchbar.test.tsx.snap     |    8 +-
 .../components/metrics/sidebar/search_bar.tsx |    2 +-
 .../__snapshots__/top_menu.test.tsx.snap      | 5709 +++++++-------
 .../components/metrics/top_menu/top_menu.scss |   16 +-
 .../components/metrics/top_menu/top_menu.tsx  |  221 +-
 .../__snapshots__/note_table.test.tsx.snap    |   16 +-
 .../__tests__/legacy_route_helpers.test.ts    |    8 +-
 .../helpers/legacy_route_helpers.ts           |    8 +-
 .../helpers/reporting_context_menu_helper.tsx |    3 +-
 .../components/notebooks/components/main.tsx  |   45 +-
 .../notebooks/components/note_table.tsx       |   15 +-
 .../notebooks/components/notebook.tsx         |   18 +-
 .../paragraph_components/para_input.tsx       |    3 +-
 .../paragraph_components/para_output.tsx      |    3 +-
 .../components/common/legacy_route_helpers.ts |    8 +-
 .../__snapshots__/dashboard.test.tsx.snap     |   30 +-
 .../dashboard/dashboard_content.tsx           |   43 +-
 .../components/dashboard/dashboard_table.tsx  |    3 +-
 .../dashboard/top_error_rates_table.tsx       |    2 +-
 .../dashboard/top_latency_table.tsx           |    3 +-
 .../__snapshots__/services.test.tsx.snap      |   44 +-
 .../services/__tests__/services.test.tsx      |    8 +-
 .../components/services/service_view.tsx      |   12 +-
 .../components/services/services_content.tsx  |   37 +-
 .../__snapshots__/traces.test.tsx.snap        |   44 +-
 .../traces/__tests__/traces.test.tsx          |    8 +-
 .../components/traces/trace_view.tsx          |    8 +-
 .../components/traces/traces_content.tsx      |   30 +-
 public/components/trace_analytics/home.tsx    |  215 +-
 .../requests/dashboard_request_handler.ts     |    5 +-
 .../trace_analytics/trace_side_nav.tsx        |   74 +
 .../observability_embeddable_factory.tsx      |    6 +-
 public/framework/core_refs.ts                 |   33 +
 public/framework/redux/reducers/index.ts      |    2 +
 public/index.ts                               |    1 +
 public/plugin.ts                              |  164 +-
 .../data_fetchers/ppl/ppl_data_fetcher.ts     |    4 +-
 .../saved_objects_actions.ts                  |    2 +-
 .../ppl/save_as_current_vis.ts                |   11 +-
 .../ppl/save_as_new_query.ts                  |    5 +-
 .../ppl/save_as_new_vis.ts                    |   20 +-
 .../custom_panels/custom_panel_adaptor.ts     |    3 +-
 .../helpers/custom_panels/sample_panels.ts    |   80 -
 server/plugin.ts                              |   37 +
 server/routes/custom_panels/panels_router.ts  |   43 +
 .../observability_saved_object.ts             |    6 +-
 test/panels_constants.tsx                     |    2 +-
 test/setup.jest.ts                            |    4 +
 yarn.lock                                     |  103 +-
 103 files changed, 11882 insertions(+), 11097 deletions(-)
 create mode 100644 .cypress/.DS_Store
 rename .cypress/integration/{3_panels.spec.js => 3_panels.spec.ts} (57%)
 delete mode 100644 public/components/common/side_nav.tsx
 create mode 100644 public/components/common/toast/index.tsx
 create mode 100644 public/components/custom_panels/custom_panel_view_so.tsx
 create mode 100644 public/components/custom_panels/helpers/add_visualization_helper.ts
 create mode 100644 public/components/custom_panels/helpers/panel_state_reducer.ts
 create mode 100644 public/components/custom_panels/panel_modules/panel_grid/panel_grid_so.tsx
 create mode 100644 public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx
 create mode 100644 public/components/custom_panels/redux/panel_slice.ts
 create mode 100644 public/components/trace_analytics/trace_side_nav.tsx
 create mode 100644 public/framework/core_refs.ts
 delete mode 100644 server/common/helpers/custom_panels/sample_panels.ts

diff --git a/.cypress/.DS_Store b/.cypress/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..ab1b61f97e8de91e1f5ea7ca39c7e9ac4e976bce
GIT binary patch
literal 6148
zcmeHKJ8Hu~5S?*c2-K)dxmU;y79pR&7f2vM7=jGOPOU2E%F*)XLqNzWT(~iBVCL=4
z&Rd~ZXfz_C{pI~dq!W<_ZYbXt)@JACE8Ap7fpFY0%1PejEC)HRs;?)E+oFB~>tn&6
zzV@f-^Ei!h`*k|ARDcRl0V+TRsKAX1Snq{3Z6G5RpaN9jPXYTr6u4ncoCE#Sf#4$m
zaEr7X);>!BizR?HaSlWVra=V;RddA9pd(+ht|rcbK^M*8L-Wa+6N>uNaewi0(Hh7|
z1*pJMfv4DZ*8g|#f9C%si90Gl1s+NP-46Sq$17!TUA>(3+5&%tTg?yL3~Q$#csmAq
iJI2P^@v|32U9mOJYvLT}bmW~5<j;WVLZbrrR^S(s$rc>|

literal 0
HcmV?d00001

diff --git a/.cypress/integration/2_notebooks.spec.js b/.cypress/integration/2_notebooks.spec.js
index 5743cd07af..bd78ef24ae 100644
--- a/.cypress/integration/2_notebooks.spec.js
+++ b/.cypress/integration/2_notebooks.spec.js
@@ -21,17 +21,26 @@ import { SAMPLE_PANEL } from '../utils/panel_constants';
 import { skipOn } from '@cypress/skip-test';
 
 const moveToEventsHome = () => {
-  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/`);
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-logs#/`);
   cy.wait(delay * 3);
 };
 
 const moveToPanelHome = () => {
-  cy.visit(
-    `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
-  );
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/`);
   cy.wait(delay * 3);
 };
 
+const moveToTestNotebook = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-notebooks#/`, {
+    timeout: 6000,
+  });
+  cy.get('.euiTableCellContent')
+    .contains(TEST_NOTEBOOK, {
+      timeout: 6000,
+    })
+    .click();
+};
+
 describe('Adding sample data and visualization', () => {
   it('Adds sample flights data for visualization paragraph', () => {
     cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`);
@@ -41,20 +50,20 @@ describe('Adding sample data and visualization', () => {
   });
 
   it('Add sample observability data', () => {
-    moveToPanelHome();
-    cy.get('.euiButton__text').contains('Actions').trigger('mouseover').click();
+    moveToEventsHome();
+    cy.get('button[data-test-subj="eventHomeAction"]').trigger('mouseover').click();
     cy.wait(100);
-    cy.get('.euiContextMenuItem__text').contains('Add samples').trigger('mouseover').click();
+    cy.get('button[data-test-subj="eventHomeAction__addSamples"]').trigger('mouseover').click();
     cy.wait(100 * 3);
     cy.get('.euiModalHeader__title[data-test-subj="confirmModalTitleText"]')
       .contains('Add samples')
       .should('exist');
     cy.wait(100);
-    cy.get('.euiButton__text').contains('Yes').trigger('mouseover').click();
+    cy.get('button[data-test-subj="confirmModalConfirmButton"]').trigger('mouseover').click();
     cy.wait(100 * 5);
     cy.route2('POST', '/addSamplePanels').as('addSamples');
     cy.wait('@addSamples').then(() => {
-      cy.get('.euiTableCellContent').contains(SAMPLE_PANEL).should('exist');
+      cy.get('.euiToastHeader__title').should('contain', 'successfully');
     });
     cy.wait(100);
   });
@@ -62,7 +71,8 @@ describe('Adding sample data and visualization', () => {
 
 describe('Testing notebooks table', () => {
   beforeEach(() => {
-    cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/notebooks`);
+    cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-notebooks#/`);
+    cy.wait(delay);
   });
 
   it('Notebooks table empty state', () => {
@@ -178,7 +188,7 @@ describe('Testing notebooks table', () => {
 
 describe('Test reporting integration if plugin installed', () => {
   beforeEach(() => {
-    cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/notebooks`);
+    cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-notebooks#/`);
     cy.get('.euiTableCellContent').contains(TEST_NOTEBOOK).click();
     cy.wait(delay * 3);
     cy.get('body').then(($body) => {
@@ -222,8 +232,7 @@ describe('Test reporting integration if plugin installed', () => {
 
 describe('Testing paragraphs', () => {
   beforeEach(() => {
-    cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/notebooks`);
-    cy.get('.euiTableCellContent').contains(TEST_NOTEBOOK).click();
+    moveToTestNotebook();
   });
 
   it('Goes into a notebook and creates paragraphs', () => {
@@ -550,7 +559,5 @@ describe('clean up all test data', () => {
     });
     cy.get('button.euiButton--danger').should('not.be.disabled');
     cy.get('.euiButton__text').contains('Delete').trigger('mouseover').click();
-
-    cy.get('.euiTextAlign').contains('No Operational Panels').should('exist');
   });
 });
diff --git a/.cypress/integration/3_panels.spec.js b/.cypress/integration/3_panels.spec.ts
similarity index 57%
rename from .cypress/integration/3_panels.spec.js
rename to .cypress/integration/3_panels.spec.ts
index 900472fa27..1e8a3ff2f3 100644
--- a/.cypress/integration/3_panels.spec.js
+++ b/.cypress/integration/3_panels.spec.ts
@@ -5,38 +5,16 @@
 
 /// <reference types="cypress" />
 
+import { suppressResizeObserverIssue } from '../utils/constants';
 import {
   delay,
-  TEST_PANEL,
-  PPL_VISUALIZATIONS,
-  PPL_VISUALIZATIONS_NAMES,
   NEW_VISUALIZATION_NAME,
   PPL_FILTER,
-  SAMPLE_PANEL,
-  SAMPLE_VISUALIZATIONS_NAMES,
+  PPL_VISUALIZATIONS,
+  PPL_VISUALIZATIONS_NAMES,
+  TEST_PANEL,
 } from '../utils/panel_constants';
 
-import { suppressResizeObserverIssue } from '../utils/constants';
-
-const moveToEventsHome = () => {
-  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/`);
-  cy.wait(delay * 3);
-};
-
-const moveToPanelHome = () => {
-  cy.visit(
-    `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
-  );
-  cy.wait(delay * 3);
-};
-
-const moveToTestPanel = () => {
-  moveToPanelHome();
-  cy.get('.euiTableCellContent').contains(TEST_PANEL).trigger('mouseover').click();
-  cy.wait(delay * 3);
-  cy.get('h1').contains(TEST_PANEL).should('exist');
-};
-
 describe('Adding sample data and visualization', () => {
   it('Adds sample flights data for visualization paragraph', () => {
     cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`);
@@ -98,83 +76,181 @@ describe('Creating visualizations', () => {
 
 describe('Testing panels table', () => {
   beforeEach(() => {
+    eraseTestPanels();
     moveToPanelHome();
   });
 
-  it('Displays error toast for invalid panel name', () => {
-    cy.get('button[data-test-subj="customPanels__createNewPanels"]').click();
-    cy.get('button[data-test-subj="runModalButton"]').click();
-    cy.get('.euiToastHeader__title').contains('Invalid Operational Panel name').should('exist');
-  });
+  describe('Without Any Panels', () => {
+    beforeEach(() => {
+      moveToPanelHome();
+    });
 
-  it('Creates a panel and redirects to the panel', () => {
-    cy.get('button[data-test-subj="customPanels__createNewPanels"]').click();
-    cy.get('input.euiFieldText').focus().type(TEST_PANEL, {
-      delay: 50,
+    it.skip('Displays error toast for invalid panel name', () => {
+      clickCreatePanelButton();
+      confirmModal();
+      expectToastWith('Invalid Dashboard name');
     });
-    cy.get('button[data-test-subj="runModalButton"]').click();
-    cy.contains(TEST_PANEL).should('exist');
-  });
 
-  it('Duplicates a panel', () => {
-    cy.get('.euiCheckbox__input[title="Select this row"]').eq(0).trigger('mouseover').click();
-    cy.get('button[data-test-subj="operationalPanelsActionsButton"]').click();
-    cy.get('button[data-test-subj="duplicateContextMenuItem"]').click();
-    cy.get('button[data-test-subj="runModalButton"]').click();
+    it('Creates a panel and redirects to the panel', () => {
+      clickCreatePanelButton();
+      cy.get('input.euiFieldText').focus().type(TEST_PANEL, {
+        delay: 50,
+      });
+      cy.get('button[data-test-subj="runModalButton"]').click();
+      cy.contains(TEST_PANEL).should('exist');
+    });
   });
 
-  it('Renames a panel', () => {
-    cy.get('.euiCheckbox__input[title="Select this row"]').eq(0).trigger('mouseover').click();
-    cy.get('button[data-test-subj="operationalPanelsActionsButton"]').click();
-    cy.get('button[data-test-subj="renameContextMenuItem"]').click();
-    cy.get('input.euiFieldText').focus().type(' (rename)', {
-      delay: 50,
+  describe('with a Legacy Panel', () => {
+    beforeEach(() => {
+      createLegacyPanel();
+      moveToPanelHome();
     });
-    cy.get('button[data-test-subj="runModalButton"]').click();
-  });
 
-  it('Searches existing panel', () => {
-    cy.get('input[data-test-subj="operationalPanelSearchBar"]')
-      .focus()
-      .type('this panel should not exist', {
+    it('Duplicates a legacy panel', () => {
+      cy.get('.euiTableRow').should('have.length', 1);
+      selectThePanel();
+      openActionsDropdown();
+      cy.get('button[data-test-subj="duplicateContextMenuItem"]').click();
+      cy.get('button[data-test-subj="runModalButton"]').click();
+      cy.get('.euiTableRow').should('have.length', 2);
+      const duplicateName = TEST_PANEL + ' (copy)';
+      cy.contains(duplicateName).should('exist');
+      const duplicate = cy.get('.euiLink').contains(duplicateName);
+      expectUuid(duplicate);
+    });
+
+    it('Renames the panel', () => {
+      createLegacyPanel();
+      cy.reload();
+      const cell = cy.get('.euiTableCellContent');
+      expectLegacyId(cell);
+      selectThePanel();
+      openActionsDropdown();
+      cy.get('button[data-test-subj="renameContextMenuItem"]').click();
+      cy.get('input.euiFieldText').focus().type(' (rename)');
+      cy.get('button[data-test-subj="runModalButton"]').click();
+      const renamed = testPanelTableCell();
+      expectUuid(renamed);
+    });
+
+    it('Deletes the panel', () => {
+      cy.get('input[data-test-subj="checkboxSelectAll"]').click();
+      openActionsDropdown();
+      cy.get('button[data-test-subj="deleteContextMenuItem"]').click();
+      cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('be.disabled');
+
+      cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', {
         delay: 50,
       });
+      cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled');
+      cy.get('button[data-test-subj="popoverModal__deleteButton"]').click();
+      cy.get('h2[data-test-subj="customPanels__noPanelsHome"]').should('exist');
+    });
 
-    cy.get('.euiTableCellContent__text').contains('No items found').should('exist');
+    it('Searches panels', () => {
+      createLegacyPanel('Legacy Named');
+      createSavedObjectPanel('Saved Object');
+      cy.reload();
+      cy.get('input[data-test-subj="operationalPanelSearchBar"]')
+        .focus()
+        .type('this panel should not exist', {
+          delay: 50,
+        });
+
+      cy.get('.euiTableCellContent__text').contains('No items found').should('exist');
+
+      // Search for oriignal Legacy Panel
+      cy.get('[aria-label="Clear input"]').click();
+      cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(TEST_PANEL, {
+        delay: 50,
+      });
 
-    cy.get('[aria-label="Clear input"]').click();
-    cy.get('input[data-test-subj="operationalPanelSearchBar"]')
-      .focus()
-      .type(TEST_PANEL + ' (copy) (rename)', {
+      cy.get('a.euiLink').contains(TEST_PANEL).should('exist');
+      cy.get('.euiTableRow').should('have.length', 1);
+
+      // Search for teh Saved Object panel
+      cy.get('[aria-label="Clear input"]').click();
+      cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type('Saved Object', {
         delay: 50,
       });
 
-    cy.get('a.euiLink')
-      .contains(TEST_PANEL + ' (copy) (rename)')
-      .should('exist');
+      cy.get('a.euiLink').contains('Saved Object').should('exist');
+      cy.get('.euiTableRow').should('have.length', 1);
+    });
   });
 
-  it('Deletes panels', () => {
-    cy.get('input[data-test-subj="checkboxSelectAll"]').click();
-    cy.get('button[data-test-subj="operationalPanelsActionsButton"]').click();
-    cy.get('button[data-test-subj="deleteContextMenuItem"]').click();
-    cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('be.disabled');
+  describe('with a SavedObjects Panel', () => {
+    beforeEach(() => {
+      createSavedObjectPanel();
+      moveToPanelHome();
+      cy.get('.euiTableRow').should('have.length', 1);
+    });
 
-    cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', {
-      delay: 50,
+    it('Duplicates the panel', () => {
+      selectThePanel();
+      openActionsDropdown();
+      cy.get('button[data-test-subj="duplicateContextMenuItem"]').click();
+      cy.get('button[data-test-subj="runModalButton"]').click();
+      const duplicateName = TEST_PANEL + ' (copy)';
+      cy.get('.euiTableRow').should('have.length', 2);
+      cy.contains(duplicateName).should('exist');
+      const duplicate = cy.get('.euiLink').contains(duplicateName);
+      expectUuid(duplicate);
     });
-    cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled');
-    cy.get('button[data-test-subj="popoverModal__deleteButton"]').click();
-    cy.get('h2[data-test-subj="customPanels__noPanelsHome"]').should('exist');
-  });
 
-  it('Create a panel for testing', () => {
-    // keep a panel for testing
-    cy.get('button[data-test-subj="customPanels__createNewPanels"]').click();
-    cy.get('input.euiFieldText').focus().type(TEST_PANEL, {
-      delay: 50,
+    it('Renames a saved-objects panel', () => {
+      selectThePanel();
+      openActionsDropdown();
+      cy.get('button[data-test-subj="renameContextMenuItem"]').click();
+      cy.get('input.euiFieldText').focus().type(' (rename)', {
+        delay: 50,
+      });
+      cy.get('button[data-test-subj="runModalButton"]').click();
+    });
+
+    it('Deletes the panel', () => {
+      createSavedObjectPanel();
+      cy.get('input[data-test-subj="checkboxSelectAll"]').click();
+      openActionsDropdown();
+      cy.get('button[data-test-subj="deleteContextMenuItem"]').click();
+      cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('be.disabled');
+
+      cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', {
+        delay: 50,
+      });
+      cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled');
+      cy.get('button[data-test-subj="popoverModal__deleteButton"]').click();
+      cy.get('h2[data-test-subj="customPanels__noPanelsHome"]').should('exist');
+    });
+
+    it('Redirects to observability dashboard from OSD dashboards', () => {
+      moveToOsdDashboards();
+      cy.location('pathname').should('eq', '/app/dashboards');
+      cy.get('[data-test-subj="dashboardListingTitleLink-Test-Panel"]').click();
+      cy.location('pathname').should('eq', '/app/observability-dashboards');
+    });
+
+    it('Redirects to observability dashboard from OSD dashboards with edit', () => {
+      moveToOsdDashboards();
+      cy.location('pathname').should('eq', '/app/dashboards');
+      cy.get('[data-test-subj="dashboardListingTitleLink-Test-Panel"]')
+        .closest('tr')
+        .get('span.euiToolTipAnchor > button.euiButtonIcon')
+        .eq(0)
+        .click();
+      cy.location('pathname').should('eq', '/app/observability-dashboards');
+      cy.location('hash').should('include', '/edit');
+    });
+
+    it('Redirects to observability dashboard from OSD dashboards with create', () => {
+      moveToOsdDashboards();
+      cy.location('pathname').should('eq', '/app/dashboards');
+      cy.get('div#createMenuPopover').click();
+      cy.get('[data-test-subj="contextMenuItem-observability-panel"]').click();
+      cy.location('pathname').should('eq', '/app/observability-dashboards');
+      cy.location('hash').should('include', '/create');
     });
-    cy.get('button[data-test-subj="runModalButton"]').click();
   });
 });
 
@@ -194,9 +270,9 @@ describe('Testing a panel', () => {
     cy.get('a[data-test-subj="breadcrumb last"]').click();
 
     cy.get('h1[data-test-subj="panelNameHeader"]').contains(TEST_PANEL).should('exist');
-    cy.get('a[data-test-subj="breadcrumb"]').contains('Operational panels').click();
+    cy.get('a[data-test-subj="breadcrumb"]').contains('Observability Dashboards').click();
 
-    cy.get('a[data-test-subj="breadcrumb last"]').contains('Operational panels').should('exist');
+    cy.get('a[data-test-subj="breadcrumb last"]').contains('Observability Dashboards').should('exist');
     cy.get('a[data-test-subj="breadcrumb first"]').contains('Observability').click();
 
     cy.get('a[data-test-subj="breadcrumb"]').contains('Event analytics').should('exist');
@@ -470,8 +546,8 @@ describe('Clean up all test data', () => {
   it('Deletes test panel', () => {
     moveToPanelHome();
     cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').trigger('mouseover').click();
-    cy.get('button[data-test-subj="operationalPanelsActionsButton"]').click();
-    cy.get('button[data-test-subj="deleteContextMenuItem"]').click();
+    openActionsDropdown();
+    clickDeleteAction();
     cy.get('button.euiButton--danger').should('be.disabled');
     cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', {
       delay: 50,
@@ -479,6 +555,171 @@ describe('Clean up all test data', () => {
     cy.get('button.euiButton--danger').should('not.be.disabled');
     cy.get('button[data-test-subj="popoverModal__deleteButton"]').click();
 
-    cy.get('.euiTextAlign').contains('No Operational Panels').should('exist');
+    cy.get('.euiTextAlign').contains('No Observability Dashboards').should('exist');
   });
 });
+
+const moveToOsdDashboards = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/dashboards#/`);
+  cy.wait(delay * 3);
+};
+
+const moveToEventsHome = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-logs#/`);
+  cy.wait(6000);
+};
+
+const moveToPanelHome = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/`, {
+    timeout: 3000,
+  });
+  cy.wait(delay * 3);
+};
+
+const testPanelTableCell = (name = TEST_PANEL) => cy.get('.euiTableCellContent').contains(name);
+
+const moveToTestPanel = () => {
+  moveToPanelHome();
+  testPanelTableCell().trigger('mouseover').click();
+  cy.wait(delay * 3);
+  cy.get('h1').contains(TEST_PANEL).should('exist');
+};
+
+const TEST_PANEL_RX = new RegExp(TEST_PANEL + '.*');
+
+const eraseLegacyPanels = () => {
+  cy.request({
+    method: 'GET',
+    failOnStatusCode: false,
+    url: 'api/observability/operational_panels/panels',
+    headers: {
+      'content-type': 'application/json;charset=UTF-8',
+      'osd-xsrf': true,
+    },
+  }).then((response) => {
+    response.body.panels.map((panel) => {
+      cy.request({
+        method: 'DELETE',
+        failOnStatusCode: false,
+        url: `api/observability/operational_panels/panels/${panel.id}`,
+        headers: {
+          'content-type': 'application/json;charset=UTF-8',
+          'osd-xsrf': true,
+        },
+      }).then((response) => {
+        const deletedId = response.allRequestResponses[0]['Request URL'].split('/').slice(-1);
+        console.log('erased panel', deletedId);
+      });
+    });
+  });
+};
+
+const eraseSavedObjectPaenls = () => {
+  return cy
+    .request({
+      method: 'get',
+      failOnStatusCode: false,
+      url: 'api/saved_objects/_find?type=observability-panel',
+      headers: {
+        'content-type': 'application/json;charset=UTF-8',
+        'osd-xsrf': true,
+      },
+    })
+    .then((response) => {
+      response.body.saved_objects.map((soPanel) => {
+        cy.request({
+          method: 'DELETE',
+          failOnStatusCode: false,
+          url: `api/saved_objects/observability-panel/${soPanel.id}`,
+          headers: {
+            'content-type': 'application/json;charset=UTF-8',
+            'osd-xsrf': true,
+          },
+        });
+      });
+    });
+};
+
+const eraseTestPanels = () => {
+  eraseLegacyPanels();
+  eraseSavedObjectPaenls();
+};
+const uuidRx = /[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/;
+
+const clickCreatePanelButton = () =>
+  cy.get('a[data-test-subj="customPanels__createNewPanels"]').click();
+
+const createSavedObjectPanel = (newName = TEST_PANEL) => {
+  const result = cy
+    .request({
+      method: 'POST',
+      failOnStatusCode: false,
+      url: 'api/saved_objects/observability-panel',
+      headers: {
+        'content-type': 'application/json;charset=UTF-8',
+        'osd-xsrf': true,
+      },
+      body: {
+        attributes: {
+          title: newName,
+          description: '',
+          dateCreated: 1681127334085,
+          dateModified: 1681127334085,
+          timeRange: {
+            to: 'now',
+            from: 'now-1d',
+          },
+          queryFilter: {
+            query: '',
+            language: 'ppl',
+          },
+          visualizations: [],
+          applicationId: '',
+        },
+      },
+    })
+    .then((response) => console.log(response));
+};
+
+const createLegacyPanel = (newName = TEST_PANEL) => {
+  const result = cy.request({
+    method: 'POST',
+    failOnStatusCode: false,
+    url: 'api/observability/operational_panels/panels',
+    headers: {
+      'content-type': 'application/json;charset=UTF-8',
+      'osd-xsrf': true,
+    },
+    body: { panelName: newName },
+  });
+};
+
+const expectUuid = (anchorElem) => {
+  anchorElem.invoke('attr', 'href').should('match', uuidRx);
+};
+
+const expectLegacyId = (anchorElem) => {
+  anchorElem.invoke('attr', 'href').should('not.match', uuidRx);
+};
+
+const clickDeleteAction = () => {
+  cy.get('button[data-test-subj="deleteContextMenuItem"]').click();
+};
+
+const openActionsDropdown = () => {
+  cy.get('button[data-test-subj="operationalPanelsActionsButton"]').click();
+};
+
+const selectThePanel = () => {
+  cy.get('.euiCheckbox__input[title="Select this row"]').then(() => {
+    cy.get('.euiCheckbox__input[title="Select this row"]').check({ force: true });
+  });
+};
+
+const expectToastWith = (title) => {
+  cy.get('.euiToastHeader__title').contains(title).should('exist');
+};
+
+const confirmModal = () => {
+  cy.get('button[data-test-subj="runModalButton"]').click();
+};
diff --git a/.cypress/integration/7_app_analytics.spec.js b/.cypress/integration/7_app_analytics.spec.js
index e3a41a49b8..5de3989719 100644
--- a/.cypress/integration/7_app_analytics.spec.js
+++ b/.cypress/integration/7_app_analytics.spec.js
@@ -481,7 +481,7 @@ describe('Separate from other plugins', () => {
     })
   });
 
-  it('Hides application visualizations in Operational Panels', () => {
+  it('Hides application visualizations in Observability Dashboards', () => {
     cy.visit(
       `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
     );
@@ -497,7 +497,7 @@ describe('Separate from other plugins', () => {
     cy.get('option').contains(visTwoName).should('not.exist');
   });
 
-  it('Hides application panels in Operational Panels', () => {
+  it('Hides application panels in Observability Dashboards', () => {
     cy.visit(
       `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
     );
diff --git a/.cypress/plugins/index.js b/.cypress/plugins/index.js
index 8ac1f10667..ddc95c953b 100644
--- a/.cypress/plugins/index.js
+++ b/.cypress/plugins/index.js
@@ -17,10 +17,14 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
+
 /**
  * @type {Cypress.PluginConfig}
  */
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+  require('cypress-watch-and-reload/plugins')(config)
+
+  return config
 }
diff --git a/.cypress/support/index.js b/.cypress/support/index.js
index 6b25b7b27e..2fa692d7a1 100644
--- a/.cypress/support/index.js
+++ b/.cypress/support/index.js
@@ -18,6 +18,8 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+import 'cypress-watch-and-reload/support'
+
 // Import commands.js using ES2015 syntax:
 import './commands';
 
diff --git a/README.md b/README.md
index a098f3ffd5..eba1a7f066 100644
--- a/README.md
+++ b/README.md
@@ -75,7 +75,7 @@ Observability is collection of plugins and applications that let you visualize d
 
 ## Plugin Components
 
-The Dashboards Observability plugin has four components: Trace Analytics, Event Analytics, Operational Panels, and Notebooks.
+The Dashboards Observability plugin has four components: Trace Analytics, Event Analytics, Observability Dashboards, and Notebooks.
 
 ### Trace Analytics
 
@@ -93,9 +93,9 @@ Additionally the fields can be sorted and filtered.
 
 Event Analytics allows user to monitor, correlate, analyze and visualize machine generated data through [Piped Processing Language](https://opensearch.org/docs/latest/observability-plugins/ppl/index/). It also enables the user to turn data-driven events into visualizations and save frequently used ones for quick access.
 
-### Operational Panels
+### Observability Dashboards
 
-Operational panels provides the users to create and view different visualizations on ingested observability data, using Piped Processing Language queries. Use PPL 'where clauses' and datetime timespans to filter all visualizations in the panel.
+Observability Dashboards provides the users to create and view different visualizations on ingested observability data, using Piped Processing Language queries. Use PPL 'where clauses' and datetime timespans to filter all visualizations in the dashboard.
 
 ### Notebooks
 
diff --git a/common/constants/custom_panels.ts b/common/constants/custom_panels.ts
index 0c02b97a29..555f778b19 100644
--- a/common/constants/custom_panels.ts
+++ b/common/constants/custom_panels.ts
@@ -3,6 +3,89 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { v4 as uuidv4 } from 'uuid';
+
 export const CUSTOM_PANELS_API_PREFIX = '/api/observability/operational_panels';
-export const CUSTOM_PANELS_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/observability-plugin/operational-panels/';
-export const CREATE_PANEL_MESSAGE = 'Enter a name to describe the purpose of this custom panel.';
+export const CUSTOM_PANELS_DOCUMENTATION_URL =
+  'https://opensearch.org/docs/latest/observability-plugin/operational-panels/';
+export const CREATE_PANEL_MESSAGE = 'Enter a name to describe the purpose of this Observability Dashboard.';
+
+export const CUSTOM_PANELS_SAVED_OBJECT_TYPE = 'observability-panel';
+
+export const CUSTOM_PANEL_SLICE = 'customPanel';
+
+export const samplePanelName = '[Logs] Web traffic Panel';
+
+export const createDemoPanel = (savedVisualizationIds: string[]) => {
+  return {
+    name: samplePanelName,
+    visualizations: [
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[0],
+        x: 4,
+        y: 6,
+        w: 8,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[1],
+        x: 0,
+        y: 2,
+        w: 12,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[2],
+        x: 0,
+        y: 0,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[3],
+        x: 4,
+        y: 0,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[4],
+        x: 8,
+        y: 0,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[5],
+        x: 0,
+        y: 4,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[6],
+        x: 0,
+        y: 6,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[7],
+        x: 4,
+        y: 4,
+        w: 8,
+        h: 2,
+      },
+    ],
+    timeRange: { to: 'now/y', from: 'now/y' },
+    queryFilter: { query: '', language: 'ppl' },
+  };
+};
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
index f1e936e123..e42bd11c60 100644
--- a/common/constants/shared.ts
+++ b/common/constants/shared.ts
@@ -23,9 +23,33 @@ export const PPL_ENDPOINT = '/_plugins/_ppl';
 export const SQL_ENDPOINT = '/_plugins/_sql';
 export const DSL_ENDPOINT = '/_plugins/_dsl';
 
-export const observabilityID = 'observability-dashboards';
+export const observabilityID = 'observability-logs';
 export const observabilityTitle = 'Observability';
-export const observabilityPluginOrder = 6000;
+export const observabilityPluginOrder = 1500;
+
+export const observabilityApplicationsID = 'observability-applications';
+export const observabilityApplicationsTitle = 'Applications';
+export const observabilityApplicationsPluginOrder = 5090;
+
+export const observabilityLogsID = 'observability-logs';
+export const observabilityLogsTitle = 'Logs';
+export const observabilityLogsPluginOrder = 5091;
+
+export const observabilityMetricsID = 'observability-metrics';
+export const observabilityMetricsTitle = 'Metrics';
+export const observabilityMetricsPluginOrder = 5092;
+
+export const observabilityTracesID = 'observability-traces';
+export const observabilityTracesTitle = 'Traces';
+export const observabilityTracesPluginOrder = 5093;
+
+export const observabilityNotebookID = 'observability-notebooks';
+export const observabilityNotebookTitle = 'Notebooks';
+export const observabilityNotebookPluginOrder = 5094;
+
+export const observabilityPanelsID = 'observability-dashboards';
+export const observabilityPanelsTitle = 'Dashboards';
+export const observabilityPanelsPluginOrder = 5095;
 
 // Shared Constants
 export const SQL_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/search-plugins/sql/index/';
diff --git a/common/types/custom_panels.ts b/common/types/custom_panels.ts
index ca75e41def..a24cbe839f 100644
--- a/common/types/custom_panels.ts
+++ b/common/types/custom_panels.ts
@@ -4,11 +4,19 @@
  */
 
 export interface CustomPanelListType {
-  name: string;
+  title: string;
   id: string;
   dateCreated: number;
   dateModified: number;
   applicationId?: string;
+  savedObject: boolean;
+}
+
+export interface BoxType {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
 }
 
 export interface VisualizationType {
@@ -21,13 +29,19 @@ export interface VisualizationType {
 }
 
 export interface PanelType {
-  name: string;
+  title: string;
+  dateCreated: number;
+  dateModified: number;
   visualizations: VisualizationType[];
   timeRange: { to: string; from: string };
   queryFilter: { query: string; language: string };
   applicationId?: string;
 }
 
+export interface CustomPanelType extends PanelType {
+  id: string;
+}
+
 export interface SavedVisualizationType {
   id: string;
   name: string;
@@ -39,7 +53,7 @@ export interface SavedVisualizationType {
   user_configs: any;
 }
 
-export interface pplResponse {
+export interface PPLResponse {
   data: any;
   metadata: any;
   size: number;
@@ -50,3 +64,20 @@ export interface VizContainerError {
   errorMessage: string;
   errorDetails?: string;
 }
+
+export interface ObservabilityPanelAttrs {
+  title: string;
+  description: string;
+  dateCreated: number;
+  dateModified: number;
+  timeRange: {
+    to: string;
+    from: string;
+  };
+  queryFilter: {
+    query: string;
+    language: string;
+  };
+  visualizations: VisualizationType[];
+  applicationId: string;
+}
diff --git a/common/types/explorer.ts b/common/types/explorer.ts
index 53dfe2ca20..9c5d5a9439 100644
--- a/common/types/explorer.ts
+++ b/common/types/explorer.ts
@@ -37,6 +37,7 @@ import {
   SavedObjectAttributes,
   SavedObjectsStart,
 } from '../../../../src/core/public/saved_objects';
+import { ChromeBreadcrumb } from '../../../../src/core/public/chrome';
 
 export interface IQueryTab {
   id: string;
@@ -318,7 +319,7 @@ export interface Breadcrumbs {
 
 export interface EventAnalyticsProps {
   chrome: CoreSetup;
-  parentBreadcrumbs: Breadcrumbs[];
+  parentBreadcrumbs: ChromeBreadcrumb[];
   pplService: any;
   dslService: any;
   savedObjects: SavedObjectsStart;
@@ -326,6 +327,7 @@ export interface EventAnalyticsProps {
   http: HttpStart;
   notifications: NotificationsStart;
   queryManager: QueryManager;
+  setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
 }
 
 export interface DataConfigPanelProps {
diff --git a/cypress.json b/cypress.json
index dbe41c79b7..07b337dccb 100644
--- a/cypress.json
+++ b/cypress.json
@@ -1,7 +1,7 @@
 {
   "baseUrl": "http://localhost:5601",
   "video": true,
-  "chromeWebSecurity": false,
+  "chromeWebSecurity": true,
   "fixturesFolder": ".cypress/fixtures",
   "integrationFolder": ".cypress/integration",
   "pluginsFile": ".cypress/plugins/index.js",
@@ -19,5 +19,8 @@
     "opensearch": "localhost:9200",
     "opensearchDashboards": "localhost:5601",
     "security_enabled": true
+  },
+  "cypress-watch-and-reload": {
+    "watch": ["common/**", "public/**", "server/**"]
   }
 }
diff --git a/package.json b/package.json
index 96c6890796..fc29a1bbf9 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@types/react-test-renderer": "^16.9.1",
     "antlr4ts-cli": "^0.5.0-alpha.4",
     "cypress": "^6.0.0",
+    "cypress-watch-and-reload": "^1.10.6",
     "eslint": "^6.8.0",
     "jest-dom": "^4.0.0",
     "ts-jest": "^29.1.0"
diff --git a/public/components/app.tsx b/public/components/app.tsx
index 75342b8dd9..18066f3281 100644
--- a/public/components/app.tsx
+++ b/public/components/app.tsx
@@ -7,7 +7,6 @@ import { I18nProvider } from '@osd/i18n/react';
 import { QueryManager } from 'common/query_manager';
 import React from 'react';
 import { Provider } from 'react-redux';
-import { HashRouter, Route, Switch } from 'react-router-dom';
 import { CoreStart } from '../../../../src/core/public';
 import { observabilityID, observabilityTitle } from '../../common/constants/shared';
 import { store } from '../framework/redux/store';
@@ -28,6 +27,7 @@ interface ObservabilityAppDeps {
   savedObjects: any;
   timestampUtils: any;
   queryManager: QueryManager;
+  startPage: string;
 }
 
 // for cypress to test redux store
@@ -35,6 +35,15 @@ if (window.Cypress) {
   window.store = store;
 }
 
+const pages = {
+  applications: ApplicationAnalyticsHome,
+  logs: EventAnalytics,
+  metrics: MetricsHome,
+  traces: TraceAnalyticsHome,
+  notebooks: NotebooksHome,
+  dashboards: CustomPanelsHome,
+};
+
 export const App = ({
   CoreStartProp,
   DepsStart,
@@ -43,128 +52,40 @@ export const App = ({
   savedObjects,
   timestampUtils,
   queryManager,
+  startPage,
 }: ObservabilityAppDeps) => {
-  const { chrome, http, notifications } = CoreStartProp;
+  const { chrome, http, notifications, savedObjects: coreSavedObjects } = CoreStartProp;
   const parentBreadcrumb = {
     text: observabilityTitle,
     href: `${observabilityID}#/`,
   };
 
-  const customPanelBreadcrumb = {
-    text: 'Operational panels',
-    href: '#/operational_panels/',
-  };
+  const ModuleComponent = pages[startPage];
 
   return (
     <Provider store={store}>
-      <HashRouter>
-        <I18nProvider>
-          <MetricsListener http={http}>
-            <Switch>
-              <Route
-                path="/metrics_analytics/"
-                render={(props) => {
-                  chrome.setBreadcrumbs([
-                    parentBreadcrumb,
-                    { text: 'Metrics analytics', href: '#/metrics_analytics/' },
-                  ]);
-                  return (
-                    <MetricsHome
-                      http={http}
-                      chrome={chrome}
-                      parentBreadcrumb={parentBreadcrumb}
-                      renderProps={props}
-                      pplService={pplService}
-                      savedObjects={savedObjects}
-                    />
-                  );
-                }}
-              />
-              <Route
-                path={'/application_analytics'}
-                render={(props) => {
-                  return (
-                    <ApplicationAnalyticsHome
-                      {...props}
-                      chrome={chrome}
-                      http={http}
-                      notifications={notifications}
-                      parentBreadcrumbs={[parentBreadcrumb]}
-                      pplService={pplService}
-                      dslService={dslService}
-                      savedObjects={savedObjects}
-                      timestampUtils={timestampUtils}
-                      queryManager={queryManager}
-                    />
-                  );
-                }}
-              />
-              <Route
-                path="/notebooks"
-                render={(props) => (
-                  <NotebooksHome
-                    {...props}
-                    DashboardContainerByValueRenderer={
-                      DepsStart.dashboard.DashboardContainerByValueRenderer
-                    }
-                    http={http}
-                    pplService={pplService}
-                    setBreadcrumbs={chrome.setBreadcrumbs}
-                    parentBreadcrumb={parentBreadcrumb}
-                    notifications={notifications}
-                  />
-                )}
-              />
-              <Route
-                path="/operational_panels"
-                render={(props) => {
-                  chrome.setBreadcrumbs([parentBreadcrumb, customPanelBreadcrumb]);
-                  return (
-                    <CustomPanelsHome
-                      http={http}
-                      chrome={chrome}
-                      parentBreadcrumbs={[parentBreadcrumb, customPanelBreadcrumb]}
-                      pplService={pplService}
-                      dslService={dslService}
-                      renderProps={props}
-                    />
-                  );
-                }}
-              />
-              <Route
-                path={['/trace_analytics', '/trace_analytics/home']}
-                render={(props) => (
-                  <TraceAnalyticsHome
-                    {...props}
-                    chrome={chrome}
-                    http={http}
-                    parentBreadcrumbs={[parentBreadcrumb]}
-                  />
-                )}
-              />
-              <Route
-                path={['/', '/event_analytics']}
-                render={(props) => {
-                  return (
-                    <EventAnalytics
-                      chrome={chrome}
-                      parentBreadcrumbs={[parentBreadcrumb]}
-                      pplService={pplService}
-                      dslService={dslService}
-                      savedObjects={savedObjects}
-                      timestampUtils={timestampUtils}
-                      http={http}
-                      notifications={notifications}
-                      queryManager={queryManager}
-                      {...props}
-                    />
-                  );
-                }}
-              />
-            </Switch>
-          </MetricsListener>
-        </I18nProvider>
-      </HashRouter>
+      <I18nProvider>
+        <MetricsListener http={http}>
+          <ModuleComponent
+            http={http}
+            chrome={chrome}
+            notifications={notifications}
+            CoreStartProp={CoreStartProp}
+            DepsStart={DepsStart}
+            DashboardContainerByValueRenderer={
+              DepsStart.dashboard.DashboardContainerByValueRenderer
+            }
+            pplService={pplService}
+            dslService={dslService}
+            savedObjects={savedObjects}
+            timestampUtils={timestampUtils}
+            queryManager={queryManager}
+            parentBreadcrumb={parentBreadcrumb}
+            parentBreadcrumbs={[parentBreadcrumb]}
+            setBreadcrumbs={chrome.setBreadcrumbs}
+          />
+        </MetricsListener>
+      </I18nProvider>
     </Provider>
   );
 };
diff --git a/public/components/application_analytics/components/app_table.tsx b/public/components/application_analytics/components/app_table.tsx
index 75fe228af8..993cee0fef 100644
--- a/public/components/application_analytics/components/app_table.tsx
+++ b/public/components/application_analytics/components/app_table.tsx
@@ -37,7 +37,12 @@ import moment from 'moment';
 import { DeleteModal } from '../../common/helpers/delete_modal';
 import { AppAnalyticsComponentDeps } from '../home';
 import { getCustomModal } from '../../custom_panels/helpers/modal_containers';
-import { pageStyles, UI_DATE_FORMAT } from '../../../../common/constants/shared';
+import {
+  observabilityID,
+  observabilityTitle,
+  pageStyles,
+  UI_DATE_FORMAT,
+} from '../../../../common/constants/shared';
 import { ApplicationType, AvailabilityType } from '../../../../common/types/application_analytics';
 
 interface AppTableProps extends AppAnalyticsComponentDeps {
@@ -72,8 +77,8 @@ export function AppTable(props: AppTableProps) {
     chrome.setBreadcrumbs([
       ...parentBreadcrumbs,
       {
-        text: 'Application analytics',
-        href: '#/application_analytics',
+        text: 'Applications',
+        href: '#/',
       },
     ]);
     clear();
@@ -216,10 +221,7 @@ export function AppTable(props: AppTableProps) {
       sortable: true,
       truncateText: true,
       render: (value, record) => (
-        <EuiLink
-          data-test-subj={`${record.name}ApplicationLink`}
-          href={`#/application_analytics/${record.id}`}
-        >
+        <EuiLink data-test-subj={`${record.name}ApplicationLink`} href={`#/${record.id}`}>
           {_.truncate(record.name, { length: 100 })}
         </EuiLink>
       ),
@@ -284,7 +286,7 @@ export function AppTable(props: AppTableProps) {
                     </EuiPopover>
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiButton fill href="#/application_analytics/create">
+                    <EuiButton fill href="#/create">
                       {createButtonText}
                     </EuiButton>
                   </EuiFlexItem>
@@ -324,7 +326,7 @@ export function AppTable(props: AppTableProps) {
                 <EuiSpacer size="m" />
                 <EuiFlexGroup justifyContent="center">
                   <EuiFlexItem grow={false}>
-                    <EuiButton fullWidth={false} href={`#/application_analytics/create`}>
+                    <EuiButton fullWidth={false} href={`#/create`}>
                       {createButtonText}
                     </EuiButton>
                   </EuiFlexItem>
diff --git a/public/components/application_analytics/components/application.tsx b/public/components/application_analytics/components/application.tsx
index b758942583..fa362460f1 100644
--- a/public/components/application_analytics/components/application.tsx
+++ b/public/components/application_analytics/components/application.tsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 /* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable no-console */
 
 import {
   EuiHorizontalRule,
@@ -54,7 +53,7 @@ import {
 } from '../../../../common/constants/application_analytics';
 import { TAB_EVENT_ID, TAB_CHART_ID, NEW_TAB } from '../../../../common/constants/explorer';
 import { IQueryTab } from '../../../../common/types/explorer';
-import { NotificationsStart } from '../../../../../../src/core/public';
+import { NotificationsStart, Toast } from '../../../../../../src/core/public';
 import { AppAnalyticsComponentDeps } from '../home';
 import { CustomPanelView } from '../../../../public/components/custom_panels/custom_panel_view';
 import {
@@ -67,6 +66,7 @@ import { SpanDetailFlyout } from '../../../../public/components/trace_analytics/
 import { TraceDetailFlyout } from './flyout_components/trace_detail_flyout';
 import { fetchAppById, initializeTabData } from '../helpers/utils';
 import { QueryManager } from '../../../../common/query_manager/ppl_query_manager';
+import { observabilityApplicationsID } from '../../../../common/constants/shared';
 
 const searchBarConfigs = {
   [TAB_EVENT_ID]: {
@@ -91,6 +91,7 @@ interface AppDetailProps extends AppAnalyticsComponentDeps {
   updateApp: (appId: string, updateAppData: Partial<ApplicationRequestType>, type: string) => void;
   setToasts: (title: string, color?: string, text?: ReactChild) => void;
   callback: (childfunction: () => void) => void;
+  toasts: Toast[];
 }
 
 export function Application(props: AppDetailProps) {
@@ -110,6 +111,7 @@ export function Application(props: AppDetailProps) {
     updateApp,
     setAppConfigs,
     setToasts,
+    toasts,
     setFilters,
     callback,
     queryManager,
@@ -218,12 +220,12 @@ export function Application(props: AppDetailProps) {
     chrome.setBreadcrumbs([
       ...parentBreadcrumbs,
       {
-        text: 'Application analytics',
-        href: '#/application_analytics',
+        text: 'Applications',
+        href: '#/',
       },
       {
         text: application.name,
-        href: `${last(parentBreadcrumbs)!.href}application_analytics/${appId}`,
+        href: `${observabilityApplicationsID}/${appId}`,
       },
     ]);
     setStartTimeForApp(sessionStorage.getItem(`${application.name}StartTime`) || 'now-24h');
@@ -273,12 +275,12 @@ export function Application(props: AppDetailProps) {
 
   const childBreadcrumbs = [
     {
-      text: 'Application analytics',
-      href: '#/application_analytics',
+      text: 'Applications',
+      href: '#/',
     },
     {
       text: `${application.name}`,
-      href: `#/application_analytics/${appId}`,
+      href: `#/${appId}`,
     },
   ];
 
@@ -293,7 +295,9 @@ export function Application(props: AppDetailProps) {
           endTime={appEndTime}
           setStartTime={setStartTimeForApp}
           setEndTime={setEndTimeForApp}
+          parentBreadcrumb={parentBreadcrumbs[0]}
           childBreadcrumbs={childBreadcrumbs}
+          toasts={toasts}
         />
       </>
     );
@@ -311,6 +315,7 @@ export function Application(props: AppDetailProps) {
           page="app"
           nameColumnAction={nameColumnAction}
           traceColumnAction={traceColumnAction}
+          parentBreadcrumb={parentBreadcrumbs[0]}
           childBreadcrumbs={childBreadcrumbs}
           startTime={appStartTime}
           endTime={appEndTime}
@@ -334,6 +339,7 @@ export function Application(props: AppDetailProps) {
         <TracesContent
           {...props}
           page="app"
+          parentBreadcrumb={parentBreadcrumbs[0]}
           childBreadcrumbs={childBreadcrumbs}
           traceIdColumnAction={traceIdColumnAction}
           startTime={appStartTime}
@@ -351,7 +357,7 @@ export function Application(props: AppDetailProps) {
             openFlyout={setSpanFlyoutId}
             DSL={spanDSL}
             setTotal={setTotalSpans}
-            mode='data_prepper'
+            mode="data_prepper"
           />
         </EuiPanel>
       </>
diff --git a/public/components/application_analytics/components/configuration.tsx b/public/components/application_analytics/components/configuration.tsx
index 8cb8080ffc..d9f82fbe2a 100644
--- a/public/components/application_analytics/components/configuration.tsx
+++ b/public/components/application_analytics/components/configuration.tsx
@@ -72,9 +72,7 @@ export const Configuration = (props: ConfigProps) => {
                       fill
                       data-test-subj="editApplicationButton"
                       onClick={() => {
-                        window.location.assign(
-                          `${last(parentBreadcrumbs)!.href}application_analytics/edit/${appId}`
-                        );
+                        window.location.assign(`#/edit/${appId}`);
                       }}
                     >
                       Edit
diff --git a/public/components/application_analytics/components/create.tsx b/public/components/application_analytics/components/create.tsx
index 084d53b17d..8bedc3a82b 100644
--- a/public/components/application_analytics/components/create.tsx
+++ b/public/components/application_analytics/components/create.tsx
@@ -38,6 +38,11 @@ import {
   OptionType,
 } from '../../../../common/types/application_analytics';
 import { fetchAppById } from '../helpers/utils';
+import {
+  observabilityApplicationsID,
+  observabilityID,
+  observabilityTitle,
+} from '../../../../common/constants/shared';
 
 interface CreateAppProps extends AppAnalyticsComponentDeps {
   dslService: DSLService;
@@ -90,12 +95,12 @@ export const CreateApp = (props: CreateAppProps) => {
     chrome.setBreadcrumbs([
       ...parentBreadcrumbs,
       {
-        text: 'Application analytics',
-        href: '#/application_analytics',
+        text: 'Applications',
+        href: '#/',
       },
       {
         text: editMode ? 'Edit' : 'Create',
-        href: `#/application_analytics/${editMode ? 'edit' : 'create'}`,
+        href: `#/${editMode ? 'edit' : 'create'}`,
       },
     ]);
   }, []);
@@ -172,7 +177,7 @@ export const CreateApp = (props: CreateAppProps) => {
 
   const onCancel = () => {
     clearStorage();
-    window.location.assign(`${last(parentBreadcrumbs)!.href}application_analytics`);
+    window.location.assign(`${observabilityApplicationsID}#/`);
   };
 
   return (
diff --git a/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx b/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx
index f17d46e1df..c21522217c 100644
--- a/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx
+++ b/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx
@@ -19,10 +19,7 @@ import {
   handleServiceMapRequest,
   handleServiceViewRequest,
 } from '../../../../../public/components/trace_analytics/requests/services_request_handler';
-import {
-  filtersToDsl,
-  processTimeStamp,
-} from '../../../../../public/components/trace_analytics/components/common/helper_functions';
+import { filtersToDsl, processTimeStamp } from '../../../../../public/components/trace_analytics/components/common/helper_functions';
 import { ServiceMap } from '../../../../../public/components/trace_analytics/components/services';
 import { ServiceObject } from '../../../../../public/components/trace_analytics/components/common/plots/service_map';
 import { SpanDetailTable } from '../../../../../public/components/trace_analytics/components/traces/span_detail_table';
diff --git a/public/components/application_analytics/home.tsx b/public/components/application_analytics/home.tsx
index 89dec51cfa..1db65a8ac7 100644
--- a/public/components/application_analytics/home.tsx
+++ b/public/components/application_analytics/home.tsx
@@ -3,10 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 /* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable no-console */
 
 import React, { ReactChild, useEffect, useState } from 'react';
-import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import DSLService from 'public/services/requests/dsl';
 import PPLService from 'public/services/requests/ppl';
 import SavedObjects from 'public/services/saved_objects/event_analytics/saved_objects';
@@ -21,8 +20,7 @@ import { CreateApp } from './components/create';
 import { TraceAnalyticsComponentDeps, TraceAnalyticsCoreDeps } from '../trace_analytics/home';
 import { FilterType } from '../trace_analytics/components/common/filters/filters';
 import { handleDataPrepperIndicesExistRequest } from '../trace_analytics/requests/request_handler';
-import { ObservabilitySideBar } from '../common/side_nav';
-import { NotificationsStart } from '../../../../../src/core/public';
+import { ChromeBreadcrumb, NotificationsStart } from '../../../../../src/core/public';
 import { APP_ANALYTICS_API_PREFIX } from '../../../common/constants/application_analytics';
 import {
   ApplicationRequestType,
@@ -39,6 +37,7 @@ import {
   CUSTOM_PANELS_DOCUMENTATION_URL,
 } from '../../../common/constants/custom_panels';
 import { QueryManager } from '../../../common/query_manager/ppl_query_manager';
+import { observabilityApplicationsID } from '../../../common/constants/shared';
 
 export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
 
@@ -49,6 +48,7 @@ interface HomeProps extends RouteComponentProps, AppAnalyticsCoreDeps {
   timestampUtils: TimestampUtils;
   notifications: NotificationsStart;
   queryManager: QueryManager;
+  parentBreadcrumbs: ChromeBreadcrumb[];
 }
 
 export interface AppAnalyticsComponentDeps extends TraceAnalyticsComponentDeps {
@@ -59,6 +59,7 @@ export interface AppAnalyticsComponentDeps extends TraceAnalyticsComponentDeps {
   setQueryWithStorage: (newQuery: string) => void;
   setFiltersWithStorage: (newFilters: FilterType[]) => void;
   setAppConfigs: (newAppConfigs: FilterType[]) => void;
+  parentBreadcrumbs: ChromeBreadcrumb[];
 }
 
 export const Home = (props: HomeProps) => {
@@ -138,7 +139,7 @@ export const Home = (props: HomeProps) => {
     endTime,
     setEndTime,
     mode: 'data_prepper',
-    dataPrepperIndicesExist:  indicesExist 
+    dataPrepperIndicesExist: indicesExist,
   };
 
   const setToast = (title: string, color = 'success', text?: ReactChild) => {
@@ -154,7 +155,7 @@ export const Home = (props: HomeProps) => {
   };
 
   const moveToApp = (id: string, type: string) => {
-    window.location.assign(`${last(parentBreadcrumbs)!.href}application_analytics/${id}`);
+    window.location.assign(`${observabilityApplicationsID}#/${id}`);
     if (type === 'createSetAvailability') {
       setTriggerSwitchToEvent(2);
     }
@@ -173,7 +174,7 @@ export const Home = (props: HomeProps) => {
       })
       .catch((err) => {
         setToast(
-          'Please ask your administrator to enable Operational Panels for you.',
+          'Please ask your administrator to enable Observability Dashboards for you.',
           'danger',
           <EuiLink href={CUSTOM_PANELS_DOCUMENTATION_URL} target="_blank">
             Documentation
@@ -187,7 +188,7 @@ export const Home = (props: HomeProps) => {
     const concatList = [appPanelId].toString();
     return http.delete(`${CUSTOM_PANELS_API_PREFIX}/panelList/` + concatList).catch((err) => {
       setToast(
-        'Error occurred while deleting Operational Panels, please make sure you have the correct permission.',
+        'Error occurred while deleting Observability Dashboards, please make sure you have the correct permission.',
         'danger'
       );
       console.error(err.body.message);
@@ -389,12 +390,12 @@ export const Home = (props: HomeProps) => {
         }}
         toastLifeTimeMs={6000}
       />
-      <Switch>
-        <Route
-          exact
-          path={['/', '/application_analytics']}
-          render={() => (
-            <ObservabilitySideBar>
+      <HashRouter>
+        <Switch>
+          <Route
+            exact
+            path={'/'}
+            render={() => (
               <AppTable
                 loading={false}
                 applications={applicationList}
@@ -405,46 +406,47 @@ export const Home = (props: HomeProps) => {
                 moveToApp={moveToApp}
                 {...commonProps}
               />
-            </ObservabilitySideBar>
-          )}
-        />
-        <Route
-          exact
-          path={['/application_analytics/create', '/application_analytics/edit/:id+']}
-          render={(routerProps) => (
-            <CreateApp
-              dslService={dslService}
-              pplService={pplService}
-              createApp={createApp}
-              updateApp={updateApp}
-              setToasts={setToast}
-              clearStorage={clearStorage}
-              existingAppId={decodeURIComponent(routerProps.match.params.id) || ''}
-              {...commonProps}
-            />
-          )}
-        />
-        <Route
-          exact
-          path={'/application_analytics/:id+'}
-          render={(routerProps) => (
-            <Application
-              disabled={false}
-              appId={decodeURIComponent(routerProps.match.params.id)}
-              pplService={pplService}
-              dslService={dslService}
-              savedObjects={savedObjects}
-              timestampUtils={timestampUtils}
-              notifications={notifications}
-              setToasts={setToast}
-              updateApp={updateApp}
-              callback={callback}
-              queryManager={queryManager}
-              {...commonProps}
-            />
-          )}
-        />
-      </Switch>
+            )}
+          />
+          <Route
+            exact
+            path={['/create', '/edit/:id+']}
+            render={(routerProps) => (
+              <CreateApp
+                dslService={dslService}
+                pplService={pplService}
+                createApp={createApp}
+                updateApp={updateApp}
+                setToasts={setToast}
+                clearStorage={clearStorage}
+                existingAppId={decodeURIComponent(routerProps.match.params.id) || ''}
+                {...commonProps}
+              />
+            )}
+          />
+          <Route
+            exact
+            path={'/:id+'}
+            render={(routerProps) => (
+              <Application
+                disabled={false}
+                appId={decodeURIComponent(routerProps.match.params.id)}
+                pplService={pplService}
+                dslService={dslService}
+                savedObjects={savedObjects}
+                timestampUtils={timestampUtils}
+                notifications={notifications}
+                toasts={toasts}
+                setToasts={setToast}
+                updateApp={updateApp}
+                callback={callback}
+                queryManager={queryManager}
+                {...commonProps}
+              />
+            )}
+          />
+        </Switch>
+      </HashRouter>
     </div>
   );
 };
diff --git a/public/components/common/side_nav.tsx b/public/components/common/side_nav.tsx
deleted file mode 100644
index cf6f467146..0000000000
--- a/public/components/common/side_nav.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {
-  EuiButton,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPage,
-  EuiPageBody,
-  EuiPageSideBar,
-  EuiSideNav,
-  EuiSideNavItemType,
-  EuiSwitch,
-} from '@elastic/eui';
-import React from 'react';
-import { useState } from 'react';
-import { toMountPoint } from '../../../../../src/plugins/opensearch_dashboards_react/public';
-import { uiSettingsService } from '../../../common/utils';
-
-export function ObservabilitySideBar(props: { children: React.ReactNode }) {
-  // set items.isSelected based on location.hash passed in
-  // tries to find an item where href is a prefix of the hash
-  // if none will try to find an item where the hash is a prefix of href
-  function setIsSelected(
-    items: EuiSideNavItemType<React.ReactNode>[],
-    hash: string,
-    initial = true,
-    reverse = false
-  ): boolean {
-    // Default page is Events Analytics
-    // But it is kept as second option in side nav
-    if (hash === '#/') {
-      items[0].items[2].isSelected = true;
-      return true;
-    }
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      if (item.href && ((reverse && item.href.startsWith(hash)) || hash.startsWith(item.href))) {
-        item.isSelected = true;
-        return true;
-      }
-      if (item.items?.length && setIsSelected(item.items, hash, false, reverse)) return true;
-    }
-    return initial && setIsSelected(items, hash, false, !reverse);
-  }
-
-  const items = [
-    {
-      name: 'Observability',
-      id: 0,
-      items: [
-        {
-          name: 'Application analytics',
-          id: 1,
-          href: '#/application_analytics',
-        },
-        {
-          name: 'Trace analytics',
-          id: 2,
-          href: '#/trace_analytics/home',
-          items: [
-            {
-              name: 'Traces',
-              id: 2.1,
-              href: '#/trace_analytics/traces',
-            },
-            {
-              name: 'Services',
-              id: 2.2,
-              href: '#/trace_analytics/services',
-            },
-          ],
-        },
-        {
-          name: 'Event analytics',
-          id: 3,
-          href: '#/event_analytics',
-        },
-        {
-          name: 'Metrics analytics',
-          id: 4,
-          href: '#/metrics_analytics/',
-        },
-        {
-          name: 'Operational panels',
-          id: 5,
-          href: '#/operational_panels/',
-        },
-        {
-          name: 'Notebooks',
-          id: 6,
-          href: '#/notebooks',
-        },
-      ],
-    },
-  ];
-  setIsSelected(items, location.hash);
-  const [isDarkMode, setIsDarkMode] = useState(uiSettingsService.get('theme:darkMode'));
-
-  return (
-    <EuiPage>
-      <EuiPageSideBar>
-        <EuiFlexGroup
-          direction="column"
-          justifyContent="spaceBetween"
-          style={{ height: '100%' }}
-          gutterSize="none"
-        >
-          <EuiFlexItem>
-            <EuiSideNav items={items} />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false} style={{ marginBottom: 20 }}>
-            <EuiSwitch
-              label="Dark mode"
-              checked={isDarkMode}
-              onChange={() => {
-                uiSettingsService.set('theme:darkMode', !isDarkMode).then((resp) => {
-                  setIsDarkMode(!isDarkMode);
-                  uiSettingsService.addToast({
-                    title: 'Theme setting changes require you to reload the page to take effect.',
-                    text: toMountPoint(
-                      <>
-                        <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
-                          <EuiFlexItem grow={false}>
-                            <EuiButton size="s" onClick={() => window.location.reload()}>
-                              Reload page
-                            </EuiButton>
-                          </EuiFlexItem>
-                        </EuiFlexGroup>
-                      </>
-                    ),
-                    color: 'success',
-                  });
-                });
-              }}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPageSideBar>
-      <EuiPageBody>{props.children}</EuiPageBody>
-    </EuiPage>
-  );
-}
diff --git a/public/components/common/toast/index.tsx b/public/components/common/toast/index.tsx
new file mode 100644
index 0000000000..6eaef004ce
--- /dev/null
+++ b/public/components/common/toast/index.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ToastInputFields } from '../../../../../../src/core/public';
+import { coreRefs } from '../../../framework/core_refs';
+
+type Color = 'success' | 'primary' | 'warning' | 'danger' | undefined;
+
+export const useToast = () => {
+  const toasts = coreRefs.toasts!;
+
+  const setToast = (title: string, color: Color = 'success', text?: string) => {
+    const newToast: ToastInputFields = {
+      id: new Date().toISOString(),
+      title,
+      text,
+    };
+    switch (color) {
+      case 'danger': {
+        toasts.addDanger(newToast);
+        break;
+      }
+      case 'warning': {
+        toasts.addWarning(newToast);
+        break;
+      }
+      default: {
+        toasts.addSuccess(newToast);
+        break;
+      }
+    }
+  };
+
+  return { setToast };
+};
diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
index 337b013063..5ca0ba1254 100644
--- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
+++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
@@ -1,2861 +1,1225 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Panels Table Component renders empty panel table container 1`] = `
-<Component
-  addSamplePanels={[MockFunction]}
-  cloneCustomPanel={[MockFunction]}
-  createCustomPanel={[MockFunction]}
-  customPanels={Array []}
-  deleteCustomPanelList={[MockFunction]}
-  fetchCustomPanels={
-    [MockFunction] {
-      "calls": Array [
-        Array [],
-      ],
-      "results": Array [
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <Component
+    addSamplePanels={[MockFunction]}
+    cloneCustomPanel={[MockFunction]}
+    createCustomPanel={[MockFunction]}
+    customPanels={Array []}
+    deleteCustomPanelList={[MockFunction]}
+    fetchCustomPanels={[MockFunction]}
+    loading={false}
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/operational_panels/",
+          "text": "Observability Dashboards",
+        },
         Object {
-          "type": "return",
-          "value": undefined,
+          "href": "observability#/",
+          "text": "Observability",
         },
-      ],
+      ]
     }
-  }
-  loading={false}
-  parentBreadcrumbs={
-    Array [
-      Object {
-        "href": "#/operational_panels/",
-        "text": "Operational panels",
-      },
-      Object {
-        "href": "observability#/",
-        "text": "Observability",
-      },
-    ]
-  }
-  renameCustomPanel={[MockFunction]}
-  setBreadcrumbs={
-    [MockFunction] {
-      "calls": Array [
-        Array [
+    renameCustomPanel={[MockFunction]}
+    setBreadcrumbs={
+      [MockFunction] {
+        "calls": Array [
           Array [
-            Object {
-              "href": "#/operational_panels/",
-              "text": "Operational panels",
-            },
-            Object {
-              "href": "observability#/",
-              "text": "Observability",
-            },
+            Array [
+              Object {
+                "href": "#/operational_panels/",
+                "text": "Observability Dashboards",
+              },
+              Object {
+                "href": "observability#/",
+                "text": "Observability",
+              },
+            ],
           ],
         ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "float": "left",
-        "maxWidth": "1130px",
-        "width": "100%",
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
       }
     }
   >
-    <EuiPage>
-      <div
-        className="euiPage euiPage--paddingMedium euiPage--grow"
-      >
-        <EuiPageBody
-          component="div"
+    <div
+      style={
+        Object {
+          "float": "left",
+          "maxWidth": "1130px",
+          "width": "100%",
+        }
+      }
+    >
+      <EuiPage>
+        <div
+          className="euiPage euiPage--paddingMedium euiPage--grow"
         >
-          <div
-            className="euiPageBody euiPageBody--borderRadiusNone"
+          <EuiPageBody
+            component="div"
           >
-            <EuiPageHeader>
-              <header
-                className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
-              >
-                <EuiPageHeaderSection>
-                  <div
-                    className="euiPageHeaderSection"
-                  >
-                    <EuiTitle
-                      size="l"
+            <div
+              className="euiPageBody euiPageBody--borderRadiusNone"
+            >
+              <EuiPageHeader>
+                <header
+                  className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+                >
+                  <EuiPageHeaderSection>
+                    <div
+                      className="euiPageHeaderSection"
                     >
-                      <h1
-                        className="euiTitle euiTitle--large"
+                      <EuiTitle
+                        size="l"
                       >
-                        Operational panels
-                      </h1>
-                    </EuiTitle>
-                  </div>
-                </EuiPageHeaderSection>
-              </header>
-            </EuiPageHeader>
-            <EuiPageContent
-              id="customPanelArea"
-            >
-              <EuiPanel
-                className="euiPageContent"
+                        <h1
+                          className="euiTitle euiTitle--large"
+                        >
+                          Observability dashboards
+                        </h1>
+                      </EuiTitle>
+                    </div>
+                  </EuiPageHeaderSection>
+                </header>
+              </EuiPageHeader>
+              <EuiPageContent
                 id="customPanelArea"
-                paddingSize="l"
-                role="main"
               >
-                <div
-                  className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+                <EuiPanel
+                  className="euiPageContent"
                   id="customPanelArea"
+                  paddingSize="l"
                   role="main"
                 >
-                  <EuiPageContentHeader>
-                    <div
-                      className="euiPageContentHeader euiPageContentHeader--responsive"
-                    >
-                      <EuiPageContentHeaderSection>
-                        <div
-                          className="euiPageContentHeaderSection"
-                        >
-                          <EuiTitle
-                            size="s"
+                  <div
+                    className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+                    id="customPanelArea"
+                    role="main"
+                  >
+                    <EuiPageContentHeader>
+                      <div
+                        className="euiPageContentHeader euiPageContentHeader--responsive"
+                      >
+                        <EuiPageContentHeaderSection>
+                          <div
+                            className="euiPageContentHeaderSection"
                           >
-                            <h3
-                              className="euiTitle euiTitle--small"
+                            <EuiTitle
+                              size="s"
                             >
-                              Panels
-                              <span
-                                className="panel-header-count"
+                              <h3
+                                className="euiTitle euiTitle--small"
                               >
-                                 (
-                                0
-                                )
-                              </span>
-                            </h3>
-                          </EuiTitle>
-                          <EuiSpacer
-                            size="s"
-                          >
-                            <div
-                              className="euiSpacer euiSpacer--s"
-                            />
-                          </EuiSpacer>
-                          <EuiText
-                            color="subdued"
-                            size="s"
-                          >
-                            <div
-                              className="euiText euiText--small"
+                                Dashboard
+                                <span
+                                  className="panel-header-count"
+                                >
+                                   (
+                                  0
+                                  )
+                                </span>
+                              </h3>
+                            </EuiTitle>
+                            <EuiSpacer
+                              size="s"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--s"
+                              />
+                            </EuiSpacer>
+                            <EuiText
+                              color="subdued"
+                              size="s"
                             >
-                              <EuiTextColor
-                                color="subdued"
-                                component="div"
+                              <div
+                                className="euiText euiText--small"
                               >
-                                <div
-                                  className="euiTextColor euiTextColor--subdued"
+                                <EuiTextColor
+                                  color="subdued"
+                                  component="div"
                                 >
-                                  Use Operational panels to create and view different visualizations on ingested observability data, using PPL (Piped Processing Language) queries.
-                                   
-                                  <EuiLink
-                                    external={true}
-                                    href="https://opensearch.org/docs/latest/observability-plugin/operational-panels/"
-                                    target="blank"
+                                  <div
+                                    className="euiTextColor euiTextColor--subdued"
                                   >
-                                    <a
-                                      className="euiLink euiLink--primary"
+                                    Use Observability Dashboard to create and view different visualizations on ingested observability data, using PPL (Piped Processing Language) queries.
+                                     
+                                    <EuiLink
+                                      external={true}
                                       href="https://opensearch.org/docs/latest/observability-plugin/operational-panels/"
-                                      rel="noreferrer"
                                       target="blank"
                                     >
-                                      Learn more
-                                      <EuiIcon
-                                        aria-label="External link"
-                                        className="euiLink__externalIcon"
-                                        size="s"
-                                        type="popout"
+                                      <a
+                                        className="euiLink euiLink--primary"
+                                        href="https://opensearch.org/docs/latest/observability-plugin/operational-panels/"
+                                        rel="noreferrer"
+                                        target="blank"
                                       >
-                                        <EuiIconEmpty
-                                          aria-hidden={true}
+                                        Learn more
+                                        <EuiIcon
                                           aria-label="External link"
-                                          className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
-                                          focusable="false"
-                                          role="img"
-                                          style={null}
+                                          className="euiLink__externalIcon"
+                                          size="s"
+                                          type="popout"
                                         >
-                                          <svg
+                                          <EuiIconEmpty
                                             aria-hidden={true}
                                             aria-label="External link"
                                             className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
                                             focusable="false"
-                                            height={16}
                                             role="img"
                                             style={null}
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          />
-                                        </EuiIconEmpty>
-                                      </EuiIcon>
-                                    </a>
-                                  </EuiLink>
-                                </div>
-                              </EuiTextColor>
-                            </div>
-                          </EuiText>
-                        </div>
-                      </EuiPageContentHeaderSection>
-                      <EuiPageContentHeaderSection>
-                        <div
-                          className="euiPageContentHeaderSection"
-                        >
-                          <EuiFlexGroup
-                            gutterSize="s"
+                                          >
+                                            <svg
+                                              aria-hidden={true}
+                                              aria-label="External link"
+                                              className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                                              focusable="false"
+                                              height={16}
+                                              role="img"
+                                              style={null}
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            />
+                                          </EuiIconEmpty>
+                                        </EuiIcon>
+                                      </a>
+                                    </EuiLink>
+                                  </div>
+                                </EuiTextColor>
+                              </div>
+                            </EuiText>
+                          </div>
+                        </EuiPageContentHeaderSection>
+                        <EuiPageContentHeaderSection>
+                          <div
+                            className="euiPageContentHeaderSection"
                           >
-                            <div
-                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                            <EuiFlexGroup
+                              gutterSize="s"
                             >
-                              <EuiFlexItem>
-                                <div
-                                  className="euiFlexItem"
-                                >
-                                  <EuiPopover
-                                    anchorPosition="downCenter"
-                                    button={
-                                      <EuiButton
-                                        data-test-subj="operationalPanelsActionsButton"
-                                        iconSide="right"
-                                        iconType="arrowDown"
-                                        onClick={[Function]}
-                                      >
-                                        Actions
-                                      </EuiButton>
-                                    }
-                                    closePopover={[Function]}
-                                    display="inlineBlock"
-                                    hasArrow={true}
-                                    isOpen={false}
-                                    ownFocus={true}
-                                    panelPaddingSize="none"
+                              <div
+                                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              >
+                                <EuiFlexItem>
+                                  <div
+                                    className="euiFlexItem"
                                   >
-                                    <div
-                                      className="euiPopover euiPopover--anchorDownCenter"
-                                    >
-                                      <div
-                                        className="euiPopover__anchor"
-                                      >
+                                    <EuiPopover
+                                      anchorPosition="downCenter"
+                                      button={
                                         <EuiButton
                                           data-test-subj="operationalPanelsActionsButton"
                                           iconSide="right"
                                           iconType="arrowDown"
                                           onClick={[Function]}
                                         >
-                                          <EuiButtonDisplay
-                                            baseClassName="euiButton"
+                                          Actions
+                                        </EuiButton>
+                                      }
+                                      closePopover={[Function]}
+                                      display="inlineBlock"
+                                      hasArrow={true}
+                                      isOpen={false}
+                                      ownFocus={true}
+                                      panelPaddingSize="none"
+                                    >
+                                      <div
+                                        className="euiPopover euiPopover--anchorDownCenter"
+                                      >
+                                        <div
+                                          className="euiPopover__anchor"
+                                        >
+                                          <EuiButton
                                             data-test-subj="operationalPanelsActionsButton"
-                                            disabled={false}
-                                            element="button"
                                             iconSide="right"
                                             iconType="arrowDown"
-                                            isDisabled={false}
                                             onClick={[Function]}
-                                            type="button"
                                           >
-                                            <button
-                                              className="euiButton euiButton--primary"
+                                            <EuiButtonDisplay
+                                              baseClassName="euiButton"
                                               data-test-subj="operationalPanelsActionsButton"
                                               disabled={false}
+                                              element="button"
+                                              iconSide="right"
+                                              iconType="arrowDown"
+                                              isDisabled={false}
                                               onClick={[Function]}
-                                              style={
-                                                Object {
-                                                  "minWidth": undefined,
-                                                }
-                                              }
                                               type="button"
                                             >
-                                              <EuiButtonContent
-                                                className="euiButton__content"
-                                                iconSide="right"
-                                                iconType="arrowDown"
-                                                textProps={
+                                              <button
+                                                className="euiButton euiButton--primary"
+                                                data-test-subj="operationalPanelsActionsButton"
+                                                disabled={false}
+                                                onClick={[Function]}
+                                                style={
                                                   Object {
-                                                    "className": "euiButton__text",
+                                                    "minWidth": undefined,
                                                   }
                                                 }
+                                                type="button"
                                               >
-                                                <span
-                                                  className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                                <EuiButtonContent
+                                                  className="euiButton__content"
+                                                  iconSide="right"
+                                                  iconType="arrowDown"
+                                                  textProps={
+                                                    Object {
+                                                      "className": "euiButton__text",
+                                                    }
+                                                  }
                                                 >
-                                                  <EuiIcon
-                                                    className="euiButtonContent__icon"
-                                                    color="inherit"
-                                                    size="m"
-                                                    type="arrowDown"
+                                                  <span
+                                                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                                   >
-                                                    <EuiIconEmpty
-                                                      aria-hidden={true}
-                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                                      focusable="false"
-                                                      role="img"
-                                                      style={null}
+                                                    <EuiIcon
+                                                      className="euiButtonContent__icon"
+                                                      color="inherit"
+                                                      size="m"
+                                                      type="arrowDown"
                                                     >
-                                                      <svg
+                                                      <EuiIconEmpty
                                                         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"
-                                                  >
-                                                    Actions
+                                                      >
+                                                        <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"
+                                                    >
+                                                      Actions
+                                                    </span>
                                                   </span>
-                                                </span>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonDisplay>
-                                        </EuiButton>
+                                                </EuiButtonContent>
+                                              </button>
+                                            </EuiButtonDisplay>
+                                          </EuiButton>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </EuiPopover>
-                                </div>
-                              </EuiFlexItem>
-                              <EuiFlexItem>
-                                <div
-                                  className="euiFlexItem"
-                                >
-                                  <EuiButton
-                                    data-test-subj="customPanels__createNewPanels"
-                                    fill={true}
-                                    href="#/operational_panels/create"
+                                    </EuiPopover>
+                                  </div>
+                                </EuiFlexItem>
+                                <EuiFlexItem>
+                                  <div
+                                    className="euiFlexItem"
                                   >
-                                    <EuiButtonDisplay
-                                      baseClassName="euiButton"
+                                    <EuiButton
                                       data-test-subj="customPanels__createNewPanels"
-                                      element="a"
                                       fill={true}
-                                      href="#/operational_panels/create"
-                                      isDisabled={false}
-                                      rel="noreferrer"
+                                      href="#/create"
                                     >
-                                      <a
-                                        className="euiButton euiButton--primary euiButton--fill"
+                                      <EuiButtonDisplay
+                                        baseClassName="euiButton"
                                         data-test-subj="customPanels__createNewPanels"
-                                        disabled={false}
-                                        href="#/operational_panels/create"
+                                        element="a"
+                                        fill={true}
+                                        href="#/create"
+                                        isDisabled={false}
                                         rel="noreferrer"
-                                        style={
-                                          Object {
-                                            "minWidth": undefined,
-                                          }
-                                        }
                                       >
-                                        <EuiButtonContent
-                                          className="euiButton__content"
-                                          iconSide="left"
-                                          textProps={
+                                        <a
+                                          className="euiButton euiButton--primary euiButton--fill"
+                                          data-test-subj="customPanels__createNewPanels"
+                                          disabled={false}
+                                          href="#/create"
+                                          rel="noreferrer"
+                                          style={
                                             Object {
-                                              "className": "euiButton__text",
+                                              "minWidth": undefined,
                                             }
                                           }
                                         >
-                                          <span
-                                            className="euiButtonContent euiButton__content"
+                                          <EuiButtonContent
+                                            className="euiButton__content"
+                                            iconSide="left"
+                                            textProps={
+                                              Object {
+                                                "className": "euiButton__text",
+                                              }
+                                            }
                                           >
                                             <span
-                                              className="euiButton__text"
+                                              className="euiButtonContent euiButton__content"
                                             >
-                                              Create panel
+                                              <span
+                                                className="euiButton__text"
+                                              >
+                                                Create Dashboard
+                                              </span>
                                             </span>
-                                          </span>
-                                        </EuiButtonContent>
-                                      </a>
-                                    </EuiButtonDisplay>
-                                  </EuiButton>
-                                </div>
-                              </EuiFlexItem>
-                            </div>
-                          </EuiFlexGroup>
-                        </div>
-                      </EuiPageContentHeaderSection>
-                    </div>
-                  </EuiPageContentHeader>
-                  <EuiHorizontalRule
-                    margin="m"
-                  >
-                    <hr
-                      className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
-                    />
-                  </EuiHorizontalRule>
-                  <EuiSpacer
-                    size="xxl"
-                  >
-                    <div
-                      className="euiSpacer euiSpacer--xxl"
-                    />
-                  </EuiSpacer>
-                  <EuiText
-                    textAlign="center"
-                  >
-                    <div
-                      className="euiText euiText--medium"
+                                          </EuiButtonContent>
+                                        </a>
+                                      </EuiButtonDisplay>
+                                    </EuiButton>
+                                  </div>
+                                </EuiFlexItem>
+                              </div>
+                            </EuiFlexGroup>
+                          </div>
+                        </EuiPageContentHeaderSection>
+                      </div>
+                    </EuiPageContentHeader>
+                    <EuiHorizontalRule
+                      margin="m"
+                    >
+                      <hr
+                        className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                      />
+                    </EuiHorizontalRule>
+                    <EuiSpacer
+                      size="xxl"
                     >
-                      <EuiTextAlign
-                        textAlign="center"
+                      <div
+                        className="euiSpacer euiSpacer--xxl"
+                      />
+                    </EuiSpacer>
+                    <EuiText
+                      textAlign="center"
+                    >
+                      <div
+                        className="euiText euiText--medium"
                       >
-                        <div
-                          className="euiTextAlign euiTextAlign--center"
+                        <EuiTextAlign
+                          textAlign="center"
                         >
-                          <h2
-                            data-test-subj="customPanels__noPanelsHome"
-                          >
-                            No Operational Panels
-                          </h2>
-                          <EuiSpacer
-                            size="m"
+                          <div
+                            className="euiTextAlign euiTextAlign--center"
                           >
-                            <div
-                              className="euiSpacer euiSpacer--m"
-                            />
-                          </EuiSpacer>
-                          <EuiText
-                            color="subdued"
-                          >
-                            <div
-                              className="euiText euiText--medium"
+                            <h2
+                              data-test-subj="customPanels__noPanelsHome"
+                            >
+                              No Observability Dashboards
+                            </h2>
+                            <EuiSpacer
+                              size="m"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--m"
+                              />
+                            </EuiSpacer>
+                            <EuiText
+                              color="subdued"
                             >
-                              <EuiTextColor
-                                color="subdued"
-                                component="div"
+                              <div
+                                className="euiText euiText--medium"
                               >
-                                <div
-                                  className="euiTextColor euiTextColor--subdued"
+                                <EuiTextColor
+                                  color="subdued"
+                                  component="div"
                                 >
-                                  Use operational panels to dive deeper into observability
-                                  <br />
-                                  using PPL queries and insightful visualizations
-                                </div>
-                              </EuiTextColor>
-                            </div>
-                          </EuiText>
-                        </div>
-                      </EuiTextAlign>
-                    </div>
-                  </EuiText>
-                  <EuiSpacer
-                    size="m"
-                  >
-                    <div
-                      className="euiSpacer euiSpacer--m"
-                    />
-                  </EuiSpacer>
-                  <EuiFlexGroup
-                    justifyContent="center"
-                  >
-                    <div
-                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                  <div
+                                    className="euiTextColor euiTextColor--subdued"
+                                  >
+                                    Use Observability Dashboards to dive deeper into observability
+                                    <br />
+                                    using PPL queries and insightful visualizations
+                                  </div>
+                                </EuiTextColor>
+                              </div>
+                            </EuiText>
+                          </div>
+                        </EuiTextAlign>
+                      </div>
+                    </EuiText>
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiFlexGroup
+                      justifyContent="center"
                     >
-                      <EuiFlexItem
-                        grow={false}
+                      <div
+                        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
                       >
-                        <div
-                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        <EuiFlexItem
+                          grow={false}
                         >
-                          <EuiButton
-                            data-test-subj="customPanels__emptyCreateNewPanels"
-                            fullWidth={false}
-                            href="#/operational_panels/create"
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
                           >
-                            <EuiButtonDisplay
-                              baseClassName="euiButton"
+                            <EuiButton
                               data-test-subj="customPanels__emptyCreateNewPanels"
-                              element="a"
                               fullWidth={false}
-                              href="#/operational_panels/create"
-                              isDisabled={false}
-                              rel="noreferrer"
+                              href="#/create"
                             >
-                              <a
-                                className="euiButton euiButton--primary"
+                              <EuiButtonDisplay
+                                baseClassName="euiButton"
                                 data-test-subj="customPanels__emptyCreateNewPanels"
-                                disabled={false}
-                                href="#/operational_panels/create"
+                                element="a"
+                                fullWidth={false}
+                                href="#/create"
+                                isDisabled={false}
                                 rel="noreferrer"
-                                style={
-                                  Object {
-                                    "minWidth": undefined,
-                                  }
-                                }
                               >
-                                <EuiButtonContent
-                                  className="euiButton__content"
-                                  iconSide="left"
-                                  textProps={
+                                <a
+                                  className="euiButton euiButton--primary"
+                                  data-test-subj="customPanels__emptyCreateNewPanels"
+                                  disabled={false}
+                                  href="#/create"
+                                  rel="noreferrer"
+                                  style={
                                     Object {
-                                      "className": "euiButton__text",
+                                      "minWidth": undefined,
                                     }
                                   }
                                 >
-                                  <span
-                                    className="euiButtonContent euiButton__content"
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text",
+                                      }
+                                    }
                                   >
                                     <span
-                                      className="euiButton__text"
+                                      className="euiButtonContent euiButton__content"
                                     >
-                                      Create panel
+                                      <span
+                                        className="euiButton__text"
+                                      >
+                                        Create Dashboard
+                                      </span>
                                     </span>
-                                  </span>
-                                </EuiButtonContent>
-                              </a>
-                            </EuiButtonDisplay>
-                          </EuiButton>
-                        </div>
-                      </EuiFlexItem>
-                      <EuiFlexItem
-                        grow={false}
-                      >
-                        <div
-                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                                  </EuiButtonContent>
+                                </a>
+                              </EuiButtonDisplay>
+                            </EuiButton>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem
+                          grow={false}
                         >
-                          <EuiButton
-                            fullWidth={false}
-                            onClick={[Function]}
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
                           >
-                            <EuiButtonDisplay
-                              baseClassName="euiButton"
-                              disabled={false}
-                              element="button"
+                            <EuiButton
                               fullWidth={false}
-                              isDisabled={false}
                               onClick={[Function]}
-                              type="button"
                             >
-                              <button
-                                className="euiButton euiButton--primary"
+                              <EuiButtonDisplay
+                                baseClassName="euiButton"
                                 disabled={false}
+                                element="button"
+                                fullWidth={false}
+                                isDisabled={false}
                                 onClick={[Function]}
-                                style={
-                                  Object {
-                                    "minWidth": undefined,
-                                  }
-                                }
                                 type="button"
                               >
-                                <EuiButtonContent
-                                  className="euiButton__content"
-                                  iconSide="left"
-                                  textProps={
+                                <button
+                                  className="euiButton euiButton--primary"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  style={
                                     Object {
-                                      "className": "euiButton__text",
+                                      "minWidth": undefined,
                                     }
                                   }
+                                  type="button"
                                 >
-                                  <span
-                                    className="euiButtonContent euiButton__content"
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text",
+                                      }
+                                    }
                                   >
                                     <span
-                                      className="euiButton__text"
+                                      className="euiButtonContent euiButton__content"
                                     >
-                                      Add samples
+                                      <span
+                                        className="euiButton__text"
+                                      >
+                                        Add samples
+                                      </span>
                                     </span>
-                                  </span>
-                                </EuiButtonContent>
-                              </button>
-                            </EuiButtonDisplay>
-                          </EuiButton>
-                        </div>
-                      </EuiFlexItem>
-                    </div>
-                  </EuiFlexGroup>
-                  <EuiSpacer
-                    size="xxl"
-                  >
-                    <div
-                      className="euiSpacer euiSpacer--xxl"
-                    />
-                  </EuiSpacer>
-                </div>
-              </EuiPanel>
-            </EuiPageContent>
-          </div>
-        </EuiPageBody>
-      </div>
-    </EuiPage>
-  </div>
-</Component>
+                                  </EuiButtonContent>
+                                </button>
+                              </EuiButtonDisplay>
+                            </EuiButton>
+                          </div>
+                        </EuiFlexItem>
+                      </div>
+                    </EuiFlexGroup>
+                    <EuiSpacer
+                      size="xxl"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--xxl"
+                      />
+                    </EuiSpacer>
+                  </div>
+                </EuiPanel>
+              </EuiPageContent>
+            </div>
+          </EuiPageBody>
+        </div>
+      </EuiPage>
+    </div>
+  </Component>
+</Provider>
 `;
 
 exports[`Panels Table Component renders panel table container 1`] = `
-<Component
-  addSamplePanels={[MockFunction]}
-  cloneCustomPanel={[MockFunction]}
-  createCustomPanel={[MockFunction]}
-  customPanels={
-    Array [
-      Object {
-        "dateCreated": 1635974761179,
-        "dateModified": 1635974771296,
-        "id": "L8Sx53wBDp0rvEg3yoLb",
-        "name": "Test Panel 1",
-      },
-      Object {
-        "dateCreated": 1635545733895,
-        "dateModified": 1635979024055,
-        "id": "lsQfznwBDp0rvEg3W2wH",
-        "name": "Test Panel 2",
-      },
-      Object {
-        "dateCreated": 1635889452900,
-        "dateModified": 1635979888682,
-        "id": "b8Sc4nwBDp0rvEg3F3Fk",
-        "name": "Test Panel 3",
-      },
-      Object {
-        "dateCreated": 1635881186494,
-        "dateModified": 1636049456718,
-        "id": "P8Qd4nwBDp0rvEg39HG_",
-        "name": "Test Panel 4",
-      },
-    ]
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
   }
-  deleteCustomPanelList={[MockFunction]}
-  fetchCustomPanels={
-    [MockFunction] {
-      "calls": Array [
-        Array [],
-      ],
-      "results": Array [
+>
+  <Component
+    addSamplePanels={[MockFunction]}
+    cloneCustomPanel={[MockFunction]}
+    createCustomPanel={[MockFunction]}
+    customPanels={
+      Array [
         Object {
-          "type": "return",
-          "value": undefined,
+          "dateCreated": 1635974761179,
+          "dateModified": 1635974771296,
+          "id": "L8Sx53wBDp0rvEg3yoLb",
+          "name": "Test Panel 1",
         },
-      ],
+        Object {
+          "dateCreated": 1635545733895,
+          "dateModified": 1635979024055,
+          "id": "lsQfznwBDp0rvEg3W2wH",
+          "name": "Test Panel 2",
+        },
+        Object {
+          "dateCreated": 1635889452900,
+          "dateModified": 1635979888682,
+          "id": "b8Sc4nwBDp0rvEg3F3Fk",
+          "name": "Test Panel 3",
+        },
+        Object {
+          "dateCreated": 1635881186494,
+          "dateModified": 1636049456718,
+          "id": "P8Qd4nwBDp0rvEg39HG_",
+          "name": "Test Panel 4",
+        },
+      ]
     }
-  }
-  loading={false}
-  parentBreadcrumbs={
-    Array [
-      Object {
-        "href": "#/operational_panels/",
-        "text": "Operational panels",
-      },
-      Object {
-        "href": "observability#/",
-        "text": "Observability",
-      },
-    ]
-  }
-  renameCustomPanel={[MockFunction]}
-  setBreadcrumbs={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          Array [
-            Object {
-              "href": "#/operational_panels/",
-              "text": "Operational panels",
-            },
-            Object {
-              "href": "observability#/",
-              "text": "Observability",
-            },
-          ],
-        ],
-      ],
-      "results": Array [
+    deleteCustomPanelList={[MockFunction]}
+    fetchCustomPanels={[MockFunction]}
+    loading={false}
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/operational_panels/",
+          "text": "Observability Dashboards",
+        },
         Object {
-          "type": "return",
-          "value": undefined,
+          "href": "observability#/",
+          "text": "Observability",
         },
-      ],
+      ]
     }
-  }
->
-  <div
-    style={
-      Object {
-        "float": "left",
-        "maxWidth": "1130px",
-        "width": "100%",
+    renameCustomPanel={[MockFunction]}
+    setBreadcrumbs={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [
+              Object {
+                "href": "#/operational_panels/",
+                "text": "Observability Dashboards",
+              },
+              Object {
+                "href": "observability#/",
+                "text": "Observability",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
       }
     }
   >
-    <EuiPage>
-      <div
-        className="euiPage euiPage--paddingMedium euiPage--grow"
-      >
-        <EuiPageBody
-          component="div"
+    <div
+      style={
+        Object {
+          "float": "left",
+          "maxWidth": "1130px",
+          "width": "100%",
+        }
+      }
+    >
+      <EuiPage>
+        <div
+          className="euiPage euiPage--paddingMedium euiPage--grow"
         >
-          <div
-            className="euiPageBody euiPageBody--borderRadiusNone"
+          <EuiPageBody
+            component="div"
           >
-            <EuiPageHeader>
-              <header
-                className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
-              >
-                <EuiPageHeaderSection>
-                  <div
-                    className="euiPageHeaderSection"
-                  >
-                    <EuiTitle
-                      size="l"
+            <div
+              className="euiPageBody euiPageBody--borderRadiusNone"
+            >
+              <EuiPageHeader>
+                <header
+                  className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+                >
+                  <EuiPageHeaderSection>
+                    <div
+                      className="euiPageHeaderSection"
                     >
-                      <h1
-                        className="euiTitle euiTitle--large"
+                      <EuiTitle
+                        size="l"
                       >
-                        Operational panels
-                      </h1>
-                    </EuiTitle>
-                  </div>
-                </EuiPageHeaderSection>
-              </header>
-            </EuiPageHeader>
-            <EuiPageContent
-              id="customPanelArea"
-            >
-              <EuiPanel
-                className="euiPageContent"
+                        <h1
+                          className="euiTitle euiTitle--large"
+                        >
+                          Observability dashboards
+                        </h1>
+                      </EuiTitle>
+                    </div>
+                  </EuiPageHeaderSection>
+                </header>
+              </EuiPageHeader>
+              <EuiPageContent
                 id="customPanelArea"
-                paddingSize="l"
-                role="main"
               >
-                <div
-                  className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+                <EuiPanel
+                  className="euiPageContent"
                   id="customPanelArea"
+                  paddingSize="l"
                   role="main"
                 >
-                  <EuiPageContentHeader>
-                    <div
-                      className="euiPageContentHeader euiPageContentHeader--responsive"
-                    >
-                      <EuiPageContentHeaderSection>
-                        <div
-                          className="euiPageContentHeaderSection"
-                        >
-                          <EuiTitle
-                            size="s"
+                  <div
+                    className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+                    id="customPanelArea"
+                    role="main"
+                  >
+                    <EuiPageContentHeader>
+                      <div
+                        className="euiPageContentHeader euiPageContentHeader--responsive"
+                      >
+                        <EuiPageContentHeaderSection>
+                          <div
+                            className="euiPageContentHeaderSection"
                           >
-                            <h3
-                              className="euiTitle euiTitle--small"
+                            <EuiTitle
+                              size="s"
                             >
-                              Panels
-                              <span
-                                className="panel-header-count"
+                              <h3
+                                className="euiTitle euiTitle--small"
                               >
-                                 (
-                                4
-                                )
-                              </span>
-                            </h3>
-                          </EuiTitle>
-                          <EuiSpacer
-                            size="s"
-                          >
-                            <div
-                              className="euiSpacer euiSpacer--s"
-                            />
-                          </EuiSpacer>
-                          <EuiText
-                            color="subdued"
-                            size="s"
-                          >
-                            <div
-                              className="euiText euiText--small"
+                                Dashboard
+                                <span
+                                  className="panel-header-count"
+                                >
+                                   (
+                                  0
+                                  )
+                                </span>
+                              </h3>
+                            </EuiTitle>
+                            <EuiSpacer
+                              size="s"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--s"
+                              />
+                            </EuiSpacer>
+                            <EuiText
+                              color="subdued"
+                              size="s"
                             >
-                              <EuiTextColor
-                                color="subdued"
-                                component="div"
+                              <div
+                                className="euiText euiText--small"
                               >
-                                <div
-                                  className="euiTextColor euiTextColor--subdued"
+                                <EuiTextColor
+                                  color="subdued"
+                                  component="div"
                                 >
-                                  Use Operational panels to create and view different visualizations on ingested observability data, using PPL (Piped Processing Language) queries.
-                                   
-                                  <EuiLink
-                                    external={true}
-                                    href="https://opensearch.org/docs/latest/observability-plugin/operational-panels/"
-                                    target="blank"
+                                  <div
+                                    className="euiTextColor euiTextColor--subdued"
                                   >
-                                    <a
-                                      className="euiLink euiLink--primary"
+                                    Use Observability Dashboard to create and view different visualizations on ingested observability data, using PPL (Piped Processing Language) queries.
+                                     
+                                    <EuiLink
+                                      external={true}
                                       href="https://opensearch.org/docs/latest/observability-plugin/operational-panels/"
-                                      rel="noreferrer"
                                       target="blank"
                                     >
-                                      Learn more
-                                      <EuiIcon
-                                        aria-label="External link"
-                                        className="euiLink__externalIcon"
-                                        size="s"
-                                        type="popout"
+                                      <a
+                                        className="euiLink euiLink--primary"
+                                        href="https://opensearch.org/docs/latest/observability-plugin/operational-panels/"
+                                        rel="noreferrer"
+                                        target="blank"
                                       >
-                                        <EuiIconPopout
+                                        Learn more
+                                        <EuiIcon
                                           aria-label="External link"
-                                          className="euiIcon euiIcon--small euiLink__externalIcon"
-                                          focusable="false"
-                                          role="img"
-                                          style={null}
+                                          className="euiLink__externalIcon"
+                                          size="s"
+                                          type="popout"
                                         >
-                                          <svg
+                                          <EuiIconPopout
                                             aria-label="External link"
                                             className="euiIcon euiIcon--small euiLink__externalIcon"
                                             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 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
-                                            />
-                                          </svg>
-                                        </EuiIconPopout>
-                                      </EuiIcon>
-                                    </a>
-                                  </EuiLink>
-                                </div>
-                              </EuiTextColor>
-                            </div>
-                          </EuiText>
-                        </div>
-                      </EuiPageContentHeaderSection>
-                      <EuiPageContentHeaderSection>
-                        <div
-                          className="euiPageContentHeaderSection"
-                        >
-                          <EuiFlexGroup
-                            gutterSize="s"
+                                            <svg
+                                              aria-label="External link"
+                                              className="euiIcon euiIcon--small euiLink__externalIcon"
+                                              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 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                                              />
+                                            </svg>
+                                          </EuiIconPopout>
+                                        </EuiIcon>
+                                      </a>
+                                    </EuiLink>
+                                  </div>
+                                </EuiTextColor>
+                              </div>
+                            </EuiText>
+                          </div>
+                        </EuiPageContentHeaderSection>
+                        <EuiPageContentHeaderSection>
+                          <div
+                            className="euiPageContentHeaderSection"
                           >
-                            <div
-                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                            <EuiFlexGroup
+                              gutterSize="s"
                             >
-                              <EuiFlexItem>
-                                <div
-                                  className="euiFlexItem"
-                                >
-                                  <EuiPopover
-                                    anchorPosition="downCenter"
-                                    button={
-                                      <EuiButton
-                                        data-test-subj="operationalPanelsActionsButton"
-                                        iconSide="right"
-                                        iconType="arrowDown"
-                                        onClick={[Function]}
-                                      >
-                                        Actions
-                                      </EuiButton>
-                                    }
-                                    closePopover={[Function]}
-                                    display="inlineBlock"
-                                    hasArrow={true}
-                                    isOpen={false}
-                                    ownFocus={true}
-                                    panelPaddingSize="none"
+                              <div
+                                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              >
+                                <EuiFlexItem>
+                                  <div
+                                    className="euiFlexItem"
                                   >
-                                    <div
-                                      className="euiPopover euiPopover--anchorDownCenter"
-                                    >
-                                      <div
-                                        className="euiPopover__anchor"
-                                      >
+                                    <EuiPopover
+                                      anchorPosition="downCenter"
+                                      button={
                                         <EuiButton
                                           data-test-subj="operationalPanelsActionsButton"
                                           iconSide="right"
                                           iconType="arrowDown"
                                           onClick={[Function]}
                                         >
-                                          <EuiButtonDisplay
-                                            baseClassName="euiButton"
+                                          Actions
+                                        </EuiButton>
+                                      }
+                                      closePopover={[Function]}
+                                      display="inlineBlock"
+                                      hasArrow={true}
+                                      isOpen={false}
+                                      ownFocus={true}
+                                      panelPaddingSize="none"
+                                    >
+                                      <div
+                                        className="euiPopover euiPopover--anchorDownCenter"
+                                      >
+                                        <div
+                                          className="euiPopover__anchor"
+                                        >
+                                          <EuiButton
                                             data-test-subj="operationalPanelsActionsButton"
-                                            disabled={false}
-                                            element="button"
                                             iconSide="right"
                                             iconType="arrowDown"
-                                            isDisabled={false}
                                             onClick={[Function]}
-                                            type="button"
                                           >
-                                            <button
-                                              className="euiButton euiButton--primary"
+                                            <EuiButtonDisplay
+                                              baseClassName="euiButton"
                                               data-test-subj="operationalPanelsActionsButton"
                                               disabled={false}
+                                              element="button"
+                                              iconSide="right"
+                                              iconType="arrowDown"
+                                              isDisabled={false}
                                               onClick={[Function]}
-                                              style={
-                                                Object {
-                                                  "minWidth": undefined,
-                                                }
-                                              }
                                               type="button"
                                             >
-                                              <EuiButtonContent
-                                                className="euiButton__content"
-                                                iconSide="right"
-                                                iconType="arrowDown"
-                                                textProps={
+                                              <button
+                                                className="euiButton euiButton--primary"
+                                                data-test-subj="operationalPanelsActionsButton"
+                                                disabled={false}
+                                                onClick={[Function]}
+                                                style={
                                                   Object {
-                                                    "className": "euiButton__text",
+                                                    "minWidth": undefined,
                                                   }
                                                 }
+                                                type="button"
                                               >
-                                                <span
-                                                  className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                                <EuiButtonContent
+                                                  className="euiButton__content"
+                                                  iconSide="right"
+                                                  iconType="arrowDown"
+                                                  textProps={
+                                                    Object {
+                                                      "className": "euiButton__text",
+                                                    }
+                                                  }
                                                 >
-                                                  <EuiIcon
-                                                    className="euiButtonContent__icon"
-                                                    color="inherit"
-                                                    size="m"
-                                                    type="arrowDown"
+                                                  <span
+                                                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                                   >
-                                                    <EuiIconArrowDown
-                                                      aria-hidden={true}
-                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                                      focusable="false"
-                                                      role="img"
-                                                      style={null}
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
+                                                    <EuiIcon
+                                                      className="euiButtonContent__icon"
+                                                      color="inherit"
+                                                      size="m"
+                                                      type="arrowDown"
+                                                    >
+                                                      <EuiIconArrowDown
+                                                        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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                          fillRule="non-zero"
-                                                        />
-                                                      </svg>
-                                                    </EuiIconArrowDown>
-                                                  </EuiIcon>
-                                                  <span
-                                                    className="euiButton__text"
-                                                  >
-                                                    Actions
+                                                        <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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                            fillRule="non-zero"
+                                                          />
+                                                        </svg>
+                                                      </EuiIconArrowDown>
+                                                    </EuiIcon>
+                                                    <span
+                                                      className="euiButton__text"
+                                                    >
+                                                      Actions
+                                                    </span>
                                                   </span>
-                                                </span>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonDisplay>
-                                        </EuiButton>
+                                                </EuiButtonContent>
+                                              </button>
+                                            </EuiButtonDisplay>
+                                          </EuiButton>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </EuiPopover>
-                                </div>
-                              </EuiFlexItem>
-                              <EuiFlexItem>
-                                <div
-                                  className="euiFlexItem"
-                                >
-                                  <EuiButton
-                                    data-test-subj="customPanels__createNewPanels"
-                                    fill={true}
-                                    href="#/operational_panels/create"
+                                    </EuiPopover>
+                                  </div>
+                                </EuiFlexItem>
+                                <EuiFlexItem>
+                                  <div
+                                    className="euiFlexItem"
                                   >
-                                    <EuiButtonDisplay
-                                      baseClassName="euiButton"
+                                    <EuiButton
                                       data-test-subj="customPanels__createNewPanels"
-                                      element="a"
                                       fill={true}
-                                      href="#/operational_panels/create"
-                                      isDisabled={false}
-                                      rel="noreferrer"
+                                      href="#/create"
                                     >
-                                      <a
-                                        className="euiButton euiButton--primary euiButton--fill"
+                                      <EuiButtonDisplay
+                                        baseClassName="euiButton"
                                         data-test-subj="customPanels__createNewPanels"
-                                        disabled={false}
-                                        href="#/operational_panels/create"
+                                        element="a"
+                                        fill={true}
+                                        href="#/create"
+                                        isDisabled={false}
                                         rel="noreferrer"
-                                        style={
-                                          Object {
-                                            "minWidth": undefined,
-                                          }
-                                        }
                                       >
-                                        <EuiButtonContent
-                                          className="euiButton__content"
-                                          iconSide="left"
-                                          textProps={
+                                        <a
+                                          className="euiButton euiButton--primary euiButton--fill"
+                                          data-test-subj="customPanels__createNewPanels"
+                                          disabled={false}
+                                          href="#/create"
+                                          rel="noreferrer"
+                                          style={
                                             Object {
-                                              "className": "euiButton__text",
+                                              "minWidth": undefined,
                                             }
                                           }
                                         >
-                                          <span
-                                            className="euiButtonContent euiButton__content"
+                                          <EuiButtonContent
+                                            className="euiButton__content"
+                                            iconSide="left"
+                                            textProps={
+                                              Object {
+                                                "className": "euiButton__text",
+                                              }
+                                            }
                                           >
                                             <span
-                                              className="euiButton__text"
+                                              className="euiButtonContent euiButton__content"
                                             >
-                                              Create panel
+                                              <span
+                                                className="euiButton__text"
+                                              >
+                                                Create Dashboard
+                                              </span>
                                             </span>
-                                          </span>
-                                        </EuiButtonContent>
-                                      </a>
-                                    </EuiButtonDisplay>
-                                  </EuiButton>
-                                </div>
-                              </EuiFlexItem>
-                            </div>
-                          </EuiFlexGroup>
-                        </div>
-                      </EuiPageContentHeaderSection>
-                    </div>
-                  </EuiPageContentHeader>
-                  <EuiHorizontalRule
-                    margin="m"
-                  >
-                    <hr
-                      className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
-                    />
-                  </EuiHorizontalRule>
-                  <EuiFieldSearch
-                    compressed={false}
-                    data-test-subj="operationalPanelSearchBar"
-                    fullWidth={true}
-                    incremental={false}
-                    isClearable={true}
-                    isLoading={false}
-                    onChange={[Function]}
-                    placeholder="Search operational panel name"
-                    value=""
-                  >
-                    <EuiFormControlLayout
-                      compressed={false}
-                      fullWidth={true}
-                      icon="search"
-                      isLoading={false}
+                                          </EuiButtonContent>
+                                        </a>
+                                      </EuiButtonDisplay>
+                                    </EuiButton>
+                                  </div>
+                                </EuiFlexItem>
+                              </div>
+                            </EuiFlexGroup>
+                          </div>
+                        </EuiPageContentHeaderSection>
+                      </div>
+                    </EuiPageContentHeader>
+                    <EuiHorizontalRule
+                      margin="m"
+                    >
+                      <hr
+                        className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                      />
+                    </EuiHorizontalRule>
+                    <EuiSpacer
+                      size="xxl"
                     >
                       <div
-                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                        className="euiSpacer euiSpacer--xxl"
+                      />
+                    </EuiSpacer>
+                    <EuiText
+                      textAlign="center"
+                    >
+                      <div
+                        className="euiText euiText--medium"
                       >
-                        <div
-                          className="euiFormControlLayout__childrenWrapper"
+                        <EuiTextAlign
+                          textAlign="center"
                         >
-                          <EuiValidatableControl>
-                            <input
-                              className="euiFieldSearch euiFieldSearch--fullWidth"
-                              data-test-subj="operationalPanelSearchBar"
-                              onChange={[Function]}
-                              onKeyUp={[Function]}
-                              placeholder="Search operational panel name"
-                              type="search"
-                              value=""
-                            />
-                          </EuiValidatableControl>
-                          <EuiFormControlLayoutIcons
-                            compressed={false}
-                            icon="search"
-                            isLoading={false}
+                          <div
+                            className="euiTextAlign euiTextAlign--center"
                           >
-                            <div
-                              className="euiFormControlLayoutIcons"
+                            <h2
+                              data-test-subj="customPanels__noPanelsHome"
+                            >
+                              No Observability Dashboards
+                            </h2>
+                            <EuiSpacer
+                              size="m"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--m"
+                              />
+                            </EuiSpacer>
+                            <EuiText
+                              color="subdued"
                             >
-                              <EuiFormControlLayoutCustomIcon
-                                size="m"
-                                type="search"
+                              <div
+                                className="euiText euiText--medium"
                               >
-                                <span
-                                  className="euiFormControlLayoutCustomIcon"
+                                <EuiTextColor
+                                  color="subdued"
+                                  component="div"
                                 >
-                                  <EuiIcon
-                                    aria-hidden="true"
-                                    className="euiFormControlLayoutCustomIcon__icon"
-                                    size="m"
-                                    type="search"
+                                  <div
+                                    className="euiTextColor euiTextColor--subdued"
                                   >
-                                    <EuiIconEmpty
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                      focusable="false"
-                                      role="img"
-                                      style={null}
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                        focusable="false"
-                                        height={16}
-                                        role="img"
-                                        style={null}
-                                        viewBox="0 0 16 16"
-                                        width={16}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      />
-                                    </EuiIconEmpty>
-                                  </EuiIcon>
-                                </span>
-                              </EuiFormControlLayoutCustomIcon>
-                            </div>
-                          </EuiFormControlLayoutIcons>
-                        </div>
+                                    Use Observability Dashboards to dive deeper into observability
+                                    <br />
+                                    using PPL queries and insightful visualizations
+                                  </div>
+                                </EuiTextColor>
+                              </div>
+                            </EuiText>
+                          </div>
+                        </EuiTextAlign>
                       </div>
-                    </EuiFormControlLayout>
-                  </EuiFieldSearch>
-                  <EuiHorizontalRule
-                    margin="m"
-                  >
-                    <hr
-                      className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
-                    />
-                  </EuiHorizontalRule>
-                  <EuiInMemoryTable
-                    allowNeutralSort={false}
-                    columns={
-                      Array [
-                        Object {
-                          "field": "name",
-                          "name": "Name",
-                          "render": [Function],
-                          "sortable": true,
-                          "truncateText": true,
-                        },
-                        Object {
-                          "field": "dateModified",
-                          "name": "Last updated",
-                          "render": [Function],
-                          "sortable": true,
-                        },
-                        Object {
-                          "field": "dateCreated",
-                          "name": "Created",
-                          "render": [Function],
-                          "sortable": true,
-                        },
-                      ]
-                    }
-                    isSelectable={true}
-                    itemId="id"
-                    items={
-                      Array [
-                        Object {
-                          "dateCreated": 1635974761179,
-                          "dateModified": 1635974771296,
-                          "id": "L8Sx53wBDp0rvEg3yoLb",
-                          "name": "Test Panel 1",
-                        },
-                        Object {
-                          "dateCreated": 1635545733895,
-                          "dateModified": 1635979024055,
-                          "id": "lsQfznwBDp0rvEg3W2wH",
-                          "name": "Test Panel 2",
-                        },
-                        Object {
-                          "dateCreated": 1635889452900,
-                          "dateModified": 1635979888682,
-                          "id": "b8Sc4nwBDp0rvEg3F3Fk",
-                          "name": "Test Panel 3",
-                        },
-                        Object {
-                          "dateCreated": 1635881186494,
-                          "dateModified": 1636049456718,
-                          "id": "P8Qd4nwBDp0rvEg39HG_",
-                          "name": "Test Panel 4",
-                        },
-                      ]
-                    }
-                    loading={false}
-                    pagination={
-                      Object {
-                        "initialPageSize": 10,
-                        "pageSizeOptions": Array [
-                          8,
-                          10,
-                          13,
-                        ],
-                      }
-                    }
-                    responsive={true}
-                    selection={
-                      Object {
-                        "onSelectionChange": [Function],
-                      }
-                    }
-                    sorting={
-                      Object {
-                        "sort": Object {
-                          "direction": "desc",
-                          "field": "dateModified",
-                        },
-                      }
-                    }
-                    tableLayout="auto"
-                  >
-                    <EuiBasicTable
-                      columns={
-                        Array [
-                          Object {
-                            "field": "name",
-                            "name": "Name",
-                            "render": [Function],
-                            "sortable": true,
-                            "truncateText": true,
-                          },
-                          Object {
-                            "field": "dateModified",
-                            "name": "Last updated",
-                            "render": [Function],
-                            "sortable": true,
-                          },
-                          Object {
-                            "field": "dateCreated",
-                            "name": "Created",
-                            "render": [Function],
-                            "sortable": true,
-                          },
-                        ]
-                      }
-                      isSelectable={true}
-                      itemId="id"
-                      items={
-                        Array [
-                          Object {
-                            "dateCreated": 1635881186494,
-                            "dateModified": 1636049456718,
-                            "id": "P8Qd4nwBDp0rvEg39HG_",
-                            "name": "Test Panel 4",
-                          },
-                          Object {
-                            "dateCreated": 1635889452900,
-                            "dateModified": 1635979888682,
-                            "id": "b8Sc4nwBDp0rvEg3F3Fk",
-                            "name": "Test Panel 3",
-                          },
-                          Object {
-                            "dateCreated": 1635545733895,
-                            "dateModified": 1635979024055,
-                            "id": "lsQfznwBDp0rvEg3W2wH",
-                            "name": "Test Panel 2",
-                          },
-                          Object {
-                            "dateCreated": 1635974761179,
-                            "dateModified": 1635974771296,
-                            "id": "L8Sx53wBDp0rvEg3yoLb",
-                            "name": "Test Panel 1",
-                          },
-                        ]
-                      }
-                      loading={false}
-                      noItemsMessage="No items found"
-                      onChange={[Function]}
-                      pagination={
-                        Object {
-                          "hidePerPageOptions": undefined,
-                          "pageIndex": 0,
-                          "pageSize": 10,
-                          "pageSizeOptions": Array [
-                            8,
-                            10,
-                            13,
-                          ],
-                          "totalItemCount": 4,
-                        }
-                      }
-                      responsive={true}
-                      selection={
-                        Object {
-                          "onSelectionChange": [Function],
-                        }
-                      }
-                      sorting={
-                        Object {
-                          "allowNeutralSort": false,
-                          "sort": Object {
-                            "direction": "desc",
-                            "field": "Last updated",
-                          },
-                        }
-                      }
-                      tableLayout="auto"
+                    </EuiText>
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiFlexGroup
+                      justifyContent="center"
                     >
                       <div
-                        className="euiBasicTable"
+                        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
                       >
-                        <div>
-                          <EuiTableHeaderMobile>
-                            <div
-                              className="euiTableHeaderMobile"
-                            >
-                              <EuiFlexGroup
-                                alignItems="baseline"
-                                justifyContent="spaceBetween"
-                                responsive={false}
-                              >
-                                <div
-                                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
-                                >
-                                  <EuiFlexItem
-                                    grow={false}
-                                  >
-                                    <div
-                                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                                    >
-                                      <EuiI18n
-                                        default="Select all rows"
-                                        token="euiBasicTable.selectAllRows"
-                                      >
-                                        <EuiCheckbox
-                                          aria-label="Select all rows"
-                                          checked={false}
-                                          compressed={false}
-                                          disabled={false}
-                                          id="_selection_column-checkbox_random_html_id"
-                                          indeterminate={false}
-                                          label="Select all rows"
-                                          onChange={[Function]}
-                                        >
-                                          <div
-                                            className="euiCheckbox"
-                                          >
-                                            <input
-                                              aria-label="Select all rows"
-                                              checked={false}
-                                              className="euiCheckbox__input"
-                                              disabled={false}
-                                              id="_selection_column-checkbox_random_html_id"
-                                              onChange={[Function]}
-                                              type="checkbox"
-                                            />
-                                            <div
-                                              className="euiCheckbox__square"
-                                            />
-                                            <label
-                                              className="euiCheckbox__label"
-                                              htmlFor="_selection_column-checkbox_random_html_id"
-                                            >
-                                              Select all rows
-                                            </label>
-                                          </div>
-                                        </EuiCheckbox>
-                                      </EuiI18n>
-                                    </div>
-                                  </EuiFlexItem>
-                                  <EuiFlexItem
-                                    grow={false}
-                                  >
-                                    <div
-                                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                                    >
-                                      <EuiTableSortMobile
-                                        items={
-                                          Array [
-                                            Object {
-                                              "isSortAscending": undefined,
-                                              "isSorted": false,
-                                              "key": "_data_s_name_0",
-                                              "name": "Name",
-                                              "onSort": [Function],
-                                            },
-                                            Object {
-                                              "isSortAscending": false,
-                                              "isSorted": true,
-                                              "key": "_data_s_dateModified_1",
-                                              "name": "Last updated",
-                                              "onSort": [Function],
-                                            },
-                                            Object {
-                                              "isSortAscending": undefined,
-                                              "isSorted": false,
-                                              "key": "_data_s_dateCreated_2",
-                                              "name": "Created",
-                                              "onSort": [Function],
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <div
-                                          className="euiTableSortMobile"
-                                        >
-                                          <EuiPopover
-                                            anchorPosition="downRight"
-                                            button={
-                                              <EuiButtonEmpty
-                                                flush="right"
-                                                iconSide="right"
-                                                iconType="arrowDown"
-                                                onClick={[Function]}
-                                                size="xs"
-                                              >
-                                                <EuiI18n
-                                                  default="Sorting"
-                                                  token="euiTableSortMobile.sorting"
-                                                />
-                                              </EuiButtonEmpty>
-                                            }
-                                            closePopover={[Function]}
-                                            display="inlineBlock"
-                                            hasArrow={true}
-                                            isOpen={false}
-                                            ownFocus={true}
-                                            panelPaddingSize="none"
-                                          >
-                                            <div
-                                              className="euiPopover euiPopover--anchorDownRight"
-                                            >
-                                              <div
-                                                className="euiPopover__anchor"
-                                              >
-                                                <EuiButtonEmpty
-                                                  flush="right"
-                                                  iconSide="right"
-                                                  iconType="arrowDown"
-                                                  onClick={[Function]}
-                                                  size="xs"
-                                                >
-                                                  <button
-                                                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
-                                                    disabled={false}
-                                                    onClick={[Function]}
-                                                    type="button"
-                                                  >
-                                                    <EuiButtonContent
-                                                      className="euiButtonEmpty__content"
-                                                      iconSide="right"
-                                                      iconSize="s"
-                                                      iconType="arrowDown"
-                                                      textProps={
-                                                        Object {
-                                                          "className": "euiButtonEmpty__text",
-                                                        }
-                                                      }
-                                                    >
-                                                      <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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                                fillRule="non-zero"
-                                                              />
-                                                            </svg>
-                                                          </EuiIconArrowDown>
-                                                        </EuiIcon>
-                                                        <span
-                                                          className="euiButtonEmpty__text"
-                                                        >
-                                                          <EuiI18n
-                                                            default="Sorting"
-                                                            token="euiTableSortMobile.sorting"
-                                                          >
-                                                            Sorting
-                                                          </EuiI18n>
-                                                        </span>
-                                                      </span>
-                                                    </EuiButtonContent>
-                                                  </button>
-                                                </EuiButtonEmpty>
-                                              </div>
-                                            </div>
-                                          </EuiPopover>
-                                        </div>
-                                      </EuiTableSortMobile>
-                                    </div>
-                                  </EuiFlexItem>
-                                </div>
-                              </EuiFlexGroup>
-                            </div>
-                          </EuiTableHeaderMobile>
-                          <EuiTable
-                            id="random_html_id"
-                            responsive={true}
-                            tableLayout="auto"
+                        <EuiFlexItem
+                          grow={false}
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
                           >
-                            <table
-                              className="euiTable euiTable--responsive euiTable--auto"
-                              id="random_html_id"
-                              tabIndex={-1}
+                            <EuiButton
+                              data-test-subj="customPanels__emptyCreateNewPanels"
+                              fullWidth={false}
+                              href="#/create"
                             >
-                              <EuiScreenReaderOnly>
-                                <caption
-                                  className="euiScreenReaderOnly euiTableCaption"
-                                >
-                                  <EuiDelayRender
-                                    delay={500}
-                                  />
-                                </caption>
-                              </EuiScreenReaderOnly>
-                              <EuiTableHeader>
-                                <thead>
-                                  <tr>
-                                    <EuiTableHeaderCellCheckbox
-                                      key="_selection_column_h"
-                                    >
-                                      <th
-                                        className="euiTableHeaderCellCheckbox"
-                                        scope="col"
-                                        style={
-                                          Object {
-                                            "width": undefined,
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="euiTableCellContent"
-                                        >
-                                          <EuiI18n
-                                            default="Select all rows"
-                                            token="euiBasicTable.selectAllRows"
-                                          >
-                                            <EuiCheckbox
-                                              aria-label="Select all rows"
-                                              checked={false}
-                                              compressed={false}
-                                              data-test-subj="checkboxSelectAll"
-                                              disabled={false}
-                                              id="_selection_column-checkbox_random_html_id"
-                                              indeterminate={false}
-                                              label={null}
-                                              onChange={[Function]}
-                                              type="inList"
-                                            >
-                                              <div
-                                                className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
-                                              >
-                                                <input
-                                                  aria-label="Select all rows"
-                                                  checked={false}
-                                                  className="euiCheckbox__input"
-                                                  data-test-subj="checkboxSelectAll"
-                                                  disabled={false}
-                                                  id="_selection_column-checkbox_random_html_id"
-                                                  onChange={[Function]}
-                                                  type="checkbox"
-                                                />
-                                                <div
-                                                  className="euiCheckbox__square"
-                                                />
-                                              </div>
-                                            </EuiCheckbox>
-                                          </EuiI18n>
-                                        </div>
-                                      </th>
-                                    </EuiTableHeaderCellCheckbox>
-                                    <EuiTableHeaderCell
-                                      align="left"
-                                      data-test-subj="tableHeaderCell_name_0"
-                                      isSorted={false}
-                                      key="_data_h_name_0"
-                                      onSort={[Function]}
-                                    >
-                                      <th
-                                        aria-live="polite"
-                                        aria-sort="none"
-                                        className="euiTableHeaderCell"
-                                        data-test-subj="tableHeaderCell_name_0"
-                                        role="columnheader"
-                                        scope="col"
-                                        style={
-                                          Object {
-                                            "width": undefined,
-                                          }
-                                        }
-                                      >
-                                        <button
-                                          className="euiTableHeaderButton"
-                                          data-test-subj="tableHeaderSortButton"
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <CellContents
-                                            className="euiTableCellContent"
-                                            isSorted={false}
-                                            showSortMsg={true}
-                                          >
-                                            <span
-                                              className="euiTableCellContent"
-                                            >
-                                              <EuiInnerText>
-                                                <EuiI18n
-                                                  default="{innerText}; {description}"
-                                                  token="euiTableHeaderCell.titleTextWithDesc"
-                                                  values={
-                                                    Object {
-                                                      "description": undefined,
-                                                      "innerText": "Name",
-                                                    }
-                                                  }
-                                                >
-                                                  <span
-                                                    className="euiTableCellContent__text"
-                                                    title="Name"
-                                                  >
-                                                    Name
-                                                  </span>
-                                                </EuiI18n>
-                                              </EuiInnerText>
-                                            </span>
-                                          </CellContents>
-                                        </button>
-                                      </th>
-                                    </EuiTableHeaderCell>
-                                    <EuiTableHeaderCell
-                                      align="left"
-                                      data-test-subj="tableHeaderCell_dateModified_1"
-                                      isSortAscending={false}
-                                      isSorted={true}
-                                      key="_data_h_dateModified_1"
-                                      onSort={[Function]}
-                                    >
-                                      <th
-                                        aria-live="polite"
-                                        aria-sort="descending"
-                                        className="euiTableHeaderCell"
-                                        data-test-subj="tableHeaderCell_dateModified_1"
-                                        role="columnheader"
-                                        scope="col"
-                                        style={
-                                          Object {
-                                            "width": undefined,
-                                          }
-                                        }
-                                      >
-                                        <button
-                                          className="euiTableHeaderButton euiTableHeaderButton-isSorted"
-                                          data-test-subj="tableHeaderSortButton"
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <CellContents
-                                            className="euiTableCellContent"
-                                            isSortAscending={false}
-                                            isSorted={true}
-                                            showSortMsg={true}
-                                          >
-                                            <span
-                                              className="euiTableCellContent"
-                                            >
-                                              <EuiInnerText>
-                                                <EuiI18n
-                                                  default="{innerText}; {description}"
-                                                  token="euiTableHeaderCell.titleTextWithDesc"
-                                                  values={
-                                                    Object {
-                                                      "description": undefined,
-                                                      "innerText": "Last updated",
-                                                    }
-                                                  }
-                                                >
-                                                  <span
-                                                    className="euiTableCellContent__text"
-                                                    title="Last updated"
-                                                  >
-                                                    Last updated
-                                                  </span>
-                                                </EuiI18n>
-                                              </EuiInnerText>
-                                              <EuiIcon
-                                                className="euiTableSortIcon"
-                                                size="m"
-                                                type="sortDown"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
-                                                    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>
-                                          </CellContents>
-                                        </button>
-                                      </th>
-                                    </EuiTableHeaderCell>
-                                    <EuiTableHeaderCell
-                                      align="left"
-                                      data-test-subj="tableHeaderCell_dateCreated_2"
-                                      isSorted={false}
-                                      key="_data_h_dateCreated_2"
-                                      onSort={[Function]}
-                                    >
-                                      <th
-                                        aria-live="polite"
-                                        aria-sort="none"
-                                        className="euiTableHeaderCell"
-                                        data-test-subj="tableHeaderCell_dateCreated_2"
-                                        role="columnheader"
-                                        scope="col"
-                                        style={
-                                          Object {
-                                            "width": undefined,
-                                          }
-                                        }
-                                      >
-                                        <button
-                                          className="euiTableHeaderButton"
-                                          data-test-subj="tableHeaderSortButton"
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <CellContents
-                                            className="euiTableCellContent"
-                                            isSorted={false}
-                                            showSortMsg={true}
-                                          >
-                                            <span
-                                              className="euiTableCellContent"
-                                            >
-                                              <EuiInnerText>
-                                                <EuiI18n
-                                                  default="{innerText}; {description}"
-                                                  token="euiTableHeaderCell.titleTextWithDesc"
-                                                  values={
-                                                    Object {
-                                                      "description": undefined,
-                                                      "innerText": "Created",
-                                                    }
-                                                  }
-                                                >
-                                                  <span
-                                                    className="euiTableCellContent__text"
-                                                    title="Created"
-                                                  >
-                                                    Created
-                                                  </span>
-                                                </EuiI18n>
-                                              </EuiInnerText>
-                                            </span>
-                                          </CellContents>
-                                        </button>
-                                      </th>
-                                    </EuiTableHeaderCell>
-                                  </tr>
-                                </thead>
-                              </EuiTableHeader>
-                              <EuiTableBody
-                                bodyRef={[Function]}
+                              <EuiButtonDisplay
+                                baseClassName="euiButton"
+                                data-test-subj="customPanels__emptyCreateNewPanels"
+                                element="a"
+                                fullWidth={false}
+                                href="#/create"
+                                isDisabled={false}
+                                rel="noreferrer"
                               >
-                                <tbody>
-                                  <EuiTableRow
-                                    isSelectable={true}
-                                    isSelected={false}
-                                  >
-                                    <tr
-                                      className="euiTableRow euiTableRow-isSelectable"
-                                    >
-                                      <EuiTableRowCellCheckbox
-                                        key="_selection_column_P8Qd4nwBDp0rvEg39HG_"
-                                      >
-                                        <td
-                                          className="euiTableRowCellCheckbox"
-                                        >
-                                          <div
-                                            className="euiTableCellContent"
-                                          >
-                                            <EuiI18n
-                                              default="Select this row"
-                                              token="euiBasicTable.selectThisRow"
-                                            >
-                                              <EuiCheckbox
-                                                aria-label="Select this row"
-                                                checked={false}
-                                                compressed={false}
-                                                data-test-subj="checkboxSelectRow-P8Qd4nwBDp0rvEg39HG_"
-                                                disabled={false}
-                                                id="_selection_column_P8Qd4nwBDp0rvEg39HG_-checkbox"
-                                                indeterminate={false}
-                                                onChange={[Function]}
-                                                title="Select this row"
-                                                type="inList"
-                                              >
-                                                <div
-                                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
-                                                >
-                                                  <input
-                                                    aria-label="Select this row"
-                                                    checked={false}
-                                                    className="euiCheckbox__input"
-                                                    data-test-subj="checkboxSelectRow-P8Qd4nwBDp0rvEg39HG_"
-                                                    disabled={false}
-                                                    id="_selection_column_P8Qd4nwBDp0rvEg39HG_-checkbox"
-                                                    onChange={[Function]}
-                                                    title="Select this row"
-                                                    type="checkbox"
-                                                  />
-                                                  <div
-                                                    className="euiCheckbox__square"
-                                                  />
-                                                </div>
-                                              </EuiCheckbox>
-                                            </EuiI18n>
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCellCheckbox>
-                                      <EuiTableRowCell
-                                        align="left"
-                                        key="_data_column_name_P8Qd4nwBDp0rvEg39HG__0"
-                                        mobileOptions={
-                                          Object {
-                                            "header": "Name",
-                                            "render": undefined,
-                                          }
-                                        }
-                                        setScopeRow={false}
-                                        textOnly={false}
-                                        truncateText={true}
-                                      >
-                                        <td
-                                          className="euiTableRowCell"
-                                          style={
-                                            Object {
-                                              "width": undefined,
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                                          >
-                                            Name
-                                          </div>
-                                          <div
-                                            className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
-                                          >
-                                            <EuiLink
-                                              className=""
-                                              href="observability#/P8Qd4nwBDp0rvEg39HG_"
-                                              key=".0"
-                                            >
-                                              <a
-                                                className="euiLink euiLink--primary"
-                                                href="observability#/P8Qd4nwBDp0rvEg39HG_"
-                                                rel="noreferrer"
-                                              >
-                                                Test Panel 4
-                                              </a>
-                                            </EuiLink>
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCell>
-                                      <EuiTableRowCell
-                                        align="left"
-                                        key="_data_column_dateModified_P8Qd4nwBDp0rvEg39HG__1"
-                                        mobileOptions={
-                                          Object {
-                                            "header": "Last updated",
-                                            "render": undefined,
-                                          }
-                                        }
-                                        setScopeRow={false}
-                                        textOnly={false}
-                                      >
-                                        <td
-                                          className="euiTableRowCell"
-                                          style={
-                                            Object {
-                                              "width": undefined,
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                                          >
-                                            Last updated
-                                          </div>
-                                          <div
-                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
-                                          >
-                                            11/04/2021 06:10 PM
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCell>
-                                      <EuiTableRowCell
-                                        align="left"
-                                        key="_data_column_dateCreated_P8Qd4nwBDp0rvEg39HG__2"
-                                        mobileOptions={
-                                          Object {
-                                            "header": "Created",
-                                            "render": undefined,
-                                          }
-                                        }
-                                        setScopeRow={false}
-                                        textOnly={false}
-                                      >
-                                        <td
-                                          className="euiTableRowCell"
-                                          style={
-                                            Object {
-                                              "width": undefined,
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                                          >
-                                            Created
-                                          </div>
-                                          <div
-                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
-                                          >
-                                            11/02/2021 07:26 PM
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCell>
-                                    </tr>
-                                  </EuiTableRow>
-                                  <EuiTableRow
-                                    isSelectable={true}
-                                    isSelected={false}
-                                  >
-                                    <tr
-                                      className="euiTableRow euiTableRow-isSelectable"
-                                    >
-                                      <EuiTableRowCellCheckbox
-                                        key="_selection_column_b8Sc4nwBDp0rvEg3F3Fk"
-                                      >
-                                        <td
-                                          className="euiTableRowCellCheckbox"
-                                        >
-                                          <div
-                                            className="euiTableCellContent"
-                                          >
-                                            <EuiI18n
-                                              default="Select this row"
-                                              token="euiBasicTable.selectThisRow"
-                                            >
-                                              <EuiCheckbox
-                                                aria-label="Select this row"
-                                                checked={false}
-                                                compressed={false}
-                                                data-test-subj="checkboxSelectRow-b8Sc4nwBDp0rvEg3F3Fk"
-                                                disabled={false}
-                                                id="_selection_column_b8Sc4nwBDp0rvEg3F3Fk-checkbox"
-                                                indeterminate={false}
-                                                onChange={[Function]}
-                                                title="Select this row"
-                                                type="inList"
-                                              >
-                                                <div
-                                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
-                                                >
-                                                  <input
-                                                    aria-label="Select this row"
-                                                    checked={false}
-                                                    className="euiCheckbox__input"
-                                                    data-test-subj="checkboxSelectRow-b8Sc4nwBDp0rvEg3F3Fk"
-                                                    disabled={false}
-                                                    id="_selection_column_b8Sc4nwBDp0rvEg3F3Fk-checkbox"
-                                                    onChange={[Function]}
-                                                    title="Select this row"
-                                                    type="checkbox"
-                                                  />
-                                                  <div
-                                                    className="euiCheckbox__square"
-                                                  />
-                                                </div>
-                                              </EuiCheckbox>
-                                            </EuiI18n>
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCellCheckbox>
-                                      <EuiTableRowCell
-                                        align="left"
-                                        key="_data_column_name_b8Sc4nwBDp0rvEg3F3Fk_0"
-                                        mobileOptions={
-                                          Object {
-                                            "header": "Name",
-                                            "render": undefined,
-                                          }
-                                        }
-                                        setScopeRow={false}
-                                        textOnly={false}
-                                        truncateText={true}
-                                      >
-                                        <td
-                                          className="euiTableRowCell"
-                                          style={
-                                            Object {
-                                              "width": undefined,
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                                          >
-                                            Name
-                                          </div>
-                                          <div
-                                            className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
-                                          >
-                                            <EuiLink
-                                              className=""
-                                              href="observability#/b8Sc4nwBDp0rvEg3F3Fk"
-                                              key=".0"
-                                            >
-                                              <a
-                                                className="euiLink euiLink--primary"
-                                                href="observability#/b8Sc4nwBDp0rvEg3F3Fk"
-                                                rel="noreferrer"
-                                              >
-                                                Test Panel 3
-                                              </a>
-                                            </EuiLink>
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCell>
-                                      <EuiTableRowCell
-                                        align="left"
-                                        key="_data_column_dateModified_b8Sc4nwBDp0rvEg3F3Fk_1"
-                                        mobileOptions={
-                                          Object {
-                                            "header": "Last updated",
-                                            "render": undefined,
-                                          }
-                                        }
-                                        setScopeRow={false}
-                                        textOnly={false}
-                                      >
-                                        <td
-                                          className="euiTableRowCell"
-                                          style={
-                                            Object {
-                                              "width": undefined,
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                                          >
-                                            Last updated
-                                          </div>
-                                          <div
-                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
-                                          >
-                                            11/03/2021 10:51 PM
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCell>
-                                      <EuiTableRowCell
-                                        align="left"
-                                        key="_data_column_dateCreated_b8Sc4nwBDp0rvEg3F3Fk_2"
-                                        mobileOptions={
-                                          Object {
-                                            "header": "Created",
-                                            "render": undefined,
-                                          }
-                                        }
-                                        setScopeRow={false}
-                                        textOnly={false}
-                                      >
-                                        <td
-                                          className="euiTableRowCell"
-                                          style={
-                                            Object {
-                                              "width": undefined,
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                                          >
-                                            Created
-                                          </div>
-                                          <div
-                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
-                                          >
-                                            11/02/2021 09:44 PM
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCell>
-                                    </tr>
-                                  </EuiTableRow>
-                                  <EuiTableRow
-                                    isSelectable={true}
-                                    isSelected={false}
-                                  >
-                                    <tr
-                                      className="euiTableRow euiTableRow-isSelectable"
-                                    >
-                                      <EuiTableRowCellCheckbox
-                                        key="_selection_column_lsQfznwBDp0rvEg3W2wH"
-                                      >
-                                        <td
-                                          className="euiTableRowCellCheckbox"
-                                        >
-                                          <div
-                                            className="euiTableCellContent"
-                                          >
-                                            <EuiI18n
-                                              default="Select this row"
-                                              token="euiBasicTable.selectThisRow"
-                                            >
-                                              <EuiCheckbox
-                                                aria-label="Select this row"
-                                                checked={false}
-                                                compressed={false}
-                                                data-test-subj="checkboxSelectRow-lsQfznwBDp0rvEg3W2wH"
-                                                disabled={false}
-                                                id="_selection_column_lsQfznwBDp0rvEg3W2wH-checkbox"
-                                                indeterminate={false}
-                                                onChange={[Function]}
-                                                title="Select this row"
-                                                type="inList"
-                                              >
-                                                <div
-                                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
-                                                >
-                                                  <input
-                                                    aria-label="Select this row"
-                                                    checked={false}
-                                                    className="euiCheckbox__input"
-                                                    data-test-subj="checkboxSelectRow-lsQfznwBDp0rvEg3W2wH"
-                                                    disabled={false}
-                                                    id="_selection_column_lsQfznwBDp0rvEg3W2wH-checkbox"
-                                                    onChange={[Function]}
-                                                    title="Select this row"
-                                                    type="checkbox"
-                                                  />
-                                                  <div
-                                                    className="euiCheckbox__square"
-                                                  />
-                                                </div>
-                                              </EuiCheckbox>
-                                            </EuiI18n>
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCellCheckbox>
-                                      <EuiTableRowCell
-                                        align="left"
-                                        key="_data_column_name_lsQfznwBDp0rvEg3W2wH_0"
-                                        mobileOptions={
-                                          Object {
-                                            "header": "Name",
-                                            "render": undefined,
-                                          }
-                                        }
-                                        setScopeRow={false}
-                                        textOnly={false}
-                                        truncateText={true}
-                                      >
-                                        <td
-                                          className="euiTableRowCell"
-                                          style={
-                                            Object {
-                                              "width": undefined,
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                                          >
-                                            Name
-                                          </div>
-                                          <div
-                                            className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
-                                          >
-                                            <EuiLink
-                                              className=""
-                                              href="observability#/lsQfznwBDp0rvEg3W2wH"
-                                              key=".0"
-                                            >
-                                              <a
-                                                className="euiLink euiLink--primary"
-                                                href="observability#/lsQfznwBDp0rvEg3W2wH"
-                                                rel="noreferrer"
-                                              >
-                                                Test Panel 2
-                                              </a>
-                                            </EuiLink>
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCell>
-                                      <EuiTableRowCell
-                                        align="left"
-                                        key="_data_column_dateModified_lsQfznwBDp0rvEg3W2wH_1"
-                                        mobileOptions={
-                                          Object {
-                                            "header": "Last updated",
-                                            "render": undefined,
-                                          }
-                                        }
-                                        setScopeRow={false}
-                                        textOnly={false}
-                                      >
-                                        <td
-                                          className="euiTableRowCell"
-                                          style={
-                                            Object {
-                                              "width": undefined,
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                                          >
-                                            Last updated
-                                          </div>
-                                          <div
-                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
-                                          >
-                                            11/03/2021 10:37 PM
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCell>
-                                      <EuiTableRowCell
-                                        align="left"
-                                        key="_data_column_dateCreated_lsQfznwBDp0rvEg3W2wH_2"
-                                        mobileOptions={
-                                          Object {
-                                            "header": "Created",
-                                            "render": undefined,
-                                          }
-                                        }
-                                        setScopeRow={false}
-                                        textOnly={false}
-                                      >
-                                        <td
-                                          className="euiTableRowCell"
-                                          style={
-                                            Object {
-                                              "width": undefined,
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                                          >
-                                            Created
-                                          </div>
-                                          <div
-                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
-                                          >
-                                            10/29/2021 10:15 PM
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCell>
-                                    </tr>
-                                  </EuiTableRow>
-                                  <EuiTableRow
-                                    isSelectable={true}
-                                    isSelected={false}
+                                <a
+                                  className="euiButton euiButton--primary"
+                                  data-test-subj="customPanels__emptyCreateNewPanels"
+                                  disabled={false}
+                                  href="#/create"
+                                  rel="noreferrer"
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
+                                >
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text",
+                                      }
+                                    }
                                   >
-                                    <tr
-                                      className="euiTableRow euiTableRow-isSelectable"
+                                    <span
+                                      className="euiButtonContent euiButton__content"
                                     >
-                                      <EuiTableRowCellCheckbox
-                                        key="_selection_column_L8Sx53wBDp0rvEg3yoLb"
-                                      >
-                                        <td
-                                          className="euiTableRowCellCheckbox"
-                                        >
-                                          <div
-                                            className="euiTableCellContent"
-                                          >
-                                            <EuiI18n
-                                              default="Select this row"
-                                              token="euiBasicTable.selectThisRow"
-                                            >
-                                              <EuiCheckbox
-                                                aria-label="Select this row"
-                                                checked={false}
-                                                compressed={false}
-                                                data-test-subj="checkboxSelectRow-L8Sx53wBDp0rvEg3yoLb"
-                                                disabled={false}
-                                                id="_selection_column_L8Sx53wBDp0rvEg3yoLb-checkbox"
-                                                indeterminate={false}
-                                                onChange={[Function]}
-                                                title="Select this row"
-                                                type="inList"
-                                              >
-                                                <div
-                                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
-                                                >
-                                                  <input
-                                                    aria-label="Select this row"
-                                                    checked={false}
-                                                    className="euiCheckbox__input"
-                                                    data-test-subj="checkboxSelectRow-L8Sx53wBDp0rvEg3yoLb"
-                                                    disabled={false}
-                                                    id="_selection_column_L8Sx53wBDp0rvEg3yoLb-checkbox"
-                                                    onChange={[Function]}
-                                                    title="Select this row"
-                                                    type="checkbox"
-                                                  />
-                                                  <div
-                                                    className="euiCheckbox__square"
-                                                  />
-                                                </div>
-                                              </EuiCheckbox>
-                                            </EuiI18n>
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCellCheckbox>
-                                      <EuiTableRowCell
-                                        align="left"
-                                        key="_data_column_name_L8Sx53wBDp0rvEg3yoLb_0"
-                                        mobileOptions={
-                                          Object {
-                                            "header": "Name",
-                                            "render": undefined,
-                                          }
-                                        }
-                                        setScopeRow={false}
-                                        textOnly={false}
-                                        truncateText={true}
+                                      <span
+                                        className="euiButton__text"
                                       >
-                                        <td
-                                          className="euiTableRowCell"
-                                          style={
-                                            Object {
-                                              "width": undefined,
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                                          >
-                                            Name
-                                          </div>
-                                          <div
-                                            className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
-                                          >
-                                            <EuiLink
-                                              className=""
-                                              href="observability#/L8Sx53wBDp0rvEg3yoLb"
-                                              key=".0"
-                                            >
-                                              <a
-                                                className="euiLink euiLink--primary"
-                                                href="observability#/L8Sx53wBDp0rvEg3yoLb"
-                                                rel="noreferrer"
-                                              >
-                                                Test Panel 1
-                                              </a>
-                                            </EuiLink>
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCell>
-                                      <EuiTableRowCell
-                                        align="left"
-                                        key="_data_column_dateModified_L8Sx53wBDp0rvEg3yoLb_1"
-                                        mobileOptions={
-                                          Object {
-                                            "header": "Last updated",
-                                            "render": undefined,
-                                          }
-                                        }
-                                        setScopeRow={false}
-                                        textOnly={false}
-                                      >
-                                        <td
-                                          className="euiTableRowCell"
-                                          style={
-                                            Object {
-                                              "width": undefined,
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                                          >
-                                            Last updated
-                                          </div>
-                                          <div
-                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
-                                          >
-                                            11/03/2021 09:26 PM
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCell>
-                                      <EuiTableRowCell
-                                        align="left"
-                                        key="_data_column_dateCreated_L8Sx53wBDp0rvEg3yoLb_2"
-                                        mobileOptions={
-                                          Object {
-                                            "header": "Created",
-                                            "render": undefined,
-                                          }
-                                        }
-                                        setScopeRow={false}
-                                        textOnly={false}
-                                      >
-                                        <td
-                                          className="euiTableRowCell"
-                                          style={
-                                            Object {
-                                              "width": undefined,
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                                          >
-                                            Created
-                                          </div>
-                                          <div
-                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
-                                          >
-                                            11/03/2021 09:26 PM
-                                          </div>
-                                        </td>
-                                      </EuiTableRowCell>
-                                    </tr>
-                                  </EuiTableRow>
-                                </tbody>
-                              </EuiTableBody>
-                            </table>
-                          </EuiTable>
-                        </div>
-                        <PaginationBar
-                          aria-controls="random_html_id"
-                          onPageChange={[Function]}
-                          onPageSizeChange={[Function]}
-                          pagination={
-                            Object {
-                              "hidePerPageOptions": undefined,
-                              "pageIndex": 0,
-                              "pageSize": 10,
-                              "pageSizeOptions": Array [
-                                8,
-                                10,
-                                13,
-                              ],
-                              "totalItemCount": 4,
-                            }
-                          }
+                                        Create Dashboard
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </a>
+                              </EuiButtonDisplay>
+                            </EuiButton>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem
+                          grow={false}
                         >
-                          <div>
-                            <EuiSpacer
-                              size="m"
-                            >
-                              <div
-                                className="euiSpacer euiSpacer--m"
-                              />
-                            </EuiSpacer>
-                            <EuiTablePagination
-                              activePage={0}
-                              aria-controls="random_html_id"
-                              itemsPerPage={10}
-                              itemsPerPageOptions={
-                                Array [
-                                  8,
-                                  10,
-                                  13,
-                                ]
-                              }
-                              onChangeItemsPerPage={[Function]}
-                              onChangePage={[Function]}
-                              pageCount={1}
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <EuiButton
+                              fullWidth={false}
+                              onClick={[Function]}
                             >
-                              <EuiFlexGroup
-                                alignItems="center"
-                                justifyContent="spaceBetween"
-                                responsive={false}
+                              <EuiButtonDisplay
+                                baseClassName="euiButton"
+                                disabled={false}
+                                element="button"
+                                fullWidth={false}
+                                isDisabled={false}
+                                onClick={[Function]}
+                                type="button"
                               >
-                                <div
-                                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                                <button
+                                  className="euiButton euiButton--primary"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
+                                  type="button"
                                 >
-                                  <EuiFlexItem
-                                    grow={false}
-                                  >
-                                    <div
-                                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                                    >
-                                      <EuiPopover
-                                        anchorPosition="upRight"
-                                        button={
-                                          <EuiButtonEmpty
-                                            color="text"
-                                            data-test-subj="tablePaginationPopoverButton"
-                                            iconSide="right"
-                                            iconType="arrowDown"
-                                            onClick={[Function]}
-                                            size="xs"
-                                          >
-                                            <EuiI18n
-                                              default="Rows per page"
-                                              token="euiTablePagination.rowsPerPage"
-                                            />
-                                            : 
-                                            10
-                                          </EuiButtonEmpty>
-                                        }
-                                        closePopover={[Function]}
-                                        display="inlineBlock"
-                                        hasArrow={true}
-                                        isOpen={false}
-                                        ownFocus={true}
-                                        panelPaddingSize="none"
-                                      >
-                                        <div
-                                          className="euiPopover euiPopover--anchorUpRight"
-                                        >
-                                          <div
-                                            className="euiPopover__anchor"
-                                          >
-                                            <EuiButtonEmpty
-                                              color="text"
-                                              data-test-subj="tablePaginationPopoverButton"
-                                              iconSide="right"
-                                              iconType="arrowDown"
-                                              onClick={[Function]}
-                                              size="xs"
-                                            >
-                                              <button
-                                                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
-                                                data-test-subj="tablePaginationPopoverButton"
-                                                disabled={false}
-                                                onClick={[Function]}
-                                                type="button"
-                                              >
-                                                <EuiButtonContent
-                                                  className="euiButtonEmpty__content"
-                                                  iconSide="right"
-                                                  iconSize="s"
-                                                  iconType="arrowDown"
-                                                  textProps={
-                                                    Object {
-                                                      "className": "euiButtonEmpty__text",
-                                                    }
-                                                  }
-                                                >
-                                                  <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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                            fillRule="non-zero"
-                                                          />
-                                                        </svg>
-                                                      </EuiIconArrowDown>
-                                                    </EuiIcon>
-                                                    <span
-                                                      className="euiButtonEmpty__text"
-                                                    >
-                                                      <EuiI18n
-                                                        default="Rows per page"
-                                                        token="euiTablePagination.rowsPerPage"
-                                                      >
-                                                        Rows per page
-                                                      </EuiI18n>
-                                                      : 
-                                                      10
-                                                    </span>
-                                                  </span>
-                                                </EuiButtonContent>
-                                              </button>
-                                            </EuiButtonEmpty>
-                                          </div>
-                                        </div>
-                                      </EuiPopover>
-                                    </div>
-                                  </EuiFlexItem>
-                                  <EuiFlexItem
-                                    grow={false}
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text",
+                                      }
+                                    }
                                   >
-                                    <div
-                                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                                    <span
+                                      className="euiButtonContent euiButton__content"
                                     >
-                                      <EuiPagination
-                                        activePage={0}
-                                        aria-controls="random_html_id"
-                                        onPageClick={[Function]}
-                                        pageCount={1}
+                                      <span
+                                        className="euiButton__text"
                                       >
-                                        <nav
-                                          className="euiPagination"
-                                        >
-                                          <EuiI18n
-                                            default="Previous page, {page}"
-                                            token="euiPagination.previousPage"
-                                            values={
-                                              Object {
-                                                "page": 0,
-                                              }
-                                            }
-                                          >
-                                            <EuiI18n
-                                              default="Previous page"
-                                              token="euiPagination.disabledPreviousPage"
-                                            >
-                                              <EuiButtonIcon
-                                                aria-label="Previous page"
-                                                color="text"
-                                                data-test-subj="pagination-button-previous"
-                                                disabled={true}
-                                                iconType="arrowLeft"
-                                                onClick={[Function]}
-                                              >
-                                                <button
-                                                  aria-label="Previous page"
-                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                  data-test-subj="pagination-button-previous"
-                                                  disabled={true}
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <EuiIcon
-                                                    aria-hidden="true"
-                                                    className="euiButtonIcon__icon"
-                                                    color="inherit"
-                                                    size="m"
-                                                    type="arrowLeft"
-                                                  >
-                                                    <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>
-                                            </EuiI18n>
-                                          </EuiI18n>
-                                          <ul
-                                            className="euiPagination__list"
-                                          >
-                                            <PaginationButton
-                                              key="0"
-                                              pageIndex={0}
-                                            >
-                                              <li
-                                                className="euiPagination__item"
-                                              >
-                                                <EuiPaginationButton
-                                                  aria-controls="random_html_id"
-                                                  hideOnMobile={true}
-                                                  isActive={true}
-                                                  onClick={[Function]}
-                                                  pageIndex={0}
-                                                  totalPages={1}
-                                                >
-                                                  <EuiI18n
-                                                    default="Page {page} of {totalPages}"
-                                                    token="euiPaginationButton.longPageString"
-                                                    values={
-                                                      Object {
-                                                        "page": 1,
-                                                        "totalPages": 1,
-                                                      }
-                                                    }
-                                                  >
-                                                    <EuiI18n
-                                                      default="Page {page}"
-                                                      token="euiPaginationButton.shortPageString"
-                                                      values={
-                                                        Object {
-                                                          "page": 1,
-                                                        }
-                                                      }
-                                                    >
-                                                      <EuiButtonEmpty
-                                                        aria-controls="random_html_id"
-                                                        aria-current={true}
-                                                        aria-label="Page 1 of 1"
-                                                        className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
-                                                        color="text"
-                                                        data-test-subj="pagination-button-0"
-                                                        href="#random_html_id"
-                                                        isDisabled={true}
-                                                        onClick={[Function]}
-                                                        size="s"
-                                                      >
-                                                        <button
-                                                          aria-controls="random_html_id"
-                                                          aria-current={true}
-                                                          aria-label="Page 1 of 1"
-                                                          className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
-                                                          data-test-subj="pagination-button-0"
-                                                          disabled={true}
-                                                          onClick={[Function]}
-                                                          type="button"
-                                                        >
-                                                          <EuiButtonContent
-                                                            className="euiButtonEmpty__content"
-                                                            iconSide="left"
-                                                            iconSize="m"
-                                                            textProps={
-                                                              Object {
-                                                                "className": "euiButtonEmpty__text",
-                                                              }
-                                                            }
-                                                          >
-                                                            <span
-                                                              className="euiButtonContent euiButtonEmpty__content"
-                                                            >
-                                                              <span
-                                                                className="euiButtonEmpty__text"
-                                                              >
-                                                                1
-                                                              </span>
-                                                            </span>
-                                                          </EuiButtonContent>
-                                                        </button>
-                                                      </EuiButtonEmpty>
-                                                    </EuiI18n>
-                                                  </EuiI18n>
-                                                </EuiPaginationButton>
-                                              </li>
-                                            </PaginationButton>
-                                          </ul>
-                                          <EuiI18n
-                                            default="Next page, {page}"
-                                            token="euiPagination.nextPage"
-                                            values={
-                                              Object {
-                                                "page": 2,
-                                              }
-                                            }
-                                          >
-                                            <EuiI18n
-                                              default="Next page"
-                                              token="euiPagination.disabledNextPage"
-                                            >
-                                              <EuiButtonIcon
-                                                aria-label="Next page"
-                                                color="text"
-                                                data-test-subj="pagination-button-next"
-                                                disabled={true}
-                                                iconType="arrowRight"
-                                                onClick={[Function]}
-                                              >
-                                                <button
-                                                  aria-label="Next page"
-                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                  data-test-subj="pagination-button-next"
-                                                  disabled={true}
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <EuiIcon
-                                                    aria-hidden="true"
-                                                    className="euiButtonIcon__icon"
-                                                    color="inherit"
-                                                    size="m"
-                                                    type="arrowRight"
-                                                  >
-                                                    <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>
-                                            </EuiI18n>
-                                          </EuiI18n>
-                                        </nav>
-                                      </EuiPagination>
-                                    </div>
-                                  </EuiFlexItem>
-                                </div>
-                              </EuiFlexGroup>
-                            </EuiTablePagination>
+                                        Add samples
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </button>
+                              </EuiButtonDisplay>
+                            </EuiButton>
                           </div>
-                        </PaginationBar>
+                        </EuiFlexItem>
                       </div>
-                    </EuiBasicTable>
-                  </EuiInMemoryTable>
-                </div>
-              </EuiPanel>
-            </EuiPageContent>
-          </div>
-        </EuiPageBody>
-      </div>
-    </EuiPage>
-  </div>
-</Component>
+                    </EuiFlexGroup>
+                    <EuiSpacer
+                      size="xxl"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--xxl"
+                      />
+                    </EuiSpacer>
+                  </div>
+                </EuiPanel>
+              </EuiPageContent>
+            </div>
+          </EuiPageBody>
+        </div>
+      </EuiPage>
+    </div>
+  </Component>
+</Provider>
 `;
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 7b2eda6f26..98c0168fd5 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
@@ -1,697 +1,581 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Panels View Component renders panel view container with visualizations 1`] = `
-<Component
-  chrome={
+<Provider
+  store={
     Object {
-      "addApplicationClass": [MockFunction],
-      "docTitle": Object {
-        "change": [MockFunction],
-        "reset": [MockFunction],
-      },
-      "getApplicationClasses$": [MockFunction],
-      "getBadge$": [MockFunction],
-      "getBrand$": [MockFunction],
-      "getBreadcrumbs$": [MockFunction],
-      "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],
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <Component
+    chrome={
+      Object {
+        "addApplicationClass": [MockFunction],
+        "docTitle": Object {
+          "change": [MockFunction],
+          "reset": [MockFunction],
+        },
+        "getApplicationClasses$": [MockFunction],
+        "getBadge$": [MockFunction],
+        "getBrand$": [MockFunction],
+        "getBreadcrumbs$": [MockFunction],
+        "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,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
+                    "_subscriptions": Array [
+                      SubjectSubscription {
+                        "_parentOrParents": [Circular],
+                        "_subscriptions": null,
+                        "closed": false,
+                        "subject": [Circular],
+                        "subscriber": [Circular],
+                      },
+                    ],
                     "closed": false,
-                    "destination": Object {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
-                      "next": [Function],
+                    "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": false,
+                    "syncErrorThrowable": true,
                     "syncErrorThrown": false,
                     "syncErrorValue": null,
                   },
-                  "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
-                },
-                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],
+                  Subscriber {
                     "_parentOrParents": null,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
+                    "_subscriptions": Array [
+                      SubjectSubscription {
+                        "_parentOrParents": [Circular],
+                        "_subscriptions": null,
+                        "closed": false,
+                        "subject": [Circular],
+                        "subscriber": [Circular],
+                      },
+                    ],
                     "closed": false,
-                    "destination": Object {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
-                      "next": [Function],
+                    "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": false,
+                    "syncErrorThrowable": true,
                     "syncErrorThrown": false,
                     "syncErrorValue": null,
                   },
-                  "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
-                },
-              ],
-              "thrownError": 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],
+            Object {
+              "type": "return",
+              "value": BehaviorSubject {
+                "_isScalar": false,
+                "_value": false,
+                "closed": false,
+                "hasError": false,
+                "isStopped": false,
+                "observers": Array [
+                  Subscriber {
                     "_parentOrParents": null,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
+                    "_subscriptions": Array [
+                      SubjectSubscription {
+                        "_parentOrParents": [Circular],
+                        "_subscriptions": null,
+                        "closed": false,
+                        "subject": [Circular],
+                        "subscriber": [Circular],
+                      },
+                    ],
                     "closed": false,
-                    "destination": Object {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
-                      "next": [Function],
+                    "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": false,
+                    "syncErrorThrowable": true,
                     "syncErrorThrown": false,
                     "syncErrorValue": null,
                   },
-                  "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
-                },
-                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],
+                  Subscriber {
                     "_parentOrParents": null,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
+                    "_subscriptions": Array [
+                      SubjectSubscription {
+                        "_parentOrParents": [Circular],
+                        "_subscriptions": null,
+                        "closed": false,
+                        "subject": [Circular],
+                        "subscriber": [Circular],
+                      },
+                    ],
                     "closed": false,
-                    "destination": Object {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
-                      "next": [Function],
+                    "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": false,
+                    "syncErrorThrowable": true,
                     "syncErrorThrown": false,
                     "syncErrorValue": null,
                   },
-                  "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
-                },
-              ],
-              "thrownError": 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],
+            Object {
+              "type": "return",
+              "value": BehaviorSubject {
+                "_isScalar": false,
+                "_value": false,
+                "closed": false,
+                "hasError": false,
+                "isStopped": false,
+                "observers": Array [
+                  Subscriber {
                     "_parentOrParents": null,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
+                    "_subscriptions": Array [
+                      SubjectSubscription {
+                        "_parentOrParents": [Circular],
+                        "_subscriptions": null,
+                        "closed": false,
+                        "subject": [Circular],
+                        "subscriber": [Circular],
+                      },
+                    ],
                     "closed": false,
-                    "destination": Object {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
-                      "next": [Function],
+                    "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": false,
+                    "syncErrorThrowable": true,
                     "syncErrorThrown": false,
                     "syncErrorValue": null,
                   },
-                  "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
-                },
-                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],
+                  Subscriber {
                     "_parentOrParents": null,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
+                    "_subscriptions": Array [
+                      SubjectSubscription {
+                        "_parentOrParents": [Circular],
+                        "_subscriptions": null,
+                        "closed": false,
+                        "subject": [Circular],
+                        "subscriber": [Circular],
+                      },
+                    ],
                     "closed": false,
-                    "destination": Object {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
-                      "next": [Function],
+                    "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": false,
+                    "syncErrorThrowable": true,
                     "syncErrorThrown": false,
                     "syncErrorValue": null,
                   },
-                  "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
-                },
-              ],
-              "thrownError": null,
+                ],
+                "thrownError": null,
+              },
             },
-          },
-        ],
-      },
-      "getIsVisible$": [MockFunction],
-      "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],
-      "setBrand": [MockFunction],
-      "setBreadcrumbs": [MockFunction] {
-        "calls": Array [
-          Array [
+          ],
+        },
+        "getIsVisible$": [MockFunction],
+        "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],
+        "setBrand": [MockFunction],
+        "setBreadcrumbs": [MockFunction] {
+          "calls": Array [
             Array [
-              Object {
-                "href": "#/operational_panels/",
-                "text": "Operational panels",
-              },
-              Object {
-                "href": "observability#/",
-                "text": "Observability",
-              },
-              Object {
-                "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
-                "text": "",
-              },
+              Array [
+                Object {
+                  "href": "#/operational_panels/",
+                  "text": "Observability Dashboards",
+                },
+                Object {
+                  "href": "observability#/",
+                  "text": "Observability",
+                },
+                Object {
+                  "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
+                  "text": "",
+                },
+              ],
             ],
           ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      },
-      "setCustomNavLink": [MockFunction],
-      "setHelpExtension": [MockFunction],
-      "setHelpSupportUrl": [MockFunction],
-      "setIsVisible": [MockFunction],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+        "setCustomNavLink": [MockFunction],
+        "setHelpExtension": [MockFunction],
+        "setHelpSupportUrl": [MockFunction],
+        "setIsVisible": [MockFunction],
+      }
     }
-  }
-  cloneCustomPanel={[MockFunction]}
-  deleteCustomPanel={[MockFunction]}
-  dslService={
-    DSLService {
-      "fetch": [Function],
-      "fetchFields": [Function],
-      "fetchIndices": [Function],
-      "http": [MockFunction],
+    cloneCustomPanel={[MockFunction]}
+    deleteCustomPanel={[MockFunction]}
+    dslService={
+      DSLService {
+        "fetch": [Function],
+        "fetchFields": [Function],
+        "fetchIndices": [Function],
+        "http": [MockFunction],
+      }
     }
-  }
-  endTime="now"
-  http={[MockFunction]}
-  onEditClick={[Function]}
-  page="operationalPanels"
-  panelId="L8Sx53wBDp0rvEg3yoLb"
-  parentBreadcrumbs={
-    Array [
-      Object {
-        "href": "#/operational_panels/",
-        "text": "Operational panels",
-      },
-      Object {
-        "href": "observability#/",
-        "text": "Observability",
-      },
-    ]
-  }
-  pplService={
-    PPLService {
-      "fetch": [Function],
-      "http": [MockFunction],
+    endTime="now"
+    http={[MockFunction]}
+    onEditClick={[Function]}
+    page="operationalPanels"
+    panelId="L8Sx53wBDp0rvEg3yoLb"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/operational_panels/",
+          "text": "Observability Dashboards",
+        },
+        Object {
+          "href": "observability#/",
+          "text": "Observability",
+        },
+      ]
     }
-  }
-  renameCustomPanel={[MockFunction]}
-  setEndTime={[MockFunction]}
-  setStartTime={[MockFunction]}
-  setToast={[MockFunction]}
-  startTime="now-30m"
->
-  <div>
-    <EuiPage
-      id="panelView"
-    >
-      <div
-        className="euiPage euiPage--paddingMedium euiPage--grow"
+    pplService={
+      PPLService {
+        "fetch": [Function],
+        "http": [MockFunction],
+      }
+    }
+    renameCustomPanel={[MockFunction]}
+    setEndTime={[MockFunction]}
+    setStartTime={[MockFunction]}
+    setToast={[MockFunction]}
+    startTime="now-30m"
+  >
+    <div>
+      <EuiPage
         id="panelView"
       >
-        <EuiPageBody
-          component="div"
+        <div
+          className="euiPage euiPage--paddingMedium euiPage--grow"
+          id="panelView"
         >
-          <div
-            className="euiPageBody euiPageBody--borderRadiusNone"
+          <EuiPageBody
+            component="div"
           >
-            <EuiPageHeader>
-              <header
-                className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
-              >
-                <EuiPageHeaderSection>
-                  <div
-                    className="euiPageHeaderSection"
-                  >
-                    <EuiTitle
-                      size="l"
+            <div
+              className="euiPageBody euiPageBody--borderRadiusNone"
+            >
+              <EuiPageHeader>
+                <header
+                  className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+                >
+                  <EuiPageHeaderSection>
+                    <div
+                      className="euiPageHeaderSection"
                     >
-                      <h1
-                        className="euiTitle euiTitle--large"
-                        data-test-subj="panelNameHeader"
-                      />
-                    </EuiTitle>
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
+                      <EuiTitle
+                        size="l"
                       >
-                        <EuiSpacer
-                          size="s"
+                        <h1
+                          className="euiTitle euiTitle--large"
+                          data-test-subj="panelNameHeader"
+                        />
+                      </EuiTitle>
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
                         >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                      </div>
-                    </EuiFlexItem>
-                    Created on 
-                    Invalid date
-                  </div>
-                </EuiPageHeaderSection>
-                <EuiPageHeaderSection>
-                  <div
-                    className="euiPageHeaderSection"
-                  >
-                    <EuiFlexGroup
-                      gutterSize="s"
+                          <EuiSpacer
+                            size="s"
+                          >
+                            <div
+                              className="euiSpacer euiSpacer--s"
+                            />
+                          </EuiSpacer>
+                        </div>
+                      </EuiFlexItem>
+                      Created on 
+                      Invalid date
+                    </div>
+                  </EuiPageHeaderSection>
+                  <EuiPageHeaderSection>
+                    <div
+                      className="euiPageHeaderSection"
                     >
-                      <div
-                        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      <EuiFlexGroup
+                        gutterSize="s"
                       >
-                        <EuiFlexItem>
-                          <div
-                            className="euiFlexItem"
-                          >
-                            <EuiButton
-                              data-test-subj="editPanelButton"
-                              disabled={true}
-                              iconType="pencil"
-                              onClick={[Function]}
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <EuiFlexItem>
+                            <div
+                              className="euiFlexItem"
                             >
-                              <EuiButtonDisplay
-                                baseClassName="euiButton"
+                              <EuiButton
                                 data-test-subj="editPanelButton"
                                 disabled={true}
-                                element="button"
                                 iconType="pencil"
-                                isDisabled={true}
                                 onClick={[Function]}
-                                type="button"
                               >
-                                <button
-                                  className="euiButton euiButton--primary euiButton-isDisabled"
+                                <EuiButtonDisplay
+                                  baseClassName="euiButton"
                                   data-test-subj="editPanelButton"
                                   disabled={true}
+                                  element="button"
+                                  iconType="pencil"
+                                  isDisabled={true}
                                   onClick={[Function]}
-                                  style={
-                                    Object {
-                                      "minWidth": undefined,
-                                    }
-                                  }
                                   type="button"
                                 >
-                                  <EuiButtonContent
-                                    className="euiButton__content"
-                                    iconSide="left"
-                                    iconType="pencil"
-                                    textProps={
+                                  <button
+                                    className="euiButton euiButton--primary euiButton-isDisabled"
+                                    data-test-subj="editPanelButton"
+                                    disabled={true}
+                                    onClick={[Function]}
+                                    style={
                                       Object {
-                                        "className": "euiButton__text",
+                                        "minWidth": undefined,
                                       }
                                     }
+                                    type="button"
                                   >
-                                    <span
-                                      className="euiButtonContent euiButton__content"
+                                    <EuiButtonContent
+                                      className="euiButton__content"
+                                      iconSide="left"
+                                      iconType="pencil"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButton__text",
+                                        }
+                                      }
                                     >
-                                      <EuiIcon
-                                        className="euiButtonContent__icon"
-                                        color="inherit"
-                                        size="m"
-                                        type="pencil"
+                                      <span
+                                        className="euiButtonContent euiButton__content"
                                       >
-                                        <EuiIconPencil
-                                          aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                          focusable="false"
-                                          role="img"
-                                          style={null}
+                                        <EuiIcon
+                                          className="euiButtonContent__icon"
+                                          color="inherit"
+                                          size="m"
+                                          type="pencil"
                                         >
-                                          <svg
+                                          <EuiIconPencil
                                             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.148L11 2l-9 9v3h3l9-9-1.144-1.144-8.002 7.998a.502.502 0 01-.708 0 .502.502 0 010-.708l8.002-7.998zM11 1c.256 0 .512.098.707.293l3 3a.999.999 0 010 1.414l-9 9A.997.997 0 015 15H2a1 1 0 01-1-1v-3c0-.265.105-.52.293-.707l9-9A.997.997 0 0111 1zM5 14H2v-3l3 3z"
-                                            />
-                                          </svg>
-                                        </EuiIconPencil>
-                                      </EuiIcon>
-                                      <span
-                                        className="euiButton__text"
-                                      >
-                                        Edit
-                                      </span>
-                                    </span>
-                                  </EuiButtonContent>
-                                </button>
-                              </EuiButtonDisplay>
-                            </EuiButton>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiFlexItem
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
-                          >
-                            <EuiPopover
-                              anchorPosition="downCenter"
-                              button={
-                                <EuiButton
-                                  data-test-subj="panelActionContextMenu"
-                                  disabled={false}
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  onClick={[Function]}
-                                >
-                                  Panel actions
-                                </EuiButton>
-                              }
-                              closePopover={[Function]}
-                              display="inlineBlock"
-                              hasArrow={true}
-                              isOpen={false}
-                              ownFocus={true}
-                              panelPaddingSize="none"
-                              withTitle={true}
-                            >
-                              <div
-                                className="euiPopover euiPopover--anchorDownCenter"
-                                withTitle={true}
-                              >
-                                <div
-                                  className="euiPopover__anchor"
-                                >
-                                  <EuiButton
-                                    data-test-subj="panelActionContextMenu"
-                                    disabled={false}
-                                    iconSide="right"
-                                    iconType="arrowDown"
-                                    onClick={[Function]}
-                                  >
-                                    <EuiButtonDisplay
-                                      baseClassName="euiButton"
-                                      data-test-subj="panelActionContextMenu"
-                                      disabled={false}
-                                      element="button"
-                                      iconSide="right"
-                                      iconType="arrowDown"
-                                      isDisabled={false}
-                                      onClick={[Function]}
-                                      type="button"
-                                    >
-                                      <button
-                                        className="euiButton euiButton--primary"
-                                        data-test-subj="panelActionContextMenu"
-                                        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"
-                                            >
-                                              <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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                    fillRule="non-zero"
-                                                  />
-                                                </svg>
-                                              </EuiIconArrowDown>
-                                            </EuiIcon>
-                                            <span
-                                              className="euiButton__text"
+                                            <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"
                                             >
-                                              Panel actions
-                                            </span>
-                                          </span>
-                                        </EuiButtonContent>
-                                      </button>
-                                    </EuiButtonDisplay>
-                                  </EuiButton>
-                                </div>
-                              </div>
-                            </EuiPopover>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiFlexItem
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                                              <path
+                                                d="M12.148 3.148L11 2l-9 9v3h3l9-9-1.144-1.144-8.002 7.998a.502.502 0 01-.708 0 .502.502 0 010-.708l8.002-7.998zM11 1c.256 0 .512.098.707.293l3 3a.999.999 0 010 1.414l-9 9A.997.997 0 015 15H2a1 1 0 01-1-1v-3c0-.265.105-.52.293-.707l9-9A.997.997 0 0111 1zM5 14H2v-3l3 3z"
+                                              />
+                                            </svg>
+                                          </EuiIconPencil>
+                                        </EuiIcon>
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          Edit
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonDisplay>
+                              </EuiButton>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={false}
                           >
-                            <Component
-                              addVizDisabled={false}
-                              showFlyout={[Function]}
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
                             >
                               <EuiPopover
-                                anchorPosition="downLeft"
+                                anchorPosition="downCenter"
                                 button={
                                   <EuiButton
-                                    data-test-subj="addVisualizationButton"
+                                    data-test-subj="panelActionContextMenu"
                                     disabled={false}
                                     iconSide="right"
                                     iconType="arrowDown"
                                     onClick={[Function]}
                                   >
-                                    Add visualization
+                                    Dashboard Actions
                                   </EuiButton>
                                 }
                                 closePopover={[Function]}
                                 display="inlineBlock"
                                 hasArrow={true}
-                                id="addVisualizationContextMenu"
                                 isOpen={false}
                                 ownFocus={true}
                                 panelPaddingSize="none"
+                                withTitle={true}
                               >
                                 <div
-                                  className="euiPopover euiPopover--anchorDownLeft"
-                                  id="addVisualizationContextMenu"
+                                  className="euiPopover euiPopover--anchorDownCenter"
+                                  withTitle={true}
                                 >
                                   <div
                                     className="euiPopover__anchor"
                                   >
                                     <EuiButton
-                                      data-test-subj="addVisualizationButton"
+                                      data-test-subj="panelActionContextMenu"
                                       disabled={false}
                                       iconSide="right"
                                       iconType="arrowDown"
@@ -699,7 +583,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                     >
                                       <EuiButtonDisplay
                                         baseClassName="euiButton"
-                                        data-test-subj="addVisualizationButton"
+                                        data-test-subj="panelActionContextMenu"
                                         disabled={false}
                                         element="button"
                                         iconSide="right"
@@ -710,7 +594,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                       >
                                         <button
                                           className="euiButton euiButton--primary"
-                                          data-test-subj="addVisualizationButton"
+                                          data-test-subj="panelActionContextMenu"
                                           disabled={false}
                                           onClick={[Function]}
                                           style={
@@ -767,7 +651,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                               <span
                                                 className="euiButton__text"
                                               >
-                                                Add visualization
+                                                Dashboard Actions
                                               </span>
                                             </span>
                                           </EuiButtonContent>
@@ -777,430 +661,524 @@ exports[`Panels View Component renders panel view container with visualizations
                                   </div>
                                 </div>
                               </EuiPopover>
-                            </Component>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                  </div>
-                </EuiPageHeaderSection>
-              </header>
-            </EuiPageHeader>
-            <EuiPageContentBody>
-              <div
-                className="euiPageContentBody"
-              >
-                <EuiFlexGroup
-                  gutterSize="s"
-                >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-                  >
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
-                      >
-                        <Component
-                          append={
-                            <EuiLink
-                              aria-label="ppl-info"
-                              onClick={[Function]}
-                              style={
-                                Object {
-                                  "padding": "10px",
-                                }
-                              }
-                            >
-                              PPL
-                            </EuiLink>
-                          }
-                          baseQuery="source = "
-                          dslService={
-                            DSLService {
-                              "fetch": [Function],
-                              "fetchFields": [Function],
-                              "fetchIndices": [Function],
-                              "http": [MockFunction],
-                            }
-                          }
-                          getSuggestions={[Function]}
-                          handleQueryChange={[Function]}
-                          handleQuerySearch={[Function]}
-                          isDisabled={true}
-                          key="autocomplete-search-bar"
-                          onItemSelect={[Function]}
-                          placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
-                          possibleCommands={
-                            Array [
-                              Object {
-                                "label": "where",
-                              },
-                            ]
-                          }
-                          query=""
-                          tabId="panels-filter"
-                          tempQuery=""
-                        >
-                          <div
-                            aria-expanded={false}
-                            aria-haspopup="listbox"
-                            aria-labelledby="autocomplete-4-label"
-                            className="aa-Autocomplete"
-                            id="autocomplete-root"
-                            role="combobox"
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={false}
                           >
-                            <EuiFieldText
-                              append={
-                                <EuiLink
-                                  aria-label="ppl-info"
-                                  onClick={[Function]}
-                                  style={
-                                    Object {
-                                      "padding": "10px",
-                                    }
-                                  }
-                                >
-                                  PPL
-                                </EuiLink>
-                              }
-                              aria-autocomplete="both"
-                              aria-labelledby="autocomplete-4-label"
-                              autoCapitalize="off"
-                              autoComplete="off"
-                              autoCorrect="off"
-                              autoFocus={false}
-                              data-test-subj="searchAutocompleteTextArea"
-                              disabled={true}
-                              enterKeyHint="search"
-                              fullWidth={true}
-                              id="autocomplete-textarea"
-                              maxLength={512}
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onKeyDown={[Function]}
-                              placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
-                              spellCheck="false"
-                              type="search"
-                              value=""
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
                             >
-                              <EuiFormControlLayout
-                                append={
-                                  <EuiLink
-                                    aria-label="ppl-info"
-                                    onClick={[Function]}
-                                    style={
-                                      Object {
-                                        "padding": "10px",
-                                      }
-                                    }
-                                  >
-                                    PPL
-                                  </EuiLink>
-                                }
-                                fullWidth={true}
-                                inputId="autocomplete-textarea"
+                              <Component
+                                addVizDisabled={false}
+                                showFlyout={[Function]}
                               >
-                                <div
-                                  className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+                                <EuiPopover
+                                  anchorPosition="downLeft"
+                                  button={
+                                    <EuiButton
+                                      data-test-subj="addVisualizationButton"
+                                      disabled={false}
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      onClick={[Function]}
+                                    >
+                                      Add visualization
+                                    </EuiButton>
+                                  }
+                                  closePopover={[Function]}
+                                  display="inlineBlock"
+                                  hasArrow={true}
+                                  id="addVisualizationContextMenu"
+                                  isOpen={false}
+                                  ownFocus={true}
+                                  panelPaddingSize="none"
                                 >
                                   <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <EuiValidatableControl>
-                                      <input
-                                        aria-autocomplete="both"
-                                        aria-labelledby="autocomplete-4-label"
-                                        autoCapitalize="off"
-                                        autoComplete="off"
-                                        autoCorrect="off"
-                                        autoFocus={false}
-                                        className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
-                                        data-test-subj="searchAutocompleteTextArea"
-                                        disabled={true}
-                                        enterKeyHint="search"
-                                        id="autocomplete-textarea"
-                                        maxLength={512}
-                                        onBlur={[Function]}
-                                        onChange={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onKeyDown={[Function]}
-                                        placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
-                                        spellCheck="false"
-                                        type="search"
-                                        value=""
-                                      />
-                                    </EuiValidatableControl>
-                                    <EuiFormControlLayoutIcons />
-                                  </div>
-                                  <EuiLink
-                                    aria-label="ppl-info"
-                                    className="euiFormControlLayout__append"
-                                    key="0/.0"
-                                    onClick={[Function]}
-                                    style={
-                                      Object {
-                                        "padding": "10px",
-                                      }
-                                    }
+                                    className="euiPopover euiPopover--anchorDownLeft"
+                                    id="addVisualizationContextMenu"
                                   >
-                                    <button
-                                      aria-label="ppl-info"
-                                      className="euiLink euiLink--primary euiFormControlLayout__append"
-                                      disabled={false}
-                                      onClick={[Function]}
-                                      style={
-                                        Object {
-                                          "padding": "10px",
-                                        }
-                                      }
-                                      type="button"
+                                    <div
+                                      className="euiPopover__anchor"
                                     >
-                                      PPL
-                                    </button>
-                                  </EuiLink>
-                                </div>
-                              </EuiFormControlLayout>
-                            </EuiFieldText>
-                          </div>
-                        </Component>
-                      </div>
-                    </EuiFlexItem>
-                    <EuiFlexItem
-                      grow={false}
-                    >
-                      <div
-                        className="euiFlexItem euiFlexItem--flexGrowZero"
-                      >
-                        <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={false}
-                          isPaused={true}
-                          onTimeChange={[Function]}
-                          recentlyUsedRanges={Array []}
-                          refreshInterval={0}
-                          showUpdateButton={true}
-                          start="now-30m"
-                          timeFormat="HH:mm"
+                                      <EuiButton
+                                        data-test-subj="addVisualizationButton"
+                                        disabled={false}
+                                        iconSide="right"
+                                        iconType="arrowDown"
+                                        onClick={[Function]}
+                                      >
+                                        <EuiButtonDisplay
+                                          baseClassName="euiButton"
+                                          data-test-subj="addVisualizationButton"
+                                          disabled={false}
+                                          element="button"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          isDisabled={false}
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <button
+                                            className="euiButton euiButton--primary"
+                                            data-test-subj="addVisualizationButton"
+                                            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"
+                                                >
+                                                  <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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                        fillRule="non-zero"
+                                                      />
+                                                    </svg>
+                                                  </EuiIconArrowDown>
+                                                </EuiIcon>
+                                                <span
+                                                  className="euiButton__text"
+                                                >
+                                                  Add visualization
+                                                </span>
+                                              </span>
+                                            </EuiButtonContent>
+                                          </button>
+                                        </EuiButtonDisplay>
+                                      </EuiButton>
+                                    </div>
+                                  </div>
+                                </EuiPopover>
+                              </Component>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </div>
+                  </EuiPageHeaderSection>
+                </header>
+              </EuiPageHeader>
+              <EuiPageContentBody>
+                <div
+                  className="euiPageContentBody"
+                >
+                  <EuiFlexGroup
+                    gutterSize="s"
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    >
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
                         >
-                          <EuiFlexGroup
-                            className="euiSuperDatePicker__flexWrapper"
-                            gutterSize="s"
-                            responsive={false}
+                          <Component
+                            append={
+                              <EuiLink
+                                aria-label="ppl-info"
+                                onClick={[Function]}
+                                style={
+                                  Object {
+                                    "padding": "10px",
+                                  }
+                                }
+                              >
+                                PPL
+                              </EuiLink>
+                            }
+                            baseQuery="source = "
+                            dslService={
+                              DSLService {
+                                "fetch": [Function],
+                                "fetchFields": [Function],
+                                "fetchIndices": [Function],
+                                "http": [MockFunction],
+                              }
+                            }
+                            getSuggestions={[Function]}
+                            handleQueryChange={[Function]}
+                            handleQuerySearch={[Function]}
+                            isDisabled={true}
+                            key="autocomplete-search-bar"
+                            onItemSelect={[Function]}
+                            placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                            possibleCommands={
+                              Array [
+                                Object {
+                                  "label": "where",
+                                },
+                              ]
+                            }
+                            query=""
+                            tabId="panels-filter"
+                            tempQuery=""
                           >
                             <div
-                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                              aria-expanded={false}
+                              aria-haspopup="listbox"
+                              aria-labelledby="autocomplete-4-label"
+                              className="aa-Autocomplete"
+                              id="autocomplete-root"
+                              role="combobox"
                             >
-                              <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-30m"
-                                      />
+                              <EuiFieldText
+                                append={
+                                  <EuiLink
+                                    aria-label="ppl-info"
+                                    onClick={[Function]}
+                                    style={
+                                      Object {
+                                        "padding": "10px",
+                                      }
                                     }
+                                  >
+                                    PPL
+                                  </EuiLink>
+                                }
+                                aria-autocomplete="both"
+                                aria-labelledby="autocomplete-4-label"
+                                autoCapitalize="off"
+                                autoComplete="off"
+                                autoCorrect="off"
+                                autoFocus={false}
+                                data-test-subj="searchAutocompleteTextArea"
+                                disabled={true}
+                                enterKeyHint="search"
+                                fullWidth={true}
+                                id="autocomplete-textarea"
+                                maxLength={512}
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onKeyDown={[Function]}
+                                placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                                spellCheck="false"
+                                type="search"
+                                value=""
+                              >
+                                <EuiFormControlLayout
+                                  append={
+                                    <EuiLink
+                                      aria-label="ppl-info"
+                                      onClick={[Function]}
+                                      style={
+                                        Object {
+                                          "padding": "10px",
+                                        }
+                                      }
+                                    >
+                                      PPL
+                                    </EuiLink>
+                                  }
+                                  fullWidth={true}
+                                  inputId="autocomplete-textarea"
+                                >
+                                  <div
+                                    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
                                   >
                                     <div
-                                      className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                                      className="euiFormControlLayout__childrenWrapper"
                                     >
-                                      <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",
-                                            },
-                                          ]
+                                      <EuiValidatableControl>
+                                        <input
+                                          aria-autocomplete="both"
+                                          aria-labelledby="autocomplete-4-label"
+                                          autoCapitalize="off"
+                                          autoComplete="off"
+                                          autoCorrect="off"
+                                          autoFocus={false}
+                                          className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                                          data-test-subj="searchAutocompleteTextArea"
+                                          disabled={true}
+                                          enterKeyHint="search"
+                                          id="autocomplete-textarea"
+                                          maxLength={512}
+                                          onBlur={[Function]}
+                                          onChange={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          onKeyDown={[Function]}
+                                          placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                                          spellCheck="false"
+                                          type="search"
+                                          value=""
+                                        />
+                                      </EuiValidatableControl>
+                                      <EuiFormControlLayoutIcons />
+                                    </div>
+                                    <EuiLink
+                                      aria-label="ppl-info"
+                                      className="euiFormControlLayout__append"
+                                      key="0/.0"
+                                      onClick={[Function]}
+                                      style={
+                                        Object {
+                                          "padding": "10px",
                                         }
-                                        dateFormat=""
-                                        end="now"
-                                        isAutoRefreshOnly={false}
-                                        isDisabled={false}
-                                        isPaused={true}
-                                        key="0/.0"
-                                        recentlyUsedRanges={Array []}
-                                        refreshInterval={0}
-                                        start="now-30m"
+                                      }
+                                    >
+                                      <button
+                                        aria-label="ppl-info"
+                                        className="euiLink euiLink--primary euiFormControlLayout__append"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        style={
+                                          Object {
+                                            "padding": "10px",
+                                          }
+                                        }
+                                        type="button"
                                       >
-                                        <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>
+                                        PPL
+                                      </button>
+                                    </EuiLink>
+                                  </div>
+                                </EuiFormControlLayout>
+                              </EuiFieldText>
+                            </div>
+                          </Component>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <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={false}
+                            isPaused={true}
+                            onTimeChange={[Function]}
+                            recentlyUsedRanges={Array []}
+                            refreshInterval={0}
+                            showUpdateButton={true}
+                            start="now-30m"
+                            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",
+                                              },
+                                            ]
                                           }
-                                          closePopover={[Function]}
-                                          display="inlineBlock"
-                                          hasArrow={true}
-                                          isOpen={false}
-                                          ownFocus={true}
-                                          panelPaddingSize="m"
+                                          dateFormat=""
+                                          end="now"
+                                          isAutoRefreshOnly={false}
+                                          isDisabled={false}
+                                          isPaused={true}
+                                          recentlyUsedRanges={Array []}
+                                          refreshInterval={0}
+                                          start="now-30m"
+                                        />
+                                      }
+                                    >
+                                      <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-30m"
                                         >
-                                          <div
-                                            className="euiPopover euiPopover--anchorDownLeft"
-                                          >
-                                            <div
-                                              className="euiPopover__anchor euiQuickSelectPopover__anchor"
-                                            >
+                                          <EuiPopover
+                                            anchorClassName="euiQuickSelectPopover__anchor"
+                                            anchorPosition="downLeft"
+                                            button={
                                               <EuiButtonEmpty
                                                 aria-label="Date quick select"
                                                 className="euiFormControlLayout__prepend"
@@ -1216,75 +1194,77 @@ exports[`Panels View Component renders panel view container with visualizations
                                                   }
                                                 }
                                               >
-                                                <button
+                                                <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="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                                  className="euiFormControlLayout__prepend"
                                                   data-test-subj="superDatePickerToggleQuickMenuButton"
-                                                  disabled={false}
+                                                  iconSide="right"
+                                                  iconType="arrowDown"
+                                                  isDisabled={false}
                                                   onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <EuiButtonContent
-                                                    className="euiButtonEmpty__content"
-                                                    iconSide="right"
-                                                    iconSize="s"
-                                                    iconType="arrowDown"
-                                                    textProps={
-                                                      Object {
-                                                        "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
-                                                      }
+                                                  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"
                                                   >
-                                                    <span
-                                                      className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                                    <EuiButtonContent
+                                                      className="euiButtonEmpty__content"
+                                                      iconSide="right"
+                                                      iconSize="s"
+                                                      iconType="arrowDown"
+                                                      textProps={
+                                                        Object {
+                                                          "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                                        }
+                                                      }
                                                     >
-                                                      <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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                              fillRule="non-zero"
-                                                            />
-                                                          </svg>
-                                                        </EuiIconArrowDown>
-                                                      </EuiIcon>
                                                       <span
-                                                        className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                                                       >
                                                         <EuiIcon
-                                                          type="calendar"
+                                                          className="euiButtonContent__icon"
+                                                          color="inherit"
+                                                          size="s"
+                                                          type="arrowDown"
                                                         >
-                                                          <EuiIconCalendar
+                                                          <EuiIconArrowDown
                                                             aria-hidden={true}
-                                                            className="euiIcon euiIcon--medium"
+                                                            className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
                                                             focusable="false"
                                                             role="img"
                                                             style={null}
                                                           >
                                                             <svg
                                                               aria-hidden={true}
-                                                              className="euiIcon euiIcon--medium"
+                                                              className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
                                                               focusable="false"
                                                               height={16}
                                                               role="img"
@@ -1294,108 +1274,119 @@ exports[`Panels View Component renders panel view container with visualizations
                                                               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 0112.994 15H3.006A2.005 2.005 0 011 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"
+                                                                d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                                fillRule="non-zero"
                                                               />
                                                             </svg>
-                                                          </EuiIconCalendar>
+                                                          </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 0112.994 15H3.006A2.005 2.005 0 011 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>
-                                                    </span>
-                                                  </EuiButtonContent>
-                                                </button>
-                                              </EuiButtonEmpty>
+                                                    </EuiButtonContent>
+                                                  </button>
+                                                </EuiButtonEmpty>
+                                              </div>
                                             </div>
-                                          </div>
-                                        </EuiPopover>
-                                      </EuiQuickSelectPopover>
-                                      <div
-                                        className="euiFormControlLayout__childrenWrapper"
-                                      >
-                                        <EuiDatePickerRange
-                                          className="euiDatePickerRange--inGroup"
-                                          endDateControl={<div />}
-                                          iconType={false}
-                                          isCustom={true}
-                                          startDateControl={<div />}
+                                          </EuiPopover>
+                                        </EuiQuickSelectPopover>
+                                        <div
+                                          className="euiFormControlLayout__childrenWrapper"
                                         >
-                                          <div
-                                            className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                          <EuiDatePickerRange
+                                            className="euiDatePickerRange--inGroup"
+                                            endDateControl={<div />}
+                                            iconType={false}
+                                            isCustom={true}
+                                            startDateControl={<div />}
                                           >
-                                            <button
-                                              className="euiSuperDatePicker__prettyFormat"
-                                              data-test-subj="superDatePickerShowDatesButton"
-                                              disabled={false}
-                                              onClick={[Function]}
+                                            <div
+                                              className="euiDatePickerRange euiDatePickerRange--inGroup"
                                             >
-                                              Last 30 minutes
-                                              <span
-                                                className="euiSuperDatePicker__prettyFormatLink"
+                                              <button
+                                                className="euiSuperDatePicker__prettyFormat"
+                                                data-test-subj="superDatePickerShowDatesButton"
+                                                disabled={false}
+                                                onClick={[Function]}
                                               >
-                                                <EuiI18n
-                                                  default="Show dates"
-                                                  token="euiSuperDatePicker.showDatesButtonLabel"
+                                                Last 30 minutes
+                                                <span
+                                                  className="euiSuperDatePicker__prettyFormatLink"
                                                 >
-                                                  Show dates
-                                                </EuiI18n>
-                                              </span>
-                                            </button>
-                                          </div>
-                                        </EuiDatePickerRange>
-                                        <EuiFormControlLayoutIcons />
+                                                  <EuiI18n
+                                                    default="Show dates"
+                                                    token="euiSuperDatePicker.showDatesButtonLabel"
+                                                  >
+                                                    Show dates
+                                                  </EuiI18n>
+                                                </span>
+                                              </button>
+                                            </div>
+                                          </EuiDatePickerRange>
+                                          <EuiFormControlLayoutIcons />
+                                        </div>
                                       </div>
-                                    </div>
-                                  </EuiFormControlLayout>
-                                </div>
-                              </EuiFlexItem>
-                              <EuiFlexItem
-                                grow={false}
-                              >
-                                <div
-                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                    </EuiFormControlLayout>
+                                  </div>
+                                </EuiFlexItem>
+                                <EuiFlexItem
+                                  grow={false}
                                 >
-                                  <EuiSuperUpdateButton
-                                    data-test-subj="superDatePickerApplyTimeButton"
-                                    isDisabled={false}
-                                    isLoading={false}
-                                    needsUpdate={false}
-                                    onClick={[Function]}
-                                    showTooltip={true}
+                                  <div
+                                    className="euiFlexItem euiFlexItem--flexGrowZero"
                                   >
-                                    <EuiToolTip
-                                      delay="regular"
-                                      position="bottom"
+                                    <EuiSuperUpdateButton
+                                      data-test-subj="superDatePickerApplyTimeButton"
+                                      isDisabled={false}
+                                      isLoading={false}
+                                      needsUpdate={false}
+                                      onClick={[Function]}
+                                      showTooltip={true}
                                     >
-                                      <span
-                                        className="euiToolTipAnchor"
-                                        onKeyUp={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
+                                      <EuiToolTip
+                                        delay="regular"
+                                        position="bottom"
                                       >
-                                        <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",
-                                            }
-                                          }
+                                        <span
+                                          className="euiToolTipAnchor"
+                                          onKeyUp={[Function]}
+                                          onMouseOut={[Function]}
+                                          onMouseOver={[Function]}
                                         >
-                                          <EuiButtonDisplay
-                                            baseClassName="euiButton"
+                                          <EuiButton
                                             className="euiSuperUpdateButton"
                                             color="primary"
                                             data-test-subj="superDatePickerApplyTimeButton"
-                                            disabled={false}
-                                            element="button"
                                             fill={true}
                                             iconType="refresh"
                                             isDisabled={false}
@@ -1408,210 +1399,205 @@ exports[`Panels View Component renders panel view container with visualizations
                                                 "className": "euiSuperUpdateButton__text",
                                               }
                                             }
-                                            type="button"
                                           >
-                                            <button
-                                              className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
+                                            <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]}
-                                              style={
+                                              textProps={
                                                 Object {
-                                                  "minWidth": undefined,
+                                                  "className": "euiSuperUpdateButton__text",
                                                 }
                                               }
                                               type="button"
                                             >
-                                              <EuiButtonContent
-                                                className="euiButton__content"
-                                                iconSide="left"
-                                                iconType="refresh"
-                                                isLoading={false}
-                                                textProps={
+                                              <button
+                                                className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
+                                                data-test-subj="superDatePickerApplyTimeButton"
+                                                disabled={false}
+                                                onBlur={[Function]}
+                                                onClick={[Function]}
+                                                onFocus={[Function]}
+                                                style={
                                                   Object {
-                                                    "className": "euiButton__text euiSuperUpdateButton__text",
+                                                    "minWidth": undefined,
                                                   }
                                                 }
+                                                type="button"
                                               >
-                                                <span
-                                                  className="euiButtonContent euiButton__content"
+                                                <EuiButtonContent
+                                                  className="euiButton__content"
+                                                  iconSide="left"
+                                                  iconType="refresh"
+                                                  isLoading={false}
+                                                  textProps={
+                                                    Object {
+                                                      "className": "euiButton__text euiSuperUpdateButton__text",
+                                                    }
+                                                  }
                                                 >
-                                                  <EuiIcon
-                                                    className="euiButtonContent__icon"
-                                                    color="inherit"
-                                                    size="m"
-                                                    type="refresh"
+                                                  <span
+                                                    className="euiButtonContent euiButton__content"
                                                   >
-                                                    <EuiIconRefresh
-                                                      aria-hidden={true}
-                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                                      focusable="false"
-                                                      role="img"
-                                                      style={null}
+                                                    <EuiIcon
+                                                      className="euiButtonContent__icon"
+                                                      color="inherit"
+                                                      size="m"
+                                                      type="refresh"
                                                     >
-                                                      <svg
+                                                      <EuiIconRefresh
                                                         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 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
-                                                        />
-                                                      </svg>
-                                                    </EuiIconRefresh>
-                                                  </EuiIcon>
-                                                  <span
-                                                    className="euiButton__text euiSuperUpdateButton__text"
-                                                  >
-                                                    <EuiI18n
-                                                      default="Refresh"
-                                                      token="euiSuperUpdateButton.refreshButtonLabel"
+                                                        <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 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                                                          />
+                                                        </svg>
+                                                      </EuiIconRefresh>
+                                                    </EuiIcon>
+                                                    <span
+                                                      className="euiButton__text euiSuperUpdateButton__text"
                                                     >
-                                                      Refresh
-                                                    </EuiI18n>
+                                                      <EuiI18n
+                                                        default="Refresh"
+                                                        token="euiSuperUpdateButton.refreshButtonLabel"
+                                                      >
+                                                        Refresh
+                                                      </EuiI18n>
+                                                    </span>
                                                   </span>
-                                                </span>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonDisplay>
-                                        </EuiButton>
-                                      </span>
-                                    </EuiToolTip>
-                                  </EuiSuperUpdateButton>
-                                </div>
-                              </EuiFlexItem>
-                            </div>
-                          </EuiFlexGroup>
-                        </EuiSuperDatePicker>
-                      </div>
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
-                <EuiSpacer
-                  size="l"
-                >
-                  <div
-                    className="euiSpacer euiSpacer--l"
-                  />
-                </EuiSpacer>
-                <Component
-                  addVizDisabled={false}
-                  showFlyout={[Function]}
-                >
-                  <div>
-                    <EuiSpacer
-                      size="xxl"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--xxl"
-                      />
-                    </EuiSpacer>
-                    <EuiText
-                      data-test-subj="addFirstVisualizationText"
-                      textAlign="center"
-                    >
-                      <div
-                        className="euiText euiText--medium"
+                                                </EuiButtonContent>
+                                              </button>
+                                            </EuiButtonDisplay>
+                                          </EuiButton>
+                                        </span>
+                                      </EuiToolTip>
+                                    </EuiSuperUpdateButton>
+                                  </div>
+                                </EuiFlexItem>
+                              </div>
+                            </EuiFlexGroup>
+                          </EuiSuperDatePicker>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                  <EuiSpacer
+                    size="l"
+                  >
+                    <div
+                      className="euiSpacer euiSpacer--l"
+                    />
+                  </EuiSpacer>
+                  <Component
+                    addVizDisabled={false}
+                    showFlyout={[Function]}
+                  >
+                    <div>
+                      <EuiSpacer
+                        size="xxl"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--xxl"
+                        />
+                      </EuiSpacer>
+                      <EuiText
                         data-test-subj="addFirstVisualizationText"
+                        textAlign="center"
                       >
-                        <EuiTextAlign
-                          textAlign="center"
+                        <div
+                          className="euiText euiText--medium"
+                          data-test-subj="addFirstVisualizationText"
                         >
-                          <div
-                            className="euiTextAlign euiTextAlign--center"
+                          <EuiTextAlign
+                            textAlign="center"
                           >
-                            <h2>
-                              Start by adding your first visualization
-                            </h2>
-                            <EuiSpacer
-                              size="m"
-                            >
-                              <div
-                                className="euiSpacer euiSpacer--m"
-                              />
-                            </EuiSpacer>
-                            <EuiText
-                              color="subdued"
-                              size="m"
+                            <div
+                              className="euiTextAlign euiTextAlign--center"
                             >
-                              <div
-                                className="euiText euiText--medium"
+                              <h2>
+                                Start by adding your first visualization
+                              </h2>
+                              <EuiSpacer
+                                size="m"
+                              >
+                                <div
+                                  className="euiSpacer euiSpacer--m"
+                                />
+                              </EuiSpacer>
+                              <EuiText
+                                color="subdued"
+                                size="m"
                               >
-                                <EuiTextColor
-                                  color="subdued"
-                                  component="div"
+                                <div
+                                  className="euiText euiText--medium"
                                 >
-                                  <div
-                                    className="euiTextColor euiTextColor--subdued"
+                                  <EuiTextColor
+                                    color="subdued"
+                                    component="div"
                                   >
-                                    Use PPL Queries to fetch & filter observability data and create visualizations
-                                  </div>
-                                </EuiTextColor>
-                              </div>
-                            </EuiText>
-                          </div>
-                        </EuiTextAlign>
-                      </div>
-                    </EuiText>
-                    <EuiSpacer
-                      size="m"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--m"
-                      />
-                    </EuiSpacer>
-                    <EuiFlexGroup
-                      justifyContent="center"
-                    >
-                      <div
-                        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                    <div
+                                      className="euiTextColor euiTextColor--subdued"
+                                    >
+                                      Use PPL Queries to fetch & filter observability data and create visualizations
+                                    </div>
+                                  </EuiTextColor>
+                                </div>
+                              </EuiText>
+                            </div>
+                          </EuiTextAlign>
+                        </div>
+                      </EuiText>
+                      <EuiSpacer
+                        size="m"
                       >
-                        <EuiFlexItem
-                          grow={false}
+                        <div
+                          className="euiSpacer euiSpacer--m"
+                        />
+                      </EuiSpacer>
+                      <EuiFlexGroup
+                        justifyContent="center"
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
                         >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          <EuiFlexItem
+                            grow={false}
                           >
-                            <Component
-                              addVizDisabled={false}
-                              showFlyout={[Function]}
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
                             >
-                              <EuiPopover
-                                anchorPosition="downLeft"
-                                button={
-                                  <EuiButton
-                                    data-test-subj="addVisualizationButton"
-                                    disabled={false}
-                                    iconSide="right"
-                                    iconType="arrowDown"
-                                    onClick={[Function]}
-                                  >
-                                    Add visualization
-                                  </EuiButton>
-                                }
-                                closePopover={[Function]}
-                                display="inlineBlock"
-                                hasArrow={true}
-                                id="addVisualizationContextMenu"
-                                isOpen={false}
-                                ownFocus={true}
-                                panelPaddingSize="none"
+                              <Component
+                                addVizDisabled={false}
+                                showFlyout={[Function]}
                               >
-                                <div
-                                  className="euiPopover euiPopover--anchorDownLeft"
-                                  id="addVisualizationContextMenu"
-                                >
-                                  <div
-                                    className="euiPopover__anchor"
-                                  >
+                                <EuiPopover
+                                  anchorPosition="downLeft"
+                                  button={
                                     <EuiButton
                                       data-test-subj="addVisualizationButton"
                                       disabled={false}
@@ -1619,496 +1605,491 @@ exports[`Panels View Component renders panel view container with visualizations
                                       iconType="arrowDown"
                                       onClick={[Function]}
                                     >
-                                      <EuiButtonDisplay
-                                        baseClassName="euiButton"
+                                      Add visualization
+                                    </EuiButton>
+                                  }
+                                  closePopover={[Function]}
+                                  display="inlineBlock"
+                                  hasArrow={true}
+                                  id="addVisualizationContextMenu"
+                                  isOpen={false}
+                                  ownFocus={true}
+                                  panelPaddingSize="none"
+                                >
+                                  <div
+                                    className="euiPopover euiPopover--anchorDownLeft"
+                                    id="addVisualizationContextMenu"
+                                  >
+                                    <div
+                                      className="euiPopover__anchor"
+                                    >
+                                      <EuiButton
                                         data-test-subj="addVisualizationButton"
                                         disabled={false}
-                                        element="button"
                                         iconSide="right"
                                         iconType="arrowDown"
-                                        isDisabled={false}
                                         onClick={[Function]}
-                                        type="button"
                                       >
-                                        <button
-                                          className="euiButton euiButton--primary"
+                                        <EuiButtonDisplay
+                                          baseClassName="euiButton"
                                           data-test-subj="addVisualizationButton"
                                           disabled={false}
+                                          element="button"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          isDisabled={false}
                                           onClick={[Function]}
-                                          style={
-                                            Object {
-                                              "minWidth": undefined,
-                                            }
-                                          }
                                           type="button"
                                         >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="right"
-                                            iconType="arrowDown"
-                                            textProps={
+                                          <button
+                                            className="euiButton euiButton--primary"
+                                            data-test-subj="addVisualizationButton"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            style={
                                               Object {
-                                                "className": "euiButton__text",
+                                                "minWidth": undefined,
                                               }
                                             }
+                                            type="button"
                                           >
-                                            <span
-                                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                            <EuiButtonContent
+                                              className="euiButton__content"
+                                              iconSide="right"
+                                              iconType="arrowDown"
+                                              textProps={
+                                                Object {
+                                                  "className": "euiButton__text",
+                                                }
+                                              }
                                             >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                color="inherit"
-                                                size="m"
-                                                type="arrowDown"
+                                              <span
+                                                className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                               >
-                                                <EuiIconArrowDown
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
+                                                <EuiIcon
+                                                  className="euiButtonContent__icon"
+                                                  color="inherit"
+                                                  size="m"
+                                                  type="arrowDown"
                                                 >
-                                                  <svg
+                                                  <EuiIconArrowDown
                                                     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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                      fillRule="non-zero"
-                                                    />
-                                                  </svg>
-                                                </EuiIconArrowDown>
-                                              </EuiIcon>
-                                              <span
-                                                className="euiButton__text"
-                                              >
-                                                Add visualization
+                                                    <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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                        fillRule="non-zero"
+                                                      />
+                                                    </svg>
+                                                  </EuiIconArrowDown>
+                                                </EuiIcon>
+                                                <span
+                                                  className="euiButton__text"
+                                                >
+                                                  Add visualization
+                                                </span>
                                               </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
+                                            </EuiButtonContent>
+                                          </button>
+                                        </EuiButtonDisplay>
+                                      </EuiButton>
+                                    </div>
                                   </div>
-                                </div>
-                              </EuiPopover>
-                            </Component>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                    <EuiSpacer
-                      size="xxl"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--xxl"
-                      />
-                    </EuiSpacer>
-                  </div>
-                </Component>
-                <Component
-                  chrome={
-                    Object {
-                      "addApplicationClass": [MockFunction],
-                      "docTitle": Object {
-                        "change": [MockFunction],
-                        "reset": [MockFunction],
-                      },
-                      "getApplicationClasses$": [MockFunction],
-                      "getBadge$": [MockFunction],
-                      "getBrand$": [MockFunction],
-                      "getBreadcrumbs$": [MockFunction],
-                      "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],
+                                </EuiPopover>
+                              </Component>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                      <EuiSpacer
+                        size="xxl"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--xxl"
+                        />
+                      </EuiSpacer>
+                    </div>
+                  </Component>
+                  <Component
+                    chrome={
+                      Object {
+                        "addApplicationClass": [MockFunction],
+                        "docTitle": Object {
+                          "change": [MockFunction],
+                          "reset": [MockFunction],
+                        },
+                        "getApplicationClasses$": [MockFunction],
+                        "getBadge$": [MockFunction],
+                        "getBrand$": [MockFunction],
+                        "getBreadcrumbs$": [MockFunction],
+                        "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,
-                                    "_parentSubscriber": [Circular],
-                                    "_subscriptions": null,
+                                    "_subscriptions": Array [
+                                      SubjectSubscription {
+                                        "_parentOrParents": [Circular],
+                                        "_subscriptions": null,
+                                        "closed": false,
+                                        "subject": [Circular],
+                                        "subscriber": [Circular],
+                                      },
+                                    ],
                                     "closed": false,
-                                    "destination": Object {
-                                      "closed": true,
-                                      "complete": [Function],
-                                      "error": [Function],
-                                      "next": [Function],
+                                    "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": false,
+                                    "syncErrorThrowable": true,
                                     "syncErrorThrown": false,
                                     "syncErrorValue": null,
                                   },
-                                  "isStopped": false,
-                                  "syncErrorThrowable": true,
-                                  "syncErrorThrown": false,
-                                  "syncErrorValue": null,
-                                },
-                                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],
+                                  Subscriber {
                                     "_parentOrParents": null,
-                                    "_parentSubscriber": [Circular],
-                                    "_subscriptions": null,
+                                    "_subscriptions": Array [
+                                      SubjectSubscription {
+                                        "_parentOrParents": [Circular],
+                                        "_subscriptions": null,
+                                        "closed": false,
+                                        "subject": [Circular],
+                                        "subscriber": [Circular],
+                                      },
+                                    ],
                                     "closed": false,
-                                    "destination": Object {
-                                      "closed": true,
-                                      "complete": [Function],
-                                      "error": [Function],
-                                      "next": [Function],
+                                    "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": false,
+                                    "syncErrorThrowable": true,
                                     "syncErrorThrown": false,
                                     "syncErrorValue": null,
                                   },
-                                  "isStopped": false,
-                                  "syncErrorThrowable": true,
-                                  "syncErrorThrown": false,
-                                  "syncErrorValue": null,
-                                },
-                              ],
-                              "thrownError": 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],
+                            Object {
+                              "type": "return",
+                              "value": BehaviorSubject {
+                                "_isScalar": false,
+                                "_value": false,
+                                "closed": false,
+                                "hasError": false,
+                                "isStopped": false,
+                                "observers": Array [
+                                  Subscriber {
                                     "_parentOrParents": null,
-                                    "_parentSubscriber": [Circular],
-                                    "_subscriptions": null,
+                                    "_subscriptions": Array [
+                                      SubjectSubscription {
+                                        "_parentOrParents": [Circular],
+                                        "_subscriptions": null,
+                                        "closed": false,
+                                        "subject": [Circular],
+                                        "subscriber": [Circular],
+                                      },
+                                    ],
                                     "closed": false,
-                                    "destination": Object {
-                                      "closed": true,
-                                      "complete": [Function],
-                                      "error": [Function],
-                                      "next": [Function],
+                                    "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": false,
+                                    "syncErrorThrowable": true,
                                     "syncErrorThrown": false,
                                     "syncErrorValue": null,
                                   },
-                                  "isStopped": false,
-                                  "syncErrorThrowable": true,
-                                  "syncErrorThrown": false,
-                                  "syncErrorValue": null,
-                                },
-                                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],
+                                  Subscriber {
                                     "_parentOrParents": null,
-                                    "_parentSubscriber": [Circular],
-                                    "_subscriptions": null,
+                                    "_subscriptions": Array [
+                                      SubjectSubscription {
+                                        "_parentOrParents": [Circular],
+                                        "_subscriptions": null,
+                                        "closed": false,
+                                        "subject": [Circular],
+                                        "subscriber": [Circular],
+                                      },
+                                    ],
                                     "closed": false,
-                                    "destination": Object {
-                                      "closed": true,
-                                      "complete": [Function],
-                                      "error": [Function],
-                                      "next": [Function],
+                                    "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": false,
+                                    "syncErrorThrowable": true,
                                     "syncErrorThrown": false,
                                     "syncErrorValue": null,
                                   },
-                                  "isStopped": false,
-                                  "syncErrorThrowable": true,
-                                  "syncErrorThrown": false,
-                                  "syncErrorValue": null,
-                                },
-                              ],
-                              "thrownError": 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],
+                            Object {
+                              "type": "return",
+                              "value": BehaviorSubject {
+                                "_isScalar": false,
+                                "_value": false,
+                                "closed": false,
+                                "hasError": false,
+                                "isStopped": false,
+                                "observers": Array [
+                                  Subscriber {
                                     "_parentOrParents": null,
-                                    "_parentSubscriber": [Circular],
-                                    "_subscriptions": null,
+                                    "_subscriptions": Array [
+                                      SubjectSubscription {
+                                        "_parentOrParents": [Circular],
+                                        "_subscriptions": null,
+                                        "closed": false,
+                                        "subject": [Circular],
+                                        "subscriber": [Circular],
+                                      },
+                                    ],
                                     "closed": false,
-                                    "destination": Object {
-                                      "closed": true,
-                                      "complete": [Function],
-                                      "error": [Function],
-                                      "next": [Function],
+                                    "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": false,
+                                    "syncErrorThrowable": true,
                                     "syncErrorThrown": false,
                                     "syncErrorValue": null,
                                   },
-                                  "isStopped": false,
-                                  "syncErrorThrowable": true,
-                                  "syncErrorThrown": false,
-                                  "syncErrorValue": null,
-                                },
-                                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],
+                                  Subscriber {
                                     "_parentOrParents": null,
-                                    "_parentSubscriber": [Circular],
-                                    "_subscriptions": null,
+                                    "_subscriptions": Array [
+                                      SubjectSubscription {
+                                        "_parentOrParents": [Circular],
+                                        "_subscriptions": null,
+                                        "closed": false,
+                                        "subject": [Circular],
+                                        "subscriber": [Circular],
+                                      },
+                                    ],
                                     "closed": false,
-                                    "destination": Object {
-                                      "closed": true,
-                                      "complete": [Function],
-                                      "error": [Function],
-                                      "next": [Function],
+                                    "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": false,
+                                    "syncErrorThrowable": true,
                                     "syncErrorThrown": false,
                                     "syncErrorValue": null,
                                   },
-                                  "isStopped": false,
-                                  "syncErrorThrowable": true,
-                                  "syncErrorThrown": false,
-                                  "syncErrorValue": null,
-                                },
-                              ],
-                              "thrownError": null,
+                                ],
+                                "thrownError": null,
+                              },
                             },
-                          },
-                        ],
-                      },
-                      "getIsVisible$": [MockFunction],
-                      "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],
-                      "setBrand": [MockFunction],
-                      "setBreadcrumbs": [MockFunction] {
-                        "calls": Array [
-                          Array [
+                          ],
+                        },
+                        "getIsVisible$": [MockFunction],
+                        "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],
+                        "setBrand": [MockFunction],
+                        "setBreadcrumbs": [MockFunction] {
+                          "calls": Array [
                             Array [
-                              Object {
-                                "href": "#/operational_panels/",
-                                "text": "Operational panels",
-                              },
-                              Object {
-                                "href": "observability#/",
-                                "text": "Observability",
-                              },
-                              Object {
-                                "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
-                                "text": "",
-                              },
+                              Array [
+                                Object {
+                                  "href": "#/operational_panels/",
+                                  "text": "Observability Dashboards",
+                                },
+                                Object {
+                                  "href": "observability#/",
+                                  "text": "Observability",
+                                },
+                                Object {
+                                  "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
+                                  "text": "",
+                                },
+                              ],
                             ],
                           ],
-                        ],
-                        "results": Array [
-                          Object {
-                            "type": "return",
-                            "value": undefined,
-                          },
-                        ],
-                      },
-                      "setCustomNavLink": [MockFunction],
-                      "setHelpExtension": [MockFunction],
-                      "setHelpSupportUrl": [MockFunction],
-                      "setIsVisible": [MockFunction],
-                    }
-                  }
-                  cloneVisualization={[Function]}
-                  editActionType=""
-                  editMode={false}
-                  endTime="now"
-                  http={[MockFunction]}
-                  onEditClick={[Function]}
-                  onRefresh={false}
-                  panelId="L8Sx53wBDp0rvEg3yoLb"
-                  panelVisualizations={Array []}
-                  pplFilterValue=""
-                  pplService={
-                    PPLService {
-                      "fetch": [Function],
-                      "http": [MockFunction],
-                    }
-                  }
-                  setPanelVisualizations={[Function]}
-                  showFlyout={[Function]}
-                  startTime="now-30m"
-                >
-                  <WidthProvider
-                    breakpoints={
-                      Object {
-                        "lg": 1200,
-                        "md": 996,
-                        "sm": 768,
-                        "xs": 480,
-                        "xxs": 0,
+                          "results": Array [
+                            Object {
+                              "type": "return",
+                              "value": undefined,
+                            },
+                          ],
+                        },
+                        "setCustomNavLink": [MockFunction],
+                        "setHelpExtension": [MockFunction],
+                        "setHelpSupportUrl": [MockFunction],
+                        "setIsVisible": [MockFunction],
                       }
                     }
-                    className="layout full-width"
-                    cols={
-                      Object {
-                        "lg": 12,
-                        "md": 12,
-                        "sm": 12,
-                        "xs": 1,
-                        "xxs": 1,
-                      }
-                    }
-                    layouts={
-                      Object {
-                        "lg": Array [],
-                        "md": Array [],
-                        "sm": Array [],
+                    cloneVisualization={[Function]}
+                    editActionType=""
+                    editMode={false}
+                    endTime="now"
+                    http={[MockFunction]}
+                    onEditClick={[Function]}
+                    onRefresh={false}
+                    panelId="L8Sx53wBDp0rvEg3yoLb"
+                    panelVisualizations={Array []}
+                    pplFilterValue=""
+                    pplService={
+                      PPLService {
+                        "fetch": [Function],
+                        "http": [MockFunction],
                       }
                     }
-                    measureBeforeMount={false}
-                    onLayoutChange={[Function]}
+                    setPanelVisualizations={[Function]}
+                    showFlyout={[Function]}
+                    startTime="now-30m"
                   >
-                    <ResponsiveReactGridLayout
+                    <WidthProvider
                       breakpoints={
                         Object {
                           "lg": 1200,
@@ -2135,637 +2116,557 @@ exports[`Panels View Component renders panel view container with visualizations
                           "sm": Array [],
                         }
                       }
-                      onBreakpointChange={[Function]}
+                      measureBeforeMount={false}
                       onLayoutChange={[Function]}
-                      onWidthChange={[Function]}
-                      width={0}
                     >
-                      <ReactGridLayout
-                        autoSize={true}
+                      <ResponsiveReactGridLayout
+                        breakpoints={
+                          Object {
+                            "lg": 1200,
+                            "md": 996,
+                            "sm": 768,
+                            "xs": 480,
+                            "xxs": 0,
+                          }
+                        }
                         className="layout full-width"
-                        cols={1}
-                        compactType="vertical"
-                        containerPadding={null}
-                        draggableCancel=""
-                        draggableHandle=""
-                        isDraggable={true}
-                        isResizable={true}
-                        layout={Array []}
-                        margin={
-                          Array [
-                            10,
-                            10,
-                          ]
+                        cols={
+                          Object {
+                            "lg": 12,
+                            "md": 12,
+                            "sm": 12,
+                            "xs": 1,
+                            "xxs": 1,
+                          }
+                        }
+                        layouts={
+                          Object {
+                            "lg": Array [],
+                            "md": Array [],
+                            "sm": Array [],
+                          }
                         }
-                        maxRows={Infinity}
-                        onDrag={[Function]}
-                        onDragStart={[Function]}
-                        onDragStop={[Function]}
+                        onBreakpointChange={[Function]}
                         onLayoutChange={[Function]}
-                        onResize={[Function]}
-                        onResizeStart={[Function]}
-                        onResizeStop={[Function]}
-                        preventCollision={false}
-                        rowHeight={150}
-                        style={Object {}}
-                        useCSSTransforms={true}
-                        verticalCompact={true}
+                        onWidthChange={[Function]}
                         width={0}
                       >
-                        <div
-                          className="react-grid-layout layout full-width"
-                          style={
-                            Object {
-                              "height": "10px",
-                            }
+                        <ReactGridLayout
+                          autoSize={true}
+                          className="layout full-width"
+                          cols={1}
+                          compactType="vertical"
+                          containerPadding={null}
+                          draggableCancel=""
+                          draggableHandle=""
+                          isDraggable={true}
+                          isResizable={true}
+                          layout={Array []}
+                          margin={
+                            Array [
+                              10,
+                              10,
+                            ]
                           }
-                        />
-                      </ReactGridLayout>
-                    </ResponsiveReactGridLayout>
-                  </WidthProvider>
-                </Component>
-              </div>
-            </EuiPageContentBody>
-          </div>
-        </EuiPageBody>
-      </div>
-    </EuiPage>
-  </div>
-</Component>
+                          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}
+                        >
+                          <div
+                            className="react-grid-layout layout full-width"
+                            style={
+                              Object {
+                                "height": "10px",
+                              }
+                            }
+                          />
+                        </ReactGridLayout>
+                      </ResponsiveReactGridLayout>
+                    </WidthProvider>
+                  </Component>
+                </div>
+              </EuiPageContentBody>
+            </div>
+          </EuiPageBody>
+        </div>
+      </EuiPage>
+    </div>
+  </Component>
+</Provider>
 `;
 
 exports[`Panels View Component renders panel view container without visualizations 1`] = `
-<Component
-  chrome={
+<Provider
+  store={
     Object {
-      "addApplicationClass": [MockFunction],
-      "docTitle": Object {
-        "change": [MockFunction],
-        "reset": [MockFunction],
-      },
-      "getApplicationClasses$": [MockFunction],
-      "getBadge$": [MockFunction],
-      "getBrand$": [MockFunction],
-      "getBreadcrumbs$": [MockFunction],
-      "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],
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <Component
+    chrome={
+      Object {
+        "addApplicationClass": [MockFunction],
+        "docTitle": Object {
+          "change": [MockFunction],
+          "reset": [MockFunction],
+        },
+        "getApplicationClasses$": [MockFunction],
+        "getBadge$": [MockFunction],
+        "getBrand$": [MockFunction],
+        "getBreadcrumbs$": [MockFunction],
+        "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,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
+                    "_subscriptions": Array [
+                      SubjectSubscription {
+                        "_parentOrParents": [Circular],
+                        "_subscriptions": null,
+                        "closed": false,
+                        "subject": [Circular],
+                        "subscriber": [Circular],
+                      },
+                    ],
                     "closed": false,
-                    "destination": Object {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
-                      "next": [Function],
+                    "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": false,
+                    "syncErrorThrowable": true,
                     "syncErrorThrown": false,
                     "syncErrorValue": null,
                   },
-                  "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
-                },
-              ],
-              "thrownError": 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],
+            Object {
+              "type": "return",
+              "value": BehaviorSubject {
+                "_isScalar": false,
+                "_value": false,
+                "closed": false,
+                "hasError": false,
+                "isStopped": false,
+                "observers": Array [
+                  Subscriber {
                     "_parentOrParents": null,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
+                    "_subscriptions": Array [
+                      SubjectSubscription {
+                        "_parentOrParents": [Circular],
+                        "_subscriptions": null,
+                        "closed": false,
+                        "subject": [Circular],
+                        "subscriber": [Circular],
+                      },
+                    ],
                     "closed": false,
-                    "destination": Object {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
-                      "next": [Function],
+                    "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": false,
+                    "syncErrorThrowable": true,
                     "syncErrorThrown": false,
                     "syncErrorValue": null,
                   },
-                  "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
-                },
-              ],
-              "thrownError": 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],
+            Object {
+              "type": "return",
+              "value": BehaviorSubject {
+                "_isScalar": false,
+                "_value": false,
+                "closed": false,
+                "hasError": false,
+                "isStopped": false,
+                "observers": Array [
+                  Subscriber {
                     "_parentOrParents": null,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
+                    "_subscriptions": Array [
+                      SubjectSubscription {
+                        "_parentOrParents": [Circular],
+                        "_subscriptions": null,
+                        "closed": false,
+                        "subject": [Circular],
+                        "subscriber": [Circular],
+                      },
+                    ],
                     "closed": false,
-                    "destination": Object {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
-                      "next": [Function],
+                    "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": false,
+                    "syncErrorThrowable": true,
                     "syncErrorThrown": false,
                     "syncErrorValue": null,
                   },
-                  "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
-                },
-              ],
-              "thrownError": null,
+                ],
+                "thrownError": null,
+              },
             },
-          },
-        ],
-      },
-      "getIsVisible$": [MockFunction],
-      "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],
-      "setBrand": [MockFunction],
-      "setBreadcrumbs": [MockFunction] {
-        "calls": Array [
-          Array [
+          ],
+        },
+        "getIsVisible$": [MockFunction],
+        "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],
+        "setBrand": [MockFunction],
+        "setBreadcrumbs": [MockFunction] {
+          "calls": Array [
             Array [
-              Object {
-                "href": "#/operational_panels/",
-                "text": "Operational panels",
-              },
-              Object {
-                "href": "observability#/",
-                "text": "Observability",
-              },
-              Object {
-                "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
-                "text": "",
-              },
+              Array [
+                Object {
+                  "href": "#/operational_panels/",
+                  "text": "Observability Dashboards",
+                },
+                Object {
+                  "href": "observability#/",
+                  "text": "Observability",
+                },
+                Object {
+                  "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
+                  "text": "",
+                },
+              ],
             ],
           ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      },
-      "setCustomNavLink": [MockFunction],
-      "setHelpExtension": [MockFunction],
-      "setHelpSupportUrl": [MockFunction],
-      "setIsVisible": [MockFunction],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+        "setCustomNavLink": [MockFunction],
+        "setHelpExtension": [MockFunction],
+        "setHelpSupportUrl": [MockFunction],
+        "setIsVisible": [MockFunction],
+      }
     }
-  }
-  cloneCustomPanel={[MockFunction]}
-  deleteCustomPanel={[MockFunction]}
-  dslService={
-    DSLService {
-      "fetch": [Function],
-      "fetchFields": [Function],
-      "fetchIndices": [Function],
-      "http": [MockFunction],
+    cloneCustomPanel={[MockFunction]}
+    deleteCustomPanel={[MockFunction]}
+    dslService={
+      DSLService {
+        "fetch": [Function],
+        "fetchFields": [Function],
+        "fetchIndices": [Function],
+        "http": [MockFunction],
+      }
     }
-  }
-  endTime="now"
-  http={[MockFunction]}
-  onEditClick={[Function]}
-  page="operationalPanels"
-  panelId="L8Sx53wBDp0rvEg3yoLb"
-  parentBreadcrumbs={
-    Array [
-      Object {
-        "href": "#/operational_panels/",
-        "text": "Operational panels",
-      },
-      Object {
-        "href": "observability#/",
-        "text": "Observability",
-      },
-    ]
-  }
-  pplService={
-    PPLService {
-      "fetch": [Function],
-      "http": [MockFunction],
+    endTime="now"
+    http={[MockFunction]}
+    onEditClick={[Function]}
+    page="operationalPanels"
+    panelId="L8Sx53wBDp0rvEg3yoLb"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/operational_panels/",
+          "text": "Observability Dashboards",
+        },
+        Object {
+          "href": "observability#/",
+          "text": "Observability",
+        },
+      ]
     }
-  }
-  renameCustomPanel={[MockFunction]}
-  setEndTime={[MockFunction]}
-  setStartTime={[MockFunction]}
-  setToast={[MockFunction]}
-  startTime="now-30m"
->
-  <div>
-    <EuiPage
-      id="panelView"
-    >
-      <div
-        className="euiPage euiPage--paddingMedium euiPage--grow"
+    pplService={
+      PPLService {
+        "fetch": [Function],
+        "http": [MockFunction],
+      }
+    }
+    renameCustomPanel={[MockFunction]}
+    setEndTime={[MockFunction]}
+    setStartTime={[MockFunction]}
+    setToast={[MockFunction]}
+    startTime="now-30m"
+  >
+    <div>
+      <EuiPage
         id="panelView"
       >
-        <EuiPageBody
-          component="div"
+        <div
+          className="euiPage euiPage--paddingMedium euiPage--grow"
+          id="panelView"
         >
-          <div
-            className="euiPageBody euiPageBody--borderRadiusNone"
+          <EuiPageBody
+            component="div"
           >
-            <EuiPageHeader>
-              <header
-                className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
-              >
-                <EuiPageHeaderSection>
-                  <div
-                    className="euiPageHeaderSection"
-                  >
-                    <EuiTitle
-                      size="l"
+            <div
+              className="euiPageBody euiPageBody--borderRadiusNone"
+            >
+              <EuiPageHeader>
+                <header
+                  className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+                >
+                  <EuiPageHeaderSection>
+                    <div
+                      className="euiPageHeaderSection"
                     >
-                      <h1
-                        className="euiTitle euiTitle--large"
-                        data-test-subj="panelNameHeader"
-                      />
-                    </EuiTitle>
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
+                      <EuiTitle
+                        size="l"
                       >
-                        <EuiSpacer
-                          size="s"
+                        <h1
+                          className="euiTitle euiTitle--large"
+                          data-test-subj="panelNameHeader"
+                        />
+                      </EuiTitle>
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
                         >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                      </div>
-                    </EuiFlexItem>
-                    Created on 
-                    Invalid date
-                  </div>
-                </EuiPageHeaderSection>
-                <EuiPageHeaderSection>
-                  <div
-                    className="euiPageHeaderSection"
-                  >
-                    <EuiFlexGroup
-                      gutterSize="s"
+                          <EuiSpacer
+                            size="s"
+                          >
+                            <div
+                              className="euiSpacer euiSpacer--s"
+                            />
+                          </EuiSpacer>
+                        </div>
+                      </EuiFlexItem>
+                      Created on 
+                      Invalid date
+                    </div>
+                  </EuiPageHeaderSection>
+                  <EuiPageHeaderSection>
+                    <div
+                      className="euiPageHeaderSection"
                     >
-                      <div
-                        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      <EuiFlexGroup
+                        gutterSize="s"
                       >
-                        <EuiFlexItem>
-                          <div
-                            className="euiFlexItem"
-                          >
-                            <EuiButton
-                              data-test-subj="editPanelButton"
-                              disabled={true}
-                              iconType="pencil"
-                              onClick={[Function]}
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <EuiFlexItem>
+                            <div
+                              className="euiFlexItem"
                             >
-                              <EuiButtonDisplay
-                                baseClassName="euiButton"
+                              <EuiButton
                                 data-test-subj="editPanelButton"
                                 disabled={true}
-                                element="button"
                                 iconType="pencil"
-                                isDisabled={true}
                                 onClick={[Function]}
-                                type="button"
                               >
-                                <button
-                                  className="euiButton euiButton--primary euiButton-isDisabled"
+                                <EuiButtonDisplay
+                                  baseClassName="euiButton"
                                   data-test-subj="editPanelButton"
                                   disabled={true}
+                                  element="button"
+                                  iconType="pencil"
+                                  isDisabled={true}
                                   onClick={[Function]}
-                                  style={
-                                    Object {
-                                      "minWidth": undefined,
-                                    }
-                                  }
                                   type="button"
                                 >
-                                  <EuiButtonContent
-                                    className="euiButton__content"
-                                    iconSide="left"
-                                    iconType="pencil"
-                                    textProps={
+                                  <button
+                                    className="euiButton euiButton--primary euiButton-isDisabled"
+                                    data-test-subj="editPanelButton"
+                                    disabled={true}
+                                    onClick={[Function]}
+                                    style={
                                       Object {
-                                        "className": "euiButton__text",
+                                        "minWidth": undefined,
                                       }
                                     }
+                                    type="button"
                                   >
-                                    <span
-                                      className="euiButtonContent euiButton__content"
+                                    <EuiButtonContent
+                                      className="euiButton__content"
+                                      iconSide="left"
+                                      iconType="pencil"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButton__text",
+                                        }
+                                      }
                                     >
-                                      <EuiIcon
-                                        className="euiButtonContent__icon"
-                                        color="inherit"
-                                        size="m"
-                                        type="pencil"
+                                      <span
+                                        className="euiButtonContent euiButton__content"
                                       >
-                                        <EuiIconEmpty
-                                          aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                          focusable="false"
-                                          role="img"
-                                          style={null}
+                                        <EuiIcon
+                                          className="euiButtonContent__icon"
+                                          color="inherit"
+                                          size="m"
+                                          type="pencil"
                                         >
-                                          <svg
+                                          <EuiIconEmpty
                                             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
-                                      </span>
-                                    </span>
-                                  </EuiButtonContent>
-                                </button>
-                              </EuiButtonDisplay>
-                            </EuiButton>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiFlexItem
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
-                          >
-                            <EuiPopover
-                              anchorPosition="downCenter"
-                              button={
-                                <EuiButton
-                                  data-test-subj="panelActionContextMenu"
-                                  disabled={false}
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  onClick={[Function]}
-                                >
-                                  Panel actions
-                                </EuiButton>
-                              }
-                              closePopover={[Function]}
-                              display="inlineBlock"
-                              hasArrow={true}
-                              isOpen={false}
-                              ownFocus={true}
-                              panelPaddingSize="none"
-                              withTitle={true}
-                            >
-                              <div
-                                className="euiPopover euiPopover--anchorDownCenter"
-                                withTitle={true}
-                              >
-                                <div
-                                  className="euiPopover__anchor"
-                                >
-                                  <EuiButton
-                                    data-test-subj="panelActionContextMenu"
-                                    disabled={false}
-                                    iconSide="right"
-                                    iconType="arrowDown"
-                                    onClick={[Function]}
-                                  >
-                                    <EuiButtonDisplay
-                                      baseClassName="euiButton"
-                                      data-test-subj="panelActionContextMenu"
-                                      disabled={false}
-                                      element="button"
-                                      iconSide="right"
-                                      iconType="arrowDown"
-                                      isDisabled={false}
-                                      onClick={[Function]}
-                                      type="button"
-                                    >
-                                      <button
-                                        className="euiButton euiButton--primary"
-                                        data-test-subj="panelActionContextMenu"
-                                        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"
-                                            >
-                                              Panel actions
-                                            </span>
-                                          </span>
-                                        </EuiButtonContent>
-                                      </button>
-                                    </EuiButtonDisplay>
-                                  </EuiButton>
-                                </div>
-                              </div>
-                            </EuiPopover>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiFlexItem
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                                            <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
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonDisplay>
+                              </EuiButton>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={false}
                           >
-                            <Component
-                              addVizDisabled={false}
-                              showFlyout={[Function]}
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
                             >
                               <EuiPopover
-                                anchorPosition="downLeft"
+                                anchorPosition="downCenter"
                                 button={
                                   <EuiButton
-                                    data-test-subj="addVisualizationButton"
+                                    data-test-subj="panelActionContextMenu"
                                     disabled={false}
                                     iconSide="right"
                                     iconType="arrowDown"
                                     onClick={[Function]}
                                   >
-                                    Add visualization
+                                    Dashboard Actions
                                   </EuiButton>
                                 }
                                 closePopover={[Function]}
                                 display="inlineBlock"
                                 hasArrow={true}
-                                id="addVisualizationContextMenu"
                                 isOpen={false}
                                 ownFocus={true}
                                 panelPaddingSize="none"
+                                withTitle={true}
                               >
                                 <div
-                                  className="euiPopover euiPopover--anchorDownLeft"
-                                  id="addVisualizationContextMenu"
+                                  className="euiPopover euiPopover--anchorDownCenter"
+                                  withTitle={true}
                                 >
                                   <div
                                     className="euiPopover__anchor"
                                   >
                                     <EuiButton
-                                      data-test-subj="addVisualizationButton"
+                                      data-test-subj="panelActionContextMenu"
                                       disabled={false}
                                       iconSide="right"
                                       iconType="arrowDown"
@@ -2773,7 +2674,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                     >
                                       <EuiButtonDisplay
                                         baseClassName="euiButton"
-                                        data-test-subj="addVisualizationButton"
+                                        data-test-subj="panelActionContextMenu"
                                         disabled={false}
                                         element="button"
                                         iconSide="right"
@@ -2784,7 +2685,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                       >
                                         <button
                                           className="euiButton euiButton--primary"
-                                          data-test-subj="addVisualizationButton"
+                                          data-test-subj="panelActionContextMenu"
                                           disabled={false}
                                           onClick={[Function]}
                                           style={
@@ -2836,125 +2737,211 @@ exports[`Panels View Component renders panel view container without visualizatio
                                               <span
                                                 className="euiButton__text"
                                               >
-                                                Add visualization
+                                                Dashboard Actions
+                                              </span>
+                                            </span>
+                                          </EuiButtonContent>
+                                        </button>
+                                      </EuiButtonDisplay>
+                                    </EuiButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={false}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <Component
+                                addVizDisabled={false}
+                                showFlyout={[Function]}
+                              >
+                                <EuiPopover
+                                  anchorPosition="downLeft"
+                                  button={
+                                    <EuiButton
+                                      data-test-subj="addVisualizationButton"
+                                      disabled={false}
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      onClick={[Function]}
+                                    >
+                                      Add visualization
+                                    </EuiButton>
+                                  }
+                                  closePopover={[Function]}
+                                  display="inlineBlock"
+                                  hasArrow={true}
+                                  id="addVisualizationContextMenu"
+                                  isOpen={false}
+                                  ownFocus={true}
+                                  panelPaddingSize="none"
+                                >
+                                  <div
+                                    className="euiPopover euiPopover--anchorDownLeft"
+                                    id="addVisualizationContextMenu"
+                                  >
+                                    <div
+                                      className="euiPopover__anchor"
+                                    >
+                                      <EuiButton
+                                        data-test-subj="addVisualizationButton"
+                                        disabled={false}
+                                        iconSide="right"
+                                        iconType="arrowDown"
+                                        onClick={[Function]}
+                                      >
+                                        <EuiButtonDisplay
+                                          baseClassName="euiButton"
+                                          data-test-subj="addVisualizationButton"
+                                          disabled={false}
+                                          element="button"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          isDisabled={false}
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <button
+                                            className="euiButton euiButton--primary"
+                                            data-test-subj="addVisualizationButton"
+                                            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"
+                                                >
+                                                  Add visualization
+                                                </span>
                                               </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
+                                            </EuiButtonContent>
+                                          </button>
+                                        </EuiButtonDisplay>
+                                      </EuiButton>
+                                    </div>
                                   </div>
-                                </div>
-                              </EuiPopover>
-                            </Component>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                  </div>
-                </EuiPageHeaderSection>
-              </header>
-            </EuiPageHeader>
-            <EuiPageContentBody>
-              <div
-                className="euiPageContentBody"
-              >
-                <EuiFlexGroup
-                  gutterSize="s"
+                                </EuiPopover>
+                              </Component>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </div>
+                  </EuiPageHeaderSection>
+                </header>
+              </EuiPageHeader>
+              <EuiPageContentBody>
+                <div
+                  className="euiPageContentBody"
                 >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  <EuiFlexGroup
+                    gutterSize="s"
                   >
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
-                      >
-                        <Component
-                          append={
-                            <EuiLink
-                              aria-label="ppl-info"
-                              onClick={[Function]}
-                              style={
-                                Object {
-                                  "padding": "10px",
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    >
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
+                        >
+                          <Component
+                            append={
+                              <EuiLink
+                                aria-label="ppl-info"
+                                onClick={[Function]}
+                                style={
+                                  Object {
+                                    "padding": "10px",
+                                  }
                                 }
+                              >
+                                PPL
+                              </EuiLink>
+                            }
+                            baseQuery="source = "
+                            dslService={
+                              DSLService {
+                                "fetch": [Function],
+                                "fetchFields": [Function],
+                                "fetchIndices": [Function],
+                                "http": [MockFunction],
                               }
-                            >
-                              PPL
-                            </EuiLink>
-                          }
-                          baseQuery="source = "
-                          dslService={
-                            DSLService {
-                              "fetch": [Function],
-                              "fetchFields": [Function],
-                              "fetchIndices": [Function],
-                              "http": [MockFunction],
                             }
-                          }
-                          getSuggestions={[Function]}
-                          handleQueryChange={[Function]}
-                          handleQuerySearch={[Function]}
-                          isDisabled={true}
-                          key="autocomplete-search-bar"
-                          onItemSelect={[Function]}
-                          placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
-                          possibleCommands={
-                            Array [
-                              Object {
-                                "label": "where",
-                              },
-                            ]
-                          }
-                          query=""
-                          tabId="panels-filter"
-                          tempQuery=""
-                        >
-                          <div
-                            aria-expanded={false}
-                            aria-haspopup="listbox"
-                            aria-labelledby="autocomplete-1-label"
-                            className="aa-Autocomplete"
-                            id="autocomplete-root"
-                            role="combobox"
+                            getSuggestions={[Function]}
+                            handleQueryChange={[Function]}
+                            handleQuerySearch={[Function]}
+                            isDisabled={true}
+                            key="autocomplete-search-bar"
+                            onItemSelect={[Function]}
+                            placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                            possibleCommands={
+                              Array [
+                                Object {
+                                  "label": "where",
+                                },
+                              ]
+                            }
+                            query=""
+                            tabId="panels-filter"
+                            tempQuery=""
                           >
-                            <EuiFieldText
-                              append={
-                                <EuiLink
-                                  aria-label="ppl-info"
-                                  onClick={[Function]}
-                                  style={
-                                    Object {
-                                      "padding": "10px",
-                                    }
-                                  }
-                                >
-                                  PPL
-                                </EuiLink>
-                              }
-                              aria-autocomplete="both"
+                            <div
+                              aria-expanded={false}
+                              aria-haspopup="listbox"
                               aria-labelledby="autocomplete-1-label"
-                              autoCapitalize="off"
-                              autoComplete="off"
-                              autoCorrect="off"
-                              autoFocus={false}
-                              data-test-subj="searchAutocompleteTextArea"
-                              disabled={true}
-                              enterKeyHint="search"
-                              fullWidth={true}
-                              id="autocomplete-textarea"
-                              maxLength={512}
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onKeyDown={[Function]}
-                              placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
-                              spellCheck="false"
-                              type="search"
-                              value=""
+                              className="aa-Autocomplete"
+                              id="autocomplete-root"
+                              role="combobox"
                             >
-                              <EuiFormControlLayout
+                              <EuiFieldText
                                 append={
                                   <EuiLink
                                     aria-label="ppl-info"
@@ -2968,308 +2955,311 @@ exports[`Panels View Component renders panel view container without visualizatio
                                     PPL
                                   </EuiLink>
                                 }
+                                aria-autocomplete="both"
+                                aria-labelledby="autocomplete-1-label"
+                                autoCapitalize="off"
+                                autoComplete="off"
+                                autoCorrect="off"
+                                autoFocus={false}
+                                data-test-subj="searchAutocompleteTextArea"
+                                disabled={true}
+                                enterKeyHint="search"
                                 fullWidth={true}
-                                inputId="autocomplete-textarea"
+                                id="autocomplete-textarea"
+                                maxLength={512}
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onKeyDown={[Function]}
+                                placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                                spellCheck="false"
+                                type="search"
+                                value=""
                               >
-                                <div
-                                  className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+                                <EuiFormControlLayout
+                                  append={
+                                    <EuiLink
+                                      aria-label="ppl-info"
+                                      onClick={[Function]}
+                                      style={
+                                        Object {
+                                          "padding": "10px",
+                                        }
+                                      }
+                                    >
+                                      PPL
+                                    </EuiLink>
+                                  }
+                                  fullWidth={true}
+                                  inputId="autocomplete-textarea"
                                 >
                                   <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <EuiValidatableControl>
-                                      <input
-                                        aria-autocomplete="both"
-                                        aria-labelledby="autocomplete-1-label"
-                                        autoCapitalize="off"
-                                        autoComplete="off"
-                                        autoCorrect="off"
-                                        autoFocus={false}
-                                        className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
-                                        data-test-subj="searchAutocompleteTextArea"
-                                        disabled={true}
-                                        enterKeyHint="search"
-                                        id="autocomplete-textarea"
-                                        maxLength={512}
-                                        onBlur={[Function]}
-                                        onChange={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onKeyDown={[Function]}
-                                        placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
-                                        spellCheck="false"
-                                        type="search"
-                                        value=""
-                                      />
-                                    </EuiValidatableControl>
-                                    <EuiFormControlLayoutIcons />
-                                  </div>
-                                  <EuiLink
-                                    aria-label="ppl-info"
-                                    className="euiFormControlLayout__append"
-                                    key="0/.0"
-                                    onClick={[Function]}
-                                    style={
-                                      Object {
-                                        "padding": "10px",
-                                      }
-                                    }
+                                    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
                                   >
-                                    <button
+                                    <div
+                                      className="euiFormControlLayout__childrenWrapper"
+                                    >
+                                      <EuiValidatableControl>
+                                        <input
+                                          aria-autocomplete="both"
+                                          aria-labelledby="autocomplete-1-label"
+                                          autoCapitalize="off"
+                                          autoComplete="off"
+                                          autoCorrect="off"
+                                          autoFocus={false}
+                                          className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                                          data-test-subj="searchAutocompleteTextArea"
+                                          disabled={true}
+                                          enterKeyHint="search"
+                                          id="autocomplete-textarea"
+                                          maxLength={512}
+                                          onBlur={[Function]}
+                                          onChange={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          onKeyDown={[Function]}
+                                          placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                                          spellCheck="false"
+                                          type="search"
+                                          value=""
+                                        />
+                                      </EuiValidatableControl>
+                                      <EuiFormControlLayoutIcons />
+                                    </div>
+                                    <EuiLink
                                       aria-label="ppl-info"
-                                      className="euiLink euiLink--primary euiFormControlLayout__append"
-                                      disabled={false}
+                                      className="euiFormControlLayout__append"
+                                      key="0/.0"
                                       onClick={[Function]}
                                       style={
                                         Object {
                                           "padding": "10px",
                                         }
                                       }
-                                      type="button"
                                     >
-                                      PPL
-                                    </button>
-                                  </EuiLink>
-                                </div>
-                              </EuiFormControlLayout>
-                            </EuiFieldText>
-                          </div>
-                        </Component>
-                      </div>
-                    </EuiFlexItem>
-                    <EuiFlexItem
-                      grow={false}
-                    >
-                      <div
-                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                                      <button
+                                        aria-label="ppl-info"
+                                        className="euiLink euiLink--primary euiFormControlLayout__append"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        style={
+                                          Object {
+                                            "padding": "10px",
+                                          }
+                                        }
+                                        type="button"
+                                      >
+                                        PPL
+                                      </button>
+                                    </EuiLink>
+                                  </div>
+                                </EuiFormControlLayout>
+                              </EuiFieldText>
+                            </div>
+                          </Component>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
                       >
-                        <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={false}
-                          isPaused={true}
-                          onTimeChange={[Function]}
-                          recentlyUsedRanges={Array []}
-                          refreshInterval={0}
-                          showUpdateButton={true}
-                          start="now-30m"
-                          timeFormat="HH:mm"
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
                         >
-                          <EuiFlexGroup
-                            className="euiSuperDatePicker__flexWrapper"
-                            gutterSize="s"
-                            responsive={false}
+                          <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={false}
+                            isPaused={true}
+                            onTimeChange={[Function]}
+                            recentlyUsedRanges={Array []}
+                            refreshInterval={0}
+                            showUpdateButton={true}
+                            start="now-30m"
+                            timeFormat="HH:mm"
                           >
-                            <div
-                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                            <EuiFlexGroup
+                              className="euiSuperDatePicker__flexWrapper"
+                              gutterSize="s"
+                              responsive={false}
                             >
-                              <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-30m"
-                                      />
-                                    }
+                              <div
+                                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                              >
+                                <EuiFlexItem>
+                                  <div
+                                    className="euiFlexItem"
                                   >
-                                    <div
-                                      className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                                    <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-30m"
+                                        />
+                                      }
                                     >
-                                      <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-30m"
+                                      <div
+                                        className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
                                       >
-                                        <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>
+                                        <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",
+                                              },
+                                            ]
                                           }
-                                          closePopover={[Function]}
-                                          display="inlineBlock"
-                                          hasArrow={true}
-                                          isOpen={false}
-                                          ownFocus={true}
-                                          panelPaddingSize="m"
+                                          dateFormat=""
+                                          end="now"
+                                          isAutoRefreshOnly={false}
+                                          isDisabled={false}
+                                          isPaused={true}
+                                          key="0/.0"
+                                          recentlyUsedRanges={Array []}
+                                          refreshInterval={0}
+                                          start="now-30m"
                                         >
-                                          <div
-                                            className="euiPopover euiPopover--anchorDownLeft"
-                                          >
-                                            <div
-                                              className="euiPopover__anchor euiQuickSelectPopover__anchor"
-                                            >
+                                          <EuiPopover
+                                            anchorClassName="euiQuickSelectPopover__anchor"
+                                            anchorPosition="downLeft"
+                                            button={
                                               <EuiButtonEmpty
                                                 aria-label="Date quick select"
                                                 className="euiFormControlLayout__prepend"
@@ -3285,70 +3275,77 @@ exports[`Panels View Component renders panel view container without visualizatio
                                                   }
                                                 }
                                               >
-                                                <button
+                                                <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="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                                  className="euiFormControlLayout__prepend"
                                                   data-test-subj="superDatePickerToggleQuickMenuButton"
-                                                  disabled={false}
+                                                  iconSide="right"
+                                                  iconType="arrowDown"
+                                                  isDisabled={false}
                                                   onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <EuiButtonContent
-                                                    className="euiButtonEmpty__content"
-                                                    iconSide="right"
-                                                    iconSize="s"
-                                                    iconType="arrowDown"
-                                                    textProps={
-                                                      Object {
-                                                        "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
-                                                      }
+                                                  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"
                                                   >
-                                                    <span
-                                                      className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                                    <EuiButtonContent
+                                                      className="euiButtonEmpty__content"
+                                                      iconSide="right"
+                                                      iconSize="s"
+                                                      iconType="arrowDown"
+                                                      textProps={
+                                                        Object {
+                                                          "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                                        }
+                                                      }
                                                     >
-                                                      <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"
+                                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                                                       >
                                                         <EuiIcon
-                                                          type="calendar"
+                                                          className="euiButtonContent__icon"
+                                                          color="inherit"
+                                                          size="s"
+                                                          type="arrowDown"
                                                         >
                                                           <EuiIconEmpty
                                                             aria-hidden={true}
-                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                            className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                             focusable="false"
                                                             role="img"
                                                             style={null}
                                                           >
                                                             <svg
                                                               aria-hidden={true}
-                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                              className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                               focusable="false"
                                                               height={16}
                                                               role="img"
@@ -3359,102 +3356,108 @@ exports[`Panels View Component renders panel view container without visualizatio
                                                             />
                                                           </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>
-                                                    </span>
-                                                  </EuiButtonContent>
-                                                </button>
-                                              </EuiButtonEmpty>
+                                                    </EuiButtonContent>
+                                                  </button>
+                                                </EuiButtonEmpty>
+                                              </div>
                                             </div>
-                                          </div>
-                                        </EuiPopover>
-                                      </EuiQuickSelectPopover>
-                                      <div
-                                        className="euiFormControlLayout__childrenWrapper"
-                                      >
-                                        <EuiDatePickerRange
-                                          className="euiDatePickerRange--inGroup"
-                                          endDateControl={<div />}
-                                          iconType={false}
-                                          isCustom={true}
-                                          startDateControl={<div />}
+                                          </EuiPopover>
+                                        </EuiQuickSelectPopover>
+                                        <div
+                                          className="euiFormControlLayout__childrenWrapper"
                                         >
-                                          <div
-                                            className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                          <EuiDatePickerRange
+                                            className="euiDatePickerRange--inGroup"
+                                            endDateControl={<div />}
+                                            iconType={false}
+                                            isCustom={true}
+                                            startDateControl={<div />}
                                           >
-                                            <button
-                                              className="euiSuperDatePicker__prettyFormat"
-                                              data-test-subj="superDatePickerShowDatesButton"
-                                              disabled={false}
-                                              onClick={[Function]}
+                                            <div
+                                              className="euiDatePickerRange euiDatePickerRange--inGroup"
                                             >
-                                              Last 30 minutes
-                                              <span
-                                                className="euiSuperDatePicker__prettyFormatLink"
+                                              <button
+                                                className="euiSuperDatePicker__prettyFormat"
+                                                data-test-subj="superDatePickerShowDatesButton"
+                                                disabled={false}
+                                                onClick={[Function]}
                                               >
-                                                <EuiI18n
-                                                  default="Show dates"
-                                                  token="euiSuperDatePicker.showDatesButtonLabel"
+                                                Last 30 minutes
+                                                <span
+                                                  className="euiSuperDatePicker__prettyFormatLink"
                                                 >
-                                                  Show dates
-                                                </EuiI18n>
-                                              </span>
-                                            </button>
-                                          </div>
-                                        </EuiDatePickerRange>
-                                        <EuiFormControlLayoutIcons />
+                                                  <EuiI18n
+                                                    default="Show dates"
+                                                    token="euiSuperDatePicker.showDatesButtonLabel"
+                                                  >
+                                                    Show dates
+                                                  </EuiI18n>
+                                                </span>
+                                              </button>
+                                            </div>
+                                          </EuiDatePickerRange>
+                                          <EuiFormControlLayoutIcons />
+                                        </div>
                                       </div>
-                                    </div>
-                                  </EuiFormControlLayout>
-                                </div>
-                              </EuiFlexItem>
-                              <EuiFlexItem
-                                grow={false}
-                              >
-                                <div
-                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                    </EuiFormControlLayout>
+                                  </div>
+                                </EuiFlexItem>
+                                <EuiFlexItem
+                                  grow={false}
                                 >
-                                  <EuiSuperUpdateButton
-                                    data-test-subj="superDatePickerApplyTimeButton"
-                                    isDisabled={false}
-                                    isLoading={false}
-                                    needsUpdate={false}
-                                    onClick={[Function]}
-                                    showTooltip={true}
+                                  <div
+                                    className="euiFlexItem euiFlexItem--flexGrowZero"
                                   >
-                                    <EuiToolTip
-                                      delay="regular"
-                                      position="bottom"
+                                    <EuiSuperUpdateButton
+                                      data-test-subj="superDatePickerApplyTimeButton"
+                                      isDisabled={false}
+                                      isLoading={false}
+                                      needsUpdate={false}
+                                      onClick={[Function]}
+                                      showTooltip={true}
                                     >
-                                      <span
-                                        className="euiToolTipAnchor"
-                                        onKeyUp={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
+                                      <EuiToolTip
+                                        delay="regular"
+                                        position="bottom"
                                       >
-                                        <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",
-                                            }
-                                          }
+                                        <span
+                                          className="euiToolTipAnchor"
+                                          onKeyUp={[Function]}
+                                          onMouseOut={[Function]}
+                                          onMouseOver={[Function]}
                                         >
-                                          <EuiButtonDisplay
-                                            baseClassName="euiButton"
+                                          <EuiButton
                                             className="euiSuperUpdateButton"
                                             color="primary"
                                             data-test-subj="superDatePickerApplyTimeButton"
-                                            disabled={false}
-                                            element="button"
                                             fill={true}
                                             iconType="refresh"
                                             isDisabled={false}
@@ -3467,206 +3470,201 @@ exports[`Panels View Component renders panel view container without visualizatio
                                                 "className": "euiSuperUpdateButton__text",
                                               }
                                             }
-                                            type="button"
                                           >
-                                            <button
-                                              className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
+                                            <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]}
-                                              style={
+                                              textProps={
                                                 Object {
-                                                  "minWidth": undefined,
+                                                  "className": "euiSuperUpdateButton__text",
                                                 }
                                               }
                                               type="button"
                                             >
-                                              <EuiButtonContent
-                                                className="euiButton__content"
-                                                iconSide="left"
-                                                iconType="refresh"
-                                                isLoading={false}
-                                                textProps={
+                                              <button
+                                                className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
+                                                data-test-subj="superDatePickerApplyTimeButton"
+                                                disabled={false}
+                                                onBlur={[Function]}
+                                                onClick={[Function]}
+                                                onFocus={[Function]}
+                                                style={
                                                   Object {
-                                                    "className": "euiButton__text euiSuperUpdateButton__text",
+                                                    "minWidth": undefined,
                                                   }
                                                 }
+                                                type="button"
                                               >
-                                                <span
-                                                  className="euiButtonContent euiButton__content"
+                                                <EuiButtonContent
+                                                  className="euiButton__content"
+                                                  iconSide="left"
+                                                  iconType="refresh"
+                                                  isLoading={false}
+                                                  textProps={
+                                                    Object {
+                                                      "className": "euiButton__text euiSuperUpdateButton__text",
+                                                    }
+                                                  }
                                                 >
-                                                  <EuiIcon
-                                                    className="euiButtonContent__icon"
-                                                    color="inherit"
-                                                    size="m"
-                                                    type="refresh"
+                                                  <span
+                                                    className="euiButtonContent euiButton__content"
                                                   >
-                                                    <EuiIconEmpty
-                                                      aria-hidden={true}
-                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                                      focusable="false"
-                                                      role="img"
-                                                      style={null}
+                                                    <EuiIcon
+                                                      className="euiButtonContent__icon"
+                                                      color="inherit"
+                                                      size="m"
+                                                      type="refresh"
                                                     >
-                                                      <svg
+                                                      <EuiIconEmpty
                                                         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"
+                                                      >
+                                                        <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"
                                                     >
-                                                      Refresh
-                                                    </EuiI18n>
+                                                      <EuiI18n
+                                                        default="Refresh"
+                                                        token="euiSuperUpdateButton.refreshButtonLabel"
+                                                      >
+                                                        Refresh
+                                                      </EuiI18n>
+                                                    </span>
                                                   </span>
-                                                </span>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonDisplay>
-                                        </EuiButton>
-                                      </span>
-                                    </EuiToolTip>
-                                  </EuiSuperUpdateButton>
-                                </div>
-                              </EuiFlexItem>
-                            </div>
-                          </EuiFlexGroup>
-                        </EuiSuperDatePicker>
-                      </div>
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
-                <EuiSpacer
-                  size="l"
-                >
-                  <div
-                    className="euiSpacer euiSpacer--l"
-                  />
-                </EuiSpacer>
-                <Component
-                  addVizDisabled={false}
-                  showFlyout={[Function]}
-                >
-                  <div>
-                    <EuiSpacer
-                      size="xxl"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--xxl"
-                      />
-                    </EuiSpacer>
-                    <EuiText
-                      data-test-subj="addFirstVisualizationText"
-                      textAlign="center"
-                    >
-                      <div
-                        className="euiText euiText--medium"
+                                                </EuiButtonContent>
+                                              </button>
+                                            </EuiButtonDisplay>
+                                          </EuiButton>
+                                        </span>
+                                      </EuiToolTip>
+                                    </EuiSuperUpdateButton>
+                                  </div>
+                                </EuiFlexItem>
+                              </div>
+                            </EuiFlexGroup>
+                          </EuiSuperDatePicker>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                  <EuiSpacer
+                    size="l"
+                  >
+                    <div
+                      className="euiSpacer euiSpacer--l"
+                    />
+                  </EuiSpacer>
+                  <Component
+                    addVizDisabled={false}
+                    showFlyout={[Function]}
+                  >
+                    <div>
+                      <EuiSpacer
+                        size="xxl"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--xxl"
+                        />
+                      </EuiSpacer>
+                      <EuiText
                         data-test-subj="addFirstVisualizationText"
+                        textAlign="center"
                       >
-                        <EuiTextAlign
-                          textAlign="center"
+                        <div
+                          className="euiText euiText--medium"
+                          data-test-subj="addFirstVisualizationText"
                         >
-                          <div
-                            className="euiTextAlign euiTextAlign--center"
+                          <EuiTextAlign
+                            textAlign="center"
                           >
-                            <h2>
-                              Start by adding your first visualization
-                            </h2>
-                            <EuiSpacer
-                              size="m"
-                            >
-                              <div
-                                className="euiSpacer euiSpacer--m"
-                              />
-                            </EuiSpacer>
-                            <EuiText
-                              color="subdued"
-                              size="m"
+                            <div
+                              className="euiTextAlign euiTextAlign--center"
                             >
-                              <div
-                                className="euiText euiText--medium"
+                              <h2>
+                                Start by adding your first visualization
+                              </h2>
+                              <EuiSpacer
+                                size="m"
+                              >
+                                <div
+                                  className="euiSpacer euiSpacer--m"
+                                />
+                              </EuiSpacer>
+                              <EuiText
+                                color="subdued"
+                                size="m"
                               >
-                                <EuiTextColor
-                                  color="subdued"
-                                  component="div"
+                                <div
+                                  className="euiText euiText--medium"
                                 >
-                                  <div
-                                    className="euiTextColor euiTextColor--subdued"
+                                  <EuiTextColor
+                                    color="subdued"
+                                    component="div"
                                   >
-                                    Use PPL Queries to fetch & filter observability data and create visualizations
-                                  </div>
-                                </EuiTextColor>
-                              </div>
-                            </EuiText>
-                          </div>
-                        </EuiTextAlign>
-                      </div>
-                    </EuiText>
-                    <EuiSpacer
-                      size="m"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--m"
-                      />
-                    </EuiSpacer>
-                    <EuiFlexGroup
-                      justifyContent="center"
-                    >
-                      <div
-                        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                    <div
+                                      className="euiTextColor euiTextColor--subdued"
+                                    >
+                                      Use PPL Queries to fetch & filter observability data and create visualizations
+                                    </div>
+                                  </EuiTextColor>
+                                </div>
+                              </EuiText>
+                            </div>
+                          </EuiTextAlign>
+                        </div>
+                      </EuiText>
+                      <EuiSpacer
+                        size="m"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--m"
+                        />
+                      </EuiSpacer>
+                      <EuiFlexGroup
+                        justifyContent="center"
                       >
-                        <EuiFlexItem
-                          grow={false}
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
                         >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          <EuiFlexItem
+                            grow={false}
                           >
-                            <Component
-                              addVizDisabled={false}
-                              showFlyout={[Function]}
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
                             >
-                              <EuiPopover
-                                anchorPosition="downLeft"
-                                button={
-                                  <EuiButton
-                                    data-test-subj="addVisualizationButton"
-                                    disabled={false}
-                                    iconSide="right"
-                                    iconType="arrowDown"
-                                    onClick={[Function]}
-                                  >
-                                    Add visualization
-                                  </EuiButton>
-                                }
-                                closePopover={[Function]}
-                                display="inlineBlock"
-                                hasArrow={true}
-                                id="addVisualizationContextMenu"
-                                isOpen={false}
-                                ownFocus={true}
-                                panelPaddingSize="none"
+                              <Component
+                                addVizDisabled={false}
+                                showFlyout={[Function]}
                               >
-                                <div
-                                  className="euiPopover euiPopover--anchorDownLeft"
-                                  id="addVisualizationContextMenu"
-                                >
-                                  <div
-                                    className="euiPopover__anchor"
-                                  >
+                                <EuiPopover
+                                  anchorPosition="downLeft"
+                                  button={
                                     <EuiButton
                                       data-test-subj="addVisualizationButton"
                                       disabled={false}
@@ -3674,380 +3672,375 @@ exports[`Panels View Component renders panel view container without visualizatio
                                       iconType="arrowDown"
                                       onClick={[Function]}
                                     >
-                                      <EuiButtonDisplay
-                                        baseClassName="euiButton"
+                                      Add visualization
+                                    </EuiButton>
+                                  }
+                                  closePopover={[Function]}
+                                  display="inlineBlock"
+                                  hasArrow={true}
+                                  id="addVisualizationContextMenu"
+                                  isOpen={false}
+                                  ownFocus={true}
+                                  panelPaddingSize="none"
+                                >
+                                  <div
+                                    className="euiPopover euiPopover--anchorDownLeft"
+                                    id="addVisualizationContextMenu"
+                                  >
+                                    <div
+                                      className="euiPopover__anchor"
+                                    >
+                                      <EuiButton
                                         data-test-subj="addVisualizationButton"
                                         disabled={false}
-                                        element="button"
                                         iconSide="right"
                                         iconType="arrowDown"
-                                        isDisabled={false}
                                         onClick={[Function]}
-                                        type="button"
                                       >
-                                        <button
-                                          className="euiButton euiButton--primary"
+                                        <EuiButtonDisplay
+                                          baseClassName="euiButton"
                                           data-test-subj="addVisualizationButton"
                                           disabled={false}
+                                          element="button"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          isDisabled={false}
                                           onClick={[Function]}
-                                          style={
-                                            Object {
-                                              "minWidth": undefined,
-                                            }
-                                          }
                                           type="button"
                                         >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="right"
-                                            iconType="arrowDown"
-                                            textProps={
+                                          <button
+                                            className="euiButton euiButton--primary"
+                                            data-test-subj="addVisualizationButton"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            style={
                                               Object {
-                                                "className": "euiButton__text",
+                                                "minWidth": undefined,
                                               }
                                             }
+                                            type="button"
                                           >
-                                            <span
-                                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                            <EuiButtonContent
+                                              className="euiButton__content"
+                                              iconSide="right"
+                                              iconType="arrowDown"
+                                              textProps={
+                                                Object {
+                                                  "className": "euiButton__text",
+                                                }
+                                              }
                                             >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                color="inherit"
-                                                size="m"
-                                                type="arrowDown"
+                                              <span
+                                                className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                               >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
+                                                <EuiIcon
+                                                  className="euiButtonContent__icon"
+                                                  color="inherit"
+                                                  size="m"
+                                                  type="arrowDown"
                                                 >
-                                                  <svg
+                                                  <EuiIconEmpty
                                                     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"
-                                              >
-                                                Add visualization
+                                                  >
+                                                    <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"
+                                                >
+                                                  Add visualization
+                                                </span>
                                               </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
+                                            </EuiButtonContent>
+                                          </button>
+                                        </EuiButtonDisplay>
+                                      </EuiButton>
+                                    </div>
                                   </div>
-                                </div>
-                              </EuiPopover>
-                            </Component>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                    <EuiSpacer
-                      size="xxl"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--xxl"
-                      />
-                    </EuiSpacer>
-                  </div>
-                </Component>
-                <Component
-                  chrome={
-                    Object {
-                      "addApplicationClass": [MockFunction],
-                      "docTitle": Object {
-                        "change": [MockFunction],
-                        "reset": [MockFunction],
-                      },
-                      "getApplicationClasses$": [MockFunction],
-                      "getBadge$": [MockFunction],
-                      "getBrand$": [MockFunction],
-                      "getBreadcrumbs$": [MockFunction],
-                      "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],
+                                </EuiPopover>
+                              </Component>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                      <EuiSpacer
+                        size="xxl"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--xxl"
+                        />
+                      </EuiSpacer>
+                    </div>
+                  </Component>
+                  <Component
+                    chrome={
+                      Object {
+                        "addApplicationClass": [MockFunction],
+                        "docTitle": Object {
+                          "change": [MockFunction],
+                          "reset": [MockFunction],
+                        },
+                        "getApplicationClasses$": [MockFunction],
+                        "getBadge$": [MockFunction],
+                        "getBrand$": [MockFunction],
+                        "getBreadcrumbs$": [MockFunction],
+                        "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,
-                                    "_parentSubscriber": [Circular],
-                                    "_subscriptions": null,
+                                    "_subscriptions": Array [
+                                      SubjectSubscription {
+                                        "_parentOrParents": [Circular],
+                                        "_subscriptions": null,
+                                        "closed": false,
+                                        "subject": [Circular],
+                                        "subscriber": [Circular],
+                                      },
+                                    ],
                                     "closed": false,
-                                    "destination": Object {
-                                      "closed": true,
-                                      "complete": [Function],
-                                      "error": [Function],
-                                      "next": [Function],
+                                    "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": false,
+                                    "syncErrorThrowable": true,
                                     "syncErrorThrown": false,
                                     "syncErrorValue": null,
                                   },
-                                  "isStopped": false,
-                                  "syncErrorThrowable": true,
-                                  "syncErrorThrown": false,
-                                  "syncErrorValue": null,
-                                },
-                              ],
-                              "thrownError": 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],
+                            Object {
+                              "type": "return",
+                              "value": BehaviorSubject {
+                                "_isScalar": false,
+                                "_value": false,
+                                "closed": false,
+                                "hasError": false,
+                                "isStopped": false,
+                                "observers": Array [
+                                  Subscriber {
                                     "_parentOrParents": null,
-                                    "_parentSubscriber": [Circular],
-                                    "_subscriptions": null,
+                                    "_subscriptions": Array [
+                                      SubjectSubscription {
+                                        "_parentOrParents": [Circular],
+                                        "_subscriptions": null,
+                                        "closed": false,
+                                        "subject": [Circular],
+                                        "subscriber": [Circular],
+                                      },
+                                    ],
                                     "closed": false,
-                                    "destination": Object {
-                                      "closed": true,
-                                      "complete": [Function],
-                                      "error": [Function],
-                                      "next": [Function],
+                                    "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": false,
+                                    "syncErrorThrowable": true,
                                     "syncErrorThrown": false,
                                     "syncErrorValue": null,
                                   },
-                                  "isStopped": false,
-                                  "syncErrorThrowable": true,
-                                  "syncErrorThrown": false,
-                                  "syncErrorValue": null,
-                                },
-                              ],
-                              "thrownError": 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],
+                            Object {
+                              "type": "return",
+                              "value": BehaviorSubject {
+                                "_isScalar": false,
+                                "_value": false,
+                                "closed": false,
+                                "hasError": false,
+                                "isStopped": false,
+                                "observers": Array [
+                                  Subscriber {
                                     "_parentOrParents": null,
-                                    "_parentSubscriber": [Circular],
-                                    "_subscriptions": null,
+                                    "_subscriptions": Array [
+                                      SubjectSubscription {
+                                        "_parentOrParents": [Circular],
+                                        "_subscriptions": null,
+                                        "closed": false,
+                                        "subject": [Circular],
+                                        "subscriber": [Circular],
+                                      },
+                                    ],
                                     "closed": false,
-                                    "destination": Object {
-                                      "closed": true,
-                                      "complete": [Function],
-                                      "error": [Function],
-                                      "next": [Function],
+                                    "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": false,
+                                    "syncErrorThrowable": true,
                                     "syncErrorThrown": false,
                                     "syncErrorValue": null,
                                   },
-                                  "isStopped": false,
-                                  "syncErrorThrowable": true,
-                                  "syncErrorThrown": false,
-                                  "syncErrorValue": null,
-                                },
-                              ],
-                              "thrownError": null,
+                                ],
+                                "thrownError": null,
+                              },
                             },
-                          },
-                        ],
-                      },
-                      "getIsVisible$": [MockFunction],
-                      "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],
-                      "setBrand": [MockFunction],
-                      "setBreadcrumbs": [MockFunction] {
-                        "calls": Array [
-                          Array [
+                          ],
+                        },
+                        "getIsVisible$": [MockFunction],
+                        "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],
+                        "setBrand": [MockFunction],
+                        "setBreadcrumbs": [MockFunction] {
+                          "calls": Array [
                             Array [
-                              Object {
-                                "href": "#/operational_panels/",
-                                "text": "Operational panels",
-                              },
-                              Object {
-                                "href": "observability#/",
-                                "text": "Observability",
-                              },
-                              Object {
-                                "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
-                                "text": "",
-                              },
+                              Array [
+                                Object {
+                                  "href": "#/operational_panels/",
+                                  "text": "Observability Dashboards",
+                                },
+                                Object {
+                                  "href": "observability#/",
+                                  "text": "Observability",
+                                },
+                                Object {
+                                  "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
+                                  "text": "",
+                                },
+                              ],
                             ],
                           ],
-                        ],
-                        "results": Array [
-                          Object {
-                            "type": "return",
-                            "value": undefined,
-                          },
-                        ],
-                      },
-                      "setCustomNavLink": [MockFunction],
-                      "setHelpExtension": [MockFunction],
-                      "setHelpSupportUrl": [MockFunction],
-                      "setIsVisible": [MockFunction],
-                    }
-                  }
-                  cloneVisualization={[Function]}
-                  editActionType=""
-                  editMode={false}
-                  endTime="now"
-                  http={[MockFunction]}
-                  onEditClick={[Function]}
-                  onRefresh={false}
-                  panelId="L8Sx53wBDp0rvEg3yoLb"
-                  panelVisualizations={Array []}
-                  pplFilterValue=""
-                  pplService={
-                    PPLService {
-                      "fetch": [Function],
-                      "http": [MockFunction],
-                    }
-                  }
-                  setPanelVisualizations={[Function]}
-                  showFlyout={[Function]}
-                  startTime="now-30m"
-                >
-                  <WidthProvider
-                    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,
+                          "results": Array [
+                            Object {
+                              "type": "return",
+                              "value": undefined,
+                            },
+                          ],
+                        },
+                        "setCustomNavLink": [MockFunction],
+                        "setHelpExtension": [MockFunction],
+                        "setHelpSupportUrl": [MockFunction],
+                        "setIsVisible": [MockFunction],
                       }
                     }
-                    layouts={
-                      Object {
-                        "lg": Array [],
-                        "md": Array [],
-                        "sm": Array [],
+                    cloneVisualization={[Function]}
+                    editActionType=""
+                    editMode={false}
+                    endTime="now"
+                    http={[MockFunction]}
+                    onEditClick={[Function]}
+                    onRefresh={false}
+                    panelId="L8Sx53wBDp0rvEg3yoLb"
+                    panelVisualizations={Array []}
+                    pplFilterValue=""
+                    pplService={
+                      PPLService {
+                        "fetch": [Function],
+                        "http": [MockFunction],
                       }
                     }
-                    measureBeforeMount={false}
-                    onLayoutChange={[Function]}
+                    setPanelVisualizations={[Function]}
+                    showFlyout={[Function]}
+                    startTime="now-30m"
                   >
-                    <ResponsiveReactGridLayout
+                    <WidthProvider
                       breakpoints={
                         Object {
                           "lg": 1200,
@@ -4074,61 +4067,92 @@ exports[`Panels View Component renders panel view container without visualizatio
                           "sm": Array [],
                         }
                       }
-                      onBreakpointChange={[Function]}
+                      measureBeforeMount={false}
                       onLayoutChange={[Function]}
-                      onWidthChange={[Function]}
-                      width={0}
                     >
-                      <ReactGridLayout
-                        autoSize={true}
+                      <ResponsiveReactGridLayout
+                        breakpoints={
+                          Object {
+                            "lg": 1200,
+                            "md": 996,
+                            "sm": 768,
+                            "xs": 480,
+                            "xxs": 0,
+                          }
+                        }
                         className="layout full-width"
-                        cols={1}
-                        compactType="vertical"
-                        containerPadding={null}
-                        draggableCancel=""
-                        draggableHandle=""
-                        isDraggable={true}
-                        isResizable={true}
-                        layout={Array []}
-                        margin={
-                          Array [
-                            10,
-                            10,
-                          ]
+                        cols={
+                          Object {
+                            "lg": 12,
+                            "md": 12,
+                            "sm": 12,
+                            "xs": 1,
+                            "xxs": 1,
+                          }
+                        }
+                        layouts={
+                          Object {
+                            "lg": Array [],
+                            "md": Array [],
+                            "sm": Array [],
+                          }
                         }
-                        maxRows={Infinity}
-                        onDrag={[Function]}
-                        onDragStart={[Function]}
-                        onDragStop={[Function]}
+                        onBreakpointChange={[Function]}
                         onLayoutChange={[Function]}
-                        onResize={[Function]}
-                        onResizeStart={[Function]}
-                        onResizeStop={[Function]}
-                        preventCollision={false}
-                        rowHeight={150}
-                        style={Object {}}
-                        useCSSTransforms={true}
-                        verticalCompact={true}
+                        onWidthChange={[Function]}
                         width={0}
                       >
-                        <div
-                          className="react-grid-layout layout full-width"
-                          style={
-                            Object {
-                              "height": "10px",
-                            }
+                        <ReactGridLayout
+                          autoSize={true}
+                          className="layout full-width"
+                          cols={1}
+                          compactType="vertical"
+                          containerPadding={null}
+                          draggableCancel=""
+                          draggableHandle=""
+                          isDraggable={true}
+                          isResizable={true}
+                          layout={Array []}
+                          margin={
+                            Array [
+                              10,
+                              10,
+                            ]
                           }
-                        />
-                      </ReactGridLayout>
-                    </ResponsiveReactGridLayout>
-                  </WidthProvider>
-                </Component>
-              </div>
-            </EuiPageContentBody>
-          </div>
-        </EuiPageBody>
-      </div>
-    </EuiPage>
-  </div>
-</Component>
+                          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}
+                        >
+                          <div
+                            className="react-grid-layout layout full-width"
+                            style={
+                              Object {
+                                "height": "10px",
+                              }
+                            }
+                          />
+                        </ReactGridLayout>
+                      </ResponsiveReactGridLayout>
+                    </WidthProvider>
+                  </Component>
+                </div>
+              </EuiPageContentBody>
+            </div>
+          </EuiPageBody>
+        </div>
+      </EuiPage>
+    </div>
+  </Component>
+</Provider>
 `;
diff --git a/public/components/custom_panels/__tests__/custom_panel_table.test.tsx b/public/components/custom_panels/__tests__/custom_panel_table.test.tsx
index 811bbf9c84..b3bcd71af8 100644
--- a/public/components/custom_panels/__tests__/custom_panel_table.test.tsx
+++ b/public/components/custom_panels/__tests__/custom_panel_table.test.tsx
@@ -3,13 +3,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { applyMiddleware, createStore } from '@reduxjs/toolkit';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
-import { CustomPanelTable } from '../custom_panel_table';
-import { waitFor, render, screen, fireEvent } from '@testing-library/react';
-import { panelBreadCrumbs, panelsData } from '../../../../test/panels_constants';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
 import { CustomPanelListType } from '../../../../common/types/custom_panels';
+import { panelBreadCrumbs, panelsData } from '../../../../test/panels_constants';
+import { coreRefs } from '../../../framework/core_refs';
+import { rootReducer } from '../../../framework/redux/reducers';
+import { CustomPanelTable } from '../custom_panel_table';
 
 jest.mock('react-router-dom', () => ({
   useLocation: jest.fn().mockReturnValue({
@@ -19,11 +24,18 @@ jest.mock('react-router-dom', () => ({
     state: null,
     key: '',
   }),
-  useHistory: jest.fn()
+  useHistory: jest.fn(),
 }));
 
 describe('Panels Table Component', () => {
   configure({ adapter: new Adapter() });
+  const store = createStore(rootReducer, applyMiddleware(thunk));
+  coreRefs.savedObjectsClient.find = jest.fn(() =>
+    Promise.resolve({
+      savedObjects: [],
+      then: () => Promise.resolve(),
+    })
+  );
 
   it('renders empty panel table container', async () => {
     const loading = false;
@@ -38,18 +50,20 @@ describe('Panels Table Component', () => {
     const addSamplePanels = jest.fn();
 
     const wrapper = mount(
-      <CustomPanelTable
-        loading={loading}
-        fetchCustomPanels={fetchCustomPanels}
-        customPanels={customPanelData}
-        createCustomPanel={createCustomPanel}
-        setBreadcrumbs={setBreadcrumbs}
-        parentBreadcrumbs={parentBreadcrumb}
-        renameCustomPanel={renameCustomPanel}
-        cloneCustomPanel={cloneCustomPanel}
-        deleteCustomPanelList={deleteCustomPanelList}
-        addSamplePanels={addSamplePanels}
-      />
+      <Provider store={store}>
+        <CustomPanelTable
+          loading={loading}
+          fetchCustomPanels={fetchCustomPanels}
+          customPanels={customPanelData}
+          createCustomPanel={createCustomPanel}
+          setBreadcrumbs={setBreadcrumbs}
+          parentBreadcrumbs={parentBreadcrumb}
+          renameCustomPanel={renameCustomPanel}
+          cloneCustomPanel={cloneCustomPanel}
+          deleteCustomPanelList={deleteCustomPanelList}
+          addSamplePanels={addSamplePanels}
+        />
+      </Provider>
     );
     wrapper.update();
 
@@ -71,18 +85,20 @@ describe('Panels Table Component', () => {
     const addSamplePanels = jest.fn();
 
     const wrapper = mount(
-      <CustomPanelTable
-        loading={loading}
-        fetchCustomPanels={fetchCustomPanels}
-        customPanels={customPanelData}
-        createCustomPanel={createCustomPanel}
-        setBreadcrumbs={setBreadcrumbs}
-        parentBreadcrumbs={parentBreadcrumb}
-        renameCustomPanel={renameCustomPanel}
-        cloneCustomPanel={cloneCustomPanel}
-        deleteCustomPanelList={deleteCustomPanelList}
-        addSamplePanels={addSamplePanels}
-      />
+      <Provider store={store}>
+        <CustomPanelTable
+          loading={loading}
+          fetchCustomPanels={fetchCustomPanels}
+          customPanels={customPanelData}
+          createCustomPanel={createCustomPanel}
+          setBreadcrumbs={setBreadcrumbs}
+          parentBreadcrumbs={parentBreadcrumb}
+          renameCustomPanel={renameCustomPanel}
+          cloneCustomPanel={cloneCustomPanel}
+          deleteCustomPanelList={deleteCustomPanelList}
+          addSamplePanels={addSamplePanels}
+        />
+      </Provider>
     );
     wrapper.update();
 
@@ -102,24 +118,26 @@ describe('Panels Table Component', () => {
     const cloneCustomPanel = jest.fn();
     const deleteCustomPanelList = jest.fn();
     const addSamplePanels = jest.fn();
-    
+
     const utils = render(
-      <CustomPanelTable
-        loading={false}
-        fetchCustomPanels={fetchCustomPanels}
-        customPanels={customPanelData}
-        createCustomPanel={createCustomPanel}
-        setBreadcrumbs={setBreadcrumbs}
-        parentBreadcrumbs={parentBreadcrumb}
-        renameCustomPanel={renameCustomPanel}
-        cloneCustomPanel={cloneCustomPanel}
-        deleteCustomPanelList={deleteCustomPanelList}
-        addSamplePanels={addSamplePanels}
-      />
+      <Provider store={store}>
+        <CustomPanelTable
+          loading={false}
+          fetchCustomPanels={fetchCustomPanels}
+          customPanels={customPanelData}
+          createCustomPanel={createCustomPanel}
+          setBreadcrumbs={setBreadcrumbs}
+          parentBreadcrumbs={parentBreadcrumb}
+          renameCustomPanel={renameCustomPanel}
+          cloneCustomPanel={cloneCustomPanel}
+          deleteCustomPanelList={deleteCustomPanelList}
+          addSamplePanels={addSamplePanels}
+        />
+      </Provider>
     );
-    fireEvent.click(screen.getAllByText('Create panel')[0]);
+    fireEvent.click(screen.getAllByText('Create Dashboard')[0]);
     await waitFor(() => {
-      expect(global.window.location.href).toContain('/create')
+      expect(global.window.location.href).toContain('/create');
     });
   });
 });
diff --git a/public/components/custom_panels/__tests__/custom_panel_view.test.tsx b/public/components/custom_panels/__tests__/custom_panel_view.test.tsx
index 81cb151cd6..d4eb276e66 100644
--- a/public/components/custom_panels/__tests__/custom_panel_view.test.tsx
+++ b/public/components/custom_panels/__tests__/custom_panel_view.test.tsx
@@ -20,10 +20,16 @@ import PPLService from '../../../../public/services/requests/ppl';
 import DSLService from '../../../../public/services/requests/dsl';
 import { coreStartMock } from '../../../../test/__mocks__/coreMocks';
 import { HttpResponse } from '../../../../../../src/core/public';
+import { applyMiddleware, createStore } from 'redux';
+import { rootReducer } from '../../../framework/redux/reducers';
+import thunk from 'redux-thunk';
+import { Provider } from 'react-redux';
 
 describe('Panels View Component', () => {
   configure({ adapter: new Adapter() });
 
+  const store = createStore(rootReducer, applyMiddleware(thunk));
+
   it('renders panel view container without visualizations', async () => {
     httpClientMock.get = jest.fn(() =>
       Promise.resolve((sampleEmptyPanel as unknown) as HttpResponse)
@@ -47,24 +53,26 @@ describe('Panels View Component', () => {
     };
 
     const wrapper = mount(
-      <CustomPanelView
-        panelId={panelId}
-        http={http}
-        pplService={pplService}
-        dslService={dslService}
-        chrome={core.chrome}
-        parentBreadcrumbs={parentBreadcrumbs}
-        renameCustomPanel={renameCustomPanel}
-        cloneCustomPanel={cloneCustomPanel}
-        deleteCustomPanel={deleteCustomPanel}
-        setToast={setToast}
-        onEditClick={onEditClick}
-        startTime={start}
-        endTime={end}
-        setStartTime={setStart}
-        setEndTime={setEnd}
-        page="operationalPanels"
-      />
+      <Provider store={store}>
+        <CustomPanelView
+          panelId={panelId}
+          http={http}
+          pplService={pplService}
+          dslService={dslService}
+          chrome={core.chrome}
+          parentBreadcrumbs={parentBreadcrumbs}
+          renameCustomPanel={renameCustomPanel}
+          cloneCustomPanel={cloneCustomPanel}
+          deleteCustomPanel={deleteCustomPanel}
+          setToast={setToast}
+          onEditClick={onEditClick}
+          startTime={start}
+          endTime={end}
+          setStartTime={setStart}
+          setEndTime={setEnd}
+          page="operationalPanels"
+        />
+      </Provider>
     );
     wrapper.update();
 
@@ -106,24 +114,26 @@ describe('Panels View Component', () => {
     };
 
     const wrapper = mount(
-      <CustomPanelView
-        panelId={panelId}
-        http={http}
-        pplService={pplService}
-        dslService={dslService}
-        chrome={core.chrome}
-        parentBreadcrumbs={parentBreadcrumbs}
-        renameCustomPanel={renameCustomPanel}
-        cloneCustomPanel={cloneCustomPanel}
-        deleteCustomPanel={deleteCustomPanel}
-        setToast={setToast}
-        onEditClick={onEditClick}
-        startTime={start}
-        endTime={end}
-        setStartTime={setStart}
-        setEndTime={setEnd}
-        page="operationalPanels"
-      />
+      <Provider store={store}>
+        <CustomPanelView
+          panelId={panelId}
+          http={http}
+          pplService={pplService}
+          dslService={dslService}
+          chrome={core.chrome}
+          parentBreadcrumbs={parentBreadcrumbs}
+          renameCustomPanel={renameCustomPanel}
+          cloneCustomPanel={cloneCustomPanel}
+          deleteCustomPanel={deleteCustomPanel}
+          setToast={setToast}
+          onEditClick={onEditClick}
+          startTime={start}
+          endTime={end}
+          setStartTime={setStart}
+          setEndTime={setEnd}
+          page="operationalPanels"
+        />
+      </Provider>
     );
     wrapper.update();
 
diff --git a/public/components/custom_panels/custom_panel_table.tsx b/public/components/custom_panels/custom_panel_table.tsx
index 50054523ad..f2435226f8 100644
--- a/public/components/custom_panels/custom_panel_table.tsx
+++ b/public/components/custom_panels/custom_panel_table.tsx
@@ -32,18 +32,33 @@ import {
 import React, { ReactElement, useEffect, useState } from 'react';
 import moment from 'moment';
 import _ from 'lodash';
+import { useHistory, useLocation } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { coreRefs } from '../../framework/core_refs';
 import { ChromeBreadcrumb } from '../../../../../src/core/public';
 import {
   CREATE_PANEL_MESSAGE,
+  CUSTOM_PANELS_API_PREFIX,
   CUSTOM_PANELS_DOCUMENTATION_URL,
 } from '../../../common/constants/custom_panels';
 import { UI_DATE_FORMAT } from '../../../common/constants/shared';
 import { getCustomModal } from './helpers/modal_containers';
-import { CustomPanelListType } from '../../../common/types/custom_panels';
+import { CustomPanelListType, CustomPanelType } from '../../../common/types/custom_panels';
 import { getSampleDataModal } from '../common/helpers/add_sample_modal';
 import { pageStyles } from '../../../common/constants/shared';
 import { DeleteModal } from '../common/helpers/delete_modal';
-import { useHistory, useLocation } from 'react-router-dom';
+import {
+  createPanel,
+  deletePanels,
+  doesNameExist,
+  fetchPanels,
+  isUuid,
+  newPanelTemplate,
+  renameCustomPanel,
+  selectPanelList,
+} from './redux/panel_slice';
+import { isNameValid } from './helpers/utils';
+import { useToast } from '../common/toast';
 
 /*
  * "CustomPanelTable" module, used to view all the saved panels
@@ -62,46 +77,38 @@ import { useHistory, useLocation } from 'react-router-dom';
 
 interface Props {
   loading: boolean;
-  fetchCustomPanels: () => void;
-  customPanels: CustomPanelListType[];
-  createCustomPanel: (newCustomPanelName: string) => void;
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
   parentBreadcrumbs: EuiBreadcrumb[];
-  renameCustomPanel: (newCustomPanelName: string, customPanelId: string) => void;
-  cloneCustomPanel: (newCustomPanelName: string, customPanelId: string) => void;
-  deleteCustomPanelList: (customPanelIdList: string[], toastMessage: string) => any;
   addSamplePanels: () => void;
 }
 
 export const CustomPanelTable = ({
   loading,
-  fetchCustomPanels,
-  customPanels,
-  createCustomPanel,
   setBreadcrumbs,
   parentBreadcrumbs,
-  renameCustomPanel,
-  cloneCustomPanel,
-  deleteCustomPanelList,
   addSamplePanels,
 }: Props) => {
+  const customPanels = useSelector<CustomPanelType[]>(selectPanelList);
   const [isModalVisible, setIsModalVisible] = useState(false); // Modal Toggle
   const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />); // Modal Layout
   const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false);
-  const [selectedCustomPanels, setselectedCustomPanels] = useState<CustomPanelListType[]>([]);
+  const [selectedCustomPanels, setselectedCustomPanels] = useState<CustomPanelType[]>([]);
   const [searchQuery, setSearchQuery] = useState('');
   const location = useLocation();
   const history = useHistory();
 
+  const dispatch = useDispatch();
+  const { setToast } = useToast();
+
   useEffect(() => {
     setBreadcrumbs(parentBreadcrumbs);
-    fetchCustomPanels();
+    dispatch(fetchPanels());
   }, []);
 
   useEffect(() => {
-    const url = window.location.hash.split('/')
-    if (url[url.length-1] === 'create') { 
-      createPanel();
+    const url = window.location.hash.split('/');
+    if (url[url.length - 1] === 'create') {
+      createPanelModal();
     }
   }, [location]);
 
@@ -114,39 +121,77 @@ export const CustomPanelTable = ({
   };
 
   const onCreate = async (newCustomPanelName: string) => {
-    createCustomPanel(newCustomPanelName);
+    if (await doesNameExist(newCustomPanelName)) {
+      setToast(`Observability Dashboard with name "${newCustomPanelName}" already exists`, 'danger');
+    } else if (!isNameValid(newCustomPanelName)) {
+      setToast('Invalid Dashboard name', 'danger');
+    } else {
+      const newPanel = newPanelTemplate(newCustomPanelName);
+      dispatch(createPanel(newPanel));
+    }
     closeModal();
   };
 
   const onRename = async (newCustomPanelName: string) => {
-    renameCustomPanel(newCustomPanelName, selectedCustomPanels[0].id);
+    if (await doesNameExist(newCustomPanelName)) {
+      setToast(`Observability Dashboard with name "${newCustomPanelName}" already exists`, 'danger');
+    } else if (!isNameValid(newCustomPanelName)) {
+      setToast('Invalid Dashboard name', 'danger');
+    } else {
+      dispatch(renameCustomPanel(newCustomPanelName, selectedCustomPanels[0].id));
+    }
     closeModal();
   };
 
   const onClone = async (newName: string) => {
-    cloneCustomPanel(newName, selectedCustomPanels[0].id);
+    if (await doesNameExist(newName)) {
+      setToast(`Observability Dashboard with name "${newName}" already exists`, 'danger');
+    } else if (!isNameValid(newName)) {
+      setToast('Invalid Observability Dashboard name', 'danger');
+    } else {
+      let sourcePanel = selectedCustomPanels[0];
+      try {
+        if (!isUuid(sourcePanel.id)) {
+          // Observability Panel API returns partial record, so for duplication
+          // we will retrieve the entire record and allow new process to continue.
+          const legacyFetchResult = await coreRefs.http!.get(
+            `${CUSTOM_PANELS_API_PREFIX}/panels/${sourcePanel.id}`
+          );
+          sourcePanel = legacyFetchResult.operationalPanel;
+        }
+
+        const { id, ...newPanel } = {
+          ...sourcePanel,
+          title: newName,
+        };
+
+        dispatch(createPanel(newPanel));
+      } catch (err) {
+        setToast(
+          'Error cloning Observability Dashboard, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err);
+      }
+    }
     closeModal();
   };
 
   const onDelete = async () => {
-    const toastMessage = `Custom Panels ${
-      selectedCustomPanels.length > 1 ? 's' : ' ' + selectedCustomPanels[0].name
-    } successfully deleted!`;
-    const PanelList = selectedCustomPanels.map((panel) => panel.id);
-    deleteCustomPanelList(PanelList, toastMessage);
+    dispatch(deletePanels(selectedCustomPanels));
     closeModal();
   };
 
-  const createPanel = () => {
+  const createPanelModal = () => {
     setModalLayout(
       getCustomModal(
         onCreate,
         () => {
-          closeModal()
+          closeModal();
           history.goBack();
         },
         'Name',
-        'Create operational panel',
+        'Create Observability Dashboard',
         'Cancel',
         'Create',
         undefined,
@@ -162,26 +207,26 @@ export const CustomPanelTable = ({
         onRename,
         closeModal,
         'Name',
-        'Rename Panel',
+        'Rename Dashboard',
         'Cancel',
         'Rename',
-        selectedCustomPanels[0].name,
+        selectedCustomPanels[0].title,
         CREATE_PANEL_MESSAGE
       )
     );
     showModal();
   };
 
-  const clonePanel = () => {
+  const clonePanelModal = () => {
     setModalLayout(
       getCustomModal(
         onClone,
         closeModal,
         'Name',
-        'Duplicate Panel',
+        'Duplicate Dashboard',
         'Cancel',
         'Duplicate',
-        selectedCustomPanels[0].name + ' (copy)',
+        selectedCustomPanels[0].title + ' (copy)',
         CREATE_PANEL_MESSAGE
       )
     );
@@ -189,7 +234,9 @@ export const CustomPanelTable = ({
   };
 
   const deletePanel = () => {
-    const customPanelString = `operational panel${selectedCustomPanels.length > 1 ? 's' : ''}`;
+    const customPanelString = `Observability Dashboard${
+      selectedCustomPanels.length > 1 ? 's' : ''
+    }`;
     setModalLayout(
       <DeleteModal
         onConfirm={onDelete}
@@ -222,7 +269,7 @@ export const CustomPanelTable = ({
     </EuiButton>
   );
 
-  const popoverItems: ReactElement[] = [
+  const popoverItems = (): ReactElement[] => [
     <EuiContextMenuItem
       key="rename"
       data-test-subj="renameContextMenuItem"
@@ -240,7 +287,7 @@ export const CustomPanelTable = ({
       disabled={customPanels.length === 0 || selectedCustomPanels.length !== 1}
       onClick={() => {
         setIsActionsPopoverOpen(false);
-        clonePanel();
+        clonePanelModal();
       }}
     >
       Duplicate
@@ -270,7 +317,7 @@ export const CustomPanelTable = ({
 
   const tableColumns = [
     {
-      field: 'name',
+      field: 'title',
       name: 'Name',
       sortable: true,
       truncateText: true,
@@ -301,7 +348,7 @@ export const CustomPanelTable = ({
           <EuiPageHeader>
             <EuiPageHeaderSection>
               <EuiTitle size="l">
-                <h1>Operational panels</h1>
+                <h1>Observability dashboards</h1>
               </EuiTitle>
             </EuiPageHeaderSection>
           </EuiPageHeader>
@@ -310,14 +357,14 @@ export const CustomPanelTable = ({
               <EuiPageContentHeaderSection>
                 <EuiTitle size="s">
                   <h3>
-                    Panels
+                    Dashboard
                     <span className="panel-header-count"> ({customPanels.length})</span>
                   </h3>
                 </EuiTitle>
                 <EuiSpacer size="s" />
                 <EuiText size="s" color="subdued">
-                  Use Operational panels to create and view different visualizations on ingested
-                  observability data, using PPL (Piped Processing Language) queries.{' '}
+                  Use Observability Dashboard to create and view different visualizations on
+                  ingested observability data, using PPL (Piped Processing Language) queries.{' '}
                   <EuiLink external={true} href={CUSTOM_PANELS_DOCUMENTATION_URL} target="blank">
                     Learn more
                   </EuiLink>
@@ -332,16 +379,12 @@ export const CustomPanelTable = ({
                       isOpen={isActionsPopoverOpen}
                       closePopover={() => setIsActionsPopoverOpen(false)}
                     >
-                      <EuiContextMenuPanel items={popoverItems} />
+                      <EuiContextMenuPanel items={popoverItems()} />
                     </EuiPopover>
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiButton
-                      fill
-                      href="#/operational_panels/create"                      
-                      data-test-subj="customPanels__createNewPanels"
-                    >
-                      Create panel
+                    <EuiButton fill href="#/create" data-test-subj="customPanels__createNewPanels">
+                      Create Dashboard
                     </EuiButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
@@ -353,7 +396,7 @@ export const CustomPanelTable = ({
                 <EuiFieldSearch
                   fullWidth
                   data-test-subj="operationalPanelSearchBar"
-                  placeholder="Search operational panel name"
+                  placeholder="Search Observability Dashboard name"
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
                 />
@@ -363,7 +406,7 @@ export const CustomPanelTable = ({
                   items={
                     searchQuery
                       ? customPanels.filter((customPanel) =>
-                          customPanel.name.toLowerCase().includes(searchQuery.toLowerCase())
+                          customPanel.title.toLowerCase().includes(searchQuery.toLowerCase())
                         )
                       : customPanels
                   }
@@ -391,10 +434,10 @@ export const CustomPanelTable = ({
               <>
                 <EuiSpacer size="xxl" />
                 <EuiText textAlign="center">
-                  <h2 data-test-subj="customPanels__noPanelsHome">No Operational Panels</h2>
+                  <h2 data-test-subj="customPanels__noPanelsHome">No Observability Dashboards</h2>
                   <EuiSpacer size="m" />
                   <EuiText color="subdued">
-                    Use operational panels to dive deeper into observability
+                    Use Observability Dashboards to dive deeper into observability
                     <br />
                     using PPL queries and insightful visualizations
                   </EuiText>
@@ -405,9 +448,9 @@ export const CustomPanelTable = ({
                     <EuiButton
                       data-test-subj="customPanels__emptyCreateNewPanels"
                       fullWidth={false}
-                      href="#/operational_panels/create"
+                      href="#/create"
                     >
-                      Create panel
+                      Create Dashboard
                     </EuiButton>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
diff --git a/public/components/custom_panels/custom_panel_view.tsx b/public/components/custom_panels/custom_panel_view.tsx
index 41766d4bd8..0b49b039d7 100644
--- a/public/components/custom_panels/custom_panel_view.tsx
+++ b/public/components/custom_panels/custom_panel_view.tsx
@@ -2,7 +2,6 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-/* eslint-disable no-console */
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import {
@@ -30,14 +29,18 @@ import { last } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
 import moment from 'moment';
+import _ from 'lodash';
+import { useDispatch } from 'react-redux';
 import DSLService from '../../services/requests/dsl';
 import { CoreStart } from '../../../../../src/core/public';
 import { EmptyPanelView } from './panel_modules/empty_panel';
 import {
   CREATE_PANEL_MESSAGE,
   CUSTOM_PANELS_API_PREFIX,
+  CUSTOM_PANELS_SAVED_OBJECT_TYPE,
 } from '../../../common/constants/custom_panels';
 import {
+  PanelType,
   SavedVisualizationType,
   VisualizationType,
   VizContainerError,
@@ -51,6 +54,7 @@ import {
   onTimeChange,
   isPPLFilterValid,
   fetchVisualizationById,
+  isNameValid,
 } from './helpers/utils';
 import { UI_DATE_FORMAT } from '../../../common/constants/shared';
 import { VisaulizationFlyout } from './panel_modules/visualization_flyout';
@@ -64,10 +68,12 @@ import {
 } from '../common/search/autocomplete_logic';
 import { AddVisualizationPopover } from './helpers/add_visualization_popover';
 import { DeleteModal } from '../common/helpers/delete_modal';
-import _ from 'lodash';
+import { coreRefs } from '../../framework/core_refs';
+import { clonePanel } from './redux/panel_slice';
+import { useToast } from '../common/toast';
 
 /*
- * "CustomPanelsView" module used to render an Operational Panel
+ * "CustomPanelsView" module used to render an Observability Dashboard
  *
  * Props taken in as params are:
  * panelId: Name of the panel opened
@@ -77,7 +83,6 @@ import _ from 'lodash';
  * dslService: dsl requestor service
  * chrome: chrome core service
  * parentBreadcrumb: parent breadcrumb
- * renameCustomPanel: Rename function for the panel
  * deleteCustomPanel: Delete function for the panel
  * cloneCustomPanel: Clone function for the panel
  * setToast: create Toast function
@@ -99,15 +104,7 @@ interface CustomPanelViewProps {
   dslService: DSLService;
   chrome: CoreStart['chrome'];
   parentBreadcrumbs: EuiBreadcrumb[];
-  renameCustomPanel: (editedCustomPanelName: string, editedCustomPanelId: string) => Promise<void>;
-  deleteCustomPanel: (customPanelId: string, customPanelName: string) => Promise<any>;
   cloneCustomPanel: (clonedCustomPanelName: string, clonedCustomPanelId: string) => Promise<string>;
-  setToast: (
-    title: string,
-    color?: string,
-    text?: React.ReactChild | undefined,
-    side?: string | undefined
-  ) => void;
   onEditClick: (savedVisualizationId: string) => any;
   startTime: string;
   endTime: string;
@@ -135,13 +132,12 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
     setStartTime,
     setEndTime,
     updateAvailabilityVizId,
-    renameCustomPanel,
-    deleteCustomPanel,
     cloneCustomPanel,
-    setToast,
     onEditClick,
     onAddClick,
   } = props;
+
+  const [panel, setPanel] = useState();
   const [openPanelName, setOpenPanelName] = useState('');
   const [panelCreatedTime, setPanelCreatedTime] = useState('');
   const [pplFilterValue, setPPLFilterValue] = useState('');
@@ -165,6 +161,10 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
 
   const appPanel = page === 'app';
 
+  const dispatch = useDispatch();
+
+  const { setToast } = useToast();
+
   const closeHelpFlyout = () => {
     setAddVizDisabled(false);
     setHelpIsFlyoutVisible(false);
@@ -183,6 +183,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
     return http
       .get(`${CUSTOM_PANELS_API_PREFIX}/panels/${panelId}`)
       .then((res) => {
+        setPanel(res.operationalPanel);
         setOpenPanelName(res.operationalPanel.name);
         setPanelCreatedTime(res.createdTimeMs);
         setPPLFilterValue(res.operationalPanel.queryFilter.query);
@@ -191,7 +192,60 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
         setPanelVisualizations(res.operationalPanel.visualizations);
       })
       .catch((err) => {
-        console.error('Issue in fetching the operational panels', err);
+        console.error('Issue in fetching the Observability Dashboards', err);
+      });
+  };
+
+  // Renames an existing CustomPanel
+  const renameCustomPanel = (editedCustomPanelName: string, editedCustomPanelId: string) => {
+    if (!isNameValid(editedCustomPanelName)) {
+      setToast('Invalid Custom Panel name', 'danger');
+      return Promise.reject();
+    }
+    const renamePanelObject = {
+      panelId: editedCustomPanelId,
+      panelName: editedCustomPanelName,
+    };
+
+    return http
+      .post(`${CUSTOM_PANELS_API_PREFIX}/panels/rename`, {
+        body: JSON.stringify(renamePanelObject),
+      })
+      .then((res) => {
+        setOpenPanelName(editedCustomPanelName);
+        // setOpenPanelName((prevCustomPanelData) => {
+        //   const newCustomPanelData = [...prevCustomPanelData];
+        //   const renamedCustomPanel = newCustomPanelData.find(
+        //     (customPanel) => customPanel.id === editedCustomPanelId
+        //   );
+        //   if (renamedCustomPanel) renamedCustomPanel.name = editedCustomPanelName;
+        //   return newCustomPanelData;
+        // });
+        setToast(`Observability Dashboard successfully renamed into "${editedCustomPanelName}"`);
+      })
+      .catch((err) => {
+        setToast(
+          'Error renaming Observability Dashboard, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err.body.message);
+      });
+  };
+
+  // Deletes an existing Observability Dashboard
+  const deleteCustomPanel = (customPanelId: string, customPanelName: string) => {
+    return coreRefs
+      .http!.delete(`${CUSTOM_PANELS_API_PREFIX}/panels/` + customPanelId)
+      .then((res) => {
+        setToast(`Observability Dashboard "${customPanelName}" successfully deleted!`);
+        return res;
+      })
+      .catch((err) => {
+        setToast(
+          'Error deleting Observability Dashboard, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err.body.message);
       });
   };
 
@@ -208,14 +262,10 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
   };
 
   const onDatePickerChange = (timeProps: OnTimeChangeProps) => {
-    onTimeChange(
-      timeProps.start,
-      timeProps.end,
-      recentlyUsedRanges,
-      setRecentlyUsedRanges,
-      setStartTime,
-      setEndTime
-    );
+    const { updatedRanges } = onTimeChange(timeProps.start, timeProps.end, recentlyUsedRanges);
+    setStartTime(timeProps.start);
+    setEndTime(timeProps.end);
+    setRecentlyUsedRanges(updatedRanges);
     onRefreshFilters(timeProps.start, timeProps.end);
   };
 
@@ -234,7 +284,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
         onConfirm={onDelete}
         onCancel={closeModal}
         title={`Delete ${openPanelName}`}
-        message={`Are you sure you want to delete this Operational Panel?`}
+        message={`Are you sure you want to delete this Observability Dashboard?`}
       />
     );
     showModal();
@@ -253,7 +303,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
         onRename,
         closeModal,
         'Name',
-        'Rename Panel',
+        'Rename Dashboard',
         'Cancel',
         'Rename',
         openPanelName,
@@ -264,19 +314,21 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
   };
 
   const onClone = async (newCustomPanelName: string) => {
-    cloneCustomPanel(newCustomPanelName, panelId).then((id: string) => {
-      window.location.assign(`${last(parentBreadcrumbs)!.href}${id}`);
-    });
+    if (!isNameValid(newCustomPanelName)) {
+      setToast('Invalid Observability Dashboard name', 'danger');
+    } else {
+      dispatch(clonePanel(panel, newCustomPanelName));
+    }
     closeModal();
   };
 
-  const clonePanel = () => {
+  const clonePanelModal = () => {
     setModalLayout(
       getCustomModal(
         onClone,
         closeModal,
         'Name',
-        'Duplicate Panel',
+        'Duplicate Dashboard',
         'Cancel',
         'Duplicate',
         openPanelName + ' (copy)',
@@ -382,7 +434,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
         setOnRefresh(!onRefresh);
       })
       .catch((err) => {
-        setToast('Error is adding filters to the operational panel', 'danger');
+        setToast('Error is adding filters to the Observability Dashboard', 'danger');
         console.error(err.body.message);
       });
   };
@@ -400,7 +452,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
         setToast(`Visualization ${visualzationTitle} successfully added!`, 'success');
       })
       .catch((err) => {
-        setToast(`Error in adding ${visualzationTitle} visualization to the panel`, 'danger');
+        setToast(`Error in adding ${visualzationTitle} visualization to the Dashboard`, 'danger');
         console.error(err);
       });
   };
@@ -453,7 +505,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
       onClick={() => setPanelsMenuPopover(true)}
       disabled={addVizDisabled}
     >
-      Panel actions
+      Dashboard Actions
     </EuiButton>
   );
 
@@ -488,7 +540,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
       title: 'Panel actions',
       items: [
         {
-          name: 'Reload panel',
+          name: 'Reload Dashboard',
           'data-test-subj': 'reloadPanelContextMenuItem',
           onClick: () => {
             setPanelsMenuPopover(false);
@@ -496,7 +548,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
           },
         },
         {
-          name: 'Rename panel',
+          name: 'Rename Dashboard',
           'data-test-subj': 'renamePanelContextMenuItem',
           onClick: () => {
             setPanelsMenuPopover(false);
@@ -504,15 +556,15 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
           },
         },
         {
-          name: 'Duplicate panel',
+          name: 'Duplicate Dashboard',
           'data-test-subj': 'duplicatePanelContextMenuItem',
           onClick: () => {
             setPanelsMenuPopover(false);
-            clonePanel();
+            clonePanelModal();
           },
         },
         {
-          name: 'Delete panel',
+          name: 'Delete Dashboard',
           'data-test-subj': 'deletePanelContextMenuItem',
           onClick: () => {
             setPanelsMenuPopover(false);
@@ -523,7 +575,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
     },
   ];
 
-  // Fetch the custom panel on Initial Mount
+  // Fetch the Observability Dashboard on Initial Mount
   useEffect(() => {
     fetchCustomPanel();
   }, [panelId]);
diff --git a/public/components/custom_panels/custom_panel_view_so.tsx b/public/components/custom_panels/custom_panel_view_so.tsx
new file mode 100644
index 0000000000..f65fd396f9
--- /dev/null
+++ b/public/components/custom_panels/custom_panel_view_so.tsx
@@ -0,0 +1,690 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* // eslint-disable no-console */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiBreadcrumb,
+  EuiButton,
+  EuiContextMenu,
+  EuiContextMenuPanelDescriptor,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiOverlayMask,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContentBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiPopover,
+  EuiSpacer,
+  EuiSuperDatePicker,
+  EuiTitle,
+  OnTimeChangeProps,
+  ShortDate,
+} from '@elastic/eui';
+import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+import { last } from 'lodash';
+import moment from 'moment';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { CoreStart } from '../../../../../src/core/public';
+import { CREATE_PANEL_MESSAGE } from '../../../common/constants/custom_panels';
+import { UI_DATE_FORMAT } from '../../../common/constants/shared';
+import { CustomPanelType } from '../../../common/types/custom_panels';
+import { uiSettingsService } from '../../../common/utils';
+import { coreRefs } from '../../framework/core_refs';
+import { PPLReferenceFlyout } from '../common/helpers';
+import { DeleteModal } from '../common/helpers/delete_modal';
+import { Autocomplete } from '../common/search/autocomplete';
+import { onItemSelect, parseGetSuggestions } from '../common/search/autocomplete_logic';
+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,
+  prependRecentlyUsedRange,
+} from './helpers/utils';
+import { EmptyPanelView } from './panel_modules/empty_panel';
+import { PanelGridSO } from './panel_modules/panel_grid/panel_grid_so';
+import { VisaulizationFlyoutSO } from './panel_modules/visualization_flyout/visualization_flyout_so';
+import {
+  clonePanel,
+  deletePanels,
+  doesNameExist,
+  fetchPanel,
+  renameCustomPanel,
+  selectPanel,
+  setPanel,
+  updatePanel,
+} from './redux/panel_slice';
+import { useToast } from '../common/toast';
+import PPLService from '../../services/requests/ppl';
+import DSLService from '../../services/requests/dsl';
+ 
+/*
+ * "CustomPanelsView" module used to render an Observability Dashboard
+ *
+ * Props taken in as params are:
+ * panelId: Name of the panel opened
+ * page: Page where component is called
+ * http: http core service
+ * coreSavedObjects : savedObjects core service
+ * pplService: ppl requestor service
+ * dslService: dsl requestor service
+ * chrome: chrome core service
+ * parentBreadcrumb: parent breadcrumb
+ * renameCustomPanel: Rename function for the panel
+ * deleteCustomPanel: Delete function for the panel
+ * cloneCustomPanel: Clone function for the panel
+ * onEditClick: Edit function for visualization
+ * startTime: Starting time
+ * endTime: Ending time
+ * setStartTime: Function to change start time
+ * setEndTime: Function to change end time
+ * childBreadcrumbs: Breadcrumbs to extend
+ * appId: id of application that panel belongs to
+ * onAddClick: Function for add button instead of add visualization popover
+ */
+
+interface CustomPanelViewProps {
+  panelId: string;
+  page: 'app' | 'operationalPanels';
+  coreSavedObjects: CoreStart['savedObjects'];
+  chrome: CoreStart['chrome'];
+  parentBreadcrumbs: EuiBreadcrumb[];
+  cloneCustomPanel: (clonedCustomPanelName: string, clonedCustomPanelId: string) => Promise<string>;
+  onEditClick: (savedVisualizationId: string) => any;
+  childBreadcrumbs?: EuiBreadcrumb[];
+  appId?: string;
+  updateAvailabilityVizId?: any;
+  onAddClick?: any;
+  pplService: PPLService;
+  dslService: DSLService;
+}
+
+export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
+  const {
+    panelId,
+    page,
+    appId,
+    pplService,
+    dslService,
+    chrome,
+    parentBreadcrumbs,
+    childBreadcrumbs,
+    updateAvailabilityVizId,
+    cloneCustomPanel,
+    onEditClick,
+    onAddClick,
+  } = props;
+
+  const dispatch = useDispatch();
+  const { setToast } = useToast();
+
+  const panel = useSelector(selectPanel);
+  const [loading, setLoading] = useState(true);
+
+  const [pplFilterValue, setPPLFilterValue] = useState('');
+  const [baseQuery, setBaseQuery] = useState('');
+  const [onRefresh, setOnRefresh] = useState(false);
+
+  const [inputDisabled, setInputDisabled] = useState(true);
+  const [addVizDisabled, setAddVizDisabled] = useState(false);
+  const [editDisabled, setEditDisabled] = useState(false);
+  const [dateDisabled, setDateDisabled] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false); // Modal Toggle
+  const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />); // Modal Layout
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); // Add Visualization Flyout
+  const [isFlyoutReplacement, setisFlyoutReplacement] = useState<boolean | undefined>(false);
+  const [replaceVisualizationId, setReplaceVisualizationId] = useState<string | undefined>('');
+  const [panelsMenuPopover, setPanelsMenuPopover] = useState(false);
+  const [editActionType, setEditActionType] = useState('');
+  const [isHelpFlyoutVisible, setHelpIsFlyoutVisible] = useState(false);
+
+  const appPanel = page === 'app';
+
+  const closeHelpFlyout = () => {
+    setAddVizDisabled(false);
+    setHelpIsFlyoutVisible(false);
+  };
+
+  const showHelpFlyout = () => {
+    setAddVizDisabled(true);
+    setHelpIsFlyoutVisible(true);
+  };
+
+  // DateTimePicker States/add
+  const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<DurationRange[]>([]);
+
+  const handleQueryChange = (newQuery: string) => {
+    setPPLFilterValue(newQuery);
+  };
+
+  const closeModal = () => {
+    setIsModalVisible(false);
+  };
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const onDatePickerChange = (timeProps: OnTimeChangeProps) => {
+    const updatedRanges = prependRecentlyUsedRange(
+      timeProps.start,
+      timeProps.end,
+      recentlyUsedRanges
+    );
+    dispatch(updatePanel({ ...panel, timeRange: { from: timeProps.start, to: timeProps.end } }, '', ''));
+
+    setRecentlyUsedRanges(updatedRanges.slice(0, 9));
+    onRefreshFilters(timeProps.start, timeProps.end);
+  };
+
+  const onDelete = async () => {
+    dispatch(deletePanels([panel]));
+    setTimeout(() => {
+      window.location.assign(`${last(parentBreadcrumbs)!.href}`);
+    }, 1000);
+    closeModal();
+  };
+
+  const deletePanel = () => {
+    setModalLayout(
+      <DeleteModal
+        onConfirm={onDelete}
+        onCancel={closeModal}
+        title={`Delete ${panel?.title}`}
+        message={`Are you sure you want to delete this Observability Dashboard?`}
+      />
+    );
+    showModal();
+  };
+
+  const onRename = async (newCustomPanelName: string) => {
+    if (await doesNameExist(newCustomPanelName)) {
+      setToast(`Observability Dashboard with name "${newCustomPanelName}" already exists`, 'danger');
+    } else if (!isNameValid(newCustomPanelName)) {
+      setToast('Invalid Dashboard name', 'danger');
+    } else {
+      dispatch(renameCustomPanel(newCustomPanelName, panel.id));
+    }
+    closeModal();
+  };
+
+  const renamePanel = () => {
+    setModalLayout(
+      getCustomModal(
+        onRename,
+        closeModal,
+        'Name',
+        'Rename Dashboard',
+        'Cancel',
+        'Rename',
+        panel.title,
+        CREATE_PANEL_MESSAGE
+      )
+    );
+    showModal();
+  };
+
+  const onClone = async (newCustomPanelName: string) => {
+    if (!isNameValid(newCustomPanelName)) {
+      setToast('Invalid Observability Dashboard name', 'danger');
+    } else {
+      dispatch(clonePanel(panel, newCustomPanelName));
+    }
+    closeModal();
+  };
+
+  const clonePanelModal = () => {
+    setModalLayout(
+      getCustomModal(
+        onClone,
+        closeModal,
+        'Name',
+        'Duplicate Dashboard',
+        'Cancel',
+        'Duplicate',
+        panel.title + ' (copy)',
+        CREATE_PANEL_MESSAGE
+      )
+    );
+    showModal();
+  };
+
+  // toggle between panel edit mode
+  const editPanel = (editType: string) => {
+    setIsEditing(!isEditing);
+    if (editType === 'cancel') dispatch(fetchPanel(panelId));
+    setEditActionType(editType);
+  };
+
+  const closeFlyout = () => {
+    setIsFlyoutVisible(false);
+    setAddVizDisabled(false);
+    checkDisabledInputs();
+  };
+
+  const showFlyout = (isReplacement?: boolean, replaceVizId?: string) => {
+    setisFlyoutReplacement(isReplacement);
+    setReplaceVisualizationId(replaceVizId);
+    setIsFlyoutVisible(true);
+    setAddVizDisabled(true);
+    setInputDisabled(true);
+  };
+
+  const checkDisabledInputs = () => {
+    // When not in edit mode and panel has no visualizations
+    if (panel.visualizations.length === 0 && !isEditing) {
+      setEditDisabled(true);
+      setInputDisabled(true);
+      setAddVizDisabled(false);
+      setDateDisabled(false);
+    }
+
+    // When panel has visualizations
+    if (panel.visualizations.length > 0) {
+      setEditDisabled(false);
+      setInputDisabled(false);
+      setAddVizDisabled(false);
+      setDateDisabled(false);
+    }
+
+    // When in edit mode
+    if (isEditing) {
+      setEditDisabled(false);
+      setInputDisabled(true);
+      setAddVizDisabled(true);
+      setDateDisabled(true);
+    }
+  };
+
+  const buildBaseQuery = async () => {
+    // const indices: string[] = [];
+    // for (let i = 0; i < visualizations.length; i++) {
+    //   const visualizationId = visualizations[i].savedVisualizationId;
+    //   // TODO: create route to get list of visualizations in one call
+    //   const visData: SavedVisualizationType = await fetchVisualizationById(
+    //     http,
+    //     visualizationId,
+    //     (error: VizContainerError) => setToast(error.errorMessage, 'danger')
+    //   );
+
+    //   if (!_.isEmpty(visData)) {
+    //     const moreIndices = parseForIndices(visData.query);
+    //     for (let j = 0; j < moreIndices.length; j++) {
+    //       if (!indices.includes(moreIndices[j])) {
+    //         indices.push(moreIndices[j]);
+    //       }
+    //     }
+    //   }
+    // }
+    // setBaseQuery('source = ' + indices.join(', '));
+    return;
+  };
+
+  const onRefreshFilters = async (start: ShortDate, end: ShortDate) => {
+    if (!isDateValid(convertDateTime(start), convertDateTime(end, false), setToast)) {
+      return;
+    }
+
+    if (!isPPLFilterValid(pplFilterValue, setToast)) {
+      console.error(pplFilterValue);
+      return;
+    }
+
+    await coreRefs.savedObjectsClient?.update('observability-panel', panelId, {
+      ...panel,
+      timeRange: {
+        to: end,
+        from: start,
+      },
+      queryFilter: {
+        query: pplFilterValue,
+        language: 'ppl',
+      },
+    });
+
+    setOnRefresh(!onRefresh);
+  };
+
+  const cloneVisualization = (visualzationTitle: string, savedVisualizationId: string) => {
+    addVisualizationToCurrentPanel({ savedVisualizationId, successMsg: `Visualization ${visualzationTitle} successfully added!`, failureMsg: `Error in adding ${visualzationTitle} visualization to the panel` });
+  };
+
+  const cancelButton = (
+    <EuiButton
+      data-test-subj="cancelPanelButton"
+      iconType="cross"
+      color="danger"
+      onClick={() => editPanel('cancel')}
+    >
+      Cancel
+    </EuiButton>
+  );
+
+  const saveButton = (
+    <EuiButton data-test-subj="savePanelButton" iconType="save" onClick={() => editPanel('save')}>
+      Save
+    </EuiButton>
+  );
+
+  const editButton = (
+    <EuiButton
+      data-test-subj="editPanelButton"
+      iconType="pencil"
+      onClick={() => editPanel('edit')}
+      disabled={editDisabled}
+    >
+      Edit
+    </EuiButton>
+  );
+
+  const addButton = (
+    <EuiButton
+      data-test-subj="addVisualizationButton"
+      iconType="plusInCircle"
+      onClick={onAddClick}
+      isDisabled={addVizDisabled}
+    >
+      Add
+    </EuiButton>
+  );
+
+  // Panel Actions Button
+  const panelActionsButton = (
+    <EuiButton
+      data-test-subj="panelActionContextMenu"
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={() => setPanelsMenuPopover(true)}
+      disabled={addVizDisabled}
+    >
+      Dashboard Actions
+    </EuiButton>
+  );
+
+  const addVisualizationToCurrentPanel = async ({
+    savedVisualizationId,
+    oldVisualizationId,
+    successMsg,
+    failureMsg,
+  }: {
+    savedVisualizationId: string;
+    oldVisualizationId?: string;
+    successMsg: string;
+    failureMsg: string;
+  }) => {
+    const allVisualizations = panel!.visualizations;
+
+    const visualizationsWithNewPanel = addVisualizationPanel(
+      savedVisualizationId,
+      oldVisualizationId,
+      allVisualizations
+    );
+
+    const updatedPanel = { ...panel, visualizations: visualizationsWithNewPanel };
+    dispatch(updatePanel(updatedPanel, successMsg, failureMsg));
+  };
+
+  const setPanelVisualizations = (newVis) => {
+    const newPanel: CustomPanelType = { ...panel, visualizations: newVis };
+    dispatch(setPanel(newPanel));
+  };
+
+  let flyout;
+  if (isFlyoutVisible) {
+    flyout = (
+      <VisaulizationFlyoutSO
+        panelId={panelId}
+        closeFlyout={closeFlyout}
+        pplFilterValue={pplFilterValue}
+        start={panel.timeRange.from}
+        end={panel.timeRange.to}
+        http={coreRefs.http!}
+        pplService={pplService}
+        setPanelVisualizations={setPanelVisualizations}
+        isFlyoutReplacement={isFlyoutReplacement}
+        replaceVisualizationId={replaceVisualizationId}
+        appId={appId}
+        addVisualizationPanel={addVisualizationToCurrentPanel}
+      />
+    );
+  }
+
+  let helpFlyout;
+  if (isHelpFlyoutVisible) {
+    helpFlyout = <PPLReferenceFlyout module="panels" closeFlyout={closeHelpFlyout} />;
+  }
+
+  const panelActionsMenu: EuiContextMenuPanelDescriptor[] = [
+    {
+      id: 0,
+      title: 'Panel actions',
+      items: [
+        {
+          name: 'Reload Dashboard',
+          'data-test-subj': 'reloadPanelContextMenuItem',
+          onClick: () => {
+            setPanelsMenuPopover(false);
+            dispatch(fetchPanel(panelId));
+          },
+        },
+        {
+          name: 'Rename Dashboard',
+          'data-test-subj': 'renamePanelContextMenuItem',
+          onClick: () => {
+            setPanelsMenuPopover(false);
+            renamePanel();
+          },
+        },
+        {
+          name: 'Duplicate Dashboard',
+          'data-test-subj': 'duplicatePanelContextMenuItem',
+          onClick: () => {
+            setPanelsMenuPopover(false);
+            clonePanelModal();
+          },
+        },
+        {
+          name: 'Delete Dashboard',
+          'data-test-subj': 'deletePanelContextMenuItem',
+          onClick: () => {
+            setPanelsMenuPopover(false);
+            deletePanel();
+          },
+        },
+      ],
+    },
+  ];
+  // Fetch the Observability Dashboard on Initial Mount
+  useEffect(() => {
+    setLoading(true);
+    dispatch(fetchPanel(panelId));
+  }, []);
+
+  // Toggle input type (disabled or not disabled)
+  // Disabled when there no visualizations in panels or when the panel is in edit mode
+  useEffect(() => {
+    if (!loading) {
+      checkDisabledInputs();
+    }
+  }, [isEditing, loading]);
+
+  // Build base query with all of the indices included in the current visualizations
+  useEffect(() => {
+    if (loading) {
+      if (panel.id === props.panelId) setLoading(false);
+      else return;
+    }
+
+    checkDisabledInputs();
+    buildBaseQuery();
+    setLoading(false);
+  }, [panel, loading]);
+
+  // Edit the breadcrumb when panel name changes
+  useEffect(() => {
+    if (!panel) return;
+
+    let newBreadcrumb;
+    if (childBreadcrumbs) {
+      newBreadcrumb = childBreadcrumbs;
+    } else {
+      newBreadcrumb = [
+        {
+          text: panel.title,
+          href: `${last(parentBreadcrumbs)!.href}${panelId}`,
+        },
+      ];
+    }
+    chrome.setBreadcrumbs([...parentBreadcrumbs, ...newBreadcrumb]);
+  }, [panelId, panel]);
+
+  return loading ? (
+    <></>
+  ) : (
+    <div>
+      <EuiPage id={`panelView${appPanel ? 'InApp' : ''}`}>
+        <EuiPageBody component="div">
+          <EuiPageHeader>
+            {appPanel || (
+              <>
+                <EuiPageHeaderSection>
+                  <EuiTitle size="l">
+                    <h1 data-test-subj="panelNameHeader">{panel?.title}</h1>
+                  </EuiTitle>
+                  <EuiFlexItem>
+                    <EuiSpacer size="s" />
+                  </EuiFlexItem>
+                  Created on {moment(panel?.dateCreated || 0).format(UI_DATE_FORMAT)}
+                </EuiPageHeaderSection>
+                <EuiPageHeaderSection>
+                  <EuiFlexGroup gutterSize="s">
+                    {isEditing ? (
+                      <>
+                        <EuiFlexItem>{cancelButton}</EuiFlexItem>
+                        <EuiFlexItem>{saveButton}</EuiFlexItem>
+                      </>
+                    ) : (
+                      <EuiFlexItem>{editButton}</EuiFlexItem>
+                    )}
+                    <EuiFlexItem grow={false}>
+                      <EuiPopover
+                        panelPaddingSize="none"
+                        button={panelActionsButton}
+                        isOpen={panelsMenuPopover}
+                        closePopover={() => setPanelsMenuPopover(false)}
+                      >
+                        <EuiContextMenu initialPanelId={0} panels={panelActionsMenu} />
+                      </EuiPopover>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <AddVisualizationPopover
+                        addVizDisabled={addVizDisabled}
+                        showFlyout={showFlyout}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiPageHeaderSection>
+              </>
+            )}
+          </EuiPageHeader>
+          <EuiPageContentBody>
+            <EuiFlexGroup gutterSize="s">
+              <EuiFlexItem>
+                <Autocomplete
+                  key={'autocomplete-search-bar'}
+                  query={pplFilterValue}
+                  tempQuery={pplFilterValue}
+                  baseQuery={baseQuery}
+                  handleQueryChange={handleQueryChange}
+                  handleQuerySearch={() =>
+                    onRefreshFilters(panel.timeRange.from, panel.timeRange.to)
+                  }
+                  dslService={dslService}
+                  getSuggestions={parseGetSuggestions}
+                  onItemSelect={onItemSelect}
+                  isDisabled={inputDisabled}
+                  tabId={'panels-filter'}
+                  placeholder={
+                    "Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                  }
+                  possibleCommands={[{ label: 'where' }]}
+                  append={
+                    <EuiLink
+                      aria-label="ppl-info"
+                      onClick={showHelpFlyout}
+                      style={{ padding: '10px' }}
+                    >
+                      PPL
+                    </EuiLink>
+                  }
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiSuperDatePicker
+                  dateFormat={uiSettingsService.get('dateFormat')}
+                  start={panel.timeRange.from}
+                  end={panel.timeRange.to}
+                  onTimeChange={onDatePickerChange}
+                  recentlyUsedRanges={recentlyUsedRanges}
+                  isDisabled={dateDisabled}
+                />
+              </EuiFlexItem>
+              {appPanel && (
+                <>
+                  {isEditing ? (
+                    <>
+                      <EuiFlexItem grow={false}>{cancelButton}</EuiFlexItem>
+                      <EuiFlexItem grow={false}>{saveButton}</EuiFlexItem>
+                    </>
+                  ) : (
+                    <EuiFlexItem grow={false}>{editButton}</EuiFlexItem>
+                  )}
+                  <EuiFlexItem grow={false}>{addButton}</EuiFlexItem>
+                </>
+              )}
+            </EuiFlexGroup>
+            <EuiSpacer size="l" />
+            {panel.visualizations.length === 0 && (
+              <EmptyPanelView
+                addVizDisabled={addVizDisabled}
+                showFlyout={showFlyout}
+                {...(appPanel ? { addButton } : {})}
+              />
+            )}
+            <PanelGridSO
+              // http={coreRefs.http}
+              panelId={panelId}
+              updateAvailabilityVizId={updateAvailabilityVizId}
+              chrome={chrome}
+              panelVisualizations={panel?.visualizations || []}
+              setPanelVisualizations={setPanelVisualizations}
+              editMode={isEditing}
+              startTime={panel.timeRange.from}
+              endTime={panel.timeRange.to}
+              onRefresh={onRefresh}
+              cloneVisualization={cloneVisualization}
+              pplFilterValue={pplFilterValue}
+              showFlyout={showFlyout}
+              editActionType={editActionType}
+              onEditClick={onEditClick}
+            />
+          </EuiPageContentBody>
+        </EuiPageBody>
+      </EuiPage>
+      {isModalVisible && modalLayout}
+      {flyout}
+      {helpFlyout}
+    </div>
+  );
+};
diff --git a/public/components/custom_panels/helpers/__tests__/utils.test.tsx b/public/components/custom_panels/helpers/__tests__/utils.test.tsx
index ba4c6b27bd..9ea806c5b5 100644
--- a/public/components/custom_panels/helpers/__tests__/utils.test.tsx
+++ b/public/components/custom_panels/helpers/__tests__/utils.test.tsx
@@ -3,20 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
 import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import moment from 'moment';
-import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
-
-import {
-  isNameValid,
-  convertDateTime,
-  mergeLayoutAndVisualizations,
-  onTimeChange,
-  isDateValid,
-  isPPLFilterValid,
-  displayVisualization,
-} from '../utils';
+import React from 'react';
+import { PPL_DATE_FORMAT } from '../../../../../common/constants/shared';
 import {
   sampleLayout,
   sampleMergedVisualizations,
@@ -26,11 +18,16 @@ import {
   sampleSavedVisualization,
   sampleSavedVisualizationForHorizontalBar,
   sampleSavedVisualizationForLine,
-  sampleSavedVisualizationForPie,
-  sampleSavedVisualizationForTreeMap,
 } from '../../../../../test/panels_constants';
-import { PPL_DATE_FORMAT } from '../../../../../common/constants/shared';
-import React from 'react';
+import {
+  convertDateTime,
+  displayVisualization,
+  isDateValid,
+  isNameValid,
+  isPPLFilterValid,
+  mergeLayoutAndVisualizations,
+  onTimeChange,
+} from '../utils';
 
 describe('Utils helper functions', () => {
   configure({ adapter: new Adapter() });
@@ -56,23 +53,22 @@ describe('Utils helper functions', () => {
   });
 
   it('validates onTimeChange function', () => {
-    const setRecentlyUsedRanges = jest.fn((x) => x);
-    const setStart = jest.fn();
-    const setEnd = jest.fn();
     const recentlyUsedRanges: DurationRange[] = [];
-    onTimeChange(
+    const result = onTimeChange(
       '2022-01-30T18:44:40.577Z',
       '2022-02-25T19:18:33.075Z',
-      recentlyUsedRanges,
-      setRecentlyUsedRanges,
-      setStart,
-      setEnd
+      recentlyUsedRanges
     );
-    expect(setRecentlyUsedRanges).toHaveBeenCalledWith([
-      { start: '2022-01-30T18:44:40.577Z', end: '2022-02-25T19:18:33.075Z' },
-    ]);
-    expect(setStart).toHaveBeenCalledWith('2022-01-30T18:44:40.577Z');
-    expect(setEnd).toHaveBeenCalledWith('2022-02-25T19:18:33.075Z');
+    expect(result).toEqual({
+      start: '2022-01-30T18:44:40.577Z',
+      end: '2022-02-25T19:18:33.075Z',
+      updatedRanges: [
+        {
+          start: '2022-01-30T18:44:40.577Z',
+          end: '2022-02-25T19:18:33.075Z',
+        },
+      ],
+    });
   });
 
   it('validates isDateValid function', () => {
diff --git a/public/components/custom_panels/helpers/add_visualization_helper.ts b/public/components/custom_panels/helpers/add_visualization_helper.ts
new file mode 100644
index 0000000000..1c827219b5
--- /dev/null
+++ b/public/components/custom_panels/helpers/add_visualization_helper.ts
@@ -0,0 +1,125 @@
+import { v4 as uuidv4 } from 'uuid';
+import { BoxType, VisualizationType } from '../../../../common/types/custom_panels';
+
+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: VisualizationType[]) => {
+  const newVizBox = { x1: 0, y1: 0, x2: 6, y2: 4 };
+  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
+const getNewVizDimensions = (panelVisualizations: VisualizationType[]) => {
+  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: 6, h: 4 };
+  }
+
+  // else place the new visualization at the bottom of the panel
+  panelVisualizations.map((panelVisualization: VisualizationType) => {
+    if (panelVisualization.y >= maxY) {
+      maxY = panelVisualization.y;
+      maxYH = panelVisualization.h;
+    }
+  });
+
+  return { x: 0, y: maxY + maxYH, w: 6, h: 4 };
+};
+
+// Add Visualization in the  Panel
+export const addVisualizationPanel = (
+  // client: ILegacyScopedClusterClient,
+  // panelId: string,
+  savedVisualizationId: string,
+  oldVisualizationId: string | undefined,
+  allPanelVisualizations: VisualizationType[]
+) => {
+  try {
+    // const allPanelVisualizations = await this.getVisualizations(client, panelId);
+
+    let newDimensions;
+    let visualizationsList = [] as VisualizationType[];
+    if (oldVisualizationId === undefined) {
+      newDimensions = getNewVizDimensions(allPanelVisualizations);
+      visualizationsList = allPanelVisualizations;
+    } else {
+      allPanelVisualizations.map((visualization: VisualizationType) => {
+        if (visualization.id !== oldVisualizationId) {
+          visualizationsList.push(visualization);
+        } else {
+          newDimensions = {
+            x: visualization.x,
+            y: visualization.y,
+            w: visualization.w,
+            h: visualization.h,
+          };
+        }
+      });
+    }
+    const newPanelVisualizations = [
+      ...visualizationsList,
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId,
+        ...newDimensions,
+      },
+    ];
+    return newPanelVisualizations;
+  } catch (error) {
+    throw new Error('Add/Replace Visualization Error:' + error);
+  }
+};
+
+// Add Multiple visualizations in a Panel
+export const addMultipleVisualizations = (
+  savedVisualizationIds: string[],
+  allPanelVisualizations: VisualizationType[]
+) => {
+  try {
+    let newDimensions;
+    let visualizationsList = [...allPanelVisualizations];
+
+    savedVisualizationIds.map((savedVisualizationId) => {
+      newDimensions = getNewVizDimensions(visualizationsList);
+      visualizationsList = [
+        ...visualizationsList,
+        {
+          id: 'panel_viz_' + uuidv4(),
+          savedVisualizationId,
+          ...newDimensions,
+        },
+      ];
+    });
+
+    return visualizationsList;
+  } catch (error) {
+    throw new Error('Add Multiple Visualization Error:' + error);
+  }
+};
diff --git a/public/components/custom_panels/helpers/add_visualization_popover.tsx b/public/components/custom_panels/helpers/add_visualization_popover.tsx
index 4dac54ab30..d36fcd149b 100644
--- a/public/components/custom_panels/helpers/add_visualization_popover.tsx
+++ b/public/components/custom_panels/helpers/add_visualization_popover.tsx
@@ -5,6 +5,12 @@
 
 import { EuiButton, EuiContextMenu, EuiPopover } from '@elastic/eui';
 import React, { useState } from 'react';
+import {
+  CREATE_TAB_PARAM,
+  CREATE_TAB_PARAM_KEY,
+  TAB_CHART_ID,
+} from '../../../../common/constants/explorer';
+import { observabilityLogsID } from '../../../../common/constants/shared';
 
 interface AddVisualizationPopoverProps {
   showFlyout: (isReplacement?: boolean, replaceVizId?: string) => void;
@@ -27,7 +33,9 @@ export const AddVisualizationPopover = ({
 
   const advancedVisualization = () => {
     closeVizPopover();
-    window.location.assign('#/event_analytics/explorer');
+    window.location.assign(
+      `${observabilityLogsID}#/explorer?${CREATE_TAB_PARAM_KEY}=${CREATE_TAB_PARAM[TAB_CHART_ID]}`
+    );
   };
 
   const getVizContextPanels = () => {
diff --git a/public/components/custom_panels/helpers/modal_containers.tsx b/public/components/custom_panels/helpers/modal_containers.tsx
index 0fb80a5979..cdc93226c9 100644
--- a/public/components/custom_panels/helpers/modal_containers.tsx
+++ b/public/components/custom_panels/helpers/modal_containers.tsx
@@ -67,14 +67,14 @@ export const getCloneModal = (
   return (
     <EuiOverlayMask>
       <EuiConfirmModal
-        title="Clone operational panel"
+        title="Clone Observability Dashboard"
         onCancel={onCancel}
         onConfirm={onConfirm}
         cancelButtonText="Cancel"
         confirmButtonText="Yes"
         defaultFocusedButton="confirm"
       >
-        <p>Do you want to clone this operational panel?</p>
+        <p>Do you want to clone this Observability Dashboard?</p>
       </EuiConfirmModal>
     </EuiOverlayMask>
   );
diff --git a/public/components/custom_panels/helpers/panel_state_reducer.ts b/public/components/custom_panels/helpers/panel_state_reducer.ts
new file mode 100644
index 0000000000..1fd5bf7aeb
--- /dev/null
+++ b/public/components/custom_panels/helpers/panel_state_reducer.ts
@@ -0,0 +1,15 @@
+import { CUSTOM_PANELS_SAVED_OBJECT_TYPE } from "common/constants/custom_panels"
+import { coreRefs } from "public/framework/core_refs"
+
+
+const FETCH = 'fetch'
+
+/*
+** ACTIONS 
+*/
+const fetchPanel = (id) => ({ type: FETCH, id })
+
+export const Actions = { fetchPanel }
+
+
+
diff --git a/public/components/custom_panels/helpers/utils.tsx b/public/components/custom_panels/helpers/utils.tsx
index 4f0c44b4c7..d2ca2a1be5 100644
--- a/public/components/custom_panels/helpers/utils.tsx
+++ b/public/components/custom_panels/helpers/utils.tsx
@@ -32,7 +32,7 @@ import { getDefaultVisConfig } from '../../event_analytics/utils';
 import { Visualization } from '../../visualizations/visualization';
 
 /*
- * "Utils" This file contains different reused functions in operational panels
+ * "Utils" This file contains different reused functions in Observability Dashboards
  *
  * isNameValid - Validates string to length > 0 and < 50
  * convertDateTime - Converts input datetime string to required format
@@ -370,23 +370,18 @@ export const renderCatalogVisualization = async (
 };
 
 // Function to store recently used time filters and set start and end time.
-export const onTimeChange = (
+export const prependRecentlyUsedRange = (
   start: ShortDate,
   end: ShortDate,
-  recentlyUsedRanges: DurationRange[],
-  setRecentlyUsedRanges: React.Dispatch<React.SetStateAction<DurationRange[]>>,
-  setStart: React.Dispatch<React.SetStateAction<string>>,
-  setEnd: React.Dispatch<React.SetStateAction<string>>
+  recentlyUsedRanges: DurationRange[]
 ) => {
-  const recentlyUsedRangeObject = recentlyUsedRanges.filter((recentlyUsedRange) => {
-    const isDuplicate = recentlyUsedRange.start === start && recentlyUsedRange.end === end;
-    return !isDuplicate;
-  });
+  const deduplicatedRanges = rejectRecentRange(recentlyUsedRanges, { start, end });
 
-  recentlyUsedRangeObject.unshift({ start, end });
-  setStart(start);
-  setEnd(end);
-  setRecentlyUsedRanges(recentlyUsedRangeObject.slice(0, 9));
+  return [{ start, end }, ...deduplicatedRanges];
+};
+
+const rejectRecentRange = (rangeList, toReject) => {
+  return rangeList.filter((r) => !(r.start === toReject.start && r.end === toReject.end));
 };
 
 /**
@@ -521,3 +516,16 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
     />
   );
 };
+
+export const onTimeChange = (
+  start: ShortDate,
+  end: ShortDate,
+  recentlyUsedRanges: DurationRange[]
+) => {
+  const updatedRanges = recentlyUsedRanges.filter((recentlyUsedRange) => {
+    const isDuplicate = recentlyUsedRange.start === start && recentlyUsedRange.end === end;
+    return !isDuplicate;
+  });
+  updatedRanges.unshift({ start, end });
+  return { start, end, updatedRanges };
+};
diff --git a/public/components/custom_panels/home.tsx b/public/components/custom_panels/home.tsx
index eb5db6ef8c..b43ec1cc59 100644
--- a/public/components/custom_panels/home.tsx
+++ b/public/components/custom_panels/home.tsx
@@ -2,32 +2,46 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-/* eslint-disable no-console */
 
-import { EuiBreadcrumb, EuiGlobalToastList, EuiLink, ShortDate } from '@elastic/eui';
-import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
-import _ from 'lodash';
-import React, { ReactChild, useState } from 'react';
+import { EuiBreadcrumb, ShortDate, htmlIdGenerator } from '@elastic/eui';
+import React, { useState } from 'react';
+import { useDispatch, batch } from 'react-redux';
 // eslint-disable-next-line @osd/eslint/module_migration
-import { StaticContext, Switch } from 'react-router';
-import { Route, RouteComponentProps, useHistory } from 'react-router-dom';
-import PPLService from '../../services/requests/ppl';
-import DSLService from '../../services/requests/dsl';
-import { CoreStart } from '../../../../../src/core/public';
-import {
-  CUSTOM_PANELS_API_PREFIX,
-  CUSTOM_PANELS_DOCUMENTATION_URL,
-} from '../../../common/constants/custom_panels';
+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,
+  observabilityLogsID,
+  observabilityPanelsID,
   OBSERVABILITY_BASE,
   SAVED_OBJECTS,
 } from '../../../common/constants/shared';
-import { CustomPanelListType } from '../../../common/types/custom_panels';
-import { ObservabilitySideBar } from '../common/side_nav';
+import DSLService from '../../services/requests/dsl';
+import PPLService from '../../services/requests/ppl';
 import { CustomPanelTable } from './custom_panel_table';
 import { CustomPanelView } from './custom_panel_view';
-import { isNameValid } from './helpers/utils';
+import { CustomPanelViewSO } from './custom_panel_view_so';
+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';
+import { init as initQueryResult } from '../event_analytics/redux/slices/query_result_slice';
+import { changeQuery, init as initQuery } from '../event_analytics/redux/slices/query_slice';
+import { addTab, setSelectedQueryTab } from '../event_analytics/redux/slices/query_tab_slice';
+import {
+  createPanel,
+  createPanelSample,
+  createPanelWithVizs,
+  deletePanel,
+  fetchPanels,
+  newPanelTemplate,
+  uuidRx,
+} from './redux/panel_slice';
+import { useToast } from '../common/toast';
+import { coreRefs } from '../../framework/core_refs';
+
+// import { ObjectFetcher } from '../common/objectFetcher';
 
 /*
  * "Home" module is initial page for Operantional Panels
@@ -37,16 +51,19 @@ import { isNameValid } from './helpers/utils';
  * chrome: chrome core service;
  * parentBreadcrumb: parent breadcrumb name and link
  * pplService: ppl requestor service
- * renderProps: Props from router
+ * renderProps: Props from router of parent component
+ *            - Used to calculate path when this component embedded into another (WHY?!)
  */
 
 interface PanelHomeProps {
   http: CoreStart['http'];
   chrome: CoreStart['chrome'];
   parentBreadcrumbs: EuiBreadcrumb[];
+  setBreadcrumbs: (newBreadcrumbs: EuiBreadcrumb[]) => void;
   pplService: PPLService;
   dslService: DSLService;
   renderProps: RouteComponentProps<any, StaticContext, any>;
+  coreSavedObjects: SavedObjectsStart;
 }
 
 export const Home = ({
@@ -56,187 +73,56 @@ export const Home = ({
   pplService,
   dslService,
   renderProps,
+  coreSavedObjects,
+  setBreadcrumbs,
 }: PanelHomeProps) => {
-  const [customPanelData, setcustomPanelData] = useState<CustomPanelListType[]>([]);
-  const [toasts, setToasts] = useState<Toast[]>([]);
   const [loading, setLoading] = useState(false);
-  const [toastRightSide, setToastRightSide] = useState<boolean>(true);
   const [start, setStart] = useState<ShortDate>('');
   const [end, setEnd] = useState<ShortDate>('');
-  const history = useHistory();
-
-  const setToast = (title: string, color = 'success', text?: ReactChild, side?: string) => {
-    if (!text) text = '';
-    setToastRightSide(!side ? true : false);
-    setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
-  };
 
-  const onEditClick = (savedVisualizationId: string) => {
-    window.location.assign(`#/event_analytics/explorer/${savedVisualizationId}`);
-  };
+  const dispatch = useDispatch();
 
-  // Fetches all saved Custom Panels
-  const fetchCustomPanels = () => {
-    setLoading(true);
-    http
-      .get(`${CUSTOM_PANELS_API_PREFIX}/panels`)
-      .then((res) => {
-        setcustomPanelData(res.panels);
-      })
-      .catch((err) => {
-        console.error('Issue in fetching the operational panels', err.body.message);
-      });
-    setLoading(false);
-  };
+  const { setToast } = useToast();
 
-  // Creates a new CustomPanel
-  const createCustomPanel = (newCustomPanelName: string) => {
-    if (!isNameValid(newCustomPanelName)) {
-      setToast('Invalid Operational Panel name', 'danger');
-      window.location.assign(`${_.last(parentBreadcrumbs)!.href}`);
-      return;
-    }
+  const customPanelBreadCrumbs = [
+    ...parentBreadcrumbs,
+    {
+      text: 'Dashboards',
+      href: `${observabilityPanelsID}#/`,
+    },
+  ];
 
-    return http
-      .post(`${CUSTOM_PANELS_API_PREFIX}/panels`, {
-        body: JSON.stringify({
-          panelName: newCustomPanelName,
-        }),
-      })
-      .then(async (res) => {
-        setToast(`Operational Panel "${newCustomPanelName}" successfully created!`);
-        window.location.assign(`${_.last(parentBreadcrumbs)!.href}${res.newPanelId}`);
-      })
-      .catch((err) => {
-        setToast(
-          'Please ask your administrator to enable Operational Panels for you.',
-          'danger',
-          <EuiLink href={CUSTOM_PANELS_DOCUMENTATION_URL} target="_blank">
-            Documentation
-          </EuiLink>
-        );
-        console.error(err);
-      });
-  };
+  const addNewTab = async () => {
+    // get a new tabId
+    const tabId = htmlIdGenerator(TAB_ID_TXT_PFX)();
 
-  // Renames an existing CustomPanel
-  const renameCustomPanel = (editedCustomPanelName: string, editedCustomPanelId: string) => {
-    if (!isNameValid(editedCustomPanelName)) {
-      setToast('Invalid Custom Panel name', 'danger');
-      return Promise.reject();
-    }
-    const renamePanelObject = {
-      panelId: editedCustomPanelId,
-      panelName: editedCustomPanelName,
-    };
+    // create a new tab
+    await batch(() => {
+      dispatch(initQuery({ tabId }));
+      dispatch(initQueryResult({ tabId }));
+      dispatch(initFields({ tabId }));
+      dispatch(addTab({ tabId }));
+      dispatch(initPatterns({ tabId }));
+    });
 
-    return http
-      .post(`${CUSTOM_PANELS_API_PREFIX}/panels/rename`, {
-        body: JSON.stringify(renamePanelObject),
-      })
-      .then((res) => {
-        setcustomPanelData((prevCustomPanelData) => {
-          const newCustomPanelData = [...prevCustomPanelData];
-          const renamedCustomPanel = newCustomPanelData.find(
-            (customPanel) => customPanel.id === editedCustomPanelId
-          );
-          if (renamedCustomPanel) renamedCustomPanel.name = editedCustomPanelName;
-          return newCustomPanelData;
-        });
-        setToast(`Operational Panel successfully renamed into "${editedCustomPanelName}"`);
-      })
-      .catch((err) => {
-        setToast(
-          'Error renaming Operational Panel, please make sure you have the correct permission.',
-          'danger'
-        );
-        console.error(err.body.message);
-      });
+    return tabId;
   };
 
-  // Clones an existing Custom Panel, return new Custom Panel id
-  const cloneCustomPanel = (
-    clonedCustomPanelName: string,
-    clonedCustomPanelId: string
-  ): Promise<string> => {
-    if (!isNameValid(clonedCustomPanelName)) {
-      setToast('Invalid Operational Panel name', 'danger');
-      return Promise.reject();
-    }
-    const clonePanelObject = {
-      panelId: clonedCustomPanelId,
-      panelName: clonedCustomPanelName,
-    };
-
-    return http
-      .post(`${CUSTOM_PANELS_API_PREFIX}/panels/clone`, {
-        body: JSON.stringify(clonePanelObject),
-      })
-      .then((res) => {
-        setcustomPanelData((prevCustomPanelData) => {
-          return [
-            ...prevCustomPanelData,
-            {
-              name: clonedCustomPanelName,
-              id: res.clonePanelId,
-              dateCreated: res.dateCreated,
-              dateModified: res.dateModified,
-            },
-          ];
-        });
-        setToast(`Operational Panel "${clonedCustomPanelName}" successfully created!`);
-        return res.clonePanelId;
-      })
-      .catch((err) => {
-        setToast(
-          'Error cloning Operational Panel, please make sure you have the correct permission.',
-          'danger'
-        );
-        console.error(err.body.message);
-      });
-  };
-
-  // Deletes multiple existing Operational Panels
-  const deleteCustomPanelList = (customPanelIdList: string[], toastMessage: string) => {
-    const concatList = customPanelIdList.toString();
-    return http
-      .delete(`${CUSTOM_PANELS_API_PREFIX}/panelList/` + concatList)
-      .then((res) => {
-        setcustomPanelData((prevCustomPanelData) => {
-          return prevCustomPanelData.filter(
-            (customPanel) => !customPanelIdList.includes(customPanel.id)
-          );
-        });
-        setToast(toastMessage);
-        return res;
-      })
-      .catch((err) => {
-        setToast(
-          'Error deleting Operational Panels, please make sure you have the correct permission.',
-          'danger'
-        );
-        console.error(err.body.message);
-      });
-  };
-
-  // Deletes an existing Operational Panel
-  const deleteCustomPanel = (customPanelId: string, customPanelName: string) => {
-    return http
-      .delete(`${CUSTOM_PANELS_API_PREFIX}/panels/` + customPanelId)
-      .then((res) => {
-        setcustomPanelData((prevCustomPanelData) => {
-          return prevCustomPanelData.filter((customPanel) => customPanel.id !== customPanelId);
-        });
-        setToast(`Operational Panel "${customPanelName}" successfully deleted!`);
-        return res;
-      })
-      .catch((err) => {
-        setToast(
-          'Error deleting Operational Panel, please make sure you have the correct permission.',
-          'danger'
-        );
-        console.error(err.body.message);
-      });
+  const onEditClick = async (savedVisualizationId: string) => {
+    // open a new tab in explorer for loading this perticular visualization data to edit
+    const newTabId = await addNewTab();
+    batch(() => {
+      dispatch(
+        changeQuery({
+          tabId: newTabId,
+          query: {
+            [TAB_CREATED_TYPE]: REDIRECT_TAB,
+          },
+        })
+      );
+      dispatch(setSelectedQueryTab({ tabId: newTabId }));
+    });
+    window.location.assign(`${observabilityLogsID}#/explorer/${savedVisualizationId}`);
   };
 
   const addSamplePanels = async () => {
@@ -271,83 +157,72 @@ export const Home = ({
         .get(`${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/addSampleSavedObjects/panels`)
         .then((resp) => (savedVisualizationIds = [...resp.savedVizIds]));
 
-      await http
-        .post(`${CUSTOM_PANELS_API_PREFIX}/panels/addSamplePanels`, {
-          body: JSON.stringify({
-            savedVisualizationIds,
-          }),
-        })
-        .then((res) => {
-          setcustomPanelData([...customPanelData, ...res.demoPanelsData]);
-        });
+      dispatch(createPanelSample(savedVisualizationIds));
       setToast(`Sample panels successfully added.`);
     } catch (err: any) {
       setToast('Error adding sample panels.', 'danger');
-      console.error(err.body.message);
+      console.error(err.body?.message || err);
     } finally {
       setLoading(false);
     }
   };
 
+  const parentPath = renderProps ? renderProps.match.path : '';
+
   return (
-    <div>
-      <EuiGlobalToastList
-        toasts={toasts}
-        dismissToast={(removedToast) => {
-          setToasts(toasts.filter((toast) => toast.id !== removedToast.id));
-        }}
-        side={toastRightSide ? 'right' : 'left'}
-        toastLifeTimeMs={6000}
-      />
+    <HashRouter>
       <Switch>
-      <Route
-        exact
-        path={['/operational_panels/create', '/operational_panels']}
-        render={(props) => {
-          return (
-            <ObservabilitySideBar>
+        <Route
+          exact
+          path={['/create', '/']}
+          render={(props) => {
+            return (
               <CustomPanelTable
                 loading={loading}
-                fetchCustomPanels={fetchCustomPanels}
-                customPanels={customPanelData}
-                createCustomPanel={createCustomPanel}
                 setBreadcrumbs={chrome.setBreadcrumbs}
-                parentBreadcrumbs={parentBreadcrumbs}
-                renameCustomPanel={renameCustomPanel}
-                cloneCustomPanel={cloneCustomPanel}
-                deleteCustomPanelList={deleteCustomPanelList}
+                parentBreadcrumbs={customPanelBreadCrumbs}
                 addSamplePanels={addSamplePanels}
               />
-            </ObservabilitySideBar>
-          );
-        }}
-      />
-      <Route
-        path={`${renderProps.match.path}/:id`}
-        render={(props) => {
-          return (
-            <CustomPanelView
-              panelId={props.match.params.id}
-              http={http}
-              pplService={pplService}
-              dslService={dslService}
-              chrome={chrome}
-              parentBreadcrumbs={parentBreadcrumbs}
-              renameCustomPanel={renameCustomPanel}
-              cloneCustomPanel={cloneCustomPanel}
-              deleteCustomPanel={deleteCustomPanel}
-              setToast={setToast}
-              onEditClick={onEditClick}
-              startTime={start}
-              endTime={end}
-              setStartTime={setStart}
-              setEndTime={setEnd}
-              page="operationalPanels"
-            />
-          );
-        }}
-      />
+            );
+          }}
+        />
+        <Route
+          path={`${parentPath}/:id`}
+          render={(props) => {
+            const isSavedObject = !!props.match.params.id.match(uuidRx);
+
+            return isSavedObject ? (
+              <CustomPanelViewSO
+                panelId={props.match.params.id}
+                chrome={chrome}
+                pplService={pplService}
+                dslService={dslService}
+                parentBreadcrumbs={customPanelBreadCrumbs}
+                onEditClick={onEditClick}
+                page="operationalPanels"
+                coreSavedObjects={coreSavedObjects}
+              />
+            ) : (
+              <CustomPanelView
+                panelId={props.match.params.id}
+                http={http}
+                pplService={pplService}
+                dslService={dslService}
+                chrome={chrome}
+                parentBreadcrumbs={customPanelBreadCrumbs}
+                // renameCustomPanel={renameCustomPanel}
+                onEditClick={onEditClick}
+                startTime={start}
+                endTime={end}
+                setStartTime={setStart}
+                setEndTime={setEnd}
+                page="operationalPanels"
+                coreSavedObjects={coreSavedObjects}
+              />
+            );
+          }}
+        />
       </Switch>
-    </div>
+    </HashRouter>
   );
 };
diff --git a/public/components/custom_panels/panel_modules/empty_panel.tsx b/public/components/custom_panels/panel_modules/empty_panel.tsx
index 32a1226b76..dcebe55732 100644
--- a/public/components/custom_panels/panel_modules/empty_panel.tsx
+++ b/public/components/custom_panels/panel_modules/empty_panel.tsx
@@ -8,7 +8,7 @@ import React, { useState } from 'react';
 import { AddVisualizationPopover } from '../helpers/add_visualization_popover';
 
 /*
- * EmptyPanelView - This Sub-component is shown to the user when a operational panel is empty
+ * EmptyPanelView - This Sub-component is shown to the user when a Observability Dashboard is empty
  *
  * Props taken in as params are:
  * addVizDisabled -> Boolean to enable/disable the add visualization button
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
new file mode 100644
index 0000000000..a2fa5e02b5
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/panel_grid/panel_grid_so.tsx
@@ -0,0 +1,219 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import _, { forEach } from 'lodash';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout';
+import useObservable from 'react-use/lib/useObservable';
+import { CoreStart } from '../../../../../../../src/core/public';
+import { VisualizationContainer } from '../visualization_container';
+import { VisualizationType } from '../../../../../common/types/custom_panels';
+import './panel_grid.scss';
+import { mergeLayoutAndVisualizations } from '../../helpers/utils';
+import { coreRefs } from '../../../../framework/core_refs';
+import { selectPanel } from '../../redux/panel_slice';
+
+// HOC container to provide dynamic width for Grid layout
+const ResponsiveGridLayout = WidthProvider(Responsive);
+
+/*
+ * PanelGrid - This module is places all visualizations in react-grid-layout
+ *
+ * Props taken in as params are:
+ * chrome: chrome core service;
+ * panelId: OpenPanel Id
+ * updateAvailabilityVizId: function to update application if availabilityViz is removed from panel
+ * panelVisualizations: list of panel visualizations
+ * setPanelVisualizations: function to set panel visualizations
+ * editMode: boolean to check if the panel is in edit mode
+ * startTime: start time in date filter
+ * endTime: end time in date filter
+ * onRefresh: boolean value to trigger refresh of visualizations
+ * cloneVisualization: function to clone a visualization in panel
+ * pplFilterValue: string with panel PPL filter value
+ * showFlyout: function to show the flyout
+ * editActionType: Type of action done while clicking the edit button
+ */
+
+interface PanelGridProps {
+  chrome: CoreStart['chrome'];
+  panelId: string;
+  updateAvailabilityVizId?: any;
+  panelVisualizations: VisualizationType[];
+  setPanelVisualizations: React.Dispatch<React.SetStateAction<VisualizationType[]>>;
+  editMode: boolean;
+  startTime: string;
+  endTime: string;
+  onEditClick: (savedVisualizationId: string) => any;
+  onRefresh: boolean;
+  cloneVisualization: (visualzationTitle: string, savedVisualizationId: string) => void;
+  pplFilterValue: string;
+  showFlyout: (isReplacement?: boolean | undefined, replaceVizId?: string | undefined) => void;
+  editActionType: string;
+  setEditVizId?: any;
+}
+
+export const PanelGridSO = (props: PanelGridProps) => {
+  const {
+    chrome,
+    panelId,
+    updateAvailabilityVizId,
+    panelVisualizations,
+    setPanelVisualizations,
+    editMode,
+    startTime,
+    endTime,
+    onEditClick,
+    onRefresh,
+    cloneVisualization,
+    pplFilterValue,
+    showFlyout,
+    editActionType,
+  } = props;
+
+  const panel = useSelector(selectPanel);
+  const [currentLayout, setCurrentLayout] = useState<Layout[]>([]);
+  const [postEditLayout, setPostEditLayout] = useState<Layout[]>([]);
+  const [gridData, setGridData] = useState(panelVisualizations.map(() => <></>));
+  const isLocked = useObservable(chrome.getIsNavDrawerLocked$());
+
+  // 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: VisualizationType, index) => (
+        <VisualizationContainer
+          key={panelVisualization.id}
+          http={coreRefs.http!}
+          editMode={editMode}
+          visualizationId={panelVisualization.id}
+          savedVisualizationId={panelVisualization.savedVisualizationId}
+          pplService={coreRefs.pplService!}
+          fromTime={startTime}
+          toTime={endTime}
+          onRefresh={onRefresh}
+          onEditClick={onEditClick}
+          cloneVisualization={cloneVisualization}
+          pplFilterValue={pplFilterValue}
+          showFlyout={showFlyout}
+          removeVisualization={removeVisualization}
+        />
+      )
+    );
+    setGridData(gridDataComps);
+  };
+
+  // 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,
+        static: !editMode,
+      } as Layout;
+    });
+    setCurrentLayout(tempLayout);
+  };
+
+  // remove visualization from panel in edit mode
+  const removeVisualization = (visualizationId: string) => {
+    const newVisualizationList = _.reject(panelVisualizations, {
+      id: visualizationId,
+    });
+    mergeLayoutAndVisualizations(postEditLayout, newVisualizationList, setPanelVisualizations);
+  };
+
+  const updateLayout = (visualizations, newLayouts) => {
+    const newVisualizations = [];
+    forEach(visualizations, (viz) => {
+      let newviz = { ...viz };
+      forEach(newLayouts, (nwlyt) => {
+        if (viz.id === nwlyt.i) {
+          newviz = {
+            ...newviz,
+            ...nwlyt,
+          };
+          return;
+        }
+      });
+      newVisualizations.push({ ...newviz });
+    });
+    return newVisualizations;
+  };
+
+  // Save Visualization Layouts when not in edit mode anymore (after users saves the panel)
+  const saveVisualizationLayouts = async (panelID: string, visualizationParams: any) => {
+    const newVisualizations = updateLayout(panel.visualizations, visualizationParams);
+    const updateRes = await coreRefs.savedObjectsClient?.update('observability-panel', panelID, {
+      ...panel,
+      visualizations: newVisualizations,
+    });
+    setPanelVisualizations(updateRes?.attributes?.visualizations || []);
+  };
+
+  // Update layout whenever user edit gets completed
+  useEffect(() => {
+    if (editMode) {
+      reloadLayout();
+      loadVizComponents();
+    }
+  }, [editMode]);
+
+  useEffect(() => {
+    if (editActionType === 'save') {
+      const visualizationParams = postEditLayout.map((layout) =>
+        _.omit(layout, ['static', 'moved'])
+      );
+      saveVisualizationLayouts(panelId, visualizationParams);
+      if (updateAvailabilityVizId) {
+        updateAvailabilityVizId(panelVisualizations);
+      }
+    }
+  }, [editActionType]);
+
+  // Update layout whenever visualizations are updated
+  useEffect(() => {
+    reloadLayout();
+    loadVizComponents();
+  }, [panelVisualizations]);
+
+  // Reset Size of Panel Grid when Nav Dock is Locked
+  useEffect(() => {
+    setTimeout(function () {
+      window.dispatchEvent(new Event('resize'));
+    }, 300);
+  }, [isLocked]);
+
+  useEffect(() => {
+    loadVizComponents();
+  }, [onRefresh]);
+
+  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: VisualizationType, index) => (
+        <div key={panelVisualization.id}>{gridData[index]}</div>
+      ))}
+    </ResponsiveGridLayout>
+  );
+};
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
index 971c4821da..7a629952ed 100644
--- a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
@@ -38,7 +38,7 @@ import { CoreStart } from '../../../../../../../src/core/public';
 import { CUSTOM_PANELS_API_PREFIX } from '../../../../../common/constants/custom_panels';
 import { SAVED_VISUALIZATION } from '../../../../../common/constants/explorer';
 import {
-  pplResponse,
+  PplResponse,
   SavedVisualizationType,
   VisualizationType,
   VizContainerError,
@@ -61,7 +61,7 @@ import './visualization_flyout.scss';
  * VisaulizationFlyout - This module create a flyout to add visualization
  *
  * Props taken in as params are:
- * panelId: panel Id of current operational panel
+ * panelId: panel Id of current Observability Dashboard
  * closeFlyout: function to close the flyout
  * start: start time in date filter
  * end: end time in date filter
@@ -112,7 +112,7 @@ export const VisaulizationFlyout = ({
   const [newVisualizationTimeField, setNewVisualizationTimeField] = useState('');
   const [previewMetaData, setPreviewMetaData] = useState<SavedVisualizationType>();
   const [pplQuery, setPPLQuery] = useState('');
-  const [previewData, setPreviewData] = useState<pplResponse>({} as pplResponse);
+  const [previewData, setPreviewData] = useState<PplResponse>({} as PplResponse);
   const [previewArea, setPreviewArea] = useState(<></>);
   const [previewLoading, setPreviewLoading] = useState(false);
   const [isPreviewError, setIsPreviewError] = useState({} as VizContainerError);
@@ -186,7 +186,10 @@ export const VisaulizationFlyout = ({
           setToast(`Visualization ${newVisualizationTitle} successfully added!`, 'success');
         })
         .catch((err) => {
-          setToast(`Error in adding ${newVisualizationTitle} visualization to the panel`, 'danger');
+          setToast(
+            `Error in adding ${newVisualizationTitle} visualization to the Dashboard`,
+            'danger'
+          );
           console.error(err);
         });
     } else {
@@ -367,7 +370,7 @@ export const VisaulizationFlyout = ({
         }
       })
       .catch((err) => {
-        console.error('Issue in fetching the operational panels', err);
+        console.error('Issue in fetching the Observability Dashboards', err);
       });
   };
 
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx
new file mode 100644
index 0000000000..35e057a831
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx
@@ -0,0 +1,424 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiButton,
+  EuiButtonIcon,
+  EuiCallOut,
+  EuiCodeBlock,
+  EuiDatePicker,
+  EuiDatePickerRange,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiFormRow,
+  EuiIcon,
+  EuiLoadingChart,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiSelect,
+  EuiSelectOption,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+  EuiToolTip,
+  ShortDate,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { CoreStart } from '../../../../../../../src/core/public';
+import { SAVED_VISUALIZATION } from '../../../../../common/constants/explorer';
+import {
+  PPLResponse,
+  SavedVisualizationType,
+  VisualizationType,
+  VizContainerError,
+} from '../../../../../common/types/custom_panels';
+import { uiSettingsService } from '../../../../../common/utils';
+
+import PPLService from '../../../../services/requests/ppl';
+import { SavedObjectsActions } from '../../../../services/saved_objects/saved_object_client/saved_objects_actions';
+import { ObservabilitySavedVisualization } from '../../../../services/saved_objects/saved_object_client/types';
+import { FlyoutContainers } from '../../../common/flyout_containers';
+import {
+  convertDateTime,
+  displayVisualization,
+  getQueryResponse,
+  isDateValid,
+  parseSavedVisualizations,
+} from '../../helpers/utils';
+import { replaceVizInPanel, selectPanel } from '../../redux/panel_slice';
+import './visualization_flyout.scss';
+import { useToast } from '../../../common/toast';
+
+/*
+ * VisaulizationFlyoutSO - This module create a flyout to add visualization for SavedObjects custom Panels
+ *
+ * Props taken in as params are:
+ * panelId: panel Id of current Observability Dashboard
+ * closeFlyout: function to close the flyout
+ * start: start time in date filter
+ * end: end time in date filter
+ * savedObjects: savedObjects core service
+ * pplService: ppl requestor service
+ * setPanelVisualizations: function set the visualization list in panel
+ * isFlyoutReplacement: boolean to see if the flyout is trigger for add or replace visualization
+ * replaceVisualizationId: string id of the visualization to be replaced
+ */
+
+interface VisualizationFlyoutSOProps {
+  panelId: string;
+  pplFilterValue: string;
+  closeFlyout: () => void;
+  start: ShortDate;
+  end: ShortDate;
+  http: CoreStart['http'];
+  savedObjects: CoreStart['savedObjects'];
+  pplService: PPLService;
+  setPanelVisualizations: React.Dispatch<React.SetStateAction<VisualizationType[]>>;
+  isFlyoutReplacement?: boolean | undefined;
+  replaceVisualizationId?: string | undefined;
+  appId?: string;
+  addVisualizationPanel: any;
+}
+
+export const VisaulizationFlyoutSO = ({
+  appId = '',
+  pplFilterValue,
+  closeFlyout,
+  start,
+  end,
+  pplService,
+  isFlyoutReplacement,
+  replaceVisualizationId,
+  addVisualizationPanel,
+}: VisualizationFlyoutSOProps) => {
+  const dispatch = useDispatch();
+  const { setToast } = useToast();
+
+  const panel = useSelector(selectPanel);
+
+  const [newVisualizationTitle, setNewVisualizationTitle] = useState('');
+  const [newVisualizationType, setNewVisualizationType] = useState('');
+  const [newVisualizationTimeField, setNewVisualizationTimeField] = useState('');
+  const [previewMetaData, setPreviewMetaData] = useState<SavedVisualizationType>();
+  const [pplQuery, setPPLQuery] = useState('');
+  const [previewData, setPreviewData] = useState<PPLResponse>({} as PPLResponse);
+  const [previewArea, setPreviewArea] = useState(<></>);
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const [isPreviewError, setIsPreviewError] = useState({} as VizContainerError);
+  const [savedVisualizations, setSavedVisualizations] = useState<SavedVisualizationType[]>([]);
+  const [visualizationOptions, setVisualizationOptions] = useState<EuiSelectOption[]>([]);
+  const [selectValue, setSelectValue] = useState('');
+
+  // DateTimePicker States
+  const startDate = convertDateTime(start, true, false);
+  const endDate = convertDateTime(end, false, false);
+
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [modalContent, setModalContent] = useState(<></>);
+
+  const closeModal = () => setIsModalVisible(false);
+  const showModal = (modalType: string) => {
+    setModalContent(
+      <EuiModal onClose={closeModal}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>
+            <h1>{isPreviewError.errorMessage}</h1>
+          </EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          Error Details
+          <EuiSpacer />
+          <EuiCodeBlock language="html" isCopyable>
+            {isPreviewError.errorDetails}
+          </EuiCodeBlock>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButton onClick={closeModal} fill>
+            Close
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    );
+
+    setIsModalVisible(true);
+  };
+
+  const isInputValid = () => {
+    if (!isDateValid(convertDateTime(start), convertDateTime(end, false), setToast)) {
+      return false;
+    }
+
+    if (selectValue === '') {
+      setToast('Please make a valid selection', 'danger', undefined);
+      return false;
+    }
+
+    return true;
+  };
+
+  const addVisualization = () => {
+    if (!isInputValid()) return;
+
+    if (isFlyoutReplacement) {
+      dispatch(replaceVizInPanel(panel, replaceVisualizationId, selectValue, newVisualizationTitle));
+    } else {
+        const visualizationsWithNewPanel = addVisualizationPanel({
+          savedVisualizationId: selectValue,
+          onSuccess: `Visualization ${newVisualizationTitle} successfully added!`,
+          onFailure: `Error in adding ${newVisualizationTitle} visualization to the panel`
+        });
+    }
+    closeFlyout();
+  };
+
+  const onRefreshPreview = () => {
+    if (!isInputValid()) return;
+
+    getQueryResponse(
+      pplService,
+      pplQuery,
+      newVisualizationType,
+      start,
+      end,
+      setPreviewData,
+      setPreviewLoading,
+      setIsPreviewError,
+      pplFilterValue,
+      newVisualizationTimeField
+    );
+  };
+
+  const timeRange = (
+    <EuiToolTip
+      position="bottom"
+      content="Picker is disabled. Please edit date/time from panel"
+      display="block"
+    >
+      <EuiFormRow
+        label="Panel Time Range"
+        fullWidth
+        isInvalid={startDate > endDate}
+        // date-picker-preview style reduces height, need to add an empty line
+        // above error message so it does not overlap with DatePicker.
+        error={['', 'Time range is invalid.']}
+      >
+        <EuiDatePickerRange
+          className="date-picker-preview"
+          fullWidth
+          readOnly
+          startDateControl={
+            <EuiDatePicker
+              selected={startDate}
+              startDate={startDate}
+              endDate={endDate}
+              isInvalid={startDate > endDate}
+              aria-label="Start date"
+              dateFormat={uiSettingsService.get('dateFormat')}
+            />
+          }
+          endDateControl={
+            <EuiDatePicker
+              selected={endDate}
+              startDate={startDate}
+              endDate={endDate}
+              isInvalid={startDate > endDate}
+              aria-label="End date"
+              dateFormat={uiSettingsService.get('dateFormat')}
+            />
+          }
+        />
+      </EuiFormRow>
+    </EuiToolTip>
+  );
+
+  const flyoutHeader = (
+    <EuiFlyoutHeader hasBorder>
+      <EuiTitle size="m">
+        <h2 id="addVisualizationFlyout">
+          {isFlyoutReplacement ? 'Replace visualization' : 'Select existing visualization'}
+        </h2>
+      </EuiTitle>
+    </EuiFlyoutHeader>
+  );
+
+  const onChangeSelection = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectValue(e.target.value);
+  };
+
+  const emptySavedVisualizations = (
+    <EuiCallOut iconType="help">
+      <p>No saved visualizations found!</p>
+    </EuiCallOut>
+  );
+
+  const flyoutBody =
+    savedVisualizations.length > 0 ? (
+      <EuiFlyoutBody>
+        <>
+          <EuiSpacer size="s" />
+          <EuiFormRow label="Visualization name">
+            <EuiSelect
+              hasNoInitialSelection
+              onChange={(e) => onChangeSelection(e)}
+              options={visualizationOptions}
+              value={selectValue}
+            />
+          </EuiFormRow>
+          <EuiSpacer size="l" />
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiText grow={false}>
+                <h4>Preview</h4>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonIcon
+                aria-label="refreshPreview"
+                iconType="refresh"
+                onClick={onRefreshPreview}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="s" />
+          {previewArea}
+        </>
+      </EuiFlyoutBody>
+    ) : (
+      <EuiFlyoutBody banner={emptySavedVisualizations}>
+        <>
+          <div>{'Please use the "create new visualization" option in add visualization menu.'}</div>
+        </>
+      </EuiFlyoutBody>
+    );
+
+  const flyoutFooter = (
+    <EuiFlyoutFooter>
+      <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiButton data-test-subj="closeFlyoutButton" onClick={closeFlyout}>
+            Cancel
+          </EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton data-test-subj="addFlyoutButton" onClick={addVisualization} fill>
+            Add
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlyoutFooter>
+  );
+
+  // Fetch all saved visualizations
+  const fetchSavedVisualizations = async () => {
+    return SavedObjectsActions.getBulk<ObservabilitySavedVisualization>({
+      objectType: [SAVED_VISUALIZATION],
+      sortOrder: 'desc',
+      fromIndex: 0,
+    })
+      .then((response) => ({
+        visualizations: response.observabilityObjectList.map(parseSavedVisualizations),
+      }))
+      .then((res) => {
+        if (res.visualizations.length > 0) {
+          setSavedVisualizations(res.visualizations);
+          const filterAppVis = res.visualizations.filter((vis: SavedVisualizationType) => {
+            return appId
+              ? vis.hasOwnProperty('application_id')
+                ? vis.application_id === appId
+                : false
+              : !vis.hasOwnProperty('application_id');
+          });
+          setVisualizationOptions(
+            filterAppVis.map((visualization: SavedVisualizationType) => {
+              return { value: visualization.id, text: visualization.name };
+            })
+          );
+        }
+      })
+      .catch((err) => {
+        console.error('Issue in fetching the Observability Dashboards', err);
+      });
+  };
+
+  useEffect(() => {
+    const previewTemplate = (
+      <>
+        {timeRange}
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            {previewLoading ? (
+              <EuiLoadingChart size="xl" mono className="visualization-loading-chart-preview" />
+            ) : !_.isEmpty(isPreviewError) ? (
+              <div className="visualization-error-div">
+                <EuiIcon type="alert" color="danger" size="s" />
+                <EuiSpacer size="s" />
+                <EuiText size="s">
+                  <p>{isPreviewError.errorMessage}</p>
+                </EuiText>
+                {isPreviewError.hasOwnProperty('errorDetails') &&
+                isPreviewError.errorDetails !== '' ? (
+                  <EuiButton color="danger" onClick={() => showModal('errorModal')} size="s">
+                    See error details
+                  </EuiButton>
+                ) : (
+                  <></>
+                )}
+              </div>
+            ) : (
+              <div className="visualization-div-preview">
+                {displayVisualization(previewMetaData, previewData, newVisualizationType)}
+              </div>
+            )}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </>
+    );
+    setPreviewArea(previewTemplate);
+  }, [previewLoading]);
+
+  // On change of selected visualization change options
+  useEffect(() => {
+    for (let i = 0; i < savedVisualizations.length; i++) {
+      const visualization = savedVisualizations[i];
+      if (visualization.id === selectValue) {
+        setPPLQuery(visualization.query);
+        setNewVisualizationTitle(visualization.name);
+        setNewVisualizationType(visualization.type);
+        setPreviewMetaData(visualization);
+        setNewVisualizationTimeField(visualization.timeField);
+        break;
+      }
+    }
+  }, [selectValue]);
+
+  // load saved visualizations
+  useEffect(() => {
+    fetchSavedVisualizations();
+  }, []);
+
+  return (
+    <>
+      <FlyoutContainers
+        closeFlyout={closeFlyout}
+        flyoutHeader={flyoutHeader}
+        flyoutBody={flyoutBody}
+        flyoutFooter={flyoutFooter}
+        ariaLabel="addVisualizationFlyout"
+      />
+      {isModalVisible && modalContent}
+    </>
+  );
+};
diff --git a/public/components/custom_panels/redux/panel_slice.ts b/public/components/custom_panels/redux/panel_slice.ts
new file mode 100644
index 0000000000..cba05e80ad
--- /dev/null
+++ b/public/components/custom_panels/redux/panel_slice.ts
@@ -0,0 +1,342 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+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 {
+  CUSTOM_PANELS_API_PREFIX,
+  CUSTOM_PANELS_SAVED_OBJECT_TYPE,
+  CUSTOM_PANEL_SLICE,
+  createDemoPanel,
+} 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 { htmlIdGenerator } from '@elastic/eui';
+
+interface InitialState {
+  id: string;
+  panel: CustomPanelType;
+  panelList: CustomPanelType[];
+}
+
+export const newPanelTemplate = (newName): PanelType => ({
+  title: newName,
+  dateCreated: new Date().getTime(),
+  dateModified: new Date().getTime(),
+  visualizations: [],
+  queryFilter: { language: '', query: '' },
+  timeRange: { from: 'now-1d', to: 'now' },
+});
+
+const initialState: InitialState = {
+  id: '',
+  panel: newPanelTemplate(''),
+  panelList: [],
+  loadingFlag: false,
+};
+
+export const panelSlice = createSlice({
+  name: 'customPanel',
+  initialState,
+  reducers: {
+    setPanelId: (state, action) => ({ ...state, id: action.payload }),
+
+    setPanel: (state, action) => {
+      return { ...state, panel: action.payload };
+    },
+
+    setPanelList: (state, action) => {
+      return { ...state, panelList: action.payload };
+    },
+  },
+});
+
+export const { setPanel, setPanelList } = panelSlice.actions;
+
+export const panelReducer = panelSlice.reducer;
+
+export const selectPanel = createSelector(
+  (rootState) => rootState.customPanel.panel,
+  (panel) => normalizedPanel(panel)
+);
+
+const normalizedPanel = (panel: CustomPanelType): CustomPanelType => ({
+  ...newPanelTemplate(''),
+  ...panel,
+});
+
+export const selectPanelList = (rootState): CustomPanelType[] => rootState.customPanel.panelList;
+
+const { setToast } = useToast();
+
+/*
+ ** ASYNC DISPATCH FUNCTIONS
+ */
+
+const fetchSavedObjectPanels$ = () =>
+  from(savedObjectPanelsClient.find()).pipe(
+    mergeMap((res) => res.savedObjects),
+    map(savedObjectToCustomPanel)
+  );
+
+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 }))
+  );
+
+// Fetches all saved Custom Panels
+const fetchCustomPanels = async () => {
+  const panels$: Observable<CustomPanelListType> = concat(
+    fetchSavedObjectPanels$(),
+    fetchObservabilityPanels$()
+  ).pipe(
+    map((res) => {
+      return res as CustomPanelListType;
+    })
+  );
+
+  return panels$.pipe(toArray()).toPromise();
+};
+
+export const fetchPanels = () => async (dispatch, getState) => {
+  const panels = await fetchCustomPanels();
+  dispatch(setPanelList(panels));
+};
+
+export const fetchPanel = (id) => async (dispatch, getState) => {
+  const soPanel = await savedObjectPanelsClient.get(id);
+  const panel = savedObjectToCustomPanel(soPanel);
+  dispatch(setPanel(panel));
+};
+
+export const fetchVisualization = () => (dispatch, getState) => { };
+
+const updateLegacyPanel = (panel: CustomPanelType) =>
+  coreRefs.http!.post(`${CUSTOM_PANELS_API_PREFIX}/panels/update`, {
+    body: JSON.stringify({ panelId: panel.id, panel: panel as PanelType }),
+  });
+
+const updateSavedObjectPanel = (panel: CustomPanelType) => savedObjectPanelsClient.update(panel);
+
+export const uuidRx = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+
+export const isUuid = (id) => !!id.match(uuidRx);
+
+export const doesNameExist = async (newCustomPanelName: string) => {
+  const panels = await fetchCustomPanels();
+  return (panels.some(({ title }: {title: string}) => title === newCustomPanelName));
+}
+export const updatePanel = (panel: CustomPanelType, successMsg: string, failureMsg: string) => async (dispatch, getState) => {
+  try {
+    if (isUuid(panel.id)) await updateSavedObjectPanel(panel);
+    else await updateLegacyPanel(panel);
+    if (successMsg) {
+      setToast(successMsg)
+    }
+    dispatch(setPanel(panel));
+    const panelList = getState().customPanel.panelList.map((p) => (p.id === panel.id ? panel : p));
+    dispatch(setPanelList(panelList));
+  } catch (e) {
+    if (failureMsg) {
+      setToast(failureMsg, 'danger')
+    }
+    console.error(e);
+  }
+};
+
+export const addVizToPanels = (panels, vizId) => async (dispatch, getState) => {
+  forEach(panels, (oldPanel) => {
+    const panel = getState().customPanel.panelList.find((p) => p.id === oldPanel.panel.id);
+
+    const allVisualizations = panel!.visualizations;
+
+    const visualizationsWithNewPanel = addVisualizationPanel(vizId, undefined, allVisualizations);
+
+    const updatedPanel = { ...panel, visualizations: visualizationsWithNewPanel };
+    dispatch(updatePanel(updatedPanel, '', ''));
+  });
+};
+
+export const addMultipleVizToPanels = (panels, vizIds) => async (dispatch, getState) => {
+  forEach(panels, (oldPanel) => {
+    const panel = getState().customPanel.panelList.find((p) => p.id === oldPanel.panel.id);
+
+    const allVisualizations = panel!.visualizations;
+
+    const visualizationsWithNewPanel = addMultipleVisualizations(vizIds, allVisualizations);
+
+    const updatedPanel = { ...panel, visualizations: visualizationsWithNewPanel };
+    dispatch(updatePanel(updatedPanel, '', ''));
+  });
+};
+
+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;
+
+  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`));
+};
+
+const deletePanelSO = (customPanelIdList: string[]) => {
+  const soPanelIds = customPanelIdList.filter((id) => isUuid(id));
+  return Promise.all(soPanelIds.map((id) => savedObjectPanelsClient.delete(id)));
+};
+
+const deleteLegacyPanels = (customPanelIdList: string[]) => {
+  const panelIds = customPanelIdList.filter((id) => !isUuid(id));
+  if (panelIds.length === 0) return;
+
+  const concatList = panelIds.toString();
+  return coreRefs.http!.delete(`${CUSTOM_PANELS_API_PREFIX}/panelList/` + concatList);
+};
+
+export const deletePanels = (panelsToDelete: CustomPanelType[]) => async (dispatch, getState) => {
+  const toastMessage = `Observability Dashboard${panelsToDelete.length > 1 ? 's' : ' ' + panelsToDelete[0].title
+    } successfully deleted!`;
+  try {
+    const ids = panelsToDelete.map((p) => p.id);
+    await Promise.all([deleteLegacyPanels(ids), deletePanelSO(ids)]);
+
+    const panelList: CustomPanelType[] = getState().customPanel.panelList.filter(
+      (p) => !ids.includes(p.id)
+    );
+    dispatch(setPanelList(panelList));
+    setToast(toastMessage);
+  } catch (e) {
+    setToast(
+      'Error deleting Observability Dashboards, please make sure you have the correct permission.',
+      'danger'
+    );
+    console.error(e);
+  }
+};
+
+export const createPanel = (panel) => async (dispatch, getState) => {
+  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!`);
+    window.location.replace(`#/${newPanel.id}`);
+  } catch (e) {
+    setToast(
+      'Error occurred while creating Observability Dashboard, please make sure you have the correct permission.',
+      'danger'
+    );
+    console.error(e);
+  }
+};
+
+export const createPanelSample = (vizIds) => async (dispatch, getState) => {
+  const samplePanel = {
+    ...createDemoPanel(vizIds),
+    dateCreated: new Date().getTime(),
+    dateModified: new Date().getTime(),
+    title: htmlIdGenerator(samplePanelName)(),
+  };
+  const newSOPanel = await savedObjectPanelsClient.create(samplePanel);
+  const newPanel = savedObjectToCustomPanel(newSOPanel);
+  const panelList = getState().customPanel.panelList;
+  dispatch(setPanelList([...panelList, newPanel]));
+};
+
+export const clonePanel = (panel, newPanelName) => async (dispatch, getState) => {
+  try {
+    const { id, ...panelCopy } = {
+      ...panel,
+      title: newPanelName,
+      dateCreated: new Date().getTime(),
+      dateModified: new Date().getTime(),
+    } as PanelType;
+
+    const newSOPanel = await savedObjectPanelsClient.create(panelCopy);
+
+    const newPanel = savedObjectToCustomPanel(newSOPanel);
+    const panelList = getState().customPanel.panelList;
+    dispatch(setPanelList([...panelList, newPanel]));
+    dispatch(setPanel(newPanel));
+    setToast(`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'
+    );
+    console.error(e);
+  }
+};
+
+const saveRenamedPanel = async (id, name) => {
+  const renamePanelObject = {
+    panelId: id,
+    panelName: name,
+  };
+
+  return http.post(`${CUSTOM_PANELS_API_PREFIX}/panels/rename`, {
+    body: JSON.stringify(renamePanelObject),
+  });
+};
+
+const saveRenamedPanelSO = async (id, name) => {
+  const panel: SavedObject<PanelType> = await coreRefs.savedObjectsClient!.get(
+    CUSTOM_PANELS_SAVED_OBJECT_TYPE,
+    id
+  );
+  panel.title = name;
+  await coreRefs.savedObjectsClient!.update(CUSTOM_PANELS_SAVED_OBJECT_TYPE, id, panel);
+};
+
+// Renames an existing CustomPanel
+export const renameCustomPanel = (editedCustomPanelName: string, id: string) => async (
+  dispatch,
+  getState
+) => {
+  const panel = getState().customPanel.panelList.find((p) => p.id === id);
+  const updatedPanel = { ...panel, title: editedCustomPanelName };
+  dispatch(updatePanel(updatedPanel, `Observability Dashboard successfully renamed into "${editedCustomPanelName}"`, 'Error renaming Observability Dashboard, please make sure you have the correct permission.'))
+};
+
+/*
+ ** UTILITY FUNCTIONS
+ */
+const savedObjectToCustomPanel = (so: SimpleSavedObject<PanelType>): CustomPanelType => ({
+  id: so.id,
+  ...so.attributes,
+  savedObject: true,
+});
+
+const savedObjectPanelsClient = {
+  find: (options) =>
+    coreRefs.savedObjectsClient!.find({ type: CUSTOM_PANELS_SAVED_OBJECT_TYPE, ...options }),
+  delete: (id) => coreRefs.savedObjectsClient!.delete(CUSTOM_PANELS_SAVED_OBJECT_TYPE, id),
+  update: (panel) =>
+    coreRefs.savedObjectsClient!.update(CUSTOM_PANELS_SAVED_OBJECT_TYPE, panel.id, panel),
+  get: (id) => coreRefs.savedObjectsClient!.get(CUSTOM_PANELS_SAVED_OBJECT_TYPE, id),
+  create: (panel) => coreRefs.savedObjectsClient!.create(CUSTOM_PANELS_SAVED_OBJECT_TYPE, panel),
+};
diff --git a/public/components/event_analytics/explorer/events_views/docViewer.tsx b/public/components/event_analytics/explorer/events_views/docViewer.tsx
index 581b30aeb3..85d737718f 100644
--- a/public/components/event_analytics/explorer/events_views/docViewer.tsx
+++ b/public/components/event_analytics/explorer/events_views/docViewer.tsx
@@ -20,6 +20,7 @@ import { HttpSetup } from '../../../../../../../src/core/public';
 import { TraceBlock } from './trace_block/trace_block';
 import { OTEL_TRACE_ID } from '../../../../../common/constants/explorer';
 import { isValidTraceId } from '../../utils';
+import { observabilityTracesID } from '../../../../../common/constants/shared';
 
 interface IDocViewerProps {
   http: HttpSetup;
@@ -102,7 +103,7 @@ export function DocViewer(props: IDocViewerProps) {
       setTracesLink(
         <EuiLink
           className="trace-link"
-          href={`#/trace_analytics/traces/${traceId}`}
+          href={`${observabilityTracesID}#/${traceId}`}
           target="_blank"
           external
         />
diff --git a/public/components/event_analytics/explorer/events_views/doc_flyout.tsx b/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
index beba69089c..e7183cc4a0 100644
--- a/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
+++ b/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
@@ -123,14 +123,16 @@ export const DocFlyout = ({
 
   const flyoutBody = (
     <EuiFlyoutBody>
-      {populateDataGrid(
-        explorerFields,
-        getHeaders(explorerFields.queriedFields, DEFAULT_COLUMNS.slice(1), true),
-        <tr className="osdDocTable__row">{memorizedTds}</tr>,
-        getHeaders(explorerFields.selectedFields, DEFAULT_COLUMNS.slice(1), true),
-        <tr className="osdDocTable__row">{memorizedTds}</tr>
-      )}
-      <DocViewer http={http} hit={doc} openTraces={openTraces} />
+      <div className="obsExplorer">
+        {populateDataGrid(
+          explorerFields,
+          getHeaders(explorerFields.queriedFields, DEFAULT_COLUMNS.slice(1), true),
+          <tr className="osdDocTable__row">{memorizedTds}</tr>,
+          getHeaders(explorerFields.selectedFields, DEFAULT_COLUMNS.slice(1), true),
+          <tr className="osdDocTable__row">{memorizedTds}</tr>
+        )}
+        <DocViewer http={http} hit={doc} openTraces={openTraces} />
+      </div>
     </EuiFlyoutBody>
   );
 
diff --git a/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx b/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
index 4c67c3e199..e7fe8d9899 100644
--- a/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
+++ b/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
@@ -124,9 +124,11 @@ export const SurroundingFlyout = ({
   };
 
   const loadButton = (typeOfDocs: 'new' | 'old') => {
-    typeOfDocs === 'new'
-      ? loadData(typeOfDocs, numNewEvents + 5)
-      : loadData(typeOfDocs, valueOldEvents + 5);
+    if (typeOfDocs === 'new') {
+      loadData(typeOfDocs, numNewEvents + 5);
+    } else {
+      loadData(typeOfDocs, valueOldEvents + 5);
+    }
   };
 
   const handleKeyDown = (
@@ -139,11 +141,11 @@ export const SurroundingFlyout = ({
   };
 
   const onChangeNewEvents = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setNumNewEvents(parseInt(e.target.value));
+    setNumNewEvents(parseInt(e.target.value, 10));
   };
 
   const onChangeOldEvents = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setNumOldEvents(parseInt(e.target.value));
+    setNumOldEvents(parseInt(e.target.value, 10));
   };
 
   const flyoutHeader = (
@@ -227,35 +229,37 @@ export const SurroundingFlyout = ({
 
   const flyoutBody = (
     <EuiFlyoutBody>
-      {getInputForm('arrowUp', onChangeNewEvents, numNewEvents, 'new')}
-      <EuiSpacer size="s" />
-      <div>
-        {newEventsError !== '' && (
-          <EuiCallOut iconType="bolt" title={newEventsError} color="warning" />
-        )}
-      </div>
-      {populateDataGrid(
-        explorerFields,
-        getHeaders(explorerFields.queriedFields, DEFAULT_COLUMNS.slice(1), true),
-        <>
-          {newEventsData}
-          <tr className="osdDocTable__row selected-event-row">{memorizedTds}</tr>
-          {oldEventsData}
-        </>,
-        getHeaders(explorerFields.selectedFields, DEFAULT_COLUMNS.slice(1), true),
-        <>
-          {newEventsData}
-          <tr className="osdDocTable__row selected-event-row">{memorizedTds}</tr>
-          {oldEventsData}
-        </>
-      )}
-      <div>
-        {oldEventsError !== '' && (
-          <EuiCallOut iconType="bolt" title={oldEventsError} color="warning" />
+      <div className="obsExplorer">
+        {getInputForm('arrowUp', onChangeNewEvents, numNewEvents, 'new')}
+        <EuiSpacer size="s" />
+        <div>
+          {newEventsError !== '' && (
+            <EuiCallOut iconType="bolt" title={newEventsError} color="warning" />
+          )}
+        </div>
+        {populateDataGrid(
+          explorerFields,
+          getHeaders(explorerFields.queriedFields, DEFAULT_COLUMNS.slice(1), true),
+          <>
+            {newEventsData}
+            <tr className="osdDocTable__row selected-event-row">{memorizedTds}</tr>
+            {oldEventsData}
+          </>,
+          getHeaders(explorerFields.selectedFields, DEFAULT_COLUMNS.slice(1), true),
+          <>
+            {newEventsData}
+            <tr className="osdDocTable__row selected-event-row">{memorizedTds}</tr>
+            {oldEventsData}
+          </>
         )}
+        <div>
+          {oldEventsError !== '' && (
+            <EuiCallOut iconType="bolt" title={oldEventsError} color="warning" />
+          )}
+        </div>
+        <EuiSpacer size="s" />
+        {getInputForm('arrowDown', onChangeOldEvents, valueOldEvents, 'old')}
       </div>
-      <EuiSpacer size="s" />
-      {getInputForm('arrowDown', onChangeOldEvents, valueOldEvents, 'old')}
     </EuiFlyoutBody>
   );
 
diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
index 32423d6ffe..e75652f600 100644
--- a/public/components/event_analytics/explorer/explorer.tsx
+++ b/public/components/event_analytics/explorer/explorer.tsx
@@ -284,7 +284,7 @@ export const Explorer = ({
       },
       {
         appBaseQuery,
-        query: rawQueryStr,
+        query: curQuery,
         startingTime,
         endingTime,
         isLiveTailOn: isLiveTailOnRef.current,
diff --git a/public/components/event_analytics/explorer/log_explorer.tsx b/public/components/event_analytics/explorer/log_explorer.tsx
index ac9aa69bd9..4fced3eeaf 100644
--- a/public/components/event_analytics/explorer/log_explorer.tsx
+++ b/public/components/event_analytics/explorer/log_explorer.tsx
@@ -15,6 +15,7 @@ import $ from 'jquery';
 import { isEmpty, map } from 'lodash';
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import { LogExplorerRouterContext } from '..';
 import {
   APP_ANALYTICS_TAB_ID_REGEX,
@@ -53,11 +54,11 @@ export const LogExplorer = ({
   setToast,
   savedObjectId,
   getExistingEmptyTab,
-  history,
   notifications,
   http,
   queryManager,
 }: ILogExplorerProps) => {
+  const history = useHistory();
   const routerContext = useContext(LogExplorerRouterContext);
   const dispatch = useDispatch();
   const tabIds = useSelector(selectQueryTabs).queryTabIds.filter(
@@ -92,9 +93,7 @@ export const LogExplorer = ({
   }, [tabIds]);
 
   const handleTabClick = (selectedTab: EuiTabbedContentTab) => {
-    history.replace(
-      `/event_analytics/explorer/${queryRef.current![selectedTab.id][SAVED_OBJECT_ID] || ''}`
-    );
+    history.replace(`/explorer/${queryRef.current![selectedTab.id][SAVED_OBJECT_ID] || ''}`);
     dispatch(setSelectedQueryTab({ tabId: selectedTab.id }));
   };
 
diff --git a/public/components/event_analytics/explorer/log_patterns/log_patterns.tsx b/public/components/event_analytics/explorer/log_patterns/log_patterns.tsx
index 26f34c6323..5a149e0c73 100644
--- a/public/components/event_analytics/explorer/log_patterns/log_patterns.tsx
+++ b/public/components/event_analytics/explorer/log_patterns/log_patterns.tsx
@@ -3,22 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useContext } from 'react';
-import { useDispatch, connect } from 'react-redux';
-import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiHorizontalRule } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiLink, EuiText } from '@elastic/eui';
+import React, { useContext, useState } from 'react';
+import { connect, useDispatch } from 'react-redux';
 import {
   FILTERED_PATTERN,
   PATTERN_REGEX,
-  RAW_QUERY,
   PPL_DEFAULT_PATTERN_REGEX_FILETER,
+  RAW_QUERY,
 } from '../../../../../common/constants/explorer';
-import { PatternsHeader } from './patterns_header';
-import { PatternsTable } from './patterns_table';
-import { selectPatterns } from '../../redux/slices/patterns_slice';
+import { PatternTableData, Query as IQuery } from '../../../../../common/types/explorer';
 import { TabContext, useFetchPatterns } from '../../hooks';
+import { selectPatterns } from '../../redux/slices/patterns_slice';
 import { changeQuery, selectQueries } from '../../redux/slices/query_slice';
 import { formatError } from '../../utils';
-import { Query as IQuery, PatternTableData } from '../../../../../common/types/explorer';
+import { PatternsHeader } from './patterns_header';
+import { PatternsTable } from './patterns_table';
 
 export interface LogPatternProps {
   selectedIntervalUnit: {
@@ -41,7 +41,7 @@ const EventPatterns = ({
   const dispatch = useDispatch();
   const { tabId, pplService, notifications } = useContext<any>(TabContext);
   const patternsData = patterns[tabId];
-  const [viewLogPatterns, setViewLogPatterns] = useState(false);
+  const [viewLogPatterns, setViewLogPatterns] = useState(true);
   const [isPatternConfigPopoverOpen, setIsPatternConfigPopoverOpen] = useState(false);
   const [patternRegexInput, setPatternRegexInput] = useState(PPL_DEFAULT_PATTERN_REGEX_FILETER);
   const { isEventsLoading: isPatternLoading, getPatterns } = useFetchPatterns({
@@ -99,16 +99,14 @@ const EventPatterns = ({
         gutterSize="xs"
       >
         <EuiFlexItem grow={false}>
-          {viewLogPatterns && (
-            <PatternsHeader
-              patternsData={patternsData}
-              patternRegexInput={patternRegexInput}
-              setPatternRegexInput={setPatternRegexInput}
-              onPatternApply={handlePatternApply}
-              isPatternConfigPopoverOpen={isPatternConfigPopoverOpen}
-              setIsPatternConfigPopoverOpen={setIsPatternConfigPopoverOpen}
-            />
-          )}
+          <PatternsHeader
+            patternsData={patternsData}
+            patternRegexInput={patternRegexInput}
+            setPatternRegexInput={setPatternRegexInput}
+            onPatternApply={handlePatternApply}
+            isPatternConfigPopoverOpen={isPatternConfigPopoverOpen}
+            setIsPatternConfigPopoverOpen={setIsPatternConfigPopoverOpen}
+          />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiFlexGroup>
diff --git a/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap b/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
index acc9e820ea..cbc6c696c2 100644
--- a/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
+++ b/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
@@ -1,553 +1,608 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Saved query table component Renders saved query table 1`] = `
-<Component
-  curVisId="line"
-  handleNameChange={[MockFunction]}
-  handleOptionChange={[MockFunction]}
-  metricChecked={true}
-  metricMeasure="hours (h)"
-  savePanelName="Count by depature"
-  savedObjects={
-    SavedObjects {
-      "http": [MockFunction],
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
     }
   }
-  selectedOptions={
-    Array [
-      Object {
-        "label": "[Logs] Web traffic Panel",
-        "panel": Object {
-          "dateCreated": 1637781403888,
-          "dateModified": 1637781403888,
-          "id": "uRZgU30B661cwDZT-ILw",
-          "name": "[Logs] Web traffic Panel",
+>
+  <Component
+    curVisId="line"
+    handleNameChange={[MockFunction]}
+    handleOptionChange={[MockFunction]}
+    metricChecked={true}
+    metricMeasure="hours (h)"
+    savePanelName="Count by depature"
+    savedObjects={
+      SavedObjects {
+        "http": [MockFunction],
+      }
+    }
+    selectedOptions={
+      Array [
+        Object {
+          "label": "[Logs] Web traffic Panel",
+          "panel": Object {
+            "dateCreated": 1637781403888,
+            "dateModified": 1637781403888,
+            "id": "uRZgU30B661cwDZT-ILw",
+            "name": "[Logs] Web traffic Panel",
+          },
         },
-      },
-      Object {
-        "label": "[Logs] Web traffic Panel 2",
-        "panel": Object {
-          "dateCreated": 1637781403888,
-          "dateModified": 1637781403888,
-          "id": "uRZgU30B661cwDZT-ILw",
-          "name": "[Logs] Web traffic Panel",
+        Object {
+          "label": "[Logs] Web traffic Panel 2",
+          "panel": Object {
+            "dateCreated": 1637781403888,
+            "dateModified": 1637781403888,
+            "id": "uRZgU30B661cwDZT-ILw",
+            "name": "[Logs] Web traffic Panel",
+          },
         },
-      },
-    ]
-  }
-  setMetricLabel={[MockFunction]}
-  setMetricMeasure="hours (h)"
-  setSubType="metric"
-  showOptionList={true}
-  spanValue={false}
->
-  <EuiTitle
-    size="xxs"
+      ]
+    }
+    setMetricLabel={[MockFunction]}
+    setMetricMeasure="hours (h)"
+    setSubType="metric"
+    showOptionList={true}
+    spanValue={false}
   >
-    <h3
-      className="euiTitle euiTitle--xxsmall"
+    <EuiTitle
+      size="xxs"
     >
-      Custom operational dashboards/application
-    </h3>
-  </EuiTitle>
-  <EuiFormRow
-    describedByIds={Array []}
-    display="row"
-    fullWidth={false}
-    hasChildLabel={true}
-    hasEmptyLabelSpace={false}
-    helpText="Search existing dashboards or applications by name"
-    labelType="label"
-  >
-    <div
-      className="euiFormRow"
-      id="random_html_id-row"
+      <h3
+        className="euiTitle euiTitle--xxsmall"
+      >
+        Custom operational dashboards/application
+      </h3>
+    </EuiTitle>
+    <EuiFormRow
+      describedByIds={Array []}
+      display="row"
+      fullWidth={false}
+      hasChildLabel={true}
+      hasEmptyLabelSpace={false}
+      helpText="Search existing dashboards or applications by name"
+      labelType="label"
     >
       <div
-        className="euiFormRow__fieldWrapper"
+        className="euiFormRow"
+        id="random_html_id-row"
       >
-        <EuiComboBox
-          aria-describedby="random_html_id-help-0"
-          async={false}
-          compressed={false}
-          data-test-subj="eventExplorer__querySaveComboBox"
-          fullWidth={false}
-          id="random_html_id"
-          isClearable={true}
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          options={Array []}
-          placeholder="Select dashboards/applications"
-          selectedOptions={
-            Array [
-              Object {
-                "label": "[Logs] Web traffic Panel",
-                "panel": Object {
-                  "dateCreated": 1637781403888,
-                  "dateModified": 1637781403888,
-                  "id": "uRZgU30B661cwDZT-ILw",
-                  "name": "[Logs] Web traffic Panel",
-                },
-              },
-              Object {
-                "label": "[Logs] Web traffic Panel 2",
-                "panel": Object {
-                  "dateCreated": 1637781403888,
-                  "dateModified": 1637781403888,
-                  "id": "uRZgU30B661cwDZT-ILw",
-                  "name": "[Logs] Web traffic Panel",
-                },
-              },
-            ]
-          }
-          singleSelection={false}
-          sortMatchesBy="none"
+        <div
+          className="euiFormRow__fieldWrapper"
         >
-          <div
+          <EuiComboBox
             aria-describedby="random_html_id-help-0"
-            aria-expanded={false}
-            aria-haspopup="listbox"
-            className="euiComboBox"
+            async={false}
+            compressed={false}
             data-test-subj="eventExplorer__querySaveComboBox"
+            fullWidth={false}
+            id="random_html_id"
+            isClearable={true}
+            onBlur={[Function]}
+            onChange={[Function]}
             onFocus={[Function]}
-            onKeyDown={[Function]}
-            role="combobox"
-          >
-            <EuiComboBoxInput
-              autoSizeInputRef={[Function]}
-              compressed={false}
-              fullWidth={false}
-              hasSelectedOptions={true}
-              id="random_html_id"
-              inputRef={[Function]}
-              isListOpen={false}
-              noIcon={false}
-              onChange={[Function]}
-              onClear={[Function]}
-              onClick={[Function]}
-              onCloseListClick={[Function]}
-              onFocus={[Function]}
-              onOpenListClick={[Function]}
-              onRemoveOption={[Function]}
-              placeholder="Select dashboards/applications"
-              rootId={[Function]}
-              searchValue=""
-              selectedOptions={
-                Array [
-                  Object {
-                    "label": "[Logs] Web traffic Panel",
-                    "panel": Object {
-                      "dateCreated": 1637781403888,
-                      "dateModified": 1637781403888,
-                      "id": "uRZgU30B661cwDZT-ILw",
-                      "name": "[Logs] Web traffic Panel",
-                    },
+            options={Array []}
+            placeholder="Select dashboards/applications"
+            selectedOptions={
+              Array [
+                Object {
+                  "label": "[Logs] Web traffic Panel",
+                  "panel": Object {
+                    "dateCreated": 1637781403888,
+                    "dateModified": 1637781403888,
+                    "id": "uRZgU30B661cwDZT-ILw",
+                    "name": "[Logs] Web traffic Panel",
                   },
-                  Object {
-                    "label": "[Logs] Web traffic Panel 2",
-                    "panel": Object {
-                      "dateCreated": 1637781403888,
-                      "dateModified": 1637781403888,
-                      "id": "uRZgU30B661cwDZT-ILw",
-                      "name": "[Logs] Web traffic Panel",
-                    },
+                },
+                Object {
+                  "label": "[Logs] Web traffic Panel 2",
+                  "panel": Object {
+                    "dateCreated": 1637781403888,
+                    "dateModified": 1637781403888,
+                    "id": "uRZgU30B661cwDZT-ILw",
+                    "name": "[Logs] Web traffic Panel",
                   },
-                ]
-              }
-              singleSelection={false}
-              toggleButtonRef={[Function]}
-              updatePosition={[Function]}
-              value="[Logs] Web traffic Panel, [Logs] Web traffic Panel 2"
+                },
+              ]
+            }
+            singleSelection={false}
+            sortMatchesBy="none"
+          >
+            <div
+              aria-describedby="random_html_id-help-0"
+              aria-expanded={false}
+              aria-haspopup="listbox"
+              className="euiComboBox"
+              data-test-subj="eventExplorer__querySaveComboBox"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              role="combobox"
             >
-              <EuiFormControlLayout
-                clear={
-                  Object {
-                    "data-test-subj": "comboBoxClearButton",
-                    "onClick": [Function],
-                  }
-                }
+              <EuiComboBoxInput
+                autoSizeInputRef={[Function]}
                 compressed={false}
                 fullWidth={false}
-                icon={
-                  Object {
-                    "aria-label": "Open list of options",
-                    "data-test-subj": "comboBoxToggleListButton",
-                    "disabled": undefined,
-                    "onClick": [Function],
-                    "ref": [Function],
-                    "side": "right",
-                    "type": "arrowDown",
-                  }
+                hasSelectedOptions={true}
+                id="random_html_id"
+                inputRef={[Function]}
+                isListOpen={false}
+                noIcon={false}
+                onChange={[Function]}
+                onClear={[Function]}
+                onClick={[Function]}
+                onCloseListClick={[Function]}
+                onFocus={[Function]}
+                onOpenListClick={[Function]}
+                onRemoveOption={[Function]}
+                placeholder="Select dashboards/applications"
+                rootId={[Function]}
+                searchValue=""
+                selectedOptions={
+                  Array [
+                    Object {
+                      "label": "[Logs] Web traffic Panel",
+                      "panel": Object {
+                        "dateCreated": 1637781403888,
+                        "dateModified": 1637781403888,
+                        "id": "uRZgU30B661cwDZT-ILw",
+                        "name": "[Logs] Web traffic Panel",
+                      },
+                    },
+                    Object {
+                      "label": "[Logs] Web traffic Panel 2",
+                      "panel": Object {
+                        "dateCreated": 1637781403888,
+                        "dateModified": 1637781403888,
+                        "id": "uRZgU30B661cwDZT-ILw",
+                        "name": "[Logs] Web traffic Panel",
+                      },
+                    },
+                  ]
                 }
+                singleSelection={false}
+                toggleButtonRef={[Function]}
+                updatePosition={[Function]}
+                value="[Logs] Web traffic Panel, [Logs] Web traffic Panel 2"
               >
-                <div
-                  className="euiFormControlLayout"
+                <EuiFormControlLayout
+                  clear={
+                    Object {
+                      "data-test-subj": "comboBoxClearButton",
+                      "onClick": [Function],
+                    }
+                  }
+                  compressed={false}
+                  fullWidth={false}
+                  icon={
+                    Object {
+                      "aria-label": "Open list of options",
+                      "data-test-subj": "comboBoxToggleListButton",
+                      "disabled": undefined,
+                      "onClick": [Function],
+                      "ref": [Function],
+                      "side": "right",
+                      "type": "arrowDown",
+                    }
+                  }
                 >
                   <div
-                    className="euiFormControlLayout__childrenWrapper"
+                    className="euiFormControlLayout"
                   >
                     <div
-                      className="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
-                      data-test-subj="comboBoxInput"
-                      onClick={[Function]}
-                      tabIndex={-1}
+                      className="euiFormControlLayout__childrenWrapper"
                     >
-                      <EuiComboBoxPill
-                        asPlainText={false}
-                        color="hollow"
-                        key="[logs] web traffic panel"
-                        onClose={[Function]}
-                        option={
-                          Object {
-                            "label": "[Logs] Web traffic Panel",
-                            "panel": Object {
+                      <div
+                        className="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                        data-test-subj="comboBoxInput"
+                        onClick={[Function]}
+                        tabIndex={-1}
+                      >
+                        <EuiComboBoxPill
+                          asPlainText={false}
+                          color="hollow"
+                          key="[logs] web traffic panel"
+                          onClose={[Function]}
+                          option={
+                            Object {
+                              "label": "[Logs] Web traffic Panel",
+                              "panel": Object {
+                                "dateCreated": 1637781403888,
+                                "dateModified": 1637781403888,
+                                "id": "uRZgU30B661cwDZT-ILw",
+                                "name": "[Logs] Web traffic Panel",
+                              },
+                            }
+                          }
+                          panel={
+                            Object {
                               "dateCreated": 1637781403888,
                               "dateModified": 1637781403888,
                               "id": "uRZgU30B661cwDZT-ILw",
                               "name": "[Logs] Web traffic Panel",
-                            },
-                          }
-                        }
-                        panel={
-                          Object {
-                            "dateCreated": 1637781403888,
-                            "dateModified": 1637781403888,
-                            "id": "uRZgU30B661cwDZT-ILw",
-                            "name": "[Logs] Web traffic Panel",
-                          }
-                        }
-                      >
-                        <EuiI18n
-                          default="Remove {children} from selection in this group"
-                          token="euiComboBoxPill.removeSelection"
-                          values={
-                            Object {
-                              "children": "[Logs] Web traffic Panel",
                             }
                           }
                         >
-                          <EuiBadge
-                            className="euiComboBoxPill"
-                            closeButtonProps={
-                              Object {
-                                "tabIndex": -1,
-                              }
-                            }
-                            color="hollow"
-                            iconOnClick={[Function]}
-                            iconOnClickAriaLabel="Remove [Logs] Web traffic Panel from selection in this group"
-                            iconSide="right"
-                            iconType="cross"
-                            panel={
+                          <EuiI18n
+                            default="Remove {children} from selection in this group"
+                            token="euiComboBoxPill.removeSelection"
+                            values={
                               Object {
-                                "dateCreated": 1637781403888,
-                                "dateModified": 1637781403888,
-                                "id": "uRZgU30B661cwDZT-ILw",
-                                "name": "[Logs] Web traffic Panel",
+                                "children": "[Logs] Web traffic Panel",
                               }
                             }
-                            title="[Logs] Web traffic Panel"
                           >
-                            <EuiInnerText>
-                              <span
-                                className="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
-                                panel={
-                                  Object {
-                                    "dateCreated": 1637781403888,
-                                    "dateModified": 1637781403888,
-                                    "id": "uRZgU30B661cwDZT-ILw",
-                                    "name": "[Logs] Web traffic Panel",
-                                  }
+                            <EuiBadge
+                              className="euiComboBoxPill"
+                              closeButtonProps={
+                                Object {
+                                  "tabIndex": -1,
                                 }
-                                title="[Logs] Web traffic Panel"
-                              >
+                              }
+                              color="hollow"
+                              iconOnClick={[Function]}
+                              iconOnClickAriaLabel="Remove [Logs] Web traffic Panel from selection in this group"
+                              iconSide="right"
+                              iconType="cross"
+                              panel={
+                                Object {
+                                  "dateCreated": 1637781403888,
+                                  "dateModified": 1637781403888,
+                                  "id": "uRZgU30B661cwDZT-ILw",
+                                  "name": "[Logs] Web traffic Panel",
+                                }
+                              }
+                              title="[Logs] Web traffic Panel"
+                            >
+                              <EuiInnerText>
                                 <span
-                                  className="euiBadge__content"
+                                  className="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
+                                  panel={
+                                    Object {
+                                      "dateCreated": 1637781403888,
+                                      "dateModified": 1637781403888,
+                                      "id": "uRZgU30B661cwDZT-ILw",
+                                      "name": "[Logs] Web traffic Panel",
+                                    }
+                                  }
+                                  title="[Logs] Web traffic Panel"
                                 >
                                   <span
-                                    className="euiBadge__text"
+                                    className="euiBadge__content"
                                   >
-                                    [Logs] Web traffic Panel
-                                  </span>
-                                  <button
-                                    aria-label="Remove [Logs] Web traffic Panel from selection in this group"
-                                    className="euiBadge__iconButton"
-                                    disabled={false}
-                                    onClick={[Function]}
-                                    title="Remove [Logs] Web traffic Panel from selection in this group"
-                                    type="button"
-                                  >
-                                    <EuiIcon
-                                      className="euiBadge__icon"
-                                      color="inherit"
-                                      size="s"
-                                      tabIndex={-1}
-                                      type="cross"
+                                    <span
+                                      className="euiBadge__text"
+                                    >
+                                      [Logs] Web traffic Panel
+                                    </span>
+                                    <button
+                                      aria-label="Remove [Logs] Web traffic Panel from selection in this group"
+                                      className="euiBadge__iconButton"
+                                      disabled={false}
+                                      onClick={[Function]}
+                                      title="Remove [Logs] Web traffic Panel from selection in this group"
+                                      type="button"
                                     >
-                                      <EuiIconEmpty
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
-                                        focusable="false"
-                                        role="img"
-                                        style={null}
+                                      <EuiIcon
+                                        className="euiBadge__icon"
+                                        color="inherit"
+                                        size="s"
                                         tabIndex={-1}
+                                        type="cross"
                                       >
-                                        <svg
+                                        <EuiIconEmpty
                                           aria-hidden={true}
                                           className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
                                           focusable="false"
-                                          height={16}
                                           role="img"
                                           style={null}
                                           tabIndex={-1}
-                                          viewBox="0 0 16 16"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        />
-                                      </EuiIconEmpty>
-                                    </EuiIcon>
-                                  </button>
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            tabIndex={-1}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </span>
                                 </span>
-                              </span>
-                            </EuiInnerText>
-                          </EuiBadge>
-                        </EuiI18n>
-                      </EuiComboBoxPill>
-                      <EuiComboBoxPill
-                        asPlainText={false}
-                        color="hollow"
-                        key="[logs] web traffic panel 2"
-                        onClose={[Function]}
-                        option={
-                          Object {
-                            "label": "[Logs] Web traffic Panel 2",
-                            "panel": Object {
+                              </EuiInnerText>
+                            </EuiBadge>
+                          </EuiI18n>
+                        </EuiComboBoxPill>
+                        <EuiComboBoxPill
+                          asPlainText={false}
+                          color="hollow"
+                          key="[logs] web traffic panel 2"
+                          onClose={[Function]}
+                          option={
+                            Object {
+                              "label": "[Logs] Web traffic Panel 2",
+                              "panel": Object {
+                                "dateCreated": 1637781403888,
+                                "dateModified": 1637781403888,
+                                "id": "uRZgU30B661cwDZT-ILw",
+                                "name": "[Logs] Web traffic Panel",
+                              },
+                            }
+                          }
+                          panel={
+                            Object {
                               "dateCreated": 1637781403888,
                               "dateModified": 1637781403888,
                               "id": "uRZgU30B661cwDZT-ILw",
                               "name": "[Logs] Web traffic Panel",
-                            },
-                          }
-                        }
-                        panel={
-                          Object {
-                            "dateCreated": 1637781403888,
-                            "dateModified": 1637781403888,
-                            "id": "uRZgU30B661cwDZT-ILw",
-                            "name": "[Logs] Web traffic Panel",
-                          }
-                        }
-                      >
-                        <EuiI18n
-                          default="Remove {children} from selection in this group"
-                          token="euiComboBoxPill.removeSelection"
-                          values={
-                            Object {
-                              "children": "[Logs] Web traffic Panel 2",
                             }
                           }
                         >
-                          <EuiBadge
-                            className="euiComboBoxPill"
-                            closeButtonProps={
-                              Object {
-                                "tabIndex": -1,
-                              }
-                            }
-                            color="hollow"
-                            iconOnClick={[Function]}
-                            iconOnClickAriaLabel="Remove [Logs] Web traffic Panel 2 from selection in this group"
-                            iconSide="right"
-                            iconType="cross"
-                            panel={
+                          <EuiI18n
+                            default="Remove {children} from selection in this group"
+                            token="euiComboBoxPill.removeSelection"
+                            values={
                               Object {
-                                "dateCreated": 1637781403888,
-                                "dateModified": 1637781403888,
-                                "id": "uRZgU30B661cwDZT-ILw",
-                                "name": "[Logs] Web traffic Panel",
+                                "children": "[Logs] Web traffic Panel 2",
                               }
                             }
-                            title="[Logs] Web traffic Panel 2"
                           >
-                            <EuiInnerText>
-                              <span
-                                className="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
-                                panel={
-                                  Object {
-                                    "dateCreated": 1637781403888,
-                                    "dateModified": 1637781403888,
-                                    "id": "uRZgU30B661cwDZT-ILw",
-                                    "name": "[Logs] Web traffic Panel",
-                                  }
+                            <EuiBadge
+                              className="euiComboBoxPill"
+                              closeButtonProps={
+                                Object {
+                                  "tabIndex": -1,
                                 }
-                                title="[Logs] Web traffic Panel 2"
-                              >
+                              }
+                              color="hollow"
+                              iconOnClick={[Function]}
+                              iconOnClickAriaLabel="Remove [Logs] Web traffic Panel 2 from selection in this group"
+                              iconSide="right"
+                              iconType="cross"
+                              panel={
+                                Object {
+                                  "dateCreated": 1637781403888,
+                                  "dateModified": 1637781403888,
+                                  "id": "uRZgU30B661cwDZT-ILw",
+                                  "name": "[Logs] Web traffic Panel",
+                                }
+                              }
+                              title="[Logs] Web traffic Panel 2"
+                            >
+                              <EuiInnerText>
                                 <span
-                                  className="euiBadge__content"
+                                  className="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
+                                  panel={
+                                    Object {
+                                      "dateCreated": 1637781403888,
+                                      "dateModified": 1637781403888,
+                                      "id": "uRZgU30B661cwDZT-ILw",
+                                      "name": "[Logs] Web traffic Panel",
+                                    }
+                                  }
+                                  title="[Logs] Web traffic Panel 2"
                                 >
                                   <span
-                                    className="euiBadge__text"
-                                  >
-                                    [Logs] Web traffic Panel 2
-                                  </span>
-                                  <button
-                                    aria-label="Remove [Logs] Web traffic Panel 2 from selection in this group"
-                                    className="euiBadge__iconButton"
-                                    disabled={false}
-                                    onClick={[Function]}
-                                    title="Remove [Logs] Web traffic Panel 2 from selection in this group"
-                                    type="button"
+                                    className="euiBadge__content"
                                   >
-                                    <EuiIcon
-                                      className="euiBadge__icon"
-                                      color="inherit"
-                                      size="s"
-                                      tabIndex={-1}
-                                      type="cross"
+                                    <span
+                                      className="euiBadge__text"
                                     >
-                                      <EuiIconEmpty
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
-                                        focusable="false"
-                                        role="img"
-                                        style={null}
+                                      [Logs] Web traffic Panel 2
+                                    </span>
+                                    <button
+                                      aria-label="Remove [Logs] Web traffic Panel 2 from selection in this group"
+                                      className="euiBadge__iconButton"
+                                      disabled={false}
+                                      onClick={[Function]}
+                                      title="Remove [Logs] Web traffic Panel 2 from selection in this group"
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        className="euiBadge__icon"
+                                        color="inherit"
+                                        size="s"
                                         tabIndex={-1}
+                                        type="cross"
                                       >
-                                        <svg
+                                        <EuiIconEmpty
                                           aria-hidden={true}
                                           className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
                                           focusable="false"
-                                          height={16}
                                           role="img"
                                           style={null}
                                           tabIndex={-1}
-                                          viewBox="0 0 16 16"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        />
-                                      </EuiIconEmpty>
-                                    </EuiIcon>
-                                  </button>
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            tabIndex={-1}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </span>
                                 </span>
-                              </span>
-                            </EuiInnerText>
-                          </EuiBadge>
-                        </EuiI18n>
-                      </EuiComboBoxPill>
-                      <AutosizeInput
-                        aria-controls=""
-                        className="euiComboBox__input"
-                        data-test-subj="comboBoxSearchInput"
-                        id="random_html_id"
-                        injectStyles={true}
-                        inputRef={[Function]}
-                        minWidth={1}
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        role="textbox"
-                        style={
-                          Object {
-                            "fontSize": 14,
-                          }
-                        }
-                        value=""
-                      >
-                        <div
+                              </EuiInnerText>
+                            </EuiBadge>
+                          </EuiI18n>
+                        </EuiComboBoxPill>
+                        <AutosizeInput
+                          aria-controls=""
                           className="euiComboBox__input"
+                          data-test-subj="comboBoxSearchInput"
+                          id="random_html_id"
+                          injectStyles={true}
+                          inputRef={[Function]}
+                          minWidth={1}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          role="textbox"
                           style={
                             Object {
-                              "display": "inline-block",
                               "fontSize": 14,
                             }
                           }
+                          value=""
                         >
-                          <input
-                            aria-controls=""
-                            data-test-subj="comboBoxSearchInput"
-                            id="random_html_id"
-                            onBlur={[Function]}
-                            onChange={[Function]}
-                            onFocus={[Function]}
-                            role="textbox"
-                            style={
-                              Object {
-                                "boxSizing": "content-box",
-                                "width": "2px",
-                              }
-                            }
-                            value=""
-                          />
                           <div
+                            className="euiComboBox__input"
                             style={
                               Object {
-                                "height": 0,
-                                "left": 0,
-                                "overflow": "scroll",
-                                "position": "absolute",
-                                "top": 0,
-                                "visibility": "hidden",
-                                "whiteSpace": "pre",
+                                "display": "inline-block",
+                                "fontSize": 14,
                               }
                             }
-                          />
-                        </div>
-                      </AutosizeInput>
-                    </div>
-                    <EuiFormControlLayoutIcons
-                      clear={
-                        Object {
-                          "data-test-subj": "comboBoxClearButton",
-                          "onClick": [Function],
+                          >
+                            <input
+                              aria-controls=""
+                              data-test-subj="comboBoxSearchInput"
+                              id="random_html_id"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              role="textbox"
+                              style={
+                                Object {
+                                  "boxSizing": "content-box",
+                                  "width": "2px",
+                                }
+                              }
+                              value=""
+                            />
+                            <div
+                              style={
+                                Object {
+                                  "height": 0,
+                                  "left": 0,
+                                  "overflow": "scroll",
+                                  "position": "absolute",
+                                  "top": 0,
+                                  "visibility": "hidden",
+                                  "whiteSpace": "pre",
+                                }
+                              }
+                            />
+                          </div>
+                        </AutosizeInput>
+                      </div>
+                      <EuiFormControlLayoutIcons
+                        clear={
+                          Object {
+                            "data-test-subj": "comboBoxClearButton",
+                            "onClick": [Function],
+                          }
                         }
-                      }
-                      compressed={false}
-                      icon={
-                        Object {
-                          "aria-label": "Open list of options",
-                          "data-test-subj": "comboBoxToggleListButton",
-                          "disabled": undefined,
-                          "onClick": [Function],
-                          "ref": [Function],
-                          "side": "right",
-                          "type": "arrowDown",
+                        compressed={false}
+                        icon={
+                          Object {
+                            "aria-label": "Open list of options",
+                            "data-test-subj": "comboBoxToggleListButton",
+                            "disabled": undefined,
+                            "onClick": [Function],
+                            "ref": [Function],
+                            "side": "right",
+                            "type": "arrowDown",
+                          }
                         }
-                      }
-                    >
-                      <div
-                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                       >
-                        <EuiFormControlLayoutClearButton
-                          data-test-subj="comboBoxClearButton"
-                          onClick={[Function]}
-                          size="m"
+                        <div
+                          className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                         >
-                          <EuiI18n
-                            default="Clear input"
-                            token="euiFormControlLayoutClearButton.label"
+                          <EuiFormControlLayoutClearButton
+                            data-test-subj="comboBoxClearButton"
+                            onClick={[Function]}
+                            size="m"
+                          >
+                            <EuiI18n
+                              default="Clear input"
+                              token="euiFormControlLayoutClearButton.label"
+                            >
+                              <button
+                                aria-label="Clear input"
+                                className="euiFormControlLayoutClearButton"
+                                data-test-subj="comboBoxClearButton"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <EuiIcon
+                                  className="euiFormControlLayoutClearButton__icon"
+                                  type="cross"
+                                >
+                                  <EuiIconEmpty
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
+                                    focusable="false"
+                                    role="img"
+                                    style={null}
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__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>
+                            </EuiI18n>
+                          </EuiFormControlLayoutClearButton>
+                          <EuiFormControlLayoutCustomIcon
+                            aria-label="Open list of options"
+                            data-test-subj="comboBoxToggleListButton"
+                            iconRef={[Function]}
+                            onClick={[Function]}
+                            size="m"
+                            type="arrowDown"
                           >
                             <button
-                              aria-label="Clear input"
-                              className="euiFormControlLayoutClearButton"
-                              data-test-subj="comboBoxClearButton"
+                              aria-label="Open list of options"
+                              className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                              data-test-subj="comboBoxToggleListButton"
                               onClick={[Function]}
                               type="button"
                             >
                               <EuiIcon
-                                className="euiFormControlLayoutClearButton__icon"
-                                type="cross"
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="arrowDown"
                               >
                                 <EuiIconEmpty
                                   aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
+                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                   focusable="false"
                                   role="img"
                                   style={null}
                                 >
                                   <svg
                                     aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height={16}
                                     role="img"
@@ -559,233 +614,190 @@ exports[`Saved query table component Renders saved query table 1`] = `
                                 </EuiIconEmpty>
                               </EuiIcon>
                             </button>
-                          </EuiI18n>
-                        </EuiFormControlLayoutClearButton>
-                        <EuiFormControlLayoutCustomIcon
-                          aria-label="Open list of options"
-                          data-test-subj="comboBoxToggleListButton"
-                          iconRef={[Function]}
-                          onClick={[Function]}
-                          size="m"
-                          type="arrowDown"
-                        >
-                          <button
-                            aria-label="Open list of options"
-                            className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                            data-test-subj="comboBoxToggleListButton"
-                            onClick={[Function]}
-                            type="button"
-                          >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiFormControlLayoutCustomIcon__icon"
-                              size="m"
-                              type="arrowDown"
-                            >
-                              <EuiIconEmpty
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                  focusable="false"
-                                  height={16}
-                                  role="img"
-                                  style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                />
-                              </EuiIconEmpty>
-                            </EuiIcon>
-                          </button>
-                        </EuiFormControlLayoutCustomIcon>
-                      </div>
-                    </EuiFormControlLayoutIcons>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
                   </div>
-                </div>
-              </EuiFormControlLayout>
-            </EuiComboBoxInput>
-          </div>
-        </EuiComboBox>
-        <EuiFormHelpText
-          className="euiFormRow__text"
-          id="random_html_id-help-0"
-          key="Search existing dashboards or applications by name"
-        >
-          <div
-            className="euiFormHelpText euiFormRow__text"
+                </EuiFormControlLayout>
+              </EuiComboBoxInput>
+            </div>
+          </EuiComboBox>
+          <EuiFormHelpText
+            className="euiFormRow__text"
             id="random_html_id-help-0"
+            key="Search existing dashboards or applications by name"
           >
-            Search existing dashboards or applications by name
-          </div>
-        </EuiFormHelpText>
+            <div
+              className="euiFormHelpText euiFormRow__text"
+              id="random_html_id-help-0"
+            >
+              Search existing dashboards or applications by name
+            </div>
+          </EuiFormHelpText>
+        </div>
       </div>
-    </div>
-  </EuiFormRow>
-  <EuiTitle
-    size="xxs"
-  >
-    <h3
-      className="euiTitle euiTitle--xxsmall"
+    </EuiFormRow>
+    <EuiTitle
+      size="xxs"
     >
-      Name
-    </h3>
-  </EuiTitle>
-  <EuiFormRow
-    describedByIds={Array []}
-    display="row"
-    fullWidth={false}
-    hasChildLabel={true}
-    hasEmptyLabelSpace={false}
-    helpText="Name for your savings"
-    labelType="label"
-  >
-    <div
-      className="euiFormRow"
-      id="random_html_id-row"
+      <h3
+        className="euiTitle euiTitle--xxsmall"
+      >
+        Name
+      </h3>
+    </EuiTitle>
+    <EuiFormRow
+      describedByIds={Array []}
+      display="row"
+      fullWidth={false}
+      hasChildLabel={true}
+      hasEmptyLabelSpace={false}
+      helpText="Name for your savings"
+      labelType="label"
     >
       <div
-        className="euiFormRow__fieldWrapper"
+        className="euiFormRow"
+        id="random_html_id-row"
       >
-        <EuiFieldText
-          aria-describedby="random_html_id-help-0"
-          data-test-subj="eventExplorer__querySaveName"
-          id="random_html_id"
-          isInvalid={false}
-          key="save-panel-id"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          value="Count by depature"
+        <div
+          className="euiFormRow__fieldWrapper"
         >
-          <EuiFormControlLayout
-            fullWidth={false}
-            inputId="random_html_id"
+          <EuiFieldText
+            aria-describedby="random_html_id-help-0"
+            data-test-subj="eventExplorer__querySaveName"
+            id="random_html_id"
+            isInvalid={false}
+            key="save-panel-id"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            value="Count by depature"
           >
-            <div
-              className="euiFormControlLayout"
+            <EuiFormControlLayout
+              fullWidth={false}
+              inputId="random_html_id"
             >
               <div
-                className="euiFormControlLayout__childrenWrapper"
+                className="euiFormControlLayout"
               >
-                <EuiValidatableControl
-                  isInvalid={false}
+                <div
+                  className="euiFormControlLayout__childrenWrapper"
                 >
-                  <input
-                    aria-describedby="random_html_id-help-0"
-                    className="euiFieldText"
-                    data-test-subj="eventExplorer__querySaveName"
-                    id="random_html_id"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    type="text"
-                    value="Count by depature"
-                  />
-                </EuiValidatableControl>
-                <EuiFormControlLayoutIcons />
+                  <EuiValidatableControl
+                    isInvalid={false}
+                  >
+                    <input
+                      aria-describedby="random_html_id-help-0"
+                      className="euiFieldText"
+                      data-test-subj="eventExplorer__querySaveName"
+                      id="random_html_id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      type="text"
+                      value="Count by depature"
+                    />
+                  </EuiValidatableControl>
+                  <EuiFormControlLayoutIcons />
+                </div>
               </div>
-            </div>
-          </EuiFormControlLayout>
-        </EuiFieldText>
-        <EuiFormHelpText
-          className="euiFormRow__text"
-          id="random_html_id-help-0"
-          key="Name for your savings"
-        >
-          <div
-            className="euiFormHelpText euiFormRow__text"
+            </EuiFormControlLayout>
+          </EuiFieldText>
+          <EuiFormHelpText
+            className="euiFormRow__text"
             id="random_html_id-help-0"
+            key="Name for your savings"
           >
-            Name for your savings
-          </div>
-        </EuiFormHelpText>
+            <div
+              className="euiFormHelpText euiFormRow__text"
+              id="random_html_id-help-0"
+            >
+              Name for your savings
+            </div>
+          </EuiFormHelpText>
+        </div>
       </div>
-    </div>
-  </EuiFormRow>
-  <EuiFormRow
-    describedByIds={Array []}
-    display="columnCompressedSwitch"
-    fullWidth={false}
-    hasChildLabel={true}
-    hasEmptyLabelSpace={false}
-    labelType="label"
-  >
-    <div
-      className="euiFormRow euiFormRow--compressed euiFormRow--horizontal euiFormRow--hasSwitch"
-      id="random_html_id-row"
+    </EuiFormRow>
+    <EuiFormRow
+      describedByIds={Array []}
+      display="columnCompressedSwitch"
+      fullWidth={false}
+      hasChildLabel={true}
+      hasEmptyLabelSpace={false}
+      labelType="label"
     >
       <div
-        className="euiFormRow__fieldWrapper"
+        className="euiFormRow euiFormRow--compressed euiFormRow--horizontal euiFormRow--hasSwitch"
+        id="random_html_id-row"
       >
-        <EuiToolTip
-          content="Only Time Series visualization and a query including stats/span can be saved as Metric"
-          delay="regular"
-          id="random_html_id"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          position="top"
+        <div
+          className="euiFormRow__fieldWrapper"
         >
-          <span
-            className="euiToolTipAnchor"
-            onKeyUp={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <EuiToolTip
+            content="Only Time Series visualization and a query including stats/span can be saved as Metric"
+            delay="regular"
+            id="random_html_id"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            position="top"
           >
-            <EuiSwitch
-              checked={false}
-              compressed={true}
-              disabled={true}
-              label="Save as Metric"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              showLabel={true}
+            <span
+              className="euiToolTipAnchor"
+              onKeyUp={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
             >
-              <div
-                className="euiSwitch euiSwitch--compressed"
+              <EuiSwitch
+                checked={false}
+                compressed={true}
+                disabled={true}
+                label="Save as Metric"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                showLabel={true}
               >
-                <button
-                  aria-checked={false}
-                  aria-labelledby="random_html_id"
-                  className="euiSwitch__button"
-                  disabled={true}
-                  id="random_html_id"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  role="switch"
-                  type="button"
+                <div
+                  className="euiSwitch euiSwitch--compressed"
                 >
-                  <span
-                    className="euiSwitch__body"
+                  <button
+                    aria-checked={false}
+                    aria-labelledby="random_html_id"
+                    className="euiSwitch__button"
+                    disabled={true}
+                    id="random_html_id"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    role="switch"
+                    type="button"
                   >
                     <span
-                      className="euiSwitch__thumb"
-                    />
-                    <span
-                      className="euiSwitch__track"
-                    />
+                      className="euiSwitch__body"
+                    >
+                      <span
+                        className="euiSwitch__thumb"
+                      />
+                      <span
+                        className="euiSwitch__track"
+                      />
+                    </span>
+                  </button>
+                  <span
+                    className="euiSwitch__label"
+                    id="random_html_id"
+                    onClick={[Function]}
+                  >
+                    Save as Metric
                   </span>
-                </button>
-                <span
-                  className="euiSwitch__label"
-                  id="random_html_id"
-                  onClick={[Function]}
-                >
-                  Save as Metric
-                </span>
-              </div>
-            </EuiSwitch>
-          </span>
-        </EuiToolTip>
+                </div>
+              </EuiSwitch>
+            </span>
+          </EuiToolTip>
+        </div>
       </div>
-    </div>
-  </EuiFormRow>
-</Component>
+    </EuiFormRow>
+  </Component>
+</Provider>
 `;
diff --git a/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx b/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx
index a35b7b58ac..0ffab1acbc 100644
--- a/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx
+++ b/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx
@@ -3,46 +3,60 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { applyMiddleware, createStore } from '@reduxjs/toolkit';
+import { waitFor } from '@testing-library/react';
 import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
-import { waitFor } from '@testing-library/react';
-import { SavePanel } from '../save_panel';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
 import { SELECTED_PANELS_OPTIONS } from '../../../../../../test/event_analytics_constants';
-import SavedObjects from '../../../../../services/saved_objects/event_analytics/saved_objects';
 import httpClientMock from '../../../../../../test/__mocks__/httpClientMock';
+import { coreRefs } from '../../../../../framework/core_refs';
+import { rootReducer } from '../../../../../framework/redux/reducers';
+import SavedObjects from '../../../../../services/saved_objects/event_analytics/saved_objects';
+import { SavePanel } from '../save_panel';
 
 describe('Saved query table component', () => {
   configure({ adapter: new Adapter() });
+  const store = createStore(rootReducer, applyMiddleware(thunk));
+  coreRefs.savedObjectsClient.find = jest.fn(() =>
+    Promise.resolve({
+      savedObjects: [],
+      then: () => Promise.resolve(),
+    })
+  );
 
   it('Renders saved query table', async () => {
     const handleNameChange = jest.fn();
     const handleOptionChange = jest.fn();
     const setMetricLabel = jest.fn();
     const savedObjects = new SavedObjects(httpClientMock);
-    
+
     const wrapper = mount(
-      <SavePanel
-        selectedOptions={SELECTED_PANELS_OPTIONS}
-        handleNameChange={handleNameChange}
-        handleOptionChange={handleOptionChange}
-        savedObjects={savedObjects}
-        savePanelName={'Count by depature'}
-        showOptionList={true}
-        curVisId={'line'}
-        spanValue={false}
-        setSubType={'metric'}
-        setMetricMeasure={'hours (h)'}
-        setMetricLabel={setMetricLabel} 
-        metricMeasure={'hours (h)'} 
-        metricChecked={true}        
-      />
+      <Provider store={store}>
+        <SavePanel
+          selectedOptions={SELECTED_PANELS_OPTIONS}
+          handleNameChange={handleNameChange}
+          handleOptionChange={handleOptionChange}
+          savedObjects={savedObjects}
+          savePanelName={'Count by depature'}
+          showOptionList={true}
+          curVisId={'line'}
+          spanValue={false}
+          setSubType={'metric'}
+          setMetricMeasure={'hours (h)'}
+          setMetricLabel={setMetricLabel}
+          metricMeasure={'hours (h)'}
+          metricChecked={true}
+        />
+      </Provider>
     );
-    
+
     wrapper.update();
 
     await waitFor(() => {
       expect(wrapper).toMatchSnapshot();
     });
   });
-});
\ No newline at end of file
+});
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 3f4d01cd19..d6ee5940c4 100644
--- a/public/components/event_analytics/explorer/save_panel/save_panel.tsx
+++ b/public/components/event_analytics/explorer/save_panel/save_panel.tsx
@@ -14,7 +14,12 @@ import {
 } from '@elastic/eui';
 import { useEffect } from 'react';
 import { isEmpty } from 'lodash';
+import { useDispatch, useSelector } from 'react-redux';
 import SavedObjects from '../../../../services/saved_objects/event_analytics/saved_objects';
+import {
+  fetchPanels,
+  selectPanelList,
+} from '../../../../../public/components/custom_panels/redux/panel_slice';
 
 interface ISavedPanelProps {
   selectedOptions: any;
@@ -45,23 +50,16 @@ export const SavePanel = ({
   setSubType,
   isSaveAsMetricEnabled,
 }: ISavedPanelProps) => {
-  const [options, setOptions] = useState([]);
   const [checked, setChecked] = useState(false);
   const [svpnlError, setSvpnlError] = useState(null);
 
-  const getCustomPabnelList = async (svobj: SavedObjects) => {
-    const optionRes = await svobj
-      .fetchCustomPanels()
-      .then((res: any) => {
-        return res;
-      })
-      .catch((error: any) => setSvpnlError(error));
-    setOptions(optionRes?.panels || []);
-  };
+  const customPanels = useSelector(selectPanelList);
+
+  const dispatch = useDispatch();
 
   useEffect(() => {
-    getCustomPabnelList(savedObjects);
-  });
+    dispatch(fetchPanels());
+  }, []);
 
   const onToggleChange = (e: { target: { checked: React.SetStateAction<boolean> } }) => {
     setChecked(e.target.checked);
@@ -86,10 +84,10 @@ export const SavePanel = ({
                 handleOptionChange(daOptions);
               }}
               selectedOptions={selectedOptions}
-              options={options.map((option: CustomPanelOptions) => {
+              options={customPanels.map((option: any) => {
                 return {
                   panel: option,
-                  label: option.name,
+                  label: option.title,
                 };
               })}
               isClearable={true}
diff --git a/public/components/event_analytics/home/home.tsx b/public/components/event_analytics/home/home.tsx
index f69489dfc5..b53564ddb3 100644
--- a/public/components/event_analytics/home/home.tsx
+++ b/public/components/event_analytics/home/home.tsx
@@ -49,10 +49,7 @@ import {
   ExplorerData as IExplorerData,
   IQuery,
 } from '../../../../common/types/explorer';
-import { getOSDSavedObjectsClient } from '../../../../common/utils';
 import SavedObjects from '../../../services/saved_objects/event_analytics/saved_objects';
-import { OSDSavedVisualizationClient } from '../../../services/saved_objects/saved_object_client/osd_saved_objects/saved_visualization';
-import { PPLSavedQueryClient } from '../../../services/saved_objects/saved_object_client/ppl';
 import { SavedObjectsActions } from '../../../services/saved_objects/saved_object_client/saved_objects_actions';
 import { ObservabilitySavedObject } from '../../../services/saved_objects/saved_object_client/types';
 import { getSampleDataModal } from '../../common/helpers/add_sample_modal';
@@ -197,7 +194,7 @@ const EventAnalyticsHome = (props: IHomeProps) => {
     await dispatchInitialData(newTabId);
 
     // redirect to explorer
-    history.push('/event_analytics/explorer');
+    history.push('/explorer');
   };
 
   const handleQueryChange = async (query: string) => setSearchQuery(query);
@@ -223,7 +220,7 @@ const EventAnalyticsHome = (props: IHomeProps) => {
       dispatch(setSelectedQueryTab({ tabId: newTabId }));
     });
     // redirect to explorer
-    history.push(`/event_analytics/explorer/${objectId}`);
+    history.push(`/explorer/${objectId}`);
   };
 
   const addSampledata = async () => {
@@ -334,7 +331,7 @@ const EventAnalyticsHome = (props: IHomeProps) => {
       key="redirect"
       onClick={() => {
         setIsActionsPopoverOpen(false);
-        history.push(`/event_analytics/explorer`);
+        history.push(`/explorer`);
       }}
       data-test-subj="eventHomeAction__explorer"
     >
@@ -359,7 +356,7 @@ const EventAnalyticsHome = (props: IHomeProps) => {
           <EuiPageHeader>
             <EuiPageHeaderSection>
               <EuiTitle data-test-subj="eventHomePageTitle" size="l">
-                <h1>Event analytics</h1>
+                <h1>Logs</h1>
               </EuiTitle>
             </EuiPageHeaderSection>
           </EuiPageHeader>
@@ -456,7 +453,7 @@ const EventAnalyticsHome = (props: IHomeProps) => {
                       <EuiFlexItem grow={false}>
                         <EuiButton
                           fullWidth={false}
-                          onClick={() => history.push(`/event_analytics/explorer`)}
+                          onClick={() => history.push(`/explorer`)}
                           data-test-subj="actionEventExplorer"
                         >
                           Event Explorer
diff --git a/public/components/event_analytics/index.tsx b/public/components/event_analytics/index.tsx
index 711b891d12..69c469af1e 100644
--- a/public/components/event_analytics/index.tsx
+++ b/public/components/event_analytics/index.tsx
@@ -10,7 +10,7 @@ import { isEmpty } from 'lodash';
 import React, { createContext, ReactChild, useState } from 'react';
 import { HashRouter, Route, RouteComponentProps, Switch, useHistory } from 'react-router-dom';
 import { RAW_QUERY } from '../../../common/constants/explorer';
-import { ObservabilitySideBar } from '../common/side_nav';
+import '../../variables.scss';
 import { LogExplorer } from './explorer/log_explorer';
 import { Home as EventExplorerHome } from './home/home';
 
@@ -29,14 +29,14 @@ export const EventAnalytics = ({
   http,
   notifications,
   queryManager,
+  setBreadcrumbs,
   ...props
 }: EventAnalyticsProps) => {
-  const history = useHistory();
   const [toasts, setToasts] = useState<Toast[]>([]);
 
   const eventAnalyticsBreadcrumb = {
-    text: 'Event analytics',
-    href: '#/event_analytics',
+    text: 'Logs',
+    href: '#/',
   };
 
   const setToast = (title: string, color = 'success', text?: ReactChild, side?: string) => {
@@ -68,14 +68,14 @@ export const EventAnalytics = ({
       <HashRouter>
         <Switch>
           <Route
-            path={[`/event_analytics/explorer/:id`, `/event_analytics/explorer`]}
+            path={['/explorer/:id', '/explorer']}
             render={(routerProps) => {
-              chrome.setBreadcrumbs([
+              setBreadcrumbs([
                 ...parentBreadcrumbs,
                 eventAnalyticsBreadcrumb,
                 {
                   text: 'Explorer',
-                  href: `#/event_analytics/explorer`,
+                  href: `#/explorer`,
                 },
               ]);
               return (
@@ -94,7 +94,6 @@ export const EventAnalytics = ({
                     http={http}
                     setToast={setToast}
                     getExistingEmptyTab={getExistingEmptyTab}
-                    history={history}
                     notifications={notifications}
                     queryManager={queryManager}
                   />
@@ -104,27 +103,25 @@ export const EventAnalytics = ({
           />
           <Route
             exact
-            path={['/', '/event_analytics']}
+            path={[`/`]}
             render={() => {
-              chrome.setBreadcrumbs([
+              setBreadcrumbs([
                 ...parentBreadcrumbs,
                 eventAnalyticsBreadcrumb,
                 {
                   text: 'Home',
-                  href: '#/event_analytics',
+                  href: '#/',
                 },
               ]);
               return (
-                <ObservabilitySideBar>
-                  <EventExplorerHome
-                    http={http}
-                    savedObjects={savedObjects}
-                    dslService={dslService}
-                    pplService={pplService}
-                    setToast={setToast}
-                    getExistingEmptyTab={getExistingEmptyTab}
-                  />
-                </ObservabilitySideBar>
+                <EventExplorerHome
+                  http={http}
+                  savedObjects={savedObjects}
+                  dslService={dslService}
+                  pplService={pplService}
+                  setToast={setToast}
+                  getExistingEmptyTab={getExistingEmptyTab}
+                />
               );
             }}
           />
diff --git a/public/components/index.tsx b/public/components/index.tsx
index eec21a18b2..8191752974 100644
--- a/public/components/index.tsx
+++ b/public/components/index.tsx
@@ -18,7 +18,8 @@ export const Observability = (
   dslService: any,
   savedObjects: any,
   timestampUtils: any,
-  queryManager: QueryManager
+  queryManager: QueryManager,
+  startPage: string
 ) => {
   ReactDOM.render(
     <App
@@ -29,6 +30,7 @@ export const Observability = (
       savedObjects={savedObjects}
       timestampUtils={timestampUtils}
       queryManager={queryManager}
+      startPage={startPage}
     />,
     AppMountParametersProp.element
   );
diff --git a/public/components/metrics/index.tsx b/public/components/metrics/index.tsx
index 0647cdaba3..7d7eef327f 100644
--- a/public/components/metrics/index.tsx
+++ b/public/components/metrics/index.tsx
@@ -15,9 +15,10 @@ import {
 } from '@elastic/eui';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
 import React, { useEffect, useState } from 'react';
-import { Route, RouteComponentProps } from 'react-router-dom';
+import { HashRouter, Route, RouteComponentProps } from 'react-router-dom';
 import classNames from 'classnames';
 import { StaticContext } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import { ChromeBreadcrumb, CoreStart, Toast } from '../../../../../src/core/public';
 import { onTimeChange } from './helpers/utils';
 import { Sidebar } from './sidebar/sidebar';
@@ -26,10 +27,10 @@ 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 { useSelector } from 'react-redux';
 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 {
   http: CoreStart['http'];
@@ -38,6 +39,7 @@ interface MetricsProps {
   renderProps: RouteComponentProps<any, StaticContext, any>;
   pplService: PPLService;
   savedObjects: SavedObjects;
+  setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
 }
 
 export const Home = ({
@@ -82,6 +84,7 @@ export const Home = ({
   };
 
   const onRefreshFilters = (startTime: ShortDate, endTime: ShortDate) => {
+    // eslint-disable-line
     if (spanValue < 1) {
       setToast('Please add a valid span interval', 'danger');
       return;
@@ -102,7 +105,7 @@ export const Home = ({
   };
 
   const onEditClick = (savedVisualizationId: string) => {
-    window.location.assign(`#/event_analytics/explorer/${savedVisualizationId}`);
+    window.location.assign(`${observabilityLogsID}#/explorer/${savedVisualizationId}`);
   };
 
   const onSideBarClick = () => {
@@ -114,9 +117,19 @@ export const Home = ({
     }, 300);
   };
 
+  useEffect(() => {
+    chrome.setBreadcrumbs([
+      parentBreadcrumb,
+      {
+        text: 'Metrics',
+        href: `#/`,
+      },
+    ]);
+  }, []);
+
   useEffect(() => {
     if (!editMode) {
-      selectedMetrics.length > 0 ? setIsTopPanelDisabled(false) : setIsTopPanelDisabled(true);
+      selectedMetrics.length > 0 ? setIsTopPanelDisabled(false) : setIsTopPanelDisabled(true); // eslint-disable-line
     } else {
       setIsTopPanelDisabled(true);
     }
@@ -145,81 +158,83 @@ export const Home = ({
         side={toastRightSide ? 'right' : 'left'}
         toastLifeTimeMs={6000}
       />
-      <Route
-        exact
-        path="/metrics_analytics"
-        render={(props) => (
-          <div>
-            <EuiPage>
-              <EuiPageBody component="div">
-                <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}
-                  setSearch={setSearch}
-                />
-                <div className="dscAppContainer">
-                  <div
-                    className={`col-md-2 dscSidebar__container dscCollapsibleSidebar ${sidebarClassName}`}
-                  >
-                    <div className="">
-                      {!isSidebarClosed && (
-                        <Sidebar http={http} pplService={pplService} search={search} />
+      <HashRouter>
+        <Route
+          exact
+          path="/"
+          render={(props) => (
+            <div>
+              <EuiPage>
+                <EuiPageBody component="div">
+                  <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}
+                    setSearch={setSearch}
+                  />
+                  <div className="dscAppContainer">
+                    <div
+                      className={`col-md-2 dscSidebar__container dscCollapsibleSidebar ${sidebarClassName}`}
+                    >
+                      <div className="">
+                        {!isSidebarClosed && (
+                          <Sidebar http={http} pplService={pplService} search={search} />
+                        )}
+                        <EuiButtonIcon
+                          iconType={isSidebarClosed ? 'menuRight' : 'menuLeft'}
+                          iconSize="m"
+                          size="s"
+                          onClick={() => onSideBarClick()}
+                          data-test-subj="collapseSideBarButton"
+                          aria-controls="discover-sidebar"
+                          aria-expanded={isSidebarClosed ? 'false' : 'true'}
+                          aria-label="Toggle sidebar"
+                          className="dscCollapsibleSidebar__collapseButton"
+                        />
+                      </div>
+                    </div>
+                    <div className={`dscWrapper ${mainSectionClassName}`}>
+                      {selectedMetrics.length > 0 ? (
+                        <MetricsGrid
+                          http={http}
+                          chrome={chrome}
+                          panelVisualizations={panelVisualizations}
+                          setPanelVisualizations={setPanelVisualizations}
+                          editMode={editMode}
+                          pplService={pplService}
+                          startTime={startTime}
+                          endTime={endTime}
+                          moveToEvents={onEditClick}
+                          onRefresh={onRefresh}
+                          editActionType={editActionType}
+                          spanParam={spanValue + resolutionValue}
+                        />
+                      ) : (
+                        <EmptyMetricsView />
                       )}
-                      <EuiButtonIcon
-                        iconType={isSidebarClosed ? 'menuRight' : 'menuLeft'}
-                        iconSize="m"
-                        size="s"
-                        onClick={() => onSideBarClick()}
-                        data-test-subj="collapseSideBarButton"
-                        aria-controls="discover-sidebar"
-                        aria-expanded={isSidebarClosed ? 'false' : 'true'}
-                        aria-label="Toggle sidebar"
-                        className="dscCollapsibleSidebar__collapseButton"
-                      />
                     </div>
                   </div>
-                  <div className={`dscWrapper ${mainSectionClassName}`}>
-                    {selectedMetrics.length > 0 ? (
-                      <MetricsGrid
-                        http={http}
-                        chrome={chrome}
-                        panelVisualizations={panelVisualizations}
-                        setPanelVisualizations={setPanelVisualizations}
-                        editMode={editMode}
-                        pplService={pplService}
-                        startTime={startTime}
-                        endTime={endTime}
-                        moveToEvents={onEditClick}
-                        onRefresh={onRefresh}
-                        editActionType={editActionType}
-                        spanParam={spanValue + resolutionValue}
-                      />
-                    ) : (
-                      <EmptyMetricsView />
-                    )}
-                  </div>
-                </div>
-              </EuiPageBody>
-            </EuiPage>
-          </div>
-        )}
-      />
+                </EuiPageBody>
+              </EuiPage>
+            </div>
+          )}
+        />
+      </HashRouter>
     </>
   );
 };
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 c4fcb663bf..9232c58180 100644
--- a/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
+++ b/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
@@ -15,7 +15,9 @@ exports[`Search Bar Component Search Side Bar Component with available metrics 1
   <Component
     setSearch={[MockFunction]}
   >
-    <div>
+    <div
+      className="metrics-search-bar-input"
+    >
       <EuiSearchBar
         box={
           Object {
@@ -164,7 +166,9 @@ exports[`Search Bar Component Search Side Bar Component with no available metric
   <Component
     setSearch={[MockFunction]}
   >
-    <div>
+    <div
+      className="metrics-search-bar-input"
+    >
       <EuiSearchBar
         box={
           Object {
diff --git a/public/components/metrics/sidebar/search_bar.tsx b/public/components/metrics/sidebar/search_bar.tsx
index fc56564750..26c564b4df 100644
--- a/public/components/metrics/sidebar/search_bar.tsx
+++ b/public/components/metrics/sidebar/search_bar.tsx
@@ -28,7 +28,7 @@ export const SearchBar = (props: ISearchBarProps) => {
   };
 
   return (
-    <div>
+    <div className="metrics-search-bar-input">
       <EuiSearchBar
         box={{
           placeholder: 'Search for metrics',
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 1e637705f6..3e603d391b 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
@@ -66,394 +66,102 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
     spanValue={1}
     startTime="now-1d"
   >
-    <EuiPageHeader>
-      <header
-        className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+    <EuiFlexGroup
+      gutterSize="s"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <EuiPageHeaderSection>
-          <div
-            className="euiPageHeaderSection"
-          >
-            <EuiFlexGroup
-              className="search-bar-top-menu"
-            >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive search-bar-top-menu"
-              >
-                <EuiFlexItem>
-                  <div
-                    className="euiFlexItem"
-                  >
-                    <Component>
-                      <div>
-                        <EuiSearchBar
-                          box={
-                            Object {
-                              "incremental": true,
-                              "placeholder": "Search for metrics",
-                            }
-                          }
-                          defaultQuery=""
-                          onChange={[Function]}
-                        >
-                          <EuiFlexGroup
-                            alignItems="center"
-                            gutterSize="m"
-                            wrap={true}
-                          >
-                            <div
-                              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
-                            >
-                              <EuiFlexItem
-                                className="euiSearchBar__searchHolder"
-                                grow={true}
-                              >
-                                <div
-                                  className="euiFlexItem euiSearchBar__searchHolder"
-                                >
-                                  <EuiSearchBox
-                                    incremental={true}
-                                    isInvalid={false}
-                                    onSearch={[Function]}
-                                    placeholder="Search for metrics"
-                                    query=""
-                                  >
-                                    <EuiFieldSearch
-                                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                                      compressed={false}
-                                      defaultValue=""
-                                      fullWidth={true}
-                                      incremental={true}
-                                      inputRef={[Function]}
-                                      isClearable={true}
-                                      isInvalid={false}
-                                      isLoading={false}
-                                      onSearch={[Function]}
-                                      placeholder="Search for metrics"
-                                    >
-                                      <EuiFormControlLayout
-                                        compressed={false}
-                                        fullWidth={true}
-                                        icon="search"
-                                        isLoading={false}
-                                      >
-                                        <div
-                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
-                                        >
-                                          <div
-                                            className="euiFormControlLayout__childrenWrapper"
-                                          >
-                                            <EuiValidatableControl
-                                              isInvalid={false}
-                                            >
-                                              <input
-                                                aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                                                className="euiFieldSearch euiFieldSearch--fullWidth"
-                                                defaultValue=""
-                                                onKeyUp={[Function]}
-                                                placeholder="Search for metrics"
-                                                type="search"
-                                              />
-                                            </EuiValidatableControl>
-                                            <EuiFormControlLayoutIcons
-                                              compressed={false}
-                                              icon="search"
-                                              isLoading={false}
-                                            >
-                                              <div
-                                                className="euiFormControlLayoutIcons"
-                                              >
-                                                <EuiFormControlLayoutCustomIcon
-                                                  size="m"
-                                                  type="search"
-                                                >
-                                                  <span
-                                                    className="euiFormControlLayoutCustomIcon"
-                                                  >
-                                                    <EuiIcon
-                                                      aria-hidden="true"
-                                                      className="euiFormControlLayoutCustomIcon__icon"
-                                                      size="m"
-                                                      type="search"
-                                                    >
-                                                      <EuiIconSearch
-                                                        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="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
-                                                          />
-                                                        </svg>
-                                                      </EuiIconSearch>
-                                                    </EuiIcon>
-                                                  </span>
-                                                </EuiFormControlLayoutCustomIcon>
-                                              </div>
-                                            </EuiFormControlLayoutIcons>
-                                          </div>
-                                        </div>
-                                      </EuiFormControlLayout>
-                                    </EuiFieldSearch>
-                                  </EuiSearchBox>
-                                </div>
-                              </EuiFlexItem>
-                            </div>
-                          </EuiFlexGroup>
-                        </EuiSearchBar>
-                      </div>
-                    </Component>
-                  </div>
-                </EuiFlexItem>
-              </div>
-            </EuiFlexGroup>
-          </div>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>
+        <EuiFlexItem
+          grow={10}
+        >
           <div
-            className="euiPageHeaderSection"
+            className="euiFlexItem euiFlexItem--flexGrow10"
           >
-            <EuiFlexGroup
-              gutterSize="s"
-            >
+            <Component>
               <div
-                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                className="metrics-search-bar-input"
               >
-                <EuiFlexItem
-                  grow={false}
+                <EuiSearchBar
+                  box={
+                    Object {
+                      "incremental": true,
+                      "placeholder": "Search for metrics",
+                    }
+                  }
+                  defaultQuery=""
+                  onChange={[Function]}
                 >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  <EuiFlexGroup
+                    alignItems="center"
+                    gutterSize="m"
+                    wrap={true}
                   >
                     <div
-                      className="resolutionSelect"
+                      className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
                     >
-                      <EuiFieldText
-                        append={
-                          <EuiSelect
-                            aria-label="resolutionSelect"
-                            id="select_123"
-                            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"
-                        disabled={true}
-                        isInvalid={false}
-                        onChange={[Function]}
-                        prepend="Span Interval"
-                        value={1}
+                      <EuiFlexItem
+                        className="euiSearchBar__searchHolder"
+                        grow={true}
                       >
-                        <EuiFormControlLayout
-                          append={
-                            <EuiSelect
-                              aria-label="resolutionSelect"
-                              id="select_123"
-                              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="euiFlexItem euiSearchBar__searchHolder"
                         >
-                          <div
-                            className="euiFormControlLayout euiFormControlLayout--group"
+                          <EuiSearchBox
+                            incremental={true}
+                            isInvalid={false}
+                            onSearch={[Function]}
+                            placeholder="Search for metrics"
+                            query=""
                           >
-                            <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"
-                                  disabled={true}
-                                  onChange={[Function]}
-                                  type="text"
-                                  value={1}
-                                />
-                              </EuiValidatableControl>
-                              <EuiFormControlLayoutIcons />
-                            </div>
-                            <EuiSelect
-                              aria-label="resolutionSelect"
-                              className="euiFormControlLayout__append"
-                              id="select_123"
-                              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"
+                            <EuiFieldSearch
+                              aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                              compressed={false}
+                              defaultValue=""
+                              fullWidth={true}
+                              incremental={true}
+                              inputRef={[Function]}
+                              isClearable={true}
+                              isInvalid={false}
+                              isLoading={false}
+                              onSearch={[Function]}
+                              placeholder="Search for metrics"
                             >
                               <EuiFormControlLayout
                                 compressed={false}
-                                fullWidth={false}
-                                icon={
-                                  Object {
-                                    "side": "right",
-                                    "type": "arrowDown",
-                                  }
-                                }
-                                inputId="select_123"
+                                fullWidth={true}
+                                icon="search"
                                 isLoading={false}
                               >
                                 <div
-                                  className="euiFormControlLayout"
+                                  className="euiFormControlLayout euiFormControlLayout--fullWidth"
                                 >
                                   <div
                                     className="euiFormControlLayout__childrenWrapper"
                                   >
-                                    <EuiValidatableControl>
-                                      <select
-                                        aria-label="resolutionSelect"
-                                        className="euiSelect euiFormControlLayout__append"
-                                        id="select_123"
-                                        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
+                                      isInvalid={false}
+                                    >
+                                      <input
+                                        aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                                        className="euiFieldSearch euiFieldSearch--fullWidth"
+                                        defaultValue=""
+                                        onKeyUp={[Function]}
+                                        placeholder="Search for metrics"
+                                        type="search"
+                                      />
                                     </EuiValidatableControl>
                                     <EuiFormControlLayoutIcons
                                       compressed={false}
-                                      icon={
-                                        Object {
-                                          "side": "right",
-                                          "type": "arrowDown",
-                                        }
-                                      }
+                                      icon="search"
                                       isLoading={false}
                                     >
                                       <div
-                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                        className="euiFormControlLayoutIcons"
                                       >
                                         <EuiFormControlLayoutCustomIcon
                                           size="m"
-                                          type="arrowDown"
+                                          type="search"
                                         >
                                           <span
                                             className="euiFormControlLayoutCustomIcon"
@@ -462,9 +170,9 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                                               aria-hidden="true"
                                               className="euiFormControlLayoutCustomIcon__icon"
                                               size="m"
-                                              type="arrowDown"
+                                              type="search"
                                             >
-                                              <EuiIconArrowDown
+                                              <EuiIconSearch
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                                 focusable="false"
@@ -483,11 +191,10 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                                                   xmlns="http://www.w3.org/2000/svg"
                                                 >
                                                   <path
-                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                    fillRule="non-zero"
+                                                    d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
                                                   />
                                                 </svg>
-                                              </EuiIconArrowDown>
+                                              </EuiIconSearch>
                                             </EuiIcon>
                                           </span>
                                         </EuiFormControlLayoutCustomIcon>
@@ -496,635 +203,261 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                                   </div>
                                 </div>
                               </EuiFormControlLayout>
-                            </EuiSelect>
-                          </div>
-                        </EuiFormControlLayout>
-                      </EuiFieldText>
+                            </EuiFieldSearch>
+                          </EuiSearchBox>
+                        </div>
+                      </EuiFlexItem>
                     </div>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <EuiSuperDatePicker
-                      commonlyUsedRanges={
+                  </EuiFlexGroup>
+                </EuiSearchBar>
+              </div>
+            </Component>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <div
+              className="resolutionSelect"
+            >
+              <EuiFieldText
+                append={
+                  <EuiSelect
+                    aria-label="resolutionSelect"
+                    className="resolutionSelectOption"
+                    id="select_123"
+                    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"
+                disabled={true}
+                isInvalid={false}
+                onChange={[Function]}
+                prepend="Span Interval"
+                value={1}
+              >
+                <EuiFormControlLayout
+                  append={
+                    <EuiSelect
+                      aria-label="resolutionSelect"
+                      className="resolutionSelectOption"
+                      id="select_123"
+                      onChange={[Function]}
+                      options={
                         Array [
                           Object {
-                            "end": "now/d",
-                            "label": "Today",
-                            "start": "now/d",
+                            "text": "seconds",
+                            "value": "s",
+                          },
+                          Object {
+                            "text": "minutes",
+                            "value": "m",
+                          },
+                          Object {
+                            "text": "hours",
+                            "value": "h",
                           },
                           Object {
-                            "end": "now/w",
-                            "label": "This week",
-                            "start": "now/w",
+                            "text": "days",
+                            "value": "d",
                           },
                           Object {
-                            "end": "now/M",
-                            "label": "This month",
-                            "start": "now/M",
+                            "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"
+                          disabled={true}
+                          onChange={[Function]}
+                          type="text"
+                          value={1}
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons />
+                    </div>
+                    <EuiSelect
+                      aria-label="resolutionSelect"
+                      className="euiFormControlLayout__append resolutionSelectOption"
+                      id="select_123"
+                      key="0/.0"
+                      onChange={[Function]}
+                      options={
+                        Array [
                           Object {
-                            "end": "now/y",
-                            "label": "This year",
-                            "start": "now/y",
+                            "text": "seconds",
+                            "value": "s",
                           },
                           Object {
-                            "end": "now-1d/d",
-                            "label": "Yesterday",
-                            "start": "now-1d/d",
+                            "text": "minutes",
+                            "value": "m",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Week to date",
-                            "start": "now/w",
+                            "text": "hours",
+                            "value": "h",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Month to date",
-                            "start": "now/M",
+                            "text": "days",
+                            "value": "d",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Year to date",
-                            "start": "now/y",
+                            "text": "years",
+                            "value": "y",
                           },
                         ]
                       }
-                      dateFormat=""
-                      end="now"
-                      isAutoRefreshOnly={false}
-                      isDisabled={true}
-                      isPaused={true}
-                      onTimeChange={[MockFunction]}
-                      recentlyUsedRanges={Array []}
-                      refreshInterval={0}
-                      showUpdateButton={true}
-                      start="now-1d"
-                      timeFormat="HH:mm"
+                      value="h"
                     >
-                      <EuiFlexGroup
-                        className="euiSuperDatePicker__flexWrapper"
-                        gutterSize="s"
-                        responsive={false}
+                      <EuiFormControlLayout
+                        compressed={false}
+                        fullWidth={false}
+                        icon={
+                          Object {
+                            "side": "right",
+                            "type": "arrowDown",
+                          }
+                        }
+                        inputId="select_123"
+                        isLoading={false}
                       >
                         <div
-                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                          className="euiFormControlLayout"
                         >
-                          <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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.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 0112.994 15H3.006A2.005 2.005 0 011 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="euiFormControlLayout__childrenWrapper"
                           >
-                            <div
-                              className="euiFlexItem euiFlexItem--flexGrowZero"
-                            >
-                              <EuiSuperUpdateButton
-                                data-test-subj="superDatePickerApplyTimeButton"
-                                isDisabled={true}
-                                isLoading={false}
-                                needsUpdate={false}
-                                onClick={[Function]}
-                                showTooltip={true}
+                            <EuiValidatableControl>
+                              <select
+                                aria-label="resolutionSelect"
+                                className="euiSelect euiFormControlLayout__append resolutionSelectOption"
+                                id="select_123"
+                                onChange={[Function]}
+                                onMouseUp={[Function]}
+                                value="h"
                               >
-                                <EuiToolTip
-                                  content={
-                                    <EuiI18n
-                                      default="Cannot update"
-                                      token="euiSuperUpdateButton.cannotUpdateTooltip"
-                                    />
-                                  }
-                                  delay="regular"
-                                  position="bottom"
+                                <option
+                                  key="0"
+                                  value="s"
                                 >
-                                  <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 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 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,
-                                  }
+                                  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",
                                 }
-                                type="button"
+                              }
+                              isLoading={false}
+                            >
+                              <div
+                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                               >
-                                <EuiButtonContent
-                                  className="euiButton__content"
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  textProps={
-                                    Object {
-                                      "className": "euiButton__text",
-                                    }
-                                  }
+                                <EuiFormControlLayoutCustomIcon
+                                  size="m"
+                                  type="arrowDown"
                                 >
                                   <span
-                                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                    className="euiFormControlLayoutCustomIcon"
                                   >
                                     <EuiIcon
-                                      className="euiButtonContent__icon"
-                                      color="inherit"
+                                      aria-hidden="true"
+                                      className="euiFormControlLayoutCustomIcon__icon"
                                       size="m"
                                       type="arrowDown"
                                     >
                                       <EuiIconArrowDown
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         role="img"
                                         style={null}
                                       >
                                         <svg
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                           focusable="false"
                                           height={16}
                                           role="img"
@@ -1140,27 +473,681 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                                         </svg>
                                       </EuiIconArrowDown>
                                     </EuiIcon>
-                                    <span
-                                      className="euiButton__text"
-                                    >
-                                      Save
-                                    </span>
                                   </span>
-                                </EuiButtonContent>
-                              </button>
-                            </EuiButtonDisplay>
-                          </EuiButton>
+                                </EuiFormControlLayoutCustomIcon>
+                              </div>
+                            </EuiFormControlLayoutIcons>
+                          </div>
                         </div>
-                      </div>
-                    </EuiPopover>
+                      </EuiFormControlLayout>
+                    </EuiSelect>
                   </div>
-                </EuiFlexItem>
+                </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={[MockFunction]}
+              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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.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 0112.994 15H3.006A2.005 2.005 0 011 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 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                    fillRule="non-zero"
+                                  />
+                                </svg>
+                              </EuiIconArrowDown>
+                            </EuiIcon>
+                            <span
+                              className="euiButton__text"
+                            >
+                              Save
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonDisplay>
+                  </EuiButton>
+                </div>
               </div>
-            </EuiFlexGroup>
+            </EuiPopover>
           </div>
-        </EuiPageHeaderSection>
-      </header>
-    </EuiPageHeader>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
     <EuiFlexGroup
       gutterSize="s"
       justifyContent="flexEnd"
@@ -1378,405 +1365,113 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
     spanValue={1}
     startTime="now-1d"
   >
-    <EuiPageHeader>
-      <header
-        className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+    <EuiFlexGroup
+      gutterSize="s"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <EuiPageHeaderSection>
+        <EuiFlexItem
+          grow={10}
+        >
           <div
-            className="euiPageHeaderSection"
+            className="euiFlexItem euiFlexItem--flexGrow10"
           >
-            <EuiFlexGroup
-              className="search-bar-top-menu"
-            >
+            <Component>
               <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive search-bar-top-menu"
+                className="metrics-search-bar-input"
               >
-                <EuiFlexItem>
-                  <div
-                    className="euiFlexItem"
+                <EuiSearchBar
+                  box={
+                    Object {
+                      "incremental": true,
+                      "placeholder": "Search for metrics",
+                    }
+                  }
+                  defaultQuery=""
+                  onChange={[Function]}
+                >
+                  <EuiFlexGroup
+                    alignItems="center"
+                    gutterSize="m"
+                    wrap={true}
                   >
-                    <Component>
-                      <div>
-                        <EuiSearchBar
-                          box={
-                            Object {
-                              "incremental": true,
-                              "placeholder": "Search for metrics",
-                            }
-                          }
-                          defaultQuery=""
-                          onChange={[Function]}
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                    >
+                      <EuiFlexItem
+                        className="euiSearchBar__searchHolder"
+                        grow={true}
+                      >
+                        <div
+                          className="euiFlexItem euiSearchBar__searchHolder"
                         >
-                          <EuiFlexGroup
-                            alignItems="center"
-                            gutterSize="m"
-                            wrap={true}
+                          <EuiSearchBox
+                            incremental={true}
+                            isInvalid={false}
+                            onSearch={[Function]}
+                            placeholder="Search for metrics"
+                            query=""
                           >
-                            <div
-                              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                            <EuiFieldSearch
+                              aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                              compressed={false}
+                              defaultValue=""
+                              fullWidth={true}
+                              incremental={true}
+                              inputRef={[Function]}
+                              isClearable={true}
+                              isInvalid={false}
+                              isLoading={false}
+                              onSearch={[Function]}
+                              placeholder="Search for metrics"
                             >
-                              <EuiFlexItem
-                                className="euiSearchBar__searchHolder"
-                                grow={true}
+                              <EuiFormControlLayout
+                                compressed={false}
+                                fullWidth={true}
+                                icon="search"
+                                isLoading={false}
                               >
                                 <div
-                                  className="euiFlexItem euiSearchBar__searchHolder"
+                                  className="euiFormControlLayout euiFormControlLayout--fullWidth"
                                 >
-                                  <EuiSearchBox
-                                    incremental={true}
-                                    isInvalid={false}
-                                    onSearch={[Function]}
-                                    placeholder="Search for metrics"
-                                    query=""
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
                                   >
-                                    <EuiFieldSearch
-                                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                                      compressed={false}
-                                      defaultValue=""
-                                      fullWidth={true}
-                                      incremental={true}
-                                      inputRef={[Function]}
-                                      isClearable={true}
+                                    <EuiValidatableControl
                                       isInvalid={false}
+                                    >
+                                      <input
+                                        aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                                        className="euiFieldSearch euiFieldSearch--fullWidth"
+                                        defaultValue=""
+                                        onKeyUp={[Function]}
+                                        placeholder="Search for metrics"
+                                        type="search"
+                                      />
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons
+                                      compressed={false}
+                                      icon="search"
                                       isLoading={false}
-                                      onSearch={[Function]}
-                                      placeholder="Search for metrics"
                                     >
-                                      <EuiFormControlLayout
-                                        compressed={false}
-                                        fullWidth={true}
-                                        icon="search"
-                                        isLoading={false}
+                                      <div
+                                        className="euiFormControlLayoutIcons"
                                       >
-                                        <div
-                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                        <EuiFormControlLayoutCustomIcon
+                                          size="m"
+                                          type="search"
                                         >
-                                          <div
-                                            className="euiFormControlLayout__childrenWrapper"
+                                          <span
+                                            className="euiFormControlLayoutCustomIcon"
                                           >
-                                            <EuiValidatableControl
-                                              isInvalid={false}
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiFormControlLayoutCustomIcon__icon"
+                                              size="m"
+                                              type="search"
                                             >
-                                              <input
-                                                aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                                                className="euiFieldSearch euiFieldSearch--fullWidth"
-                                                defaultValue=""
-                                                onKeyUp={[Function]}
-                                                placeholder="Search for metrics"
-                                                type="search"
-                                              />
-                                            </EuiValidatableControl>
-                                            <EuiFormControlLayoutIcons
-                                              compressed={false}
-                                              icon="search"
-                                              isLoading={false}
-                                            >
-                                              <div
-                                                className="euiFormControlLayoutIcons"
-                                              >
-                                                <EuiFormControlLayoutCustomIcon
-                                                  size="m"
-                                                  type="search"
-                                                >
-                                                  <span
-                                                    className="euiFormControlLayoutCustomIcon"
-                                                  >
-                                                    <EuiIcon
-                                                      aria-hidden="true"
-                                                      className="euiFormControlLayoutCustomIcon__icon"
-                                                      size="m"
-                                                      type="search"
-                                                    >
-                                                      <EuiIconSearch
-                                                        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="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
-                                                          />
-                                                        </svg>
-                                                      </EuiIconSearch>
-                                                    </EuiIcon>
-                                                  </span>
-                                                </EuiFormControlLayoutCustomIcon>
-                                              </div>
-                                            </EuiFormControlLayoutIcons>
-                                          </div>
-                                        </div>
-                                      </EuiFormControlLayout>
-                                    </EuiFieldSearch>
-                                  </EuiSearchBox>
-                                </div>
-                              </EuiFlexItem>
-                            </div>
-                          </EuiFlexGroup>
-                        </EuiSearchBar>
-                      </div>
-                    </Component>
-                  </div>
-                </EuiFlexItem>
-              </div>
-            </EuiFlexGroup>
-          </div>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>
-          <div
-            className="euiPageHeaderSection"
-          >
-            <EuiFlexGroup
-              gutterSize="s"
-            >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-              >
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <div
-                      className="resolutionSelect"
-                    >
-                      <EuiFieldText
-                        append={
-                          <EuiSelect
-                            aria-label="resolutionSelect"
-                            id="select_123"
-                            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"
-                        disabled={true}
-                        isInvalid={false}
-                        onChange={[Function]}
-                        prepend="Span Interval"
-                        value={1}
-                      >
-                        <EuiFormControlLayout
-                          append={
-                            <EuiSelect
-                              aria-label="resolutionSelect"
-                              id="select_123"
-                              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"
-                                  disabled={true}
-                                  onChange={[Function]}
-                                  type="text"
-                                  value={1}
-                                />
-                              </EuiValidatableControl>
-                              <EuiFormControlLayoutIcons />
-                            </div>
-                            <EuiSelect
-                              aria-label="resolutionSelect"
-                              className="euiFormControlLayout__append"
-                              id="select_123"
-                              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",
-                                  }
-                                }
-                                inputId="select_123"
-                                isLoading={false}
-                              >
-                                <div
-                                  className="euiFormControlLayout"
-                                >
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <EuiValidatableControl>
-                                      <select
-                                        aria-label="resolutionSelect"
-                                        className="euiSelect euiFormControlLayout__append"
-                                        id="select_123"
-                                        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
+                                              <EuiIconSearch
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                                 focusable="false"
@@ -1795,11 +1490,10 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
                                                   xmlns="http://www.w3.org/2000/svg"
                                                 >
                                                   <path
-                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                    fillRule="non-zero"
+                                                    d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
                                                   />
                                                 </svg>
-                                              </EuiIconArrowDown>
+                                              </EuiIconSearch>
                                             </EuiIcon>
                                           </span>
                                         </EuiFormControlLayoutCustomIcon>
@@ -1808,635 +1502,261 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
                                   </div>
                                 </div>
                               </EuiFormControlLayout>
-                            </EuiSelect>
-                          </div>
-                        </EuiFormControlLayout>
-                      </EuiFieldText>
+                            </EuiFieldSearch>
+                          </EuiSearchBox>
+                        </div>
+                      </EuiFlexItem>
                     </div>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <EuiSuperDatePicker
-                      commonlyUsedRanges={
+                  </EuiFlexGroup>
+                </EuiSearchBar>
+              </div>
+            </Component>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <div
+              className="resolutionSelect"
+            >
+              <EuiFieldText
+                append={
+                  <EuiSelect
+                    aria-label="resolutionSelect"
+                    className="resolutionSelectOption"
+                    id="select_123"
+                    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"
+                disabled={true}
+                isInvalid={false}
+                onChange={[Function]}
+                prepend="Span Interval"
+                value={1}
+              >
+                <EuiFormControlLayout
+                  append={
+                    <EuiSelect
+                      aria-label="resolutionSelect"
+                      className="resolutionSelectOption"
+                      id="select_123"
+                      onChange={[Function]}
+                      options={
                         Array [
                           Object {
-                            "end": "now/d",
-                            "label": "Today",
-                            "start": "now/d",
+                            "text": "seconds",
+                            "value": "s",
+                          },
+                          Object {
+                            "text": "minutes",
+                            "value": "m",
+                          },
+                          Object {
+                            "text": "hours",
+                            "value": "h",
                           },
                           Object {
-                            "end": "now/w",
-                            "label": "This week",
-                            "start": "now/w",
+                            "text": "days",
+                            "value": "d",
                           },
                           Object {
-                            "end": "now/M",
-                            "label": "This month",
-                            "start": "now/M",
+                            "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"
+                          disabled={true}
+                          onChange={[Function]}
+                          type="text"
+                          value={1}
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons />
+                    </div>
+                    <EuiSelect
+                      aria-label="resolutionSelect"
+                      className="euiFormControlLayout__append resolutionSelectOption"
+                      id="select_123"
+                      key="0/.0"
+                      onChange={[Function]}
+                      options={
+                        Array [
                           Object {
-                            "end": "now/y",
-                            "label": "This year",
-                            "start": "now/y",
+                            "text": "seconds",
+                            "value": "s",
                           },
                           Object {
-                            "end": "now-1d/d",
-                            "label": "Yesterday",
-                            "start": "now-1d/d",
+                            "text": "minutes",
+                            "value": "m",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Week to date",
-                            "start": "now/w",
+                            "text": "hours",
+                            "value": "h",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Month to date",
-                            "start": "now/M",
+                            "text": "days",
+                            "value": "d",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Year to date",
-                            "start": "now/y",
+                            "text": "years",
+                            "value": "y",
                           },
                         ]
                       }
-                      dateFormat=""
-                      end="now"
-                      isAutoRefreshOnly={false}
-                      isDisabled={true}
-                      isPaused={true}
-                      onTimeChange={[MockFunction]}
-                      recentlyUsedRanges={Array []}
-                      refreshInterval={0}
-                      showUpdateButton={true}
-                      start="now-1d"
-                      timeFormat="HH:mm"
+                      value="h"
                     >
-                      <EuiFlexGroup
-                        className="euiSuperDatePicker__flexWrapper"
-                        gutterSize="s"
-                        responsive={false}
+                      <EuiFormControlLayout
+                        compressed={false}
+                        fullWidth={false}
+                        icon={
+                          Object {
+                            "side": "right",
+                            "type": "arrowDown",
+                          }
+                        }
+                        inputId="select_123"
+                        isLoading={false}
                       >
                         <div
-                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                          className="euiFormControlLayout"
                         >
-                          <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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.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 0112.994 15H3.006A2.005 2.005 0 011 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="euiFormControlLayout__childrenWrapper"
                           >
-                            <div
-                              className="euiFlexItem euiFlexItem--flexGrowZero"
-                            >
-                              <EuiSuperUpdateButton
-                                data-test-subj="superDatePickerApplyTimeButton"
-                                isDisabled={true}
-                                isLoading={false}
-                                needsUpdate={false}
-                                onClick={[Function]}
-                                showTooltip={true}
+                            <EuiValidatableControl>
+                              <select
+                                aria-label="resolutionSelect"
+                                className="euiSelect euiFormControlLayout__append resolutionSelectOption"
+                                id="select_123"
+                                onChange={[Function]}
+                                onMouseUp={[Function]}
+                                value="h"
                               >
-                                <EuiToolTip
-                                  content={
-                                    <EuiI18n
-                                      default="Cannot update"
-                                      token="euiSuperUpdateButton.cannotUpdateTooltip"
-                                    />
-                                  }
-                                  delay="regular"
-                                  position="bottom"
+                                <option
+                                  key="0"
+                                  value="s"
                                 >
-                                  <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 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 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,
-                                  }
+                                  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",
                                 }
-                                type="button"
+                              }
+                              isLoading={false}
+                            >
+                              <div
+                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                               >
-                                <EuiButtonContent
-                                  className="euiButton__content"
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  textProps={
-                                    Object {
-                                      "className": "euiButton__text",
-                                    }
-                                  }
+                                <EuiFormControlLayoutCustomIcon
+                                  size="m"
+                                  type="arrowDown"
                                 >
                                   <span
-                                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                    className="euiFormControlLayoutCustomIcon"
                                   >
                                     <EuiIcon
-                                      className="euiButtonContent__icon"
-                                      color="inherit"
+                                      aria-hidden="true"
+                                      className="euiFormControlLayoutCustomIcon__icon"
                                       size="m"
                                       type="arrowDown"
                                     >
                                       <EuiIconArrowDown
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         role="img"
                                         style={null}
                                       >
                                         <svg
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                           focusable="false"
                                           height={16}
                                           role="img"
@@ -2452,27 +1772,681 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
                                         </svg>
                                       </EuiIconArrowDown>
                                     </EuiIcon>
-                                    <span
-                                      className="euiButton__text"
-                                    >
-                                      Save
-                                    </span>
                                   </span>
-                                </EuiButtonContent>
-                              </button>
-                            </EuiButtonDisplay>
-                          </EuiButton>
+                                </EuiFormControlLayoutCustomIcon>
+                              </div>
+                            </EuiFormControlLayoutIcons>
+                          </div>
                         </div>
-                      </div>
-                    </EuiPopover>
+                      </EuiFormControlLayout>
+                    </EuiSelect>
                   </div>
-                </EuiFlexItem>
+                </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={[MockFunction]}
+              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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.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 0112.994 15H3.006A2.005 2.005 0 011 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 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 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.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                    fillRule="non-zero"
+                                  />
+                                </svg>
+                              </EuiIconArrowDown>
+                            </EuiIcon>
+                            <span
+                              className="euiButton__text"
+                            >
+                              Save
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonDisplay>
+                  </EuiButton>
+                </div>
               </div>
-            </EuiFlexGroup>
+            </EuiPopover>
           </div>
-        </EuiPageHeaderSection>
-      </header>
-    </EuiPageHeader>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
     <EuiFlexGroup
       gutterSize="s"
       justifyContent="flexEnd"
@@ -2640,399 +2614,111 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
     spanValue={1}
     startTime="now-1d"
   >
-    <EuiPageHeader>
-      <header
-        className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+    <EuiFlexGroup
+      gutterSize="s"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <EuiPageHeaderSection>
+        <EuiFlexItem
+          grow={10}
+        >
           <div
-            className="euiPageHeaderSection"
+            className="euiFlexItem euiFlexItem--flexGrow10"
           >
-            <EuiFlexGroup
-              className="search-bar-top-menu"
-            >
+            <Component>
               <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive search-bar-top-menu"
+                className="metrics-search-bar-input"
               >
-                <EuiFlexItem>
-                  <div
-                    className="euiFlexItem"
+                <EuiSearchBar
+                  box={
+                    Object {
+                      "incremental": true,
+                      "placeholder": "Search for metrics",
+                    }
+                  }
+                  defaultQuery=""
+                  onChange={[Function]}
+                >
+                  <EuiFlexGroup
+                    alignItems="center"
+                    gutterSize="m"
+                    wrap={true}
                   >
-                    <Component>
-                      <div>
-                        <EuiSearchBar
-                          box={
-                            Object {
-                              "incremental": true,
-                              "placeholder": "Search for metrics",
-                            }
-                          }
-                          defaultQuery=""
-                          onChange={[Function]}
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                    >
+                      <EuiFlexItem
+                        className="euiSearchBar__searchHolder"
+                        grow={true}
+                      >
+                        <div
+                          className="euiFlexItem euiSearchBar__searchHolder"
                         >
-                          <EuiFlexGroup
-                            alignItems="center"
-                            gutterSize="m"
-                            wrap={true}
+                          <EuiSearchBox
+                            incremental={true}
+                            isInvalid={false}
+                            onSearch={[Function]}
+                            placeholder="Search for metrics"
+                            query=""
                           >
-                            <div
-                              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                            <EuiFieldSearch
+                              aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                              compressed={false}
+                              defaultValue=""
+                              fullWidth={true}
+                              incremental={true}
+                              inputRef={[Function]}
+                              isClearable={true}
+                              isInvalid={false}
+                              isLoading={false}
+                              onSearch={[Function]}
+                              placeholder="Search for metrics"
                             >
-                              <EuiFlexItem
-                                className="euiSearchBar__searchHolder"
-                                grow={true}
+                              <EuiFormControlLayout
+                                compressed={false}
+                                fullWidth={true}
+                                icon="search"
+                                isLoading={false}
                               >
                                 <div
-                                  className="euiFlexItem euiSearchBar__searchHolder"
+                                  className="euiFormControlLayout euiFormControlLayout--fullWidth"
                                 >
-                                  <EuiSearchBox
-                                    incremental={true}
-                                    isInvalid={false}
-                                    onSearch={[Function]}
-                                    placeholder="Search for metrics"
-                                    query=""
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
                                   >
-                                    <EuiFieldSearch
-                                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                                      compressed={false}
-                                      defaultValue=""
-                                      fullWidth={true}
-                                      incremental={true}
-                                      inputRef={[Function]}
-                                      isClearable={true}
+                                    <EuiValidatableControl
                                       isInvalid={false}
+                                    >
+                                      <input
+                                        aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                                        className="euiFieldSearch euiFieldSearch--fullWidth"
+                                        defaultValue=""
+                                        onKeyUp={[Function]}
+                                        placeholder="Search for metrics"
+                                        type="search"
+                                      />
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons
+                                      compressed={false}
+                                      icon="search"
                                       isLoading={false}
-                                      onSearch={[Function]}
-                                      placeholder="Search for metrics"
                                     >
-                                      <EuiFormControlLayout
-                                        compressed={false}
-                                        fullWidth={true}
-                                        icon="search"
-                                        isLoading={false}
+                                      <div
+                                        className="euiFormControlLayoutIcons"
                                       >
-                                        <div
-                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                        <EuiFormControlLayoutCustomIcon
+                                          size="m"
+                                          type="search"
                                         >
-                                          <div
-                                            className="euiFormControlLayout__childrenWrapper"
-                                          >
-                                            <EuiValidatableControl
-                                              isInvalid={false}
-                                            >
-                                              <input
-                                                aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                                                className="euiFieldSearch euiFieldSearch--fullWidth"
-                                                defaultValue=""
-                                                onKeyUp={[Function]}
-                                                placeholder="Search for metrics"
-                                                type="search"
-                                              />
-                                            </EuiValidatableControl>
-                                            <EuiFormControlLayoutIcons
-                                              compressed={false}
-                                              icon="search"
-                                              isLoading={false}
-                                            >
-                                              <div
-                                                className="euiFormControlLayoutIcons"
-                                              >
-                                                <EuiFormControlLayoutCustomIcon
-                                                  size="m"
-                                                  type="search"
-                                                >
-                                                  <span
-                                                    className="euiFormControlLayoutCustomIcon"
-                                                  >
-                                                    <EuiIcon
-                                                      aria-hidden="true"
-                                                      className="euiFormControlLayoutCustomIcon__icon"
-                                                      size="m"
-                                                      type="search"
-                                                    >
-                                                      <EuiIconEmpty
-                                                        aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                        focusable="false"
-                                                        role="img"
-                                                        style={null}
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                          focusable="false"
-                                                          height={16}
-                                                          role="img"
-                                                          style={null}
-                                                          viewBox="0 0 16 16"
-                                                          width={16}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        />
-                                                      </EuiIconEmpty>
-                                                    </EuiIcon>
-                                                  </span>
-                                                </EuiFormControlLayoutCustomIcon>
-                                              </div>
-                                            </EuiFormControlLayoutIcons>
-                                          </div>
-                                        </div>
-                                      </EuiFormControlLayout>
-                                    </EuiFieldSearch>
-                                  </EuiSearchBox>
-                                </div>
-                              </EuiFlexItem>
-                            </div>
-                          </EuiFlexGroup>
-                        </EuiSearchBar>
-                      </div>
-                    </Component>
-                  </div>
-                </EuiFlexItem>
-              </div>
-            </EuiFlexGroup>
-          </div>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>
-          <div
-            className="euiPageHeaderSection"
-          >
-            <EuiFlexGroup
-              gutterSize="s"
-            >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-              >
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <div
-                      className="resolutionSelect"
-                    >
-                      <EuiFieldText
-                        append={
-                          <EuiSelect
-                            aria-label="resolutionSelect"
-                            id="select_123"
-                            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"
-                        disabled={false}
-                        isInvalid={false}
-                        onChange={[Function]}
-                        prepend="Span Interval"
-                        value={1}
-                      >
-                        <EuiFormControlLayout
-                          append={
-                            <EuiSelect
-                              aria-label="resolutionSelect"
-                              id="select_123"
-                              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"
-                                  disabled={false}
-                                  onChange={[Function]}
-                                  type="text"
-                                  value={1}
-                                />
-                              </EuiValidatableControl>
-                              <EuiFormControlLayoutIcons />
-                            </div>
-                            <EuiSelect
-                              aria-label="resolutionSelect"
-                              className="euiFormControlLayout__append"
-                              id="select_123"
-                              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",
-                                  }
-                                }
-                                inputId="select_123"
-                                isLoading={false}
-                              >
-                                <div
-                                  className="euiFormControlLayout"
-                                >
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <EuiValidatableControl>
-                                      <select
-                                        aria-label="resolutionSelect"
-                                        className="euiSelect euiFormControlLayout__append"
-                                        id="select_123"
-                                        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"
+                                          <span
+                                            className="euiFormControlLayoutCustomIcon"
                                           >
                                             <EuiIcon
                                               aria-hidden="true"
                                               className="euiFormControlLayoutCustomIcon__icon"
                                               size="m"
-                                              type="arrowDown"
+                                              type="search"
                                             >
                                               <EuiIconEmpty
                                                 aria-hidden={true}
@@ -3061,646 +2747,921 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                                   </div>
                                 </div>
                               </EuiFormControlLayout>
-                            </EuiSelect>
-                          </div>
-                        </EuiFormControlLayout>
-                      </EuiFieldText>
+                            </EuiFieldSearch>
+                          </EuiSearchBox>
+                        </div>
+                      </EuiFlexItem>
                     </div>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <EuiSuperDatePicker
-                      commonlyUsedRanges={
+                  </EuiFlexGroup>
+                </EuiSearchBar>
+              </div>
+            </Component>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <div
+              className="resolutionSelect"
+            >
+              <EuiFieldText
+                append={
+                  <EuiSelect
+                    aria-label="resolutionSelect"
+                    className="resolutionSelectOption"
+                    id="select_123"
+                    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"
+                disabled={false}
+                isInvalid={false}
+                onChange={[Function]}
+                prepend="Span Interval"
+                value={1}
+              >
+                <EuiFormControlLayout
+                  append={
+                    <EuiSelect
+                      aria-label="resolutionSelect"
+                      className="resolutionSelectOption"
+                      id="select_123"
+                      onChange={[Function]}
+                      options={
                         Array [
                           Object {
-                            "end": "now/d",
-                            "label": "Today",
-                            "start": "now/d",
+                            "text": "seconds",
+                            "value": "s",
                           },
                           Object {
-                            "end": "now/w",
-                            "label": "This week",
-                            "start": "now/w",
+                            "text": "minutes",
+                            "value": "m",
                           },
                           Object {
-                            "end": "now/M",
-                            "label": "This month",
-                            "start": "now/M",
+                            "text": "hours",
+                            "value": "h",
                           },
                           Object {
-                            "end": "now/y",
-                            "label": "This year",
-                            "start": "now/y",
+                            "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"
+                          disabled={false}
+                          onChange={[Function]}
+                          type="text"
+                          value={1}
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons />
+                    </div>
+                    <EuiSelect
+                      aria-label="resolutionSelect"
+                      className="euiFormControlLayout__append resolutionSelectOption"
+                      id="select_123"
+                      key="0/.0"
+                      onChange={[Function]}
+                      options={
+                        Array [
+                          Object {
+                            "text": "seconds",
+                            "value": "s",
                           },
                           Object {
-                            "end": "now-1d/d",
-                            "label": "Yesterday",
-                            "start": "now-1d/d",
+                            "text": "minutes",
+                            "value": "m",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Week to date",
-                            "start": "now/w",
+                            "text": "hours",
+                            "value": "h",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Month to date",
-                            "start": "now/M",
+                            "text": "days",
+                            "value": "d",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Year to date",
-                            "start": "now/y",
+                            "text": "years",
+                            "value": "y",
                           },
                         ]
                       }
-                      dateFormat=""
-                      end="now"
-                      isAutoRefreshOnly={false}
-                      isDisabled={false}
-                      isPaused={true}
-                      onTimeChange={[MockFunction]}
-                      recentlyUsedRanges={Array []}
-                      refreshInterval={0}
-                      showUpdateButton={true}
-                      start="now-1d"
-                      timeFormat="HH:mm"
+                      value="h"
                     >
-                      <EuiFlexGroup
-                        className="euiSuperDatePicker__flexWrapper"
-                        gutterSize="s"
-                        responsive={false}
+                      <EuiFormControlLayout
+                        compressed={false}
+                        fullWidth={false}
+                        icon={
+                          Object {
+                            "side": "right",
+                            "type": "arrowDown",
+                          }
+                        }
+                        inputId="select_123"
+                        isLoading={false}
                       >
                         <div
-                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                          className="euiFormControlLayout"
                         >
-                          <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-1d"
-                                  />
+                          <div
+                            className="euiFormControlLayout__childrenWrapper"
+                          >
+                            <EuiValidatableControl>
+                              <select
+                                aria-label="resolutionSelect"
+                                className="euiSelect euiFormControlLayout__append resolutionSelectOption"
+                                id="select_123"
+                                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"
                               >
-                                <div
-                                  className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                                <EuiFormControlLayoutCustomIcon
+                                  size="m"
+                                  type="arrowDown"
                                 >
-                                  <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-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={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"
+                                  <span
+                                    className="euiFormControlLayoutCustomIcon"
                                   >
-                                    <EuiDatePickerRange
-                                      className="euiDatePickerRange--inGroup"
-                                      endDateControl={<div />}
-                                      iconType={false}
-                                      isCustom={true}
-                                      startDateControl={<div />}
+                                    <EuiIcon
+                                      aria-hidden="true"
+                                      className="euiFormControlLayoutCustomIcon__icon"
+                                      size="m"
+                                      type="arrowDown"
                                     >
-                                      <div
-                                        className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                      <EuiIconEmpty
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        role="img"
+                                        style={null}
                                       >
-                                        <button
-                                          className="euiSuperDatePicker__prettyFormat"
-                                          data-test-subj="superDatePickerShowDatesButton"
-                                          disabled={false}
-                                          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}
+                                        <svg
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                          focusable="false"
+                                          height={16}
+                                          role="img"
+                                          style={null}
+                                          viewBox="0 0 16 16"
+                                          width={16}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        />
+                                      </EuiIconEmpty>
+                                    </EuiIcon>
+                                  </span>
+                                </EuiFormControlLayoutCustomIcon>
+                              </div>
+                            </EuiFormControlLayoutIcons>
+                          </div>
+                        </div>
+                      </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={false}
+              isPaused={true}
+              onTimeChange={[MockFunction]}
+              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={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-1d"
+                          />
+                        }
+                      >
+                        <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-1d"
                           >
-                            <div
-                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            <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"
                             >
-                              <EuiSuperUpdateButton
-                                data-test-subj="superDatePickerApplyTimeButton"
-                                isDisabled={false}
-                                isLoading={false}
-                                needsUpdate={false}
-                                onClick={[Function]}
-                                showTooltip={true}
+                              <div
+                                className="euiPopover euiPopover--anchorDownLeft"
                               >
-                                <EuiToolTip
-                                  delay="regular"
-                                  position="bottom"
+                                <div
+                                  className="euiPopover__anchor euiQuickSelectPopover__anchor"
                                 >
-                                  <span
-                                    className="euiToolTipAnchor"
-                                    onKeyUp={[Function]}
-                                    onMouseOut={[Function]}
-                                    onMouseOver={[Function]}
+                                  <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",
+                                      }
+                                    }
                                   >
-                                    <EuiButton
-                                      className="euiSuperUpdateButton"
-                                      color="primary"
-                                      data-test-subj="superDatePickerApplyTimeButton"
-                                      fill={true}
-                                      iconType="refresh"
-                                      isDisabled={false}
-                                      isLoading={false}
-                                      onBlur={[Function]}
+                                    <button
+                                      aria-label="Date quick select"
+                                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      disabled={false}
                                       onClick={[Function]}
-                                      onFocus={[Function]}
-                                      textProps={
-                                        Object {
-                                          "className": "euiSuperUpdateButton__text",
-                                        }
-                                      }
+                                      type="button"
                                     >
-                                      <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]}
+                                      <EuiButtonContent
+                                        className="euiButtonEmpty__content"
+                                        iconSide="right"
+                                        iconSize="s"
+                                        iconType="arrowDown"
                                         textProps={
                                           Object {
-                                            "className": "euiSuperUpdateButton__text",
+                                            "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
                                           }
                                         }
-                                        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"
+                                        <span
+                                          className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                                         >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="left"
-                                            iconType="refresh"
-                                            isLoading={false}
-                                            textProps={
-                                              Object {
-                                                "className": "euiButton__text euiSuperUpdateButton__text",
-                                              }
-                                            }
+                                          <EuiIcon
+                                            className="euiButtonContent__icon"
+                                            color="inherit"
+                                            size="s"
+                                            type="arrowDown"
                                           >
-                                            <span
-                                              className="euiButtonContent euiButton__content"
+                                            <EuiIconEmpty
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
                                             >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                color="inherit"
-                                                size="m"
-                                                type="refresh"
+                                              <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}
                                               >
-                                                <EuiIconEmpty
+                                                <svg
                                                   aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                   focusable="false"
+                                                  height={16}
                                                   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>
+                                                  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 1 day
+                                  <span
+                                    className="euiSuperDatePicker__prettyFormatLink"
+                                  >
+                                    <EuiI18n
+                                      default="Show dates"
+                                      token="euiSuperDatePicker.showDatesButtonLabel"
+                                    >
+                                      Show dates
+                                    </EuiI18n>
                                   </span>
-                                </EuiToolTip>
-                              </EuiSuperUpdateButton>
-                            </div>
-                          </EuiFlexItem>
+                                </button>
+                              </div>
+                            </EuiDatePickerRange>
+                            <EuiFormControlLayoutIcons />
+                          </div>
                         </div>
-                      </EuiFlexGroup>
-                    </EuiSuperDatePicker>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                      </EuiFormControlLayout>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiFlexItem
+                    grow={false}
                   >
-                    <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="euiFlexItem euiFlexItem--flexGrowZero"
                     >
-                      <div
-                        className="euiPopover euiPopover--anchorDownCenter"
+                      <EuiSuperUpdateButton
+                        data-test-subj="superDatePickerApplyTimeButton"
+                        isDisabled={false}
+                        isLoading={false}
+                        needsUpdate={false}
+                        onClick={[Function]}
+                        showTooltip={true}
                       >
-                        <div
-                          className="euiPopover__anchor"
+                        <EuiToolTip
+                          delay="regular"
+                          position="bottom"
                         >
-                          <EuiButton
-                            data-test-subj="metrics__saveManagementPopover"
-                            iconSide="right"
-                            iconType="arrowDown"
-                            isDisabled={false}
-                            onClick={[Function]}
+                          <span
+                            className="euiToolTipAnchor"
+                            onKeyUp={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
                           >
-                            <EuiButtonDisplay
-                              baseClassName="euiButton"
-                              data-test-subj="metrics__saveManagementPopover"
-                              disabled={false}
-                              element="button"
-                              iconSide="right"
-                              iconType="arrowDown"
+                            <EuiButton
+                              className="euiSuperUpdateButton"
+                              color="primary"
+                              data-test-subj="superDatePickerApplyTimeButton"
+                              fill={true}
+                              iconType="refresh"
                               isDisabled={false}
+                              isLoading={false}
+                              onBlur={[Function]}
                               onClick={[Function]}
-                              type="button"
+                              onFocus={[Function]}
+                              textProps={
+                                Object {
+                                  "className": "euiSuperUpdateButton__text",
+                                }
+                              }
                             >
-                              <button
-                                className="euiButton euiButton--primary"
-                                data-test-subj="metrics__saveManagementPopover"
+                              <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]}
-                                style={
+                                onFocus={[Function]}
+                                textProps={
                                   Object {
-                                    "minWidth": undefined,
+                                    "className": "euiSuperUpdateButton__text",
                                   }
                                 }
                                 type="button"
                               >
-                                <EuiButtonContent
-                                  className="euiButton__content"
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  textProps={
+                                <button
+                                  className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
+                                  data-test-subj="superDatePickerApplyTimeButton"
+                                  disabled={false}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  style={
                                     Object {
-                                      "className": "euiButton__text",
+                                      "minWidth": undefined,
                                     }
                                   }
+                                  type="button"
                                 >
-                                  <span
-                                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    iconType="refresh"
+                                    isLoading={false}
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text euiSuperUpdateButton__text",
+                                      }
+                                    }
                                   >
-                                    <EuiIcon
-                                      className="euiButtonContent__icon"
-                                      color="inherit"
-                                      size="m"
-                                      type="arrowDown"
+                                    <span
+                                      className="euiButtonContent euiButton__content"
                                     >
-                                      <EuiIconEmpty
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                        focusable="false"
-                                        role="img"
-                                        style={null}
+                                      <EuiIcon
+                                        className="euiButtonContent__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="refresh"
                                       >
-                                        <svg
+                                        <EuiIconEmpty
                                           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
+                                        >
+                                          <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>
-                                  </span>
-                                </EuiButtonContent>
-                              </button>
-                            </EuiButtonDisplay>
-                          </EuiButton>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </div>
-                </EuiFlexItem>
+                                  </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={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"
+                >
+                  <EuiButton
+                    data-test-subj="metrics__saveManagementPopover"
+                    iconSide="right"
+                    iconType="arrowDown"
+                    isDisabled={false}
+                    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>
+                </div>
               </div>
-            </EuiFlexGroup>
+            </EuiPopover>
           </div>
-        </EuiPageHeaderSection>
-      </header>
-    </EuiPageHeader>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
     <EuiFlexGroup
       gutterSize="s"
       justifyContent="flexEnd"
diff --git a/public/components/metrics/top_menu/top_menu.scss b/public/components/metrics/top_menu/top_menu.scss
index c69f202452..ff247f31d3 100644
--- a/public/components/metrics/top_menu/top_menu.scss
+++ b/public/components/metrics/top_menu/top_menu.scss
@@ -4,17 +4,13 @@
  */
 
 .resolutionSelect {
-    .euiFormControlLayout {
-        .euiFormControlLayout {
-            width: 116px;
-        }
-    }
+  max-width: 300px;
 }
 
-.resolutionSelectText {
-    width: 70px;
+.metrics-search-bar-input {
+  max-width: 500px;
 }
 
-.search-bar-top-menu{
-   width:25vw;
-}
\ No newline at end of file
+.metrics-search-bar-datepicker {
+  width: 500px;
+}
diff --git a/public/components/metrics/top_menu/top_menu.tsx b/public/components/metrics/top_menu/top_menu.tsx
index 295e8d28c8..2a530926e5 100644
--- a/public/components/metrics/top_menu/top_menu.tsx
+++ b/public/components/metrics/top_menu/top_menu.tsx
@@ -4,40 +4,41 @@
  */
 
 import {
-  EuiPageHeader,
-  EuiPageHeaderSection,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiComboBoxOptionOption,
+  EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFieldText,
+  EuiPopover,
+  EuiPopoverFooter,
   EuiSelect,
+  EuiSpacer,
   EuiSuperDatePicker,
-  ShortDate,
   OnTimeChangeProps,
-  EuiButton,
-  EuiComboBoxOptionOption,
-  EuiButtonEmpty,
-  EuiPopover,
-  EuiPopoverFooter,
+  ShortDate,
 } from '@elastic/eui';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { uiSettingsService } from '../../../../common/utils';
-import React, { useEffect, useState } from 'react';
-import { MetricType } from '../../../../common/types/metrics';
+import { CoreStart } from '../../../../../../src/core/public';
+import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
 import { resolutionOptions } from '../../../../common/constants/metrics';
-import './top_menu.scss';
+import { MetricType } from '../../../../common/types/metrics';
+import { uiSettingsService } from '../../../../common/utils';
+import SavedObjects from '../../../services/saved_objects/event_analytics/saved_objects';
+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 {
   allAvailableMetricsSelector,
   metricsLayoutSelector,
   selectMetric,
 } from '../redux/slices/metrics_slice';
 import { SearchBar } from '../sidebar/search_bar';
-import { CoreStart } from '../../../../../../src/core/public';
-import SavedObjects from '../../../services/saved_objects/event_analytics/saved_objects';
-import { sortMetricLayout, updateMetricsWithSelections } from '../helpers/utils';
-import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
 import { MetricsExportPanel } from './metrics_export_panel';
-import { addVizToPanels, uuidRx } from '../../custom_panels/redux/panel_slice';
+import './top_menu.scss';
 
 interface TopMenuProps {
   http: CoreStart['http'];
@@ -93,7 +94,7 @@ export const TopMenu = ({
   const [originalPanelVisualizations, setOriginalPanelVisualizations] = useState<MetricType[]>([]);
   const [isSavePanelOpen, setIsSavePanelOpen] = useState(false);
   const [selectedPanelOptions, setSelectedPanelOptions] = useState<
-    EuiComboBoxOptionOption<unknown>[] | undefined
+    Array<EuiComboBoxOptionOption<unknown>> | undefined
   >([]);
 
   // toggle between panel edit mode
@@ -159,7 +160,6 @@ export const TopMenu = ({
 
   const handleSavingObjects = async () => {
     let savedMetricIds = [];
-    let savedMetricsInPanels = [];
 
     try {
       savedMetricIds = await Promise.all(
@@ -172,9 +172,12 @@ export const TopMenu = ({
           );
 
           if (metricLayout.metricType === 'prometheusMetric') {
-            return await savedObjects.createSavedVisualization(updatedMetric);
+            return OSDSavedVisualizationClient.getInstance().create(updatedMetric);
           } else {
-            return await savedObjects.updateSavedVisualizationById({
+            return getSavedObjectsClient({
+              objectId: metricLayout.id,
+              objectType: 'savedVisualization',
+            }).update({
               ...updatedMetric,
               objectId: metricLayout.id,
             });
@@ -184,7 +187,8 @@ export const TopMenu = ({
     } catch (e) {
       const message = 'Issue in saving metrics';
       console.error(message, e);
-      setToast('Issue in saving metrics', 'danger');
+      setToast(message, 'danger');
+      return;
     }
 
     setToast('Saved metrics successfully!');
@@ -195,6 +199,7 @@ export const TopMenu = ({
         const soPanels = selectedPanelOptions.filter((panel) => uuidRx.test(panel.panel.id));
         const opsPanels = selectedPanelOptions.filter((panel) => !uuidRx.test(panel.panel.id));
 
+        dispatch(addMultipleVizToPanels(soPanels, allMetricIds));
         const savedMetricsInOpsPanels = await Promise.all(
           opsPanels.map((panel) => {
             return http.post(`${CUSTOM_PANELS_API_PREFIX}/visualizations/multiple`, {
@@ -205,107 +210,97 @@ export const TopMenu = ({
             });
           })
         );
-
-        allMetricIds.forEach((metricId) => {
-          dispatch(addVizToPanels(soPanels, metricId));
-        });
       } catch (e) {
         const message = 'Issue in saving metrics to panels';
         console.error(message, e);
         setToast('Issue in saving metrics', 'danger');
       }
-      setToast('Saved metrics to panels successfully!');
+      setToast('Saved metrics to Dashboards successfully!');
     }
   };
 
   return (
     <>
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiFlexGroup className="search-bar-top-menu">
-            <EuiFlexItem>
-              <SearchBar setSearch={setSearch} />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>
-          <EuiFlexGroup gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <div className="resolutionSelect">
-                <EuiFieldText
-                  className="resolutionSelectText"
-                  prepend="Span Interval"
-                  value={spanValue}
-                  isInvalid={spanValue < 1}
-                  onChange={(e) => setSpanValue(e.target.value)}
-                  append={
-                    <EuiSelect
-                      id={resolutionSelectId}
-                      options={resolutionOptions}
-                      value={resolutionValue}
-                      onChange={(e) => onResolutionChange(e)}
-                      aria-label="resolutionSelect"
-                    />
-                  }
-                  disabled={IsTopPanelDisabled}
-                  aria-label="resolutionField"
+      <EuiFlexGroup gutterSize="s">
+        <EuiFlexItem grow={10}>
+          <SearchBar setSearch={setSearch} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <div className="resolutionSelect">
+            <EuiFieldText
+              className="resolutionSelectText"
+              prepend="Span Interval"
+              value={spanValue}
+              isInvalid={spanValue < 1}
+              onChange={(e) => setSpanValue(e.target.value)}
+              append={
+                <EuiSelect
+                  className="resolutionSelectOption"
+                  id={resolutionSelectId}
+                  options={resolutionOptions}
+                  value={resolutionValue}
+                  onChange={(e) => onResolutionChange(e)}
+                  aria-label="resolutionSelect"
                 />
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiSuperDatePicker
-                dateFormat={uiSettingsService.get('dateFormat')}
-                start={startTime}
-                end={endTime}
-                onTimeChange={onDatePickerChange}
-                recentlyUsedRanges={recentlyUsedRanges}
-                isDisabled={IsTopPanelDisabled}
-              />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiPopover
-                button={Savebutton}
-                isOpen={isSavePanelOpen}
-                closePopover={() => setIsSavePanelOpen(false)}
-              >
-                <MetricsExportPanel
-                  http={http}
-                  visualizationsMetaData={visualizationsMetaData}
-                  setVisualizationsMetaData={setVisualizationsMetaData}
-                  sortedMetricsLayout={sortedMetricsLayout}
-                  selectedPanelOptions={selectedPanelOptions}
-                  setSelectedPanelOptions={setSelectedPanelOptions}
-                />
-                <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>
-        </EuiPageHeaderSection>
-      </EuiPageHeader>
+              }
+              disabled={IsTopPanelDisabled}
+              aria-label="resolutionField"
+            />
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem className="metrics-search-bar-datepicker">
+          <EuiSuperDatePicker
+            dateFormat={uiSettingsService.get('dateFormat')}
+            start={startTime}
+            end={endTime}
+            onTimeChange={onDatePickerChange}
+            recentlyUsedRanges={recentlyUsedRanges}
+            isDisabled={IsTopPanelDisabled}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiPopover
+            button={Savebutton}
+            isOpen={isSavePanelOpen}
+            closePopover={() => setIsSavePanelOpen(false)}
+          >
+            <MetricsExportPanel
+              http={http}
+              visualizationsMetaData={visualizationsMetaData}
+              setVisualizationsMetaData={setVisualizationsMetaData}
+              sortedMetricsLayout={sortedMetricsLayout}
+              selectedPanelOptions={selectedPanelOptions}
+              setSelectedPanelOptions={setSelectedPanelOptions}
+            />
+            <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 ? (
           <>
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 4d3fbeeb05..ae60cd7409 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
@@ -134,7 +134,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
               >
                 <a
                   class="euiButton euiButton--primary euiButton--fill"
-                  href="#/notebooks/create"
+                  href="#/create"
                   rel="noreferrer"
                 >
                   <span
@@ -429,7 +429,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     >
                       <a
                         class="euiLink euiLink--primary"
-                        href="#/notebooks/id-0"
+                        href="#/id-0"
                         rel="noreferrer"
                       >
                         path-0
@@ -504,7 +504,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     >
                       <a
                         class="euiLink euiLink--primary"
-                        href="#/notebooks/id-1"
+                        href="#/id-1"
                         rel="noreferrer"
                       >
                         path-1
@@ -579,7 +579,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     >
                       <a
                         class="euiLink euiLink--primary"
-                        href="#/notebooks/id-2"
+                        href="#/id-2"
                         rel="noreferrer"
                       >
                         path-2
@@ -654,7 +654,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     >
                       <a
                         class="euiLink euiLink--primary"
-                        href="#/notebooks/id-3"
+                        href="#/id-3"
                         rel="noreferrer"
                       >
                         path-3
@@ -729,7 +729,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     >
                       <a
                         class="euiLink euiLink--primary"
-                        href="#/notebooks/id-4"
+                        href="#/id-4"
                         rel="noreferrer"
                       >
                         path-4
@@ -1025,7 +1025,7 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
               >
                 <a
                   class="euiButton euiButton--primary euiButton--fill"
-                  href="#/notebooks/create"
+                  href="#/create"
                   rel="noreferrer"
                 >
                   <span
@@ -1085,7 +1085,7 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
             <a
               class="euiButton euiButton--primary"
               data-test-subj="note-table-empty-state-create-notebook-button"
-              href="#/notebooks/create"
+              href="#/create"
               rel="noreferrer"
             >
               <span
diff --git a/public/components/notebooks/components/helpers/__tests__/legacy_route_helpers.test.ts b/public/components/notebooks/components/helpers/__tests__/legacy_route_helpers.test.ts
index c4d1a78554..c156d73e73 100644
--- a/public/components/notebooks/components/helpers/__tests__/legacy_route_helpers.test.ts
+++ b/public/components/notebooks/components/helpers/__tests__/legacy_route_helpers.test.ts
@@ -26,10 +26,10 @@ describe('Test legacy route helpers', () => {
       },
     ] as Location[];
     const expected = [
-      '/app/observability-dashboards#/notebooks/GQ5icXwBJCegTOBKO4Um',
-      '/app/observability-dashboards#/notebooks/clPiPXwBEM7l9gC0xTpA?view=view_both',
-      `/testBasePath/app/observability-dashboards#/notebooks/GQ5icXwBJCegTOBKO4Um?_g=(time:(from:'2021-10-15T20:25:09.556Z',to:'2021-10-15T20:55:09.556Z'))&view=output_only&security_tenant=global`,
-    ] as RedirectProps['to'][];
+      '/app/observability-notebooks#/GQ5icXwBJCegTOBKO4Um',
+      '/app/observability-notebooks#/clPiPXwBEM7l9gC0xTpA?view=view_both',
+      `/testBasePath/app/observability-notebooks#/GQ5icXwBJCegTOBKO4Um?_g=(time:(from:'2021-10-15T20:25:09.556Z',to:'2021-10-15T20:55:09.556Z'))&view=output_only&security_tenant=global`,
+    ] as Array<RedirectProps['to']>;
     expect(locations.map((location) => convertLegacyNotebooksUrl(location))).toEqual(expected);
   });
 });
diff --git a/public/components/notebooks/components/helpers/legacy_route_helpers.ts b/public/components/notebooks/components/helpers/legacy_route_helpers.ts
index 8bda04cc59..1201d9f223 100644
--- a/public/components/notebooks/components/helpers/legacy_route_helpers.ts
+++ b/public/components/notebooks/components/helpers/legacy_route_helpers.ts
@@ -3,11 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { observabilityID } from "../../../../../common/constants/shared";
+import { observabilityNotebookID } from '../../../../../common/constants/shared';
 
-export const convertLegacyNotebooksUrl = (location: Location)=> {
-  const pathname = location.pathname.replace('notebooks-dashboards', observabilityID);
-  const hash = `#/notebooks${location.hash.replace(/^#/, '')}${
+export const convertLegacyNotebooksUrl = (location: Location) => {
+  const pathname = location.pathname.replace('notebooks-dashboards', observabilityNotebookID);
+  const hash = `${location.hash}${
     location.hash.includes('?') ? location.search.replace(/^\?/, '&') : location.search
   }`;
   return pathname + hash;
diff --git a/public/components/notebooks/components/helpers/reporting_context_menu_helper.tsx b/public/components/notebooks/components/helpers/reporting_context_menu_helper.tsx
index a174da65b8..c8f3ce1869 100644
--- a/public/components/notebooks/components/helpers/reporting_context_menu_helper.tsx
+++ b/public/components/notebooks/components/helpers/reporting_context_menu_helper.tsx
@@ -121,8 +121,7 @@ export const generateInContextReport = async (
   toggleReportingLoadingModal(true);
   let baseUrl =
     location.pathname +
-    location.hash.replace(/\?view=(view_both|input_only|output_only)/, '') +
-    '?view=output_only';
+    location.hash.replace(/view=(view_both|input_only|output_only)/, 'view=output_only');
   // Add selected tenant info to url
   try {
     const tenant = await getTenantInfoIfExists();
diff --git a/public/components/notebooks/components/main.tsx b/public/components/notebooks/components/main.tsx
index cd70332d28..82625a86cc 100644
--- a/public/components/notebooks/components/main.tsx
+++ b/public/components/notebooks/components/main.tsx
@@ -2,7 +2,6 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-/* eslint-disable no-console */
 
 import { EuiGlobalToastList, EuiLink } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
@@ -17,7 +16,6 @@ import {
   NOTEBOOKS_API_PREFIX,
   NOTEBOOKS_DOCUMENTATION_URL,
 } from '../../../../common/constants/notebooks';
-import { ObservabilitySideBar } from '../../common/side_nav';
 import { Notebook } from './notebook';
 import { NoteTable } from './note_table';
 
@@ -95,7 +93,7 @@ export class Main extends React.Component<MainProps, MainState> {
   createNotebook = (newNoteName: string) => {
     if (newNoteName.length >= 50 || newNoteName.length === 0) {
       this.setToast('Invalid notebook name', 'danger');
-      window.location.assign('#/notebooks');
+      window.location.assign('#/');
       return;
     }
     const newNoteObject = {
@@ -108,7 +106,7 @@ export class Main extends React.Component<MainProps, MainState> {
       })
       .then(async (res) => {
         this.setToast(`Notebook "${newNoteName}" successfully created!`);
-        window.location.assign(`#/notebooks/${res}`);
+        window.location.assign(`#/${res}`);
       })
       .catch((err) => {
         this.setToast(
@@ -123,7 +121,7 @@ export class Main extends React.Component<MainProps, MainState> {
   };
 
   // Renames an existing notebook
-  renameNotebook = (editedNoteName: string, editedNoteID: string) => {
+  renameNotebook = (editedNoteName: string, editedNoteID: string): Promise<any> => {
     if (editedNoteName.length >= 50 || editedNoteName.length === 0) {
       this.setToast('Invalid notebook name', 'danger');
       return;
@@ -145,6 +143,7 @@ export class Main extends React.Component<MainProps, MainState> {
           return { data: newData };
         });
         this.setToast(`Notebook successfully renamed into "${editedNoteName}"`);
+        return res;
       })
       .catch((err) => {
         this.setToast(
@@ -310,28 +309,26 @@ export class Main extends React.Component<MainProps, MainState> {
           <Switch>
             <Route
               exact
-              path={['/notebooks/create', '/notebooks']}
+              path={['/create', '/']}
               render={(props) => (
-                <ObservabilitySideBar>
-                  <NoteTable
-                    loading={this.state.loading}
-                    fetchNotebooks={this.fetchNotebooks}
-                    addSampleNotebooks={this.addSampleNotebooks}
-                    notebooks={this.state.data}
-                    createNotebook={this.createNotebook}
-                    renameNotebook={this.renameNotebook}
-                    cloneNotebook={this.cloneNotebook}
-                    deleteNotebook={this.deleteNotebook}
-                    parentBreadcrumb={this.props.parentBreadcrumb}
-                    setBreadcrumbs={this.props.setBreadcrumbs}
-                    setToast={this.setToast}
-                  />
-                </ObservabilitySideBar>
+                <NoteTable
+                  loading={this.state.loading}
+                  fetchNotebooks={this.fetchNotebooks}
+                  addSampleNotebooks={this.addSampleNotebooks}
+                  notebooks={this.state.data}
+                  createNotebook={this.createNotebook}
+                  renameNotebook={this.renameNotebook}
+                  cloneNotebook={this.cloneNotebook}
+                  deleteNotebook={this.deleteNotebook}
+                  parentBreadcrumb={this.props.parentBreadcrumb}
+                  setBreadcrumbs={this.props.setBreadcrumbs}
+                  setToast={this.setToast}
+                />
               )}
             />
             <Route
               exact
-              path="/notebooks/:id"
+              path="/:id"
               render={(props) => (
                 <Notebook
                   pplService={this.props.pplService}
@@ -344,8 +341,8 @@ export class Main extends React.Component<MainProps, MainState> {
                   cloneNotebook={this.cloneNotebook}
                   deleteNotebook={this.deleteNotebook}
                   setToast={this.setToast}
-                  location={this.props.location}
-                  history={this.props.history}
+                  location={props.location}
+                  history={props.history}
                 />
               )}
             />
diff --git a/public/components/notebooks/components/note_table.tsx b/public/components/notebooks/components/note_table.tsx
index 3c5da6df8f..97ea434f7d 100644
--- a/public/components/notebooks/components/note_table.tsx
+++ b/public/components/notebooks/components/note_table.tsx
@@ -74,15 +74,15 @@ export function NoteTable(props: NoteTableProps) {
       props.parentBreadcrumb,
       {
         text: 'Notebooks',
-        href: '#/notebooks',
+        href: '#/',
       },
     ]);
     props.fetchNotebooks();
   }, []);
 
   useEffect(() => {
-    const url = window.location.hash.split('/')
-    if (url[url.length-1] === 'create') { 
+    const url = window.location.hash.split('/');
+    if (url[url.length - 1] === 'create') {
       createNote();
     }
   }, [location]);
@@ -125,7 +125,7 @@ export function NoteTable(props: NoteTableProps) {
       getCustomModal(
         onCreate,
         () => {
-          closeModal()
+          closeModal();
           history.goBack();
         },
         'Name',
@@ -253,7 +253,7 @@ export function NoteTable(props: NoteTableProps) {
       sortable: true,
       truncateText: true,
       render: (value, record) => (
-        <EuiLink href={`#/notebooks/${record.id}`}>{_.truncate(value, { length: 100 })}</EuiLink>
+        <EuiLink href={`#/${record.id}`}>{_.truncate(value, { length: 100 })}</EuiLink>
       ),
     },
     {
@@ -319,7 +319,7 @@ export function NoteTable(props: NoteTableProps) {
                     </EuiPopover>
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiButton fill href="#/notebooks/create">
+                    <EuiButton fill href="#/create">
                       Create notebook
                     </EuiButton>
                   </EuiFlexItem>
@@ -380,7 +380,8 @@ export function NoteTable(props: NoteTableProps) {
                 <EuiSpacer size="m" />
                 <EuiFlexGroup justifyContent="center">
                   <EuiFlexItem grow={false}>
-                    <EuiButton href="#/notebooks/create"
+                    <EuiButton
+                      href="#/create"
                       data-test-subj="note-table-empty-state-create-notebook-button"
                       fullWidth={false}
                     >
diff --git a/public/components/notebooks/components/notebook.tsx b/public/components/notebooks/components/notebook.tsx
index 2d63e61ca8..a68f87c46f 100644
--- a/public/components/notebooks/components/notebook.tsx
+++ b/public/components/notebooks/components/notebook.tsx
@@ -75,7 +75,7 @@ type NotebookProps = {
   http: CoreStart['http'];
   parentBreadcrumb: ChromeBreadcrumb;
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
-  renameNotebook: (newNoteName: string, noteId: string) => void;
+  renameNotebook: (newNoteName: string, noteId: string) => Promise<any>;
   cloneNotebook: (newNoteName: string, noteId: string) => Promise<string>;
   deleteNotebook: (noteList: string[], toastMessage?: string) => void;
   setToast: (title: string, color?: string, text?: string) => void;
@@ -285,9 +285,13 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
     this.setState({
       modalLayout: getCustomModal(
         (newName: string) => {
-          this.props.renameNotebook(newName, this.props.openedNoteId);
-          this.setState({ isModalVisible: false });
-          this.loadNotebook();
+          this.props.renameNotebook(newName, this.props.openedNoteId).then((res) => {
+            this.setState({ isModalVisible: false });
+            window.location.assign(`#/${res.message.objectId}`);
+            setTimeout(() => {
+              this.loadNotebook();
+            }, 300);
+          });
         },
         () => this.setState({ isModalVisible: false }),
         'Name',
@@ -306,7 +310,7 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
       modalLayout: getCustomModal(
         (newName: string) => {
           this.props.cloneNotebook(newName, this.props.openedNoteId).then((id: string) => {
-            window.location.assign(`#/notebooks/${id}`);
+            window.location.assign(`#/${id}`);
             setTimeout(() => {
               this.loadNotebook();
             }, 300);
@@ -631,11 +635,11 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
       this.props.parentBreadcrumb,
       {
         text: 'Notebooks',
-        href: '#/notebooks',
+        href: '#/',
       },
       {
         text: path,
-        href: `#/notebooks/${this.props.openedNoteId}`,
+        href: `#/${this.props.openedNoteId}`,
       },
     ]);
   }
diff --git a/public/components/notebooks/components/paragraph_components/para_input.tsx b/public/components/notebooks/components/paragraph_components/para_input.tsx
index 5cc41ddd0d..b0d2ae12a4 100644
--- a/public/components/notebooks/components/paragraph_components/para_input.tsx
+++ b/public/components/notebooks/components/paragraph_components/para_input.tsx
@@ -31,6 +31,7 @@ import { Input, Prompt } from '@nteract/presentational-components';
 import { uiSettingsService } from '../../../../../common/utils';
 import React, { useState } from 'react';
 import { ParaType } from '../../../../../common/types/notebooks';
+import { observabilityLogsID } from '../../../../../common/constants/shared';
 
 /*
  * "ParaInput" component is used by notebook to populate paragraph inputs for an open notebook.
@@ -118,7 +119,7 @@ export const ParaInput = (props: {
     const renderOption = (option: EuiComboBoxOptionOption, searchValue: string) => {
       let visURL = `visualize#/edit/${option.key}?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'${props.startTime}',to:'${props.endTime}'))`;
       if (option.className === 'OBSERVABILITY_VISUALIZATION') {
-        visURL = `#/event_analytics/explorer/${option.key}`;
+        visURL = `${observabilityLogsID}#/explorer/${option.key}`;
       }
       return (
         <EuiLink href={visURL} target="_blank">
diff --git a/public/components/notebooks/components/paragraph_components/para_output.tsx b/public/components/notebooks/components/paragraph_components/para_output.tsx
index 0a3776e9fc..f1848872e7 100644
--- a/public/components/notebooks/components/paragraph_components/para_output.tsx
+++ b/public/components/notebooks/components/paragraph_components/para_output.tsx
@@ -134,7 +134,7 @@ export const ParaOutput = (props: {
           fromObs = fromObs === 'Invalid date' ? visInput.timeRange.from : fromObs;
           toObs = toObs === 'Invalid date' ? visInput.timeRange.to : toObs;
           const onEditClick = (savedVisualizationId: string) => {
-            window.location.assign(`#/event_analytics/explorer/${savedVisualizationId}`);
+            window.location.assign(`observability-logs#/explorer/${savedVisualizationId}`);
           };
           return (
             <>
@@ -161,6 +161,7 @@ export const ParaOutput = (props: {
         case 'HTML':
           return (
             <EuiText key={key}>
+              {/* eslint-disable-next-line react/jsx-pascal-case */}
               <Media.HTML data={val} />
             </EuiText>
           );
diff --git a/public/components/trace_analytics/components/common/legacy_route_helpers.ts b/public/components/trace_analytics/components/common/legacy_route_helpers.ts
index 139456bf58..3be7bfbf0c 100644
--- a/public/components/trace_analytics/components/common/legacy_route_helpers.ts
+++ b/public/components/trace_analytics/components/common/legacy_route_helpers.ts
@@ -3,11 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { observabilityID } from "../../../../../common/constants/shared";
+import { observabilityTracesID } from '../../../../../common/constants/shared';
 
-export const convertLegacyTraceAnalyticsUrl = (location: Location)=> {
-  const pathname = location.pathname.replace('trace-analytics-dashboards', observabilityID);
-  const hash = `#/trace_analytics${location.hash.replace(/^#/, '/home')}${
+export const convertLegacyTraceAnalyticsUrl = (location: Location) => {
+  const pathname = location.pathname.replace('trace-analytics-dashboards', observabilityTracesID);
+  const hash = `${location.hash}${
     location.hash.includes('?') ? location.search.replace(/^\?/, '&') : location.search
   }`;
   return pathname + hash;
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
index f7e00be9bf..8d437c4510 100644
--- a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
+++ b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
@@ -62,10 +62,7 @@ exports[`Dashboard component renders dashboard 1`] = `
         "calls": Array [
           Array [
             Array [
-              Object {
-                "href": "test#/",
-                "text": "test",
-              },
+              undefined,
               Object {
                 "href": "#/trace_analytics/home",
                 "text": "Trace analytics",
@@ -334,10 +331,7 @@ exports[`Dashboard component renders dashboard 1`] = `
           "calls": Array [
             Array [
               Array [
-                Object {
-                  "href": "test#/",
-                  "text": "test",
-                },
+                undefined,
                 Object {
                   "href": "#/trace_analytics/home",
                   "text": "Trace analytics",
@@ -2426,10 +2420,7 @@ exports[`Dashboard component renders empty dashboard 1`] = `
         "calls": Array [
           Array [
             Array [
-              Object {
-                "href": "test#/",
-                "text": "test",
-              },
+              undefined,
               Object {
                 "href": "#/trace_analytics/home",
                 "text": "Trace analytics",
@@ -2693,10 +2684,7 @@ exports[`Dashboard component renders empty dashboard 1`] = `
           "calls": Array [
             Array [
               Array [
-                Object {
-                  "href": "test#/",
-                  "text": "test",
-                },
+                undefined,
                 Object {
                   "href": "#/trace_analytics/home",
                   "text": "Trace analytics",
@@ -4758,10 +4746,7 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
         "calls": Array [
           Array [
             Array [
-              Object {
-                "href": "test#/",
-                "text": "test",
-              },
+              undefined,
               Object {
                 "href": "#/trace_analytics/home",
                 "text": "Trace analytics",
@@ -5031,10 +5016,7 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
           "calls": Array [
             Array [
               Array [
-                Object {
-                  "href": "test#/",
-                  "text": "test",
-                },
+                undefined,
                 Object {
                   "href": "#/trace_analytics/home",
                   "text": "Trace analytics",
diff --git a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
index 2cc0af94bd..9cf1d8cd9e 100644
--- a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
+++ b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
@@ -44,7 +44,7 @@ export function DashboardContent(props: DashboardProps) {
     startTime,
     endTime,
     childBreadcrumbs,
-    parentBreadcrumbs,
+    parentBreadcrumb,
     filters,
     setStartTime,
     setEndTime,
@@ -73,13 +73,17 @@ export function DashboardContent(props: DashboardProps) {
 
   useEffect(() => {
     if (showTimeoutToast === true && toasts.length === 0) {
-      setToast!('Query took too long to execute.', 'danger', 'Reduce time range or filter your data. If issue persists, consider increasing your cluster size.')
+      setToast!(
+        'Query took too long to execute.',
+        'danger',
+        'Reduce time range or filter your data. If issue persists, consider increasing your cluster size.'
+      );
     }
     setShowTimeoutToast(false);
-  }, [showTimeoutToast])
+  }, [showTimeoutToast]);
 
   useEffect(() => {
-    chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
+    chrome.setBreadcrumbs([parentBreadcrumb, ...childBreadcrumbs]);
     const validFilters = getValidFilterFields(mode, page);
     setFilters([
       ...filters.map((filter) => ({
@@ -93,7 +97,7 @@ export function DashboardContent(props: DashboardProps) {
   useEffect(() => {
     let newFilteredService = '';
     for (const filter of filters) {
-      if (mode === 'data_prepper') { 
+      if (mode === 'data_prepper') {
         if (filter.field === 'serviceName') {
           newFilteredService = filter.value;
           break;
@@ -106,8 +110,22 @@ export function DashboardContent(props: DashboardProps) {
       }
     }
     setFilteredService(newFilteredService);
-    if (!redirect && ((mode === 'data_prepper' && dataPrepperIndicesExist) || (mode === 'jaeger' && jaegerIndicesExist))) refresh(newFilteredService);
-  }, [filters, startTime, endTime, appConfigs, redirect, mode, dataPrepperIndicesExist, jaegerIndicesExist]);
+    if (
+      !redirect &&
+      ((mode === 'data_prepper' && dataPrepperIndicesExist) ||
+        (mode === 'jaeger' && jaegerIndicesExist))
+    )
+      refresh(newFilteredService);
+  }, [
+    filters,
+    startTime,
+    endTime,
+    appConfigs,
+    redirect,
+    mode,
+    dataPrepperIndicesExist,
+    jaegerIndicesExist,
+  ]);
 
   const refresh = async (currService?: string) => {
     setLoading(true);
@@ -154,12 +172,12 @@ export function DashboardContent(props: DashboardProps) {
         mode,
         () => setShowTimeoutToast(true),
         // () => {
-        //   if (toasts.length === 0) { 
+        //   if (toasts.length === 0) {
         //     setToast!('Query took too long to execute.', 'danger', 'Reduce time range or filter your data. If issue persists, consider increasing your cluster size.');
         //   }
         // },
         setPercentileMap
-      ).finally(() => setLoading(false))
+      ).finally(() => setLoading(false));
       handleJaegerErrorDashboardRequest(
         http,
         DSL,
@@ -170,7 +188,7 @@ export function DashboardContent(props: DashboardProps) {
         mode,
         () => setShowTimeoutToast(true),
         // () => {
-        //   if (toasts.length === 0) { 
+        //   if (toasts.length === 0) {
         //     setToast!('Query took too long to execute.', 'danger', 'Reduce time range or filter your data. If issue persists, consider increasing your cluster size.');
         //   }
         // },
@@ -295,7 +313,8 @@ export function DashboardContent(props: DashboardProps) {
         mode={mode}
       />
       <EuiSpacer size="m" />
-      {((mode === 'data_prepper' && dataPrepperIndicesExist) || mode === 'jaeger' && jaegerIndicesExist) ? (
+      {(mode === 'data_prepper' && dataPrepperIndicesExist) ||
+      (mode === 'jaeger' && jaegerIndicesExist) ? (
         <div>
           {mode === 'data_prepper' ? (
             <>
@@ -359,7 +378,7 @@ export function DashboardContent(props: DashboardProps) {
           )}
         </div>
       ) : (
-        <MissingConfigurationMessage mode={mode}/>
+        <MissingConfigurationMessage mode={mode} />
       )}
     </>
   );
diff --git a/public/components/trace_analytics/components/dashboard/dashboard_table.tsx b/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
index 47063a0387..ecc8872030 100644
--- a/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
+++ b/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
@@ -152,6 +152,7 @@ export function DashboardTable(props: {
           </>
         ),
         align: 'center',
+        // eslint-disable-next-line @typescript-eslint/naming-convention
         sortable: ({ dashboard_latency_variance }) =>
           dashboard_latency_variance?.length > 0
             ? dashboard_latency_variance[2] - dashboard_latency_variance[0]
@@ -336,7 +337,7 @@ export function DashboardTable(props: {
               });
               if (props.page !== 'app') {
                 props.setRedirect(true);
-                location.assign('#/trace_analytics/traces');
+                location.assign('#/traces');
               }
             }}
           >
diff --git a/public/components/trace_analytics/components/dashboard/top_error_rates_table.tsx b/public/components/trace_analytics/components/dashboard/top_error_rates_table.tsx
index 548d6c1719..6f5b32b5e6 100644
--- a/public/components/trace_analytics/components/dashboard/top_error_rates_table.tsx
+++ b/public/components/trace_analytics/components/dashboard/top_error_rates_table.tsx
@@ -206,7 +206,7 @@ export function ErrorRatesTable(props: {
               ]);
               if (props.page !== 'app') {
                 props.setRedirect(true);
-                location.assign('#/trace_analytics/traces');
+                location.assign('#/traces');
               }
             }}
           >
diff --git a/public/components/trace_analytics/components/dashboard/top_latency_table.tsx b/public/components/trace_analytics/components/dashboard/top_latency_table.tsx
index 5635b0beb5..0cc290acb7 100644
--- a/public/components/trace_analytics/components/dashboard/top_latency_table.tsx
+++ b/public/components/trace_analytics/components/dashboard/top_latency_table.tsx
@@ -162,6 +162,7 @@ export function LatencyTable(props: {
           </>
         ),
         align: 'center',
+        // eslint-disable-next-line @typescript-eslint/naming-convention
         sortable: ({ dashboard_latency_variance }) =>
           dashboard_latency_variance?.length > 0
             ? dashboard_latency_variance[2] - dashboard_latency_variance[0]
@@ -320,7 +321,7 @@ export function LatencyTable(props: {
               ]);
               if (props.page !== 'app') {
                 props.setRedirect(true);
-                location.assign('#/trace_analytics/traces');
+                location.assign('#/traces');
               }
             }}
           >
diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
index 25deb6fbc7..0d88b21395 100644
--- a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
+++ b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
@@ -109,13 +109,11 @@ exports[`Services component renders empty services page 1`] = `
   }
   nameColumnAction={[Function]}
   page="services"
-  parentBreadcrumbs={
-    Array [
-      Object {
-        "href": "test#/",
-        "text": "test",
-      },
-    ]
+  parentBreadcrumb={
+    Object {
+      "href": "test#/",
+      "text": "test",
+    }
   }
   query=""
   setEndTime={[MockFunction]}
@@ -378,13 +376,11 @@ exports[`Services component renders empty services page 1`] = `
     }
     nameColumnAction={[Function]}
     page="services"
-    parentBreadcrumbs={
-      Array [
-        Object {
-          "href": "test#/",
-          "text": "test",
-        },
-      ]
+    parentBreadcrumb={
+      Object {
+        "href": "test#/",
+        "text": "test",
+      }
     }
     query=""
     setEndTime={[MockFunction]}
@@ -1957,10 +1953,7 @@ exports[`Services component renders jaeger services page 1`] = `
         "calls": Array [
           Array [
             Array [
-              Object {
-                "href": "test#/",
-                "text": "test",
-              },
+              undefined,
               Object {
                 "href": "#/trace_analytics/home",
                 "text": "Trace analytics",
@@ -2232,10 +2225,7 @@ exports[`Services component renders jaeger services page 1`] = `
           "calls": Array [
             Array [
               Array [
-                Object {
-                  "href": "test#/",
-                  "text": "test",
-                },
+                undefined,
                 Object {
                   "href": "#/trace_analytics/home",
                   "text": "Trace analytics",
@@ -3361,10 +3351,7 @@ exports[`Services component renders services page 1`] = `
         "calls": Array [
           Array [
             Array [
-              Object {
-                "href": "test#/",
-                "text": "test",
-              },
+              undefined,
               Object {
                 "href": "#/trace_analytics/home",
                 "text": "Trace analytics",
@@ -3635,10 +3622,7 @@ exports[`Services component renders services page 1`] = `
           "calls": Array [
             Array [
               Array [
-                Object {
-                  "href": "test#/",
-                  "text": "test",
-                },
+                undefined,
                 Object {
                   "href": "#/trace_analytics/home",
                   "text": "Trace analytics",
diff --git a/public/components/trace_analytics/components/services/__tests__/services.test.tsx b/public/components/trace_analytics/components/services/__tests__/services.test.tsx
index d427239da4..5dca84b918 100644
--- a/public/components/trace_analytics/components/services/__tests__/services.test.tsx
+++ b/public/components/trace_analytics/components/services/__tests__/services.test.tsx
@@ -39,7 +39,7 @@ describe('Services component', () => {
       <Services
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
         childBreadcrumbs={serviceBreadcrumbs}
         nameColumnAction={nameColumnAction}
         traceColumnAction={traceColumnAction}
@@ -53,7 +53,7 @@ describe('Services component', () => {
         endTime="now"
         setEndTime={setEndTime}
         page="services"
-        mode='data_prepper'
+        mode="data_prepper"
         dataPrepperIndicesExist={true}
         modes={modes}
       />
@@ -99,7 +99,7 @@ describe('Services component', () => {
         endTime="now"
         setEndTime={setEndTime}
         page="services"
-        mode='data_prepper'
+        mode="data_prepper"
         dataPrepperIndicesExist={true}
         modes={modes}
       />
@@ -145,7 +145,7 @@ describe('Services component', () => {
         endTime="now"
         setEndTime={setEndTime}
         page="services"
-        mode='jaeger'
+        mode="jaeger"
         dataPrepperIndicesExist={false}
         jaegerIndicesExist={true}
         modes={modes}
diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
index 0121af258e..ac4875526d 100644
--- a/public/components/trace_analytics/components/services/service_view.tsx
+++ b/public/components/trace_analytics/components/services/service_view.tsx
@@ -62,18 +62,18 @@ export function ServiceView(props: ServiceViewProps) {
 
   useEffect(() => {
     props.chrome.setBreadcrumbs([
-      ...props.parentBreadcrumbs,
+      props.parentBreadcrumb,
       {
         text: 'Trace analytics',
-        href: '#/trace_analytics/home',
+        href: '#/home',
       },
       {
         text: 'Services',
-        href: '#/trace_analytics/services',
+        href: '#/services',
       },
       {
         text: props.serviceName,
-        href: `#/trace_analytics/services/${encodeURIComponent(props.serviceName)}`,
+        href: `#/services/${encodeURIComponent(props.serviceName)}`,
       },
     ]);
   }, [props.serviceName]);
@@ -138,7 +138,7 @@ export function ServiceView(props: ServiceViewProps) {
                     {fields.connected_services && fields.connected_services.length
                       ? fields.connected_services
                           .map((service: string) => (
-                            <EuiLink href={`#/trace_analytics/services/${service}`} key={service}>
+                            <EuiLink href={`#/services/${service}`} key={service}>
                               {service}
                             </EuiLink>
                           ))
@@ -193,7 +193,7 @@ export function ServiceView(props: ServiceViewProps) {
                           inverted: false,
                           disabled: false,
                         });
-                        location.assign('#/trace_analytics/traces');
+                        location.assign('#/traces');
                       }}
                     >
                       <EuiI18nNumber value={fields.traces} />
diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx
index e25bf8726f..417c9420e0 100644
--- a/public/components/trace_analytics/components/services/services_content.tsx
+++ b/public/components/trace_analytics/components/services/services_content.tsx
@@ -30,7 +30,7 @@ export function ServicesContent(props: ServicesProps) {
     endTime,
     appConfigs = [],
     childBreadcrumbs,
-    parentBreadcrumbs,
+    parentBreadcrumb,
     nameColumnAction,
     traceColumnAction,
     setFilters,
@@ -51,7 +51,7 @@ export function ServicesContent(props: ServicesProps) {
   const [filteredService, setFilteredService] = useState('');
 
   useEffect(() => {
-    chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
+    chrome.setBreadcrumbs([parentBreadcrumb, ...childBreadcrumbs]);
     const validFilters = getValidFilterFields(mode, 'services');
     setFilters([
       ...filters.map((filter) => ({
@@ -71,12 +71,25 @@ export function ServicesContent(props: ServicesProps) {
       }
     }
     setFilteredService(newFilteredService);
-    if (!redirect && ((mode === 'data_prepper' && dataPrepperIndicesExist) || (mode === 'jaeger' && jaegerIndicesExist))) refresh(newFilteredService);
+    if (
+      !redirect &&
+      ((mode === 'data_prepper' && dataPrepperIndicesExist) ||
+        (mode === 'jaeger' && jaegerIndicesExist))
+    )
+      refresh(newFilteredService);
   }, [filters, appConfigs, redirect, mode, jaegerIndicesExist, dataPrepperIndicesExist]);
 
   const refresh = async (currService?: string) => {
     setLoading(true);
-    const DSL = filtersToDsl(mode, filters, query,processTimeStamp(startTime, mode), processTimeStamp(endTime, mode), page, appConfigs);
+    const DSL = filtersToDsl(
+      mode,
+      filters,
+      query,
+      processTimeStamp(startTime, mode),
+      processTimeStamp(endTime, mode),
+      page,
+      appConfigs
+    );
     // service map should not be filtered by service name
     const serviceMapDSL = _.cloneDeep(DSL);
     serviceMapDSL.query.bool.must = serviceMapDSL.query.bool.must.filter(
@@ -84,7 +97,13 @@ export function ServicesContent(props: ServicesProps) {
     );
     await Promise.all([
       handleServicesRequest(http, DSL, setTableItems, mode),
-      handleServiceMapRequest(http, serviceMapDSL, mode, setServiceMap, currService || filteredService),
+      handleServiceMapRequest(
+        http,
+        serviceMapDSL,
+        mode,
+        setServiceMap,
+        currService || filteredService
+      ),
     ]);
     setLoading(false);
   };
@@ -133,7 +152,7 @@ export function ServicesContent(props: ServicesProps) {
         dataPrepperIndicesExist={dataPrepperIndicesExist}
       />
       <EuiSpacer size="m" />
-      { (mode === 'data_prepper' && dataPrepperIndicesExist) ? 
+      {mode === 'data_prepper' && dataPrepperIndicesExist ? (
         <ServiceMap
           addFilter={addFilter}
           serviceMap={serviceMap}
@@ -141,8 +160,10 @@ export function ServicesContent(props: ServicesProps) {
           setIdSelected={setServiceMapIdSelected}
           currService={filteredService}
           page={page}
-        /> : (<div/>)
-      }
+        />
+      ) : (
+        <div />
+      )}
     </>
   );
 }
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
index e0acd2e97a..c39db34c17 100644
--- a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
@@ -108,13 +108,11 @@ exports[`Traces component renders empty traces page 1`] = `
     ]
   }
   page="traces"
-  parentBreadcrumbs={
-    Array [
-      Object {
-        "href": "test#/",
-        "text": "test",
-      },
-    ]
+  parentBreadcrumb={
+    Object {
+      "href": "test#/",
+      "text": "test",
+    }
   }
   query=""
   setEndTime={[MockFunction]}
@@ -376,13 +374,11 @@ exports[`Traces component renders empty traces page 1`] = `
       ]
     }
     page="traces"
-    parentBreadcrumbs={
-      Array [
-        Object {
-          "href": "test#/",
-          "text": "test",
-        },
-      ]
+    parentBreadcrumb={
+      Object {
+        "href": "test#/",
+        "text": "test",
+      }
     }
     query=""
     setEndTime={[MockFunction]}
@@ -1423,10 +1419,7 @@ exports[`Traces component renders jaeger traces page 1`] = `
         "calls": Array [
           Array [
             Array [
-              Object {
-                "href": "test#/",
-                "text": "test",
-              },
+              undefined,
               Object {
                 "href": "#/trace_analytics/home",
                 "text": "Trace analytics",
@@ -1697,10 +1690,7 @@ exports[`Traces component renders jaeger traces page 1`] = `
           "calls": Array [
             Array [
               Array [
-                Object {
-                  "href": "test#/",
-                  "text": "test",
-                },
+                undefined,
                 Object {
                   "href": "#/trace_analytics/home",
                   "text": "Trace analytics",
@@ -2815,10 +2805,7 @@ exports[`Traces component renders traces page 1`] = `
         "calls": Array [
           Array [
             Array [
-              Object {
-                "href": "test#/",
-                "text": "test",
-              },
+              undefined,
               Object {
                 "href": "#/trace_analytics/home",
                 "text": "Trace analytics",
@@ -3088,10 +3075,7 @@ exports[`Traces component renders traces page 1`] = `
           "calls": Array [
             Array [
               Array [
-                Object {
-                  "href": "test#/",
-                  "text": "test",
-                },
+                undefined,
                 Object {
                   "href": "#/trace_analytics/home",
                   "text": "Trace analytics",
diff --git a/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx b/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx
index 8128b99be8..cfd56c99f1 100644
--- a/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx
+++ b/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx
@@ -38,7 +38,7 @@ describe('Traces component', () => {
       <Traces
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
         childBreadcrumbs={childBreadcrumbs}
         traceIdColumnAction={traceIdColumnAction}
         query=""
@@ -51,7 +51,7 @@ describe('Traces component', () => {
         endTime="now"
         setEndTime={setEndTime}
         page="traces"
-        mode='data_prepper'
+        mode="data_prepper"
         dataPrepperIndicesExist={true}
         modes={modes}
       />
@@ -94,7 +94,7 @@ describe('Traces component', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        mode='data_prepper'
+        mode="data_prepper"
         page="traces"
         modes={modes}
         dataPrepperIndicesExist={true}
@@ -138,7 +138,7 @@ describe('Traces component', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        mode='jaeger'
+        mode="jaeger"
         page="traces"
         modes={modes}
         dataPrepperIndicesExist={false}
diff --git a/public/components/trace_analytics/components/traces/trace_view.tsx b/public/components/trace_analytics/components/traces/trace_view.tsx
index 46fd003253..c150a19ff5 100644
--- a/public/components/trace_analytics/components/traces/trace_view.tsx
+++ b/public/components/trace_analytics/components/traces/trace_view.tsx
@@ -206,18 +206,18 @@ export function TraceView(props: TraceViewProps) {
 
   useEffect(() => {
     props.chrome.setBreadcrumbs([
-      ...props.parentBreadcrumbs,
+      props.parentBreadcrumb,
       {
         text: 'Trace analytics',
-        href: '#/trace_analytics/home',
+        href: '#/home',
       },
       {
         text: 'Traces',
-        href: '#/trace_analytics/traces',
+        href: '#/traces',
       },
       {
         text: props.traceId,
-        href: `#/trace_analytics/traces/${encodeURIComponent(props.traceId)}`,
+        href: `#/traces/${encodeURIComponent(props.traceId)}`,
       },
     ]);
     refresh();
diff --git a/public/components/trace_analytics/components/traces/traces_content.tsx b/public/components/trace_analytics/components/traces/traces_content.tsx
index 66764f9883..2efc70ec76 100644
--- a/public/components/trace_analytics/components/traces/traces_content.tsx
+++ b/public/components/trace_analytics/components/traces/traces_content.tsx
@@ -23,7 +23,7 @@ export function TracesContent(props: TracesProps) {
     appConfigs,
     startTime,
     endTime,
-    parentBreadcrumbs,
+    parentBreadcrumb,
     childBreadcrumbs,
     traceIdColumnAction,
     setQuery,
@@ -39,7 +39,7 @@ export function TracesContent(props: TracesProps) {
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
+    chrome.setBreadcrumbs([parentBreadcrumb, ...childBreadcrumbs]);
     const validFilters = getValidFilterFields(mode, 'traces');
     setFilters([
       ...filters.map((filter) => ({
@@ -51,13 +51,33 @@ export function TracesContent(props: TracesProps) {
   }, []);
 
   useEffect(() => {
-    if (!redirect && ((mode === 'data_prepper' && dataPrepperIndicesExist) || (mode === 'jaeger' && jaegerIndicesExist))) refresh();
+    if (
+      !redirect &&
+      ((mode === 'data_prepper' && dataPrepperIndicesExist) ||
+        (mode === 'jaeger' && jaegerIndicesExist))
+    )
+      refresh();
   }, [filters, appConfigs, redirect, mode, dataPrepperIndicesExist, jaegerIndicesExist]);
 
   const refresh = async (sort?: PropertySort) => {
     setLoading(true);
-    const DSL = filtersToDsl(mode, filters, query, processTimeStamp(startTime, mode), processTimeStamp(endTime, mode), page, appConfigs);
-    const timeFilterDSL = filtersToDsl(mode, [], '', processTimeStamp(startTime, mode), processTimeStamp(endTime, mode), page);
+    const DSL = filtersToDsl(
+      mode,
+      filters,
+      query,
+      processTimeStamp(startTime, mode),
+      processTimeStamp(endTime, mode),
+      page,
+      appConfigs
+    );
+    const timeFilterDSL = filtersToDsl(
+      mode,
+      [],
+      '',
+      processTimeStamp(startTime, mode),
+      processTimeStamp(endTime, mode),
+      page
+    );
     await handleTracesRequest(http, DSL, timeFilterDSL, tableItems, setTableItems, mode, sort);
     setLoading(false);
   };
diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx
index d9c443ff15..7d4569949b 100644
--- a/public/components/trace_analytics/home.tsx
+++ b/public/components/trace_analytics/home.tsx
@@ -6,36 +6,35 @@
 import { EuiGlobalToastList } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import React, { ReactChild, useEffect, useState } from 'react';
-import { Route, RouteComponentProps } from 'react-router-dom';
-import {
-  ChromeBreadcrumb,
-  ChromeStart,
-  HttpStart,
-} from '../../../../../src/core/public';
-import { ObservabilitySideBar } from '../common/side_nav';
+import { HashRouter, Route, RouteComponentProps } from 'react-router-dom';
+import { ChromeBreadcrumb, ChromeStart, HttpStart } from '../../../../../src/core/public';
 import { FilterType } from './components/common/filters/filters';
 import { SearchBarProps } from './components/common/search_bar';
 import { Dashboard } from './components/dashboard';
 import { Services, ServiceView } from './components/services';
 import { Traces, TraceView } from './components/traces';
-import { handleDataPrepperIndicesExistRequest, handleJaegerIndicesExistRequest } from './requests/request_handler';
+import {
+  handleDataPrepperIndicesExistRequest,
+  handleJaegerIndicesExistRequest,
+} from './requests/request_handler';
+import { TraceSideBar } from './trace_side_nav';
 
 export interface TraceAnalyticsCoreDeps {
-  parentBreadcrumbs: ChromeBreadcrumb[];
+  parentBreadcrumb: ChromeBreadcrumb;
   http: HttpStart;
   chrome: ChromeStart;
 }
 
 interface HomeProps extends RouteComponentProps, TraceAnalyticsCoreDeps {}
 
-export type TraceAnalyticsMode = 'jaeger' | 'data_prepper'
+export type TraceAnalyticsMode = 'jaeger' | 'data_prepper';
 
 export interface TraceAnalyticsComponentDeps extends TraceAnalyticsCoreDeps, SearchBarProps {
   mode: TraceAnalyticsMode;
-  modes: {
+  modes: Array<{
     id: string;
     title: string;
-  }[];
+  }>;
   setMode: (mode: TraceAnalyticsMode) => void;
   jaegerIndicesExist: boolean;
   dataPrepperIndicesExist: boolean;
@@ -44,7 +43,9 @@ export interface TraceAnalyticsComponentDeps extends TraceAnalyticsCoreDeps, Sea
 export const Home = (props: HomeProps) => {
   const [dataPrepperIndicesExist, setDataPrepperIndicesExist] = useState(false);
   const [jaegerIndicesExist, setJaegerIndicesExist] = useState(false);
-  const [mode, setMode] = useState<TraceAnalyticsMode>(sessionStorage.getItem('TraceAnalyticsMode') as TraceAnalyticsMode || 'jaeger')
+  const [mode, setMode] = useState<TraceAnalyticsMode>(
+    (sessionStorage.getItem('TraceAnalyticsMode') as TraceAnalyticsMode) || 'jaeger'
+  );
   const storedFilters = sessionStorage.getItem('TraceAnalyticsFilters');
   const [query, setQuery] = useState<string>(sessionStorage.getItem('TraceAnalyticsQuery') || '');
   const [filters, setFilters] = useState<FilterType[]>(
@@ -81,18 +82,17 @@ export const Home = (props: HomeProps) => {
   };
 
   useEffect(() => {
-    handleDataPrepperIndicesExistRequest(props.http, setDataPrepperIndicesExist)
+    handleDataPrepperIndicesExistRequest(props.http, setDataPrepperIndicesExist);
     handleJaegerIndicesExistRequest(props.http, setJaegerIndicesExist);
   }, []);
 
-
   const modes = [
     { id: 'jaeger', title: 'Jaeger', 'data-test-subj': 'jaeger-mode' },
     { id: 'data_prepper', title: 'Data Prepper', 'data-test-subj': 'data-prepper-mode' },
   ];
 
   useEffect(() => {
-    if (!sessionStorage.getItem('TraceAnalyticsMode')){
+    if (!sessionStorage.getItem('TraceAnalyticsMode')) {
       if (dataPrepperIndicesExist) {
         setMode('data_prepper');
       } else if (jaegerIndicesExist) {
@@ -104,54 +104,53 @@ export const Home = (props: HomeProps) => {
   const dashboardBreadcrumbs = [
     {
       text: 'Trace analytics',
-      href: '#/trace_analytics/home',
+      href: '#/',
     },
     {
       text: 'Dashboard',
-      href: '#/trace_analytics/home',
+      href: '#/',
     },
   ];
 
   const serviceBreadcrumbs = [
     {
       text: 'Trace analytics',
-      href: '#/trace_analytics/home',
+      href: '#/',
     },
     {
       text: 'Services',
-      href: '#/trace_analytics/services',
+      href: '#/services',
     },
   ];
 
   const traceBreadcrumbs = [
     {
       text: 'Trace analytics',
-      href: '#/trace_analytics/home',
+      href: '#/',
     },
     {
       text: 'Traces',
-      href: '#/trace_analytics/traces',
+      href: '#/traces',
     },
   ];
 
-  const nameColumnAction = (item: any) =>
-    location.assign(`#/trace_analytics/services/${encodeURIComponent(item)}`);
+  const nameColumnAction = (item: any) => location.assign(`#/services/${encodeURIComponent(item)}`);
 
-  const traceColumnAction = () => location.assign('#/trace_analytics/traces');
+  const traceColumnAction = () => location.assign('#/traces');
 
   const traceIdColumnAction = (item: any) =>
-    location.assign(`#/trace_analytics/traces/${encodeURIComponent(item)}`);
+    location.assign(`#/traces/${encodeURIComponent(item)}`);
 
   const [appConfigs, _] = useState([]);
 
   const commonProps: TraceAnalyticsComponentDeps = {
-    parentBreadcrumbs: props.parentBreadcrumbs,
+    parentBreadcrumb: props.parentBreadcrumb,
     http: props.http,
     chrome: props.chrome,
     query,
     setQuery: setQueryWithStorage,
     filters,
-    appConfigs: appConfigs,
+    appConfigs,
     setFilters: setFiltersWithStorage,
     startTime,
     setStartTime: setStartTimeWithStorage,
@@ -159,7 +158,9 @@ export const Home = (props: HomeProps) => {
     setEndTime: setEndTimeWithStorage,
     mode,
     modes,
-    setMode: (mode: TraceAnalyticsMode) => {setMode(mode)},
+    setMode: (traceMode: TraceAnalyticsMode) => {
+      setMode(traceMode);
+    },
     jaegerIndicesExist,
     dataPrepperIndicesExist,
   };
@@ -167,84 +168,92 @@ export const Home = (props: HomeProps) => {
   return (
     <>
       <EuiGlobalToastList
-          toasts={toasts}
-          dismissToast={(removedToast) => {
-            setToasts(toasts.filter((toast) => toast.id !== removedToast.id));
-          }}
-          toastLifeTimeMs={6000}
-      />
-      <Route
-        exact
-        path={['/trace_analytics', '/trace_analytics/home']}
-        render={(routerProps) => (
-          <ObservabilitySideBar>
-            <Dashboard page="dashboard" childBreadcrumbs={dashboardBreadcrumbs} {...commonProps} setToast={setToast} toasts={toasts} />
-          </ObservabilitySideBar>
-        )}
+        toasts={toasts}
+        dismissToast={(removedToast) => {
+          setToasts(toasts.filter((toast) => toast.id !== removedToast.id));
+        }}
+        toastLifeTimeMs={6000}
       />
-      <Route
-        exact
-        path="/trace_analytics/traces"
-        render={(routerProps) => (
-          <ObservabilitySideBar>
-            <Traces
-              page="traces"
-              childBreadcrumbs={traceBreadcrumbs}
-              traceIdColumnAction={traceIdColumnAction}
-              {...commonProps}
+      <HashRouter>
+        <Route
+          exact
+          path={['/']}
+          render={(routerProps) => (
+            <TraceSideBar>
+              <Dashboard
+                page="dashboard"
+                childBreadcrumbs={dashboardBreadcrumbs}
+                {...commonProps}
+                setToast={setToast}
+                toasts={toasts}
+              />
+            </TraceSideBar>
+          )}
+        />
+        <Route
+          exact
+          path="/traces"
+          render={(routerProps) => (
+            <TraceSideBar>
+              <Traces
+                page="traces"
+                childBreadcrumbs={traceBreadcrumbs}
+                traceIdColumnAction={traceIdColumnAction}
+                {...commonProps}
+              />
+            </TraceSideBar>
+          )}
+        />
+        <Route
+          path="/traces/:id+"
+          render={(routerProps) => (
+            <TraceView
+              parentBreadcrumb={props.parentBreadcrumb}
+              chrome={props.chrome}
+              http={props.http}
+              traceId={decodeURIComponent(routerProps.match.params.id)}
+              mode={mode}
             />
-          </ObservabilitySideBar>
-        )}
-      />
-      <Route
-        path="/trace_analytics/traces/:id+"
-        render={(routerProps) => (
-          <TraceView
-            parentBreadcrumbs={props.parentBreadcrumbs}
-            chrome={props.chrome}
-            http={props.http}
-            traceId={decodeURIComponent(routerProps.match.params.id)}
-            mode={mode}
-          />
-        )}
-      />
-      <Route
-        exact
-        path="/trace_analytics/services"
-        render={(routerProps) => (
-          <ObservabilitySideBar>
-            <Services
-              page="services"
-              childBreadcrumbs={serviceBreadcrumbs}
-              nameColumnAction={nameColumnAction}
-              traceColumnAction={traceColumnAction}
+          )}
+        />
+        <Route
+          exact
+          path="/services"
+          render={(routerProps) => (
+            <TraceSideBar>
+              <Services
+                page="services"
+                childBreadcrumbs={serviceBreadcrumbs}
+                nameColumnAction={nameColumnAction}
+                traceColumnAction={traceColumnAction}
+                {...commonProps}
+              />
+            </TraceSideBar>
+          )}
+        />
+        <Route
+          path="/services/:id+"
+          render={(routerProps) => (
+            <ServiceView
+              serviceName={decodeURIComponent(routerProps.match.params.id)}
               {...commonProps}
-            />
-          </ObservabilitySideBar>
-        )}
-      />
-      <Route
-        path="/trace_analytics/services/:id+"
-        render={(routerProps) => (
-          <ServiceView
-            serviceName={decodeURIComponent(routerProps.match.params.id)}
-            {...commonProps}
-            addFilter={(filter: FilterType) => {
-              for (const addedFilter of filters) {
-                if (
-                  addedFilter.field === filter.field &&
-                  addedFilter.operator === filter.operator &&
-                  addedFilter.value === filter.value
-                ) {
-                  return;
+              addFilter={(filter: FilterType) => {
+                for (const addedFilter of filters) {
+                  if (
+                    addedFilter.field === filter.field &&
+                    addedFilter.operator === filter.operator &&
+                    addedFilter.value === filter.value
+                  ) {
+                    return;
+                  }
                 }
-              }
-              const newFilters = [...filters, filter];
-              setFiltersWithStorage(newFilters);
-            }}
-          />
-        )}
-      />
+                const newFilters = [...filters, filter];
+                setFiltersWithStorage(newFilters);
+              }}
+            />
+          )}
+        />
+      </HashRouter>
     </>
   );
 };
diff --git a/public/components/trace_analytics/requests/dashboard_request_handler.ts b/public/components/trace_analytics/requests/dashboard_request_handler.ts
index ac29cc9b2d..d25ad03fde 100644
--- a/public/components/trace_analytics/requests/dashboard_request_handler.ts
+++ b/public/components/trace_analytics/requests/dashboard_request_handler.ts
@@ -191,10 +191,7 @@ export const handleJaegerDashboardRequest = async (
       return map;
     })
     .catch((error) => {
-      console.log("error here")
-      console.error(error)
-      
-      setToast('hello')
+      console.error(error);
     });
 
   await handleDslRequest(http, DSL, getJaegerDashboardQuery(), mode, true, setShowTimeoutToast)
diff --git a/public/components/trace_analytics/trace_side_nav.tsx b/public/components/trace_analytics/trace_side_nav.tsx
new file mode 100644
index 0000000000..77cb44596d
--- /dev/null
+++ b/public/components/trace_analytics/trace_side_nav.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPage,
+  EuiPageBody,
+  EuiPageSideBar,
+  EuiSideNav,
+  EuiSideNavItemType,
+  EuiSwitch,
+} from '@elastic/eui';
+import React from 'react';
+
+export function TraceSideBar(props: { children: React.ReactNode }) {
+  function setIsSelected(items: Array<EuiSideNavItemType<React.ReactNode>>, hash: string): boolean {
+    if (hash === '#/') {
+      items[0].isSelected = true;
+      return true;
+    }
+    if (hash === '#/traces') {
+      items[0].items[0].isSelected = true;
+      return true;
+    }
+    if (hash === '#/services') {
+      items[0].items[1].isSelected = true;
+      return true;
+    }
+  }
+
+  const items = [
+    {
+      name: 'Trace analytics',
+      id: 1,
+      href: '#/',
+      items: [
+        {
+          name: 'Traces',
+          id: 1.1,
+          href: '#/traces',
+        },
+        {
+          name: 'Services',
+          id: 1.2,
+          href: '#/services',
+        },
+      ],
+    },
+  ];
+
+  setIsSelected(items, location.hash);
+
+  return (
+    <EuiPage>
+      <EuiPageSideBar>
+        <EuiFlexGroup
+          direction="column"
+          justifyContent="spaceBetween"
+          style={{ height: '100%' }}
+          gutterSize="none"
+        >
+          <EuiFlexItem>
+            <EuiSideNav items={items} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageSideBar>
+      <EuiPageBody>{props.children}</EuiPageBody>
+    </EuiPage>
+  );
+}
diff --git a/public/embeddable/observability_embeddable_factory.tsx b/public/embeddable/observability_embeddable_factory.tsx
index 53e7b7859f..5392881567 100644
--- a/public/embeddable/observability_embeddable_factory.tsx
+++ b/public/embeddable/observability_embeddable_factory.tsx
@@ -20,7 +20,7 @@ import {
   OnSaveProps,
   SavedObjectMetaData,
 } from '../../../../src/plugins/saved_objects/public';
-import { observabilityID } from '../../common/constants/shared';
+import { observabilityID, observabilityLogsID } from '../../common/constants/shared';
 import {
   VisualizationSavedObjectAttributes,
   VISUALIZATION_SAVED_OBJECT,
@@ -63,8 +63,8 @@ export class ObservabilityEmbeddableFactoryDefinition
     input: SavedObjectEmbeddableInput,
     parent?: IContainer
   ) {
-    const editPath = `#/event_analytics/explorer/${VISUALIZATION_SAVED_OBJECT}:${savedObjectId}`;
-    const editUrl = `/app/${observabilityID}${editPath}`;
+    const editPath = `#/explorer/${VISUALIZATION_SAVED_OBJECT}:${savedObjectId}`;
+    const editUrl = `/app/${observabilityLogsID}${editPath}`;
     return new ObservabilityEmbeddable(
       {
         editUrl,
diff --git a/public/framework/core_refs.ts b/public/framework/core_refs.ts
new file mode 100644
index 0000000000..dd2367f19a
--- /dev/null
+++ b/public/framework/core_refs.ts
@@ -0,0 +1,33 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import { HttpStart, IToasts } from '../../../../src/core/public';
+import { SavedObjectsClientContract } from '../../../../src/core/public';
+import PPLService from '../services/requests/ppl';
+
+class CoreRefs {
+  private static _instance: CoreRefs;
+
+  public http?: HttpStart;
+  public savedObjectsClient?: SavedObjectsClientContract;
+  public pplService?: PPLService;
+  public toasts?: IToasts;
+  private constructor() {
+    // ...
+  }
+
+  public static get Instance() {
+    // Do you need arguments? Make it a regular static method instead.
+    return this._instance || (this._instance = new this());
+  }
+}
+
+export const coreRefs = CoreRefs.Instance;
diff --git a/public/framework/redux/reducers/index.ts b/public/framework/redux/reducers/index.ts
index c602dbc97a..d392b8265d 100644
--- a/public/framework/redux/reducers/index.ts
+++ b/public/framework/redux/reducers/index.ts
@@ -14,6 +14,7 @@ import { explorerVisualizationReducer } from '../../../components/event_analytic
 import { explorerVisualizationConfigReducer } from '../../../components/event_analytics/redux/slices/viualization_config_slice';
 import { patternsReducer } from '../../../components/event_analytics/redux/slices/patterns_slice';
 import { metricsReducers } from '../../../components/metrics/redux/slices/metrics_slice';
+import { panelReducer } from '../../../components/custom_panels/redux/panel_slice';
 
 const combinedReducer = combineReducers({
   // explorer reducers
@@ -26,6 +27,7 @@ const combinedReducer = combineReducers({
   explorerVisualizationConfig: explorerVisualizationConfigReducer,
   patterns: patternsReducer,
   metrics: metricsReducers,
+  customPanel: panelReducer,
 });
 
 export type RootState = ReturnType<typeof rootReducer>;
diff --git a/public/index.ts b/public/index.ts
index 97037a9f7d..a43ed0e205 100644
--- a/public/index.ts
+++ b/public/index.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import './variables.scss';
 import './components/trace_analytics/index.scss';
 import './components/notebooks/index.scss'
 
diff --git a/public/plugin.ts b/public/plugin.ts
index e9b2815d65..0a94c6273c 100644
--- a/public/plugin.ts
+++ b/public/plugin.ts
@@ -3,12 +3,38 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
+import './index.scss';
+
+import { i18n } from '@osd/i18n';
+import {
+  AppCategory,
+  AppMountParameters,
+  CoreSetup,
+  CoreStart,
+  Plugin,
+} from '../../../src/core/public';
 import { CREATE_TAB_PARAM, CREATE_TAB_PARAM_KEY, TAB_CHART_ID } from '../common/constants/explorer';
+
 import {
-  observabilityID,
+  observabilityApplicationsID,
+  observabilityApplicationsPluginOrder,
+  observabilityApplicationsTitle,
+  observabilityTracesTitle,
+  observabilityMetricsID,
+  observabilityMetricsPluginOrder,
+  observabilityMetricsTitle,
+  observabilityNotebookID,
+  observabilityNotebookPluginOrder,
+  observabilityNotebookTitle,
+  observabilityTracesID,
+  observabilityTracesPluginOrder,
+  observabilityPanelsID,
+  observabilityPanelsTitle,
+  observabilityPanelsPluginOrder,
+  observabilityLogsID,
+  observabilityLogsTitle,
+  observabilityLogsPluginOrder,
   observabilityPluginOrder,
-  observabilityTitle,
 } from '../common/constants/shared';
 import { QueryManager } from '../common/query_manager';
 import { VISUALIZATION_SAVED_OBJECT } from '../common/types/observability_saved_object_attributes';
@@ -20,6 +46,9 @@ import {
 } from '../common/utils';
 import { convertLegacyNotebooksUrl } from './components/notebooks/components/helpers/legacy_route_helpers';
 import { convertLegacyTraceAnalyticsUrl } from './components/trace_analytics/components/common/legacy_route_helpers';
+import { SavedObject } from '../../../src/core/public';
+import { coreRefs } from './framework/core_refs';
+
 import {
   OBSERVABILITY_EMBEDDABLE,
   OBSERVABILITY_EMBEDDABLE_DESCRIPTION,
@@ -66,34 +95,96 @@ export class ObservabilityPlugin
       window.location.assign(convertLegacyTraceAnalyticsUrl(window.location));
     }
 
-    core.application.register({
-      id: observabilityID,
-      title: observabilityTitle,
-      category: {
-        id: 'opensearch',
-        label: 'OpenSearch Plugins',
-        order: 2000,
-      },
-      order: observabilityPluginOrder,
-      async mount(params: AppMountParameters) {
-        const { Observability } = await import('./components/index');
-        const [coreStart, depsStart] = await core.getStartServices();
-        const dslService = new DSLService(coreStart.http);
-        const savedObjects = new SavedObjects(coreStart.http);
-        const timestampUtils = new TimestampUtils(dslService, pplService);
-        return Observability(
-          coreStart,
-          depsStart,
-          params,
-          pplService,
-          dslService,
-          savedObjects,
-          timestampUtils,
-          qm
-        );
+    const BASE_URL = core.http.basePath.prepend('/app/observability-dashboards#');
+    setupDeps.dashboard.registerDashboardProvider({
+      appId: 'observability-panel',
+      savedObjectsType: 'observability-panel',
+      savedObjectsName: 'Observability',
+      editUrlPathFn: (obj: SavedObject) => `${BASE_URL}/${obj.id}/edit`,
+      viewUrlPathFn: (obj: SavedObject) => `${BASE_URL}/${obj.id}`,
+      createLinkText: 'Observability Dashboard',
+      createSortText: 'Observability Dashboard',
+      createUrl: `${BASE_URL}/create`,
+    });
+
+    const OBSERVABILITY_APP_CATEGORIES: Record<string, AppCategory> = Object.freeze({
+      observability: {
+        id: 'observability',
+        label: i18n.translate('core.ui.observabilityNavList.label', {
+          defaultMessage: 'Observability',
+        }),
+        order: observabilityPluginOrder,
       },
     });
 
+    const appMountWithStartPage = (startPage: string) => async (params: AppMountParameters) => {
+      const { Observability } = await import('./components/index');
+      const [coreStart, depsStart] = await core.getStartServices();
+      const dslService = new DSLService(coreStart.http);
+      const savedObjects = new SavedObjects(coreStart.http);
+      const timestampUtils = new TimestampUtils(dslService, pplService);
+
+      return Observability(
+        coreStart,
+        depsStart as AppPluginStartDependencies,
+        params,
+        pplService,
+        dslService,
+        savedObjects,
+        timestampUtils,
+        qm,
+        startPage
+      );
+    };
+
+    core.application.register({
+      id: observabilityApplicationsID,
+      title: observabilityApplicationsTitle,
+      category: OBSERVABILITY_APP_CATEGORIES.observability,
+      order: observabilityApplicationsPluginOrder,
+      mount: appMountWithStartPage('applications'),
+    });
+
+    core.application.register({
+      id: observabilityLogsID,
+      title: observabilityLogsTitle,
+      category: OBSERVABILITY_APP_CATEGORIES.observability,
+      order: observabilityLogsPluginOrder,
+      mount: appMountWithStartPage('logs'),
+    });
+
+    core.application.register({
+      id: observabilityMetricsID,
+      title: observabilityMetricsTitle,
+      category: OBSERVABILITY_APP_CATEGORIES.observability,
+      order: observabilityMetricsPluginOrder,
+      mount: appMountWithStartPage('metrics'),
+    });
+
+    core.application.register({
+      id: observabilityTracesID,
+      title: observabilityTracesTitle,
+      category: OBSERVABILITY_APP_CATEGORIES.observability,
+      order: observabilityTracesPluginOrder,
+      mount: appMountWithStartPage('traces'),
+    });
+
+    core.application.register({
+      id: observabilityNotebookID,
+      title: observabilityNotebookTitle,
+      category: OBSERVABILITY_APP_CATEGORIES.observability,
+      order: observabilityNotebookPluginOrder,
+      mount: appMountWithStartPage('notebooks'),
+    });
+
+    core.application.register({
+      id: observabilityPanelsID,
+      title: observabilityPanelsTitle,
+      category: OBSERVABILITY_APP_CATEGORIES.observability,
+      order: observabilityPanelsPluginOrder,
+      mount: appMountWithStartPage('dashboards'),
+    });
+
     const embeddableFactory = new ObservabilityEmbeddableFactoryDefinition(async () => ({
       getAttributeService: (await core.getStartServices())[1].dashboard.getAttributeService,
       savedObjectsClient: (await core.getStartServices())[0].savedObjects.client,
@@ -106,16 +197,16 @@ export class ObservabilityPlugin
       title: OBSERVABILITY_EMBEDDABLE_DISPLAY_NAME,
       description: OBSERVABILITY_EMBEDDABLE_DESCRIPTION,
       icon: OBSERVABILITY_EMBEDDABLE_ICON,
-      aliasApp: observabilityID,
-      aliasPath: `#/event_analytics/explorer/?${CREATE_TAB_PARAM_KEY}=${CREATE_TAB_PARAM[TAB_CHART_ID]}`,
+      aliasApp: observabilityLogsID,
+      aliasPath: `#/explorer/?${CREATE_TAB_PARAM_KEY}=${CREATE_TAB_PARAM[TAB_CHART_ID]}`,
       stage: 'production',
       appExtensions: {
         visualizations: {
           docTypes: [VISUALIZATION_SAVED_OBJECT],
           toListItem: ({ id, attributes, updated_at: updatedAt }) => ({
             description: attributes?.description,
-            editApp: observabilityID,
-            editUrl: `#/event_analytics/explorer/${VISUALIZATION_SAVED_OBJECT}:${id}`,
+            editApp: observabilityLogsID,
+            editUrl: `#/explorer/${VISUALIZATION_SAVED_OBJECT}:${id}`,
             icon: OBSERVABILITY_EMBEDDABLE_ICON,
             id,
             savedObjectType: VISUALIZATION_SAVED_OBJECT,
@@ -131,8 +222,17 @@ export class ObservabilityPlugin
     // Return methods that should be available to other plugins
     return {};
   }
+
   public start(core: CoreStart): ObservabilityStart {
+    const pplService: PPLService = new PPLService(core.http);
+
+    coreRefs.http = core.http;
+    coreRefs.savedObjectsClient = core.savedObjects.client;
+    coreRefs.pplService = pplService;
+    coreRefs.toasts = core.notifications.toasts;
+
     return {};
   }
+
   public stop() {}
 }
diff --git a/public/services/data_fetchers/ppl/ppl_data_fetcher.ts b/public/services/data_fetchers/ppl/ppl_data_fetcher.ts
index e83b45dc78..e621910c5d 100644
--- a/public/services/data_fetchers/ppl/ppl_data_fetcher.ts
+++ b/public/services/data_fetchers/ppl/ppl_data_fetcher.ts
@@ -32,7 +32,7 @@ export class PPLDataFetcher extends DataFetcherBase implements IDataFetcher {
   ) {
     super();
     // index/index patterns for this search
-    this.queryIndex = this.getIndex(this.searchParams.query);
+    this.queryIndex = this.getIndex(this.searchParams.query.rawQuery);
   }
 
   async setTimestamp(index: string) {
@@ -186,7 +186,7 @@ export class PPLDataFetcher extends DataFetcherBase implements IDataFetcher {
           tabId,
           query: {
             finalQuery,
-            [RAW_QUERY]: query,
+            [RAW_QUERY]: query.rawQuery,
             [SELECTED_TIMESTAMP]: curTimestamp,
           },
         })
diff --git a/public/services/saved_objects/saved_object_client/saved_objects_actions.ts b/public/services/saved_objects/saved_object_client/saved_objects_actions.ts
index 2b96c6a6c3..5d8ae29d39 100644
--- a/public/services/saved_objects/saved_object_client/saved_objects_actions.ts
+++ b/public/services/saved_objects/saved_object_client/saved_objects_actions.ts
@@ -103,7 +103,7 @@ export class SavedObjectsActions {
 
     const remainingObjectIds = [
       ...new Set(
-        idMap.non_osd.concat(
+        idMap.non_osd?.concat(
           Object.entries(responses.deleteResponseList)
             .filter(([_, status]) => status !== 'OK')
             .map(([id, _]) => id)
diff --git a/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts b/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts
index d6708ae4fe..7eb552586c 100644
--- a/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts
+++ b/public/services/saved_objects/saved_object_savers/ppl/save_as_current_vis.ts
@@ -3,6 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {
+  addVizToPanels,
+  uuidRx,
+} from '../../../../../public/components/custom_panels/redux/panel_slice';
 import { SavedQuerySaver } from './saved_query_saver';
 
 export class SaveAsCurrentVisualization extends SavedQuerySaver {
@@ -46,9 +50,14 @@ export class SaveAsCurrentVisualization extends SavedQuerySaver {
   }
 
   addToPanel({ selectedPanels, saveTitle, notifications, visId }) {
+    const { dispatch } = this.dispatchers;
+    const soPanels = selectedPanels.filter((panel) => uuidRx.test(panel.panel.id));
+    const opsPanels = selectedPanels.filter((panel) => !uuidRx.test(panel.panel.id));
+    dispatch(addVizToPanels(soPanels, visId));
+
     this.panelClient
       .updateBulk({
-        selectedCustomPanels: selectedPanels,
+        selectedCustomPanels: opsPanels,
         savedVisualizationId: visId,
       })
       .then((res: any) => {
diff --git a/public/services/saved_objects/saved_object_savers/ppl/save_as_new_query.ts b/public/services/saved_objects/saved_object_savers/ppl/save_as_new_query.ts
index 1c174438d0..fa7b1c7034 100644
--- a/public/services/saved_objects/saved_object_savers/ppl/save_as_new_query.ts
+++ b/public/services/saved_objects/saved_object_savers/ppl/save_as_new_query.ts
@@ -24,11 +24,10 @@ export class SaveAsNewQuery extends SavedQuerySaver {
     const { batch, dispatch, changeQuery, updateTabName } = this.dispatchers;
     const { tabId, history, notifications, showPermissionErrorToast } = this.saveContext;
     const { name } = this.saveParams;
-    console.log('this.saveParams: ', this.saveParams);
     this.saveClient
       .create({ ...this.saveParams })
       .then((res: any) => {
-        history.replace(`/event_analytics/explorer/${res.objectId}`);
+        history.replace(`/explorer/${res.objectId}`);
         notifications.toasts.addSuccess({
           title: 'Saved successfully.',
           text: `New query '${name}' has been successfully saved.`,
@@ -50,7 +49,7 @@ export class SaveAsNewQuery extends SavedQuerySaver {
             })
           );
         });
-        history.replace(`/event_analytics/explorer/${res.objectId}`);
+        history.replace(`/explorer/${res.objectId}`);
         return res;
       })
       .catch((error: any) => {
diff --git a/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts b/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts
index b0c57d4c7d..814ef97e4a 100644
--- a/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts
+++ b/public/services/saved_objects/saved_object_savers/ppl/save_as_new_vis.ts
@@ -3,6 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { forEach } from 'lodash';
+import {
+  addVizToPanels,
+  fetchPanel,
+  uuidRx,
+} from '../../../../../public/components/custom_panels/redux/panel_slice';
 import {
   SAVED_OBJECT_ID,
   SAVED_OBJECT_TYPE,
@@ -10,6 +16,7 @@ import {
 } from '../../../../../common/constants/explorer';
 import { ISavedObjectsClient } from '../../saved_object_client/client_interface';
 import { SavedQuerySaver } from './saved_query_saver';
+import { addVisualizationPanel } from '../../../../../public/components/custom_panels/helpers/add_visualization_helper';
 
 export class SaveAsNewVisualization extends SavedQuerySaver {
   constructor(
@@ -47,7 +54,7 @@ export class SaveAsNewVisualization extends SavedQuerySaver {
         if (appLogEvents) {
           addVisualizationToPanel(res.objectId, name);
         } else {
-          history.replace(`/event_analytics/explorer/${res.objectId}`);
+          history.replace(`/explorer/${res.objectId}`);
         }
 
         batch(() => {
@@ -76,21 +83,26 @@ export class SaveAsNewVisualization extends SavedQuerySaver {
   }
 
   addToPanel({ selectedPanels, saveTitle, notifications, visId }) {
+    const { dispatch } = this.dispatchers;
+    const soPanels = selectedPanels.filter((panel) => uuidRx.test(panel.panel.id));
+    const opsPanels = selectedPanels.filter((panel) => !uuidRx.test(panel.panel.id));
+
+    dispatch(addVizToPanels(soPanels, visId));
     this.panelClient
       .updateBulk({
-        selectedCustomPanels: selectedPanels,
+        selectedCustomPanels: opsPanels,
         savedVisualizationId: visId,
       })
       .then((res: any) => {
         notifications.toasts.addSuccess({
           title: 'Saved successfully.',
-          text: `Visualization '${saveTitle}' has been successfully saved to operation panels.`,
+          text: `Visualization '${saveTitle}' has been successfully saved to Observability Dashboards.`,
         });
       })
       .catch((error: any) => {
         notifications.toasts.addError(error, {
           title: 'Failed to save',
-          text: `Cannot add Visualization '${saveTitle}' to operation panels`,
+          text: `Cannot add Visualization '${saveTitle}' to Observability Dashboards`,
         });
       });
   }
diff --git a/server/adaptors/custom_panels/custom_panel_adaptor.ts b/server/adaptors/custom_panels/custom_panel_adaptor.ts
index 2b2ba55dd0..5703a85dd1 100644
--- a/server/adaptors/custom_panels/custom_panel_adaptor.ts
+++ b/server/adaptors/custom_panels/custom_panel_adaptor.ts
@@ -6,7 +6,7 @@
 import { v4 as uuidv4 } from 'uuid';
 import { PanelType, VisualizationType } from '../../../common/types/custom_panels';
 import { ILegacyScopedClusterClient } from '../../../../../src/core/server';
-import { createDemoPanel } from '../../common/helpers/custom_panels/sample_panels';
+import { createDemoPanel } from '../../../common/constants/custom_panels';
 
 interface boxType {
   x1: number;
@@ -142,6 +142,7 @@ export class CustomPanelsAdaptor {
     }
   };
 
+
   // Rename an existing panel
   renamePanel = async (client: ILegacyScopedClusterClient, panelId: string, panelName: string) => {
     const updatePanelBody = {
diff --git a/server/common/helpers/custom_panels/sample_panels.ts b/server/common/helpers/custom_panels/sample_panels.ts
deleted file mode 100644
index 3ef7a31c8e..0000000000
--- a/server/common/helpers/custom_panels/sample_panels.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { v4 as uuidv4 } from 'uuid';
-
-export const createDemoPanel = (savedVisualizationIds: string[]) => {
-  return {
-    name: '[Logs] Web traffic Panel',
-    visualizations: [
-      {
-        id: 'panel_viz_' + uuidv4(),
-        savedVisualizationId: savedVisualizationIds[0],
-        x: 4,
-        y: 6,
-        w: 8,
-        h: 2,
-      },
-      {
-        id: 'panel_viz_' + uuidv4(),
-        savedVisualizationId: savedVisualizationIds[1],
-        x: 0,
-        y: 2,
-        w: 12,
-        h: 2,
-      },
-      {
-        id: 'panel_viz_' + uuidv4(),
-        savedVisualizationId: savedVisualizationIds[2],
-        x: 0,
-        y: 0,
-        w: 4,
-        h: 2,
-      },
-      {
-        id: 'panel_viz_' + uuidv4(),
-        savedVisualizationId: savedVisualizationIds[3],
-        x: 4,
-        y: 0,
-        w: 4,
-        h: 2,
-      },
-      {
-        id: 'panel_viz_' + uuidv4(),
-        savedVisualizationId: savedVisualizationIds[4],
-        x: 8,
-        y: 0,
-        w: 4,
-        h: 2,
-      },
-      {
-        id: 'panel_viz_' + uuidv4(),
-        savedVisualizationId: savedVisualizationIds[5],
-        x: 0,
-        y: 4,
-        w: 4,
-        h: 2,
-      },
-      {
-        id: 'panel_viz_' + uuidv4(),
-        savedVisualizationId: savedVisualizationIds[6],
-        x: 0,
-        y: 6,
-        w: 4,
-        h: 2,
-      },
-      {
-        id: 'panel_viz_' + uuidv4(),
-        savedVisualizationId: savedVisualizationIds[7],
-        x: 4,
-        y: 4,
-        w: 8,
-        h: 2,
-      },
-    ],
-    timeRange: { to: 'now/y', from: 'now/y' },
-    queryFilter: { query: '', language: 'ppl' },
-  };
-};
diff --git a/server/plugin.ts b/server/plugin.ts
index bf86ea997b..f315f809b4 100644
--- a/server/plugin.ts
+++ b/server/plugin.ts
@@ -10,6 +10,7 @@ import {
   Logger,
   Plugin,
   PluginInitializerContext,
+  SavedObjectsType,
 } from '../../../src/core/server';
 import { OpenSearchObservabilityPlugin } from './adaptors/opensearch_observability_plugin';
 import { PPLPlugin } from './adaptors/ppl_plugin';
@@ -43,6 +44,42 @@ export class ObservabilityPlugin
       };
     });
 
+    const obsPanelType: SavedObjectsType = {
+      name: 'observability-panel',
+      hidden: false,
+      namespaceType: 'single',
+      mappings: {
+        dynamic: false,
+        properties: {
+          title: {
+            type: 'text',
+          },
+          description: {
+            type: 'text',
+          },
+        },
+      },
+      management: {
+        importableAndExportable: true,
+        getInAppUrl() {
+          return {
+            path: `/app/management/observability/settings`,
+            uiCapabilitiesPath: 'advancedSettings.show',
+          };
+        },
+        getTitle(obj) {
+          return `Observability Settings [${obj.id}]`;
+        },
+      },
+      migrations: {
+        '3.0.0': (doc) => ({ ...doc, description: '' }),
+        '3.0.1': (doc) => ({ ...doc, description: 'Some Description Text' }),
+        '3.0.2': (doc) => ({ ...doc, dateCreated: parseInt(doc.dateCreated || '0', 10) }),
+      },
+    };
+
+    core.savedObjects.registerType(obsPanelType);
+
     // Register server side APIs
     setupRoutes({ router, client: openSearchObservabilityClient });
 
diff --git a/server/routes/custom_panels/panels_router.ts b/server/routes/custom_panels/panels_router.ts
index 9c23972924..93db008ac9 100644
--- a/server/routes/custom_panels/panels_router.ts
+++ b/server/routes/custom_panels/panels_router.ts
@@ -132,6 +132,49 @@ export function PanelsRouter(router: IRouter) {
     }
   );
 
+
+  // update an existing panel
+  router.post(
+    {
+      path: `${API_PREFIX}/panels/update`,
+      validate: {
+        body: schema.object({
+          panelId: schema.string(),
+          panel: schema.any(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const responseBody = await customPanelBackend.updatePanel(
+          opensearchNotebooksClient,
+          request.body.panelId,
+          request.body.panel
+        );
+        return response.ok({
+          body: {
+            message: 'Panel Updated',
+          },
+        });
+      } catch (error: any) {
+        console.error('Issue in updating panel', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+
   // rename an existing panel
   router.post(
     {
diff --git a/server/saved_objects/observability_saved_object.ts b/server/saved_objects/observability_saved_object.ts
index 5c47a0c223..d8f8ca32d0 100644
--- a/server/saved_objects/observability_saved_object.ts
+++ b/server/saved_objects/observability_saved_object.ts
@@ -4,7 +4,7 @@
  */
 
 import { SavedObjectsType } from '../../../../src/core/server';
-import { observabilityID } from '../../common/constants/shared';
+import { observabilityID, observabilityLogsID } from '../../common/constants/shared';
 import { VISUALIZATION_SAVED_OBJECT } from '../../common/types/observability_saved_object_attributes';
 
 export const visualizationSavedObject: SavedObjectsType = {
@@ -19,8 +19,8 @@ export const visualizationSavedObject: SavedObjectsType = {
       return obj.attributes.title;
     },
     getInAppUrl(obj) {
-      const editPath = `#/event_analytics/explorer/${VISUALIZATION_SAVED_OBJECT}:${obj.id}`;
-      const editUrl = `/app/${observabilityID}${editPath}`;
+      const editPath = `#/explorer/${VISUALIZATION_SAVED_OBJECT}:${obj.id}`;
+      const editUrl = `/app/${observabilityLogsID}${editPath}`;
       return {
         path: editUrl,
         uiCapabilitiesPath: 'observability.show',
diff --git a/test/panels_constants.tsx b/test/panels_constants.tsx
index b79dde38c0..8e938bdcc4 100644
--- a/test/panels_constants.tsx
+++ b/test/panels_constants.tsx
@@ -4,7 +4,7 @@
  */
 
 export const panelBreadCrumbs = [
-  { text: 'Operational panels', href: '#/operational_panels/' },
+  { text: 'Observability Dashboards', href: '#/operational_panels/' },
   { text: 'Observability', href: 'observability#/' },
 ];
 
diff --git a/test/setup.jest.ts b/test/setup.jest.ts
index 7f612f9085..3a6397fe42 100644
--- a/test/setup.jest.ts
+++ b/test/setup.jest.ts
@@ -6,6 +6,7 @@
 // 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';
 import { coreStartMock } from './__mocks__/coreMocks';
 
 configure({ testIdAttribute: 'data-test-subj' });
@@ -57,3 +58,6 @@ jest.setTimeout(30000);
 
 setOSDHttp(coreStartMock.http);
 setOSDSavedObjectsClient(coreStartMock.savedObjects.client);
+coreRefs.http = coreStartMock.http;
+coreRefs.savedObjectsClient = coreStartMock.savedObjects.client;
+coreRefs.toasts = coreStartMock.notifications.toasts;
diff --git a/yarn.lock b/yarn.lock
index 952d6ff8e9..e9cce93cea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -481,6 +481,14 @@ any-observable@^0.3.0:
   resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
   integrity sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==
 
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 arch@^2.1.2:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
@@ -510,6 +518,11 @@ astral-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
   integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
 
+async-wait-until@1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/async-wait-until/-/async-wait-until-1.2.6.tgz#b6d8ada89913028af1928ee078925af75862b108"
+  integrity sha512-7I1zd0bnMEo7WfLfDoLZp+iPYKv/dl7kcW8wphazZn+BAElTGvtkDuQuonr480JzkS7f42VcGyP90mk3+3IfWA==
+
 async@^3.2.0:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.3.tgz#ac53dafd3f4720ee9e8a160628f18ea91df196c9"
@@ -557,6 +570,11 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
 blob-util@2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
@@ -575,6 +593,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -668,6 +693,21 @@ check-more-types@^2.24.0:
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
   integrity sha1-FCD/sQ/URNz8ebQ4kbv//TKoRgA=
 
+chokidar@3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 ci-info@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
@@ -833,6 +873,15 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
+cypress-watch-and-reload@^1.10.6:
+  version "1.10.6"
+  resolved "https://registry.yarnpkg.com/cypress-watch-and-reload/-/cypress-watch-and-reload-1.10.6.tgz#52423344fa52b94b818652f524df0cbcafc6a1ad"
+  integrity sha512-OI+3zZFSfMOjCH2xO9SUFfBurusbDOXctNtC6Q8VTokIURP+r0cwWZ5NVt6Ty3dtIMrWfiBsT+zsgAPvbmfTkA==
+  dependencies:
+    async-wait-until "1.2.6"
+    chokidar "3.5.3"
+    ws "8.13.0"
+
 cypress@^6.0.0:
   version "6.9.1"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-6.9.1.tgz#ce1106bfdc47f8d76381dba63f943447883f864c"
@@ -1268,6 +1317,13 @@ file-entry-cache@^5.0.1:
   dependencies:
     flat-cache "^2.0.1"
 
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 flat-cache@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
@@ -1316,6 +1372,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -1356,7 +1417,7 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-glob-parent@^5.0.0, glob-parent@^6.0.1:
+glob-parent@^5.0.0, glob-parent@^6.0.1, glob-parent@~5.1.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@@ -1613,6 +1674,13 @@ is-arguments@^1.0.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-buffer@^1.1.4:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -1659,7 +1727,7 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
-is-glob@^4.0.0, is-glob@^4.0.3:
+is-glob@^4.0.0, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -1679,6 +1747,11 @@ is-installed-globally@^0.3.2:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
 is-observable@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-observable/-/is-observable-1.1.0.tgz#b3e986c8f44de950867cab5403f5a3465005975e"
@@ -2066,6 +2139,11 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
 normalize.css@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
@@ -2215,7 +2293,7 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-picomatch@^2.2.3:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -2472,6 +2550,13 @@ readable-stream@^2.2.2:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 redux-persist@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
@@ -2895,6 +2980,13 @@ tmp@~0.2.1:
   dependencies:
     rimraf "^3.0.0"
 
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
 tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@@ -3169,6 +3261,11 @@ write@1.0.3:
   dependencies:
     mkdirp "^0.5.1"
 
+ws@8.13.0:
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
+  integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
+
 x-is-string@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"