diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts
index 8838a9a35..9f5c15fb0 100644
--- a/dashboards-observability/common/types/explorer.ts
+++ b/dashboards-observability/common/types/explorer.ts
@@ -104,13 +104,12 @@ export interface IExplorerProps {
   tabCreatedTypes?: any;
   searchBarConfigs?: any;
   appId?: string;
-  baseQuery?: string;
   addVisualizationToPanel?: any;
   startTime?: string;
   endTime?: string;
   setStartTime?: any;
   setEndTime?: any;
-  appBaseQuery: string;
+  appBaseQuery?: string;
 }
 
 export interface SavedQuery {
diff --git a/dashboards-observability/public/components/app.tsx b/dashboards-observability/public/components/app.tsx
index fbdd65a32..36594b890 100644
--- a/dashboards-observability/public/components/app.tsx
+++ b/dashboards-observability/public/components/app.tsx
@@ -18,7 +18,7 @@ import { Main as NotebooksHome } from './notebooks/components/main';
 import { Home as TraceAnalyticsHome } from './trace_analytics/home';
 
 interface ObservabilityAppDeps {
-  CoreStart: CoreStart;
+  CoreStartProp: CoreStart;
   DepsStart: AppPluginStartDependencies;
   pplService: any;
   dslService: any;
@@ -27,14 +27,14 @@ interface ObservabilityAppDeps {
 }
 
 export const App = ({
-  CoreStart,
+  CoreStartProp,
   DepsStart,
   pplService,
   dslService,
   savedObjects,
   timestampUtils,
 }: ObservabilityAppDeps) => {
-  const { chrome, http, notifications } = CoreStart;
+  const { chrome, http, notifications } = CoreStartProp;
   const parentBreadcrumb = {
     text: observabilityTitle,
     href: `${observabilityID}#/`,
@@ -60,7 +60,7 @@ export const App = ({
                       chrome={chrome}
                       http={http}
                       notifications={notifications}
-                      parentBreadcrumb={parentBreadcrumb}
+                      parentBreadcrumbs={[parentBreadcrumb]}
                       pplService={pplService}
                       dslService={dslService}
                       savedObjects={savedObjects}
@@ -93,7 +93,7 @@ export const App = ({
                     <CustomPanelsHome
                       http={http}
                       chrome={chrome}
-                      parentBreadcrumb={[parentBreadcrumb, customPanelBreadcrumb]}
+                      parentBreadcrumbs={[parentBreadcrumb, customPanelBreadcrumb]}
                       pplService={pplService}
                       dslService={dslService}
                       renderProps={props}
@@ -108,7 +108,7 @@ export const App = ({
                     {...props}
                     chrome={chrome}
                     http={http}
-                    parentBreadcrumb={parentBreadcrumb}
+                    parentBreadcrumbs={[parentBreadcrumb]}
                   />
                 )}
               />
@@ -118,7 +118,7 @@ export const App = ({
                   return (
                     <EventAnalytics
                       chrome={chrome}
-                      parentBreadcrumb={parentBreadcrumb}
+                      parentBreadcrumbs={[parentBreadcrumb]}
                       pplService={pplService}
                       dslService={dslService}
                       savedObjects={savedObjects}
diff --git a/dashboards-observability/public/components/application_analytics/__tests__/create.test.tsx b/dashboards-observability/public/components/application_analytics/__tests__/create.test.tsx
index cb5571600..5fda0c03a 100644
--- a/dashboards-observability/public/components/application_analytics/__tests__/create.test.tsx
+++ b/dashboards-observability/public/components/application_analytics/__tests__/create.test.tsx
@@ -9,6 +9,7 @@ import Adapter from 'enzyme-adapter-react-16';
 import { CreateApp } from '../components/create';
 import { coreStartMock } from '../../../../test/__mocks__/coreMocks';
 import DSLService from 'public/services/requests/dsl';
+import PPLService from 'public/services/requests/ppl';
 import { render } from '@testing-library/react';
 
 describe('Create Page', () => {
@@ -37,11 +38,16 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const utils = render(
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query=""
         setQuery={setQuery}
         filters={[]}
@@ -96,11 +102,16 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const utils = render(
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query="source = openserach_dashboard_sample_logs"
         setQuery={setQuery}
         filters={[]}
@@ -155,11 +166,16 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const utils = render(
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query="source = openserach_dashboard_sample_logs"
         setQuery={setQuery}
         filters={[]}
@@ -217,11 +233,16 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const utils = render(
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query="source = openserach_dashboard_sample_logs"
         setQuery={setQuery}
         filters={[]}
@@ -279,6 +300,10 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const serviceFilters = [
       {
         field: 'serviceName',
@@ -292,7 +317,8 @@ describe('Create Page', () => {
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query=""
         setQuery={setQuery}
         filters={serviceFilters}
@@ -350,6 +376,10 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const serviceFilters = [
       {
         field: 'serviceName',
@@ -363,7 +393,8 @@ describe('Create Page', () => {
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query=""
         setQuery={setQuery}
         filters={serviceFilters}
@@ -421,6 +452,10 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const traceFilters = [
       {
         field: 'traceGroup',
@@ -434,7 +469,8 @@ describe('Create Page', () => {
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query=""
         setQuery={setQuery}
         filters={traceFilters}
@@ -492,6 +528,10 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const traceFilters = [
       {
         field: 'traceGroup',
@@ -505,7 +545,8 @@ describe('Create Page', () => {
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query=""
         setQuery={setQuery}
         filters={traceFilters}
diff --git a/dashboards-observability/public/components/application_analytics/components/app_table.tsx b/dashboards-observability/public/components/application_analytics/components/app_table.tsx
index 8fa9238ab..73b01a67b 100644
--- a/dashboards-observability/public/components/application_analytics/components/app_table.tsx
+++ b/dashboards-observability/public/components/application_analytics/components/app_table.tsx
@@ -53,7 +53,7 @@ export function AppTable(props: AppTableProps) {
     http,
     chrome,
     applications,
-    parentBreadcrumb,
+    parentBreadcrumbs,
     fetchApplications,
     renameApplication,
     deleteApplication,
@@ -70,7 +70,7 @@ export function AppTable(props: AppTableProps) {
 
   useEffect(() => {
     chrome.setBreadcrumbs([
-      parentBreadcrumb,
+      ...parentBreadcrumbs,
       {
         text: 'Application analytics',
         href: '#/application_analytics',
diff --git a/dashboards-observability/public/components/application_analytics/components/application.tsx b/dashboards-observability/public/components/application_analytics/components/application.tsx
index 269cc7c04..ecde5e1a0 100644
--- a/dashboards-observability/public/components/application_analytics/components/application.tsx
+++ b/dashboards-observability/public/components/application_analytics/components/application.tsx
@@ -27,13 +27,14 @@ import React, { ReactChild, useEffect, useState } from 'react';
 import { uniqueId } from 'lodash';
 import { useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
+import { last } from 'lodash';
+import { DashboardContent } from '../../../components/trace_analytics/components/dashboard/dashboard_content';
 import {
   filtersToDsl,
   PanelTitle,
 } from '../../../../public/components/trace_analytics/components/common/helper_functions';
 import { SpanDetailTable } from '../../../../public/components/trace_analytics/components/traces/span_detail_table';
 import { Explorer } from '../../explorer/explorer';
-import { Dashboard } from '../../trace_analytics/components/dashboard';
 import { Services } from '../../trace_analytics/components/services';
 import { Traces } from '../../trace_analytics/components/traces';
 import { Configuration } from './configuration';
@@ -110,7 +111,7 @@ export function Application(props: AppDetailProps) {
     notifications,
     appId,
     chrome,
-    parentBreadcrumb,
+    parentBreadcrumbs,
     startTime,
     endTime,
     query,
@@ -211,14 +212,14 @@ export function Application(props: AppDetailProps) {
 
   useEffect(() => {
     chrome.setBreadcrumbs([
-      parentBreadcrumb,
+      ...parentBreadcrumbs,
       {
         text: 'Application analytics',
         href: '#/application_analytics',
       },
       {
         text: application.name,
-        href: `${parentBreadcrumb.href}${appId}`,
+        href: `${last(parentBreadcrumbs)!.href}application_analytics/${appId}`,
       },
     ]);
     setStartTimeForApp(sessionStorage.getItem(`${application.name}StartTime`) || 'now-24h');
@@ -230,6 +231,12 @@ export function Application(props: AppDetailProps) {
     setSpanDSL(DSL);
   }, [filters, appConfigs, query, startTime, endTime]);
 
+  useEffect(() => {
+    if (selectedTabId !== TAB_LOG_ID) {
+      switchToEditViz('');
+    }
+  }, [selectedTabId]);
+
   const openServiceFlyout = (serviceName: string) => {
     setSpanFlyoutId('');
     setTraceFlyoutId('');
@@ -260,17 +267,29 @@ export function Application(props: AppDetailProps) {
     setTraceFlyoutId('');
   };
 
+  const childBreadcrumbs = [
+    {
+      text: 'Application analytics',
+      href: '#/application_analytics',
+    },
+    {
+      text: `${application.name}`,
+      href: `#/application_analytics/${appId}`,
+    },
+  ];
+
   const getOverview = () => {
     return (
-      <Dashboard
-        {...props}
-        page="app"
-        appId={appId}
-        appName={application.name}
-        setStartTime={setStartTimeForApp}
-        setEndTime={setEndTimeForApp}
-        switchToEditViz={switchToEditViz}
-      />
+      <>
+        <EuiSpacer size="m" />
+        <DashboardContent
+          {...props}
+          page="app"
+          setStartTime={setStartTimeForApp}
+          setEndTime={setEndTimeForApp}
+          childBreadcrumbs={childBreadcrumbs}
+        />
+      </>
     );
   };
 
@@ -339,7 +358,6 @@ export function Application(props: AppDetailProps) {
         http={http}
         searchBarConfigs={searchBarConfigs}
         appId={appId}
-        baseQuery={application.baseQuery}
         addVisualizationToPanel={addVisualizationToPanel}
         startTime={startTime}
         endTime={endTime}
@@ -357,12 +375,13 @@ export function Application(props: AppDetailProps) {
         panelId={application.panelId}
         http={http}
         pplService={pplService}
+        dslService={dslService}
         chrome={chrome}
-        parentBreadcrumb={[parentBreadcrumb]}
+        parentBreadcrumbs={parentBreadcrumbs}
         // App analytics will not be renaming/cloning/deleting panels
-        renameCustomPanel={() => undefined}
-        cloneCustomPanel={(): Promise<string> => Promise.reject()}
-        deleteCustomPanel={(): Promise<string> => Promise.reject()}
+        renameCustomPanel={async () => undefined}
+        cloneCustomPanel={async () => Promise.reject()}
+        deleteCustomPanel={async () => Promise.reject()}
         setToast={setToasts}
         page="app"
         appName={application.name}
@@ -394,7 +413,7 @@ export function Application(props: AppDetailProps) {
     return (
       <Configuration
         appId={appId}
-        parentBreadcrumb={parentBreadcrumb}
+        parentBreadcrumbs={parentBreadcrumbs}
         application={application}
         switchToEditViz={switchToEditViz}
         visWithAvailability={visWithAvailability}
diff --git a/dashboards-observability/public/components/application_analytics/components/configuration.tsx b/dashboards-observability/public/components/application_analytics/components/configuration.tsx
index ec7765287..c07fc9eab 100644
--- a/dashboards-observability/public/components/application_analytics/components/configuration.tsx
+++ b/dashboards-observability/public/components/application_analytics/components/configuration.tsx
@@ -24,12 +24,13 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { ApplicationType } from 'common/types/app_analytics';
+import { last } from 'lodash';
 import React, { useEffect, useState } from 'react';
 
 interface ConfigProps {
   appId: string;
   application: ApplicationType;
-  parentBreadcrumb: EuiBreadcrumb;
+  parentBreadcrumbs: EuiBreadcrumb[];
   visWithAvailability: EuiSelectOption[];
   switchToEditViz: (savedVizId: string) => void;
   updateApp: (appId: string, updateAppData: Partial<ApplicationType>, type: string) => void;
@@ -39,7 +40,7 @@ export const Configuration = (props: ConfigProps) => {
   const {
     appId,
     application,
-    parentBreadcrumb,
+    parentBreadcrumbs,
     visWithAvailability,
     updateApp,
     switchToEditViz,
@@ -72,7 +73,7 @@ export const Configuration = (props: ConfigProps) => {
                       fill
                       onClick={() => {
                         window.location.assign(
-                          `${parentBreadcrumb.href}application_analytics/edit/${appId}`
+                          `${last(parentBreadcrumbs)!.href}application_analytics/edit/${appId}`
                         );
                       }}
                     >
diff --git a/dashboards-observability/public/components/application_analytics/components/create.tsx b/dashboards-observability/public/components/application_analytics/components/create.tsx
index fba8b5525..7a209ac1f 100644
--- a/dashboards-observability/public/components/application_analytics/components/create.tsx
+++ b/dashboards-observability/public/components/application_analytics/components/create.tsx
@@ -26,6 +26,7 @@ import {
 import DSLService from 'public/services/requests/dsl';
 import React, { ReactChild, useEffect, useState } from 'react';
 import PPLService from 'public/services/requests/ppl';
+import { last } from 'lodash';
 import { AppAnalyticsComponentDeps } from '../home';
 import { TraceConfig } from './config_components/trace_config';
 import { ServiceConfig } from './config_components/service_config';
@@ -46,7 +47,7 @@ interface CreateAppProps extends AppAnalyticsComponentDeps {
 
 export const CreateApp = (props: CreateAppProps) => {
   const {
-    parentBreadcrumb,
+    parentBreadcrumbs,
     chrome,
     http,
     query,
@@ -80,7 +81,7 @@ export const CreateApp = (props: CreateAppProps) => {
 
   useEffect(() => {
     chrome.setBreadcrumbs([
-      parentBreadcrumb,
+      ...parentBreadcrumbs,
       {
         text: 'Application analytics',
         href: '#/application_analytics',
@@ -162,7 +163,7 @@ export const CreateApp = (props: CreateAppProps) => {
 
   const onCancel = () => {
     clearStorage();
-    window.location.assign(`${parentBreadcrumb.href}application_analytics`);
+    window.location.assign(`${last(parentBreadcrumbs)!.href}application_analytics`);
   };
 
   return (
diff --git a/dashboards-observability/public/components/application_analytics/home.tsx b/dashboards-observability/public/components/application_analytics/home.tsx
index f73c1c6ae..644a23bd2 100644
--- a/dashboards-observability/public/components/application_analytics/home.tsx
+++ b/dashboards-observability/public/components/application_analytics/home.tsx
@@ -13,7 +13,7 @@ import SavedObjects from 'public/services/saved_objects/event_analytics/saved_ob
 import TimestampUtils from 'public/services/timestamp/timestamp';
 import { EuiGlobalToastList, EuiLink } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
-import _, { isEmpty } from 'lodash';
+import { isEmpty, last } from 'lodash';
 import { useDispatch } from 'react-redux';
 import { AppTable } from './components/app_table';
 import { Application } from './components/application';
@@ -64,7 +64,7 @@ export const Home = (props: HomeProps) => {
     dslService,
     timestampUtils,
     savedObjects,
-    parentBreadcrumb,
+    parentBreadcrumbs,
     http,
     chrome,
     notifications,
@@ -124,7 +124,7 @@ export const Home = (props: HomeProps) => {
   }, []);
 
   const commonProps: AppAnalyticsComponentDeps = {
-    parentBreadcrumb,
+    parentBreadcrumbs,
     http,
     chrome,
     name,
@@ -321,7 +321,7 @@ export const Home = (props: HomeProps) => {
         }
         if (type !== 'editAvailability') {
           window.location.assign(
-            `${parentBreadcrumb.href}application_analytics/${res.updatedAppId}`
+            `${last(parentBreadcrumbs)!.href}application_analytics/${res.updatedAppId}`
           );
         }
       })
diff --git a/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap b/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
index c82b136c5..4b900b8e7 100644
--- a/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
+++ b/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`Panels Table Component renders empty panel table container 1`] = `
     }
   }
   loading={false}
-  parentBreadcrumb={
+  parentBreadcrumbs={
     Array [
       Object {
         "href": "#/operational_panels/",
@@ -624,7 +624,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
     }
   }
   loading={false}
-  parentBreadcrumb={
+  parentBreadcrumbs={
     Array [
       Object {
         "href": "#/operational_panels/",
diff --git a/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_table.test.tsx b/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_table.test.tsx
index 6ff11f14e..fb754bba3 100644
--- a/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_table.test.tsx
+++ b/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_table.test.tsx
@@ -33,7 +33,7 @@ describe('Panels Table Component', () => {
         customPanels={customPanelData}
         createCustomPanel={createCustomPanel}
         setBreadcrumbs={setBreadcrumbs}
-        parentBreadcrumb={parentBreadcrumb}
+        parentBreadcrumbs={parentBreadcrumb}
         renameCustomPanel={renameCustomPanel}
         cloneCustomPanel={cloneCustomPanel}
         deleteCustomPanelList={deleteCustomPanelList}
@@ -66,7 +66,7 @@ describe('Panels Table Component', () => {
         customPanels={customPanelData}
         createCustomPanel={createCustomPanel}
         setBreadcrumbs={setBreadcrumbs}
-        parentBreadcrumb={parentBreadcrumb}
+        parentBreadcrumbs={parentBreadcrumb}
         renameCustomPanel={renameCustomPanel}
         cloneCustomPanel={cloneCustomPanel}
         deleteCustomPanelList={deleteCustomPanelList}
diff --git a/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_view.test.tsx b/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_view.test.tsx
index 01628d4fa..c5c3d3df0 100644
--- a/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_view.test.tsx
+++ b/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_view.test.tsx
@@ -17,6 +17,7 @@ import {
 } from '../../../../test/panels_constants';
 import httpClientMock from '../../../../test/__mocks__/httpClientMock';
 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';
 
@@ -30,8 +31,9 @@ describe.skip('Panels View Component', () => {
     const panelId = 'L8Sx53wBDp0rvEg3yoLb';
     const http = httpClientMock;
     const pplService = new PPLService(httpClientMock);
+    const dslService = new DSLService(httpClientMock);
     const core = coreStartMock;
-    const parentBreadcrumb = panelBreadCrumbs;
+    const parentBreadcrumbs = panelBreadCrumbs;
     const start = 'now-30m';
     const end = 'now';
     const setStart = jest.fn();
@@ -46,8 +48,9 @@ describe.skip('Panels View Component', () => {
         panelId={panelId}
         http={http}
         pplService={pplService}
+        dslService={dslService}
         chrome={core.chrome}
-        parentBreadcrumb={parentBreadcrumb}
+        parentBreadcrumbs={parentBreadcrumbs}
         renameCustomPanel={renameCustomPanel}
         cloneCustomPanel={cloneCustomPanel}
         deleteCustomPanel={deleteCustomPanel}
@@ -83,8 +86,9 @@ describe.skip('Panels View Component', () => {
     const panelId = 'L8Sx53wBDp0rvEg3yoLb';
     const http = httpClientMock;
     const pplService = new PPLService(httpClientMock);
+    const dslService = new DSLService(httpClientMock);
     const core = coreStartMock;
-    const parentBreadcrumb = panelBreadCrumbs;
+    const parentBreadcrumbs = panelBreadCrumbs;
     const start = 'now-30m';
     const end = 'now';
     const setStart = jest.fn();
@@ -99,8 +103,9 @@ describe.skip('Panels View Component', () => {
         panelId={panelId}
         http={http}
         pplService={pplService}
+        dslService={dslService}
         chrome={core.chrome}
-        parentBreadcrumb={parentBreadcrumb}
+        parentBreadcrumbs={parentBreadcrumbs}
         renameCustomPanel={renameCustomPanel}
         cloneCustomPanel={cloneCustomPanel}
         deleteCustomPanel={deleteCustomPanel}
diff --git a/dashboards-observability/public/components/custom_panels/custom_panel_table.tsx b/dashboards-observability/public/components/custom_panels/custom_panel_table.tsx
index e92334e79..831834a00 100644
--- a/dashboards-observability/public/components/custom_panels/custom_panel_table.tsx
+++ b/dashboards-observability/public/components/custom_panels/custom_panel_table.tsx
@@ -2,6 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+/* eslint-disable react-hooks/exhaustive-deps */
 
 import {
   EuiBreadcrumb,
@@ -63,7 +64,7 @@ interface Props {
   customPanels: CustomPanelListType[];
   createCustomPanel: (newCustomPanelName: string) => void;
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
-  parentBreadcrumb: EuiBreadcrumb[];
+  parentBreadcrumbs: EuiBreadcrumb[];
   renameCustomPanel: (newCustomPanelName: string, customPanelId: string) => void;
   cloneCustomPanel: (newCustomPanelName: string, customPanelId: string) => void;
   deleteCustomPanelList: (customPanelIdList: string[], toastMessage: string) => any;
@@ -76,7 +77,7 @@ export const CustomPanelTable = ({
   customPanels,
   createCustomPanel,
   setBreadcrumbs,
-  parentBreadcrumb,
+  parentBreadcrumbs,
   renameCustomPanel,
   cloneCustomPanel,
   deleteCustomPanelList,
@@ -89,7 +90,7 @@ export const CustomPanelTable = ({
   const [searchQuery, setSearchQuery] = useState('');
 
   useEffect(() => {
-    setBreadcrumbs(parentBreadcrumb);
+    setBreadcrumbs(parentBreadcrumbs);
     fetchCustomPanels();
   }, []);
 
@@ -255,7 +256,7 @@ export const CustomPanelTable = ({
       sortable: true,
       truncateText: true,
       render: (value, record) => (
-        <EuiLink href={`${_.last(parentBreadcrumb).href}${record.id}`}>
+        <EuiLink href={`${_.last(parentBreadcrumbs)!.href}${record.id}`}>
           {_.truncate(value, { length: 100 })}
         </EuiLink>
       ),
diff --git a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx
index 28d4b249c..6865ddb5b 100644
--- a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx
+++ b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx
@@ -6,7 +6,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import {
-  EuiBadge,
   EuiBreadcrumb,
   EuiButton,
   EuiContextMenu,
@@ -27,7 +26,7 @@ import {
   OnTimeChangeProps,
   ShortDate,
 } from '@elastic/eui';
-import _ from 'lodash';
+import { last } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
 import moment from 'moment';
@@ -84,7 +83,7 @@ interface Props {
   pplService: PPLService;
   dslService: DSLService;
   chrome: CoreStart['chrome'];
-  parentBreadcrumb: EuiBreadcrumb[];
+  parentBreadcrumbs: EuiBreadcrumb[];
   renameCustomPanel: (editedCustomPanelName: string, editedCustomPanelId: string) => Promise<void>;
   deleteCustomPanel: (customPanelId: string, customPanelName: string) => Promise<any>;
   cloneCustomPanel: (clonedCustomPanelName: string, clonedCustomPanelId: string) => Promise<string>;
@@ -111,7 +110,7 @@ export const CustomPanelView = ({
   pplService,
   dslService,
   chrome,
-  parentBreadcrumb,
+  parentBreadcrumbs,
   startTime,
   endTime,
   setStartTime,
@@ -243,7 +242,7 @@ export const CustomPanelView = ({
   const onDelete = async () => {
     deleteCustomPanel(panelId, openPanelName).then((res) => {
       setTimeout(() => {
-        window.location.assign(`${_.last(parentBreadcrumb).href}`);
+        window.location.assign(`${last(parentBreadcrumbs)!.href}`);
       }, 1000);
     });
     closeModal();
@@ -286,7 +285,7 @@ export const CustomPanelView = ({
 
   const onClone = async (newCustomPanelName: string) => {
     cloneCustomPanel(newCustomPanelName, panelId).then((id: string) => {
-      window.location.assign(`${_.last(parentBreadcrumb).href}${id}`);
+      window.location.assign(`${last(parentBreadcrumbs)!.href}${id}`);
     });
     closeModal();
   };
@@ -539,22 +538,22 @@ export const CustomPanelView = ({
     let newBreadcrumb;
     if (appPanel) {
       newBreadcrumb = [
-        ...parentBreadcrumb,
+        ...parentBreadcrumbs,
         {
           text: 'Application analytics',
           href: '#/application_analytics',
         },
         {
           text: appName,
-          href: `${_.last(parentBreadcrumb).href}${appId}`,
+          href: `${last(parentBreadcrumbs)!.href}${appId}`,
         },
       ];
     } else {
       newBreadcrumb = [
-        ...parentBreadcrumb,
+        ...parentBreadcrumbs,
         {
           text: openPanelName,
-          href: `${_.last(parentBreadcrumb).href}${panelId}`,
+          href: `${last(parentBreadcrumbs)!.href}${panelId}`,
         },
       ];
     }
diff --git a/dashboards-observability/public/components/custom_panels/home.tsx b/dashboards-observability/public/components/custom_panels/home.tsx
index 0d47f88d5..112015b0b 100644
--- a/dashboards-observability/public/components/custom_panels/home.tsx
+++ b/dashboards-observability/public/components/custom_panels/home.tsx
@@ -8,6 +8,7 @@ import { EuiBreadcrumb, EuiGlobalToastList, EuiLink, ShortDate } from '@elastic/
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import _ from 'lodash';
 import React, { ReactChild, useState } from 'react';
+// eslint-disable-next-line @osd/eslint/module_migration
 import { StaticContext } from 'react-router';
 import { Route, RouteComponentProps } from 'react-router-dom';
 import PPLService from '../../services/requests/ppl';
@@ -42,7 +43,7 @@ import { isNameValid } from './helpers/utils';
 interface Props {
   http: CoreStart['http'];
   chrome: CoreStart['chrome'];
-  parentBreadcrumb: EuiBreadcrumb[];
+  parentBreadcrumbs: EuiBreadcrumb[];
   pplService: PPLService;
   dslService: DSLService;
   renderProps: RouteComponentProps<any, StaticContext, any>;
@@ -51,7 +52,7 @@ interface Props {
 export const Home = ({
   http,
   chrome,
-  parentBreadcrumb,
+  parentBreadcrumbs,
   pplService,
   dslService,
   renderProps,
@@ -98,7 +99,7 @@ export const Home = ({
       })
       .then(async (res) => {
         setToast(`Operational Panel "${newCustomPanelName}" successfully created!`);
-        window.location.assign(`${_.last(parentBreadcrumb).href}${res.newPanelId}`);
+        window.location.assign(`${_.last(parentBreadcrumbs)!.href}${res.newPanelId}`);
       })
       .catch((err) => {
         setToast(
@@ -116,7 +117,7 @@ export const Home = ({
   const renameCustomPanel = (editedCustomPanelName: string, editedCustomPanelId: string) => {
     if (!isNameValid(editedCustomPanelName)) {
       setToast('Invalid Custom Panel name', 'danger');
-      return;
+      return Promise.reject();
     }
     const renamePanelObject = {
       panelId: editedCustomPanelId,
@@ -304,7 +305,7 @@ export const Home = ({
                 customPanels={customPanelData}
                 createCustomPanel={createCustomPanel}
                 setBreadcrumbs={chrome.setBreadcrumbs}
-                parentBreadcrumb={parentBreadcrumb}
+                parentBreadcrumbs={parentBreadcrumbs}
                 renameCustomPanel={renameCustomPanel}
                 cloneCustomPanel={cloneCustomPanel}
                 deleteCustomPanelList={deleteCustomPanelList}
@@ -324,7 +325,7 @@ export const Home = ({
               pplService={pplService}
               dslService={dslService}
               chrome={chrome}
-              parentBreadcrumb={parentBreadcrumb}
+              parentBreadcrumbs={parentBreadcrumbs}
               renameCustomPanel={renameCustomPanel}
               cloneCustomPanel={cloneCustomPanel}
               deleteCustomPanel={deleteCustomPanel}
diff --git a/dashboards-observability/public/components/explorer/event_analytics.tsx b/dashboards-observability/public/components/explorer/event_analytics.tsx
index 8187d97d3..7690e474d 100644
--- a/dashboards-observability/public/components/explorer/event_analytics.tsx
+++ b/dashboards-observability/public/components/explorer/event_analytics.tsx
@@ -16,7 +16,7 @@ import { LogExplorer } from './log_explorer';
 
 export const EventAnalytics = ({
   chrome,
-  parentBreadcrumb,
+  parentBreadcrumbs,
   pplService,
   dslService,
   savedObjects,
@@ -63,9 +63,9 @@ export const EventAnalytics = ({
         <Switch>
           <Route
             path={[`/event_analytics/explorer/:id`, `/event_analytics/explorer`]}
-            render={(props) => {
+            render={(prop) => {
               chrome.setBreadcrumbs([
-                parentBreadcrumb,
+                ...parentBreadcrumbs,
                 eventAnalyticsBreadcrumb,
                 {
                   text: 'Explorer',
@@ -74,7 +74,7 @@ export const EventAnalytics = ({
               ]);
               return (
                 <LogExplorer
-                  savedObjectId={props.match.params.id}
+                  savedObjectId={prop.match.params.id}
                   pplService={pplService}
                   dslService={dslService}
                   savedObjects={savedObjects}
@@ -91,9 +91,9 @@ export const EventAnalytics = ({
           <Route
             exact
             path={['/', '/event_analytics']}
-            render={(props) => {
+            render={() => {
               chrome.setBreadcrumbs([
-                parentBreadcrumb,
+                ...parentBreadcrumbs,
                 eventAnalyticsBreadcrumb,
                 {
                   text: 'Home',
diff --git a/dashboards-observability/public/components/explorer/explorer.tsx b/dashboards-observability/public/components/explorer/explorer.tsx
index 957c22415..5b3f3244f 100644
--- a/dashboards-observability/public/components/explorer/explorer.tsx
+++ b/dashboards-observability/public/components/explorer/explorer.tsx
@@ -42,7 +42,6 @@ import {
   SELECTED_TIMESTAMP,
   AVAILABLE_FIELDS,
   TIME_INTERVAL_OPTIONS,
-  HAS_SAVED_TIMESTAMP,
   SAVED_QUERY,
   SAVED_VISUALIZATION,
   SAVED_OBJECT_ID,
diff --git a/dashboards-observability/public/components/explorer/log_explorer.tsx b/dashboards-observability/public/components/explorer/log_explorer.tsx
index f16931fdf..dd10d70a7 100644
--- a/dashboards-observability/public/components/explorer/log_explorer.tsx
+++ b/dashboards-observability/public/components/explorer/log_explorer.tsx
@@ -2,6 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+/* eslint-disable react-hooks/exhaustive-deps */
 
 import './log_explorer.scss';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
@@ -51,7 +52,7 @@ export const LogExplorer = ({
 }: ILogExplorerProps) => {
   const dispatch = useDispatch();
   const tabIds = useSelector(selectQueryTabs).queryTabIds.filter(
-    (tabid: string) => !tabid.startsWith('application-analytics-tab')
+    (tabid: string) => !tabid.match(APP_ANALYTICS_TAB_ID_REGEX)
   );
   const tabNames = useSelector(selectQueryTabs).tabNames;
   const queries = useSelector(selectQueries);
@@ -143,11 +144,11 @@ export const LogExplorer = ({
   function getQueryTab({
     tabTitle,
     tabId,
-    handleTabClose,
+    handlesTabClose,
   }: {
     tabTitle: string;
     tabId: string;
-    handleTabClose: (TabIdToBeClosed: string) => void;
+    handlesTabClose: (TabIdToBeClosed: string) => void;
   }) {
     return {
       id: tabId,
@@ -159,7 +160,7 @@ export const LogExplorer = ({
               type="cross"
               onClick={(e) => {
                 e.stopPropagation();
-                handleTabClose(tabId);
+                handlesTabClose(tabId);
               }}
               data-test-subj="eventExplorer__tabClose"
             />
@@ -191,13 +192,11 @@ export const LogExplorer = ({
 
   const memorizedTabs = useMemo(() => {
     const res = map(tabIds, (tabId) => {
-      if (!tabId.match(APP_ANALYTICS_TAB_ID_REGEX)) {
-        return getQueryTab({
-          tabTitle: tabNames[tabId] || TAB_TITLE,
-          tabId,
-          handleTabClose,
-        });
-      }
+      return getQueryTab({
+        tabTitle: tabNames[tabId] || TAB_TITLE,
+        tabId,
+        handlesTabClose: handleTabClose,
+      });
     });
 
     return res;
diff --git a/dashboards-observability/public/components/index.tsx b/dashboards-observability/public/components/index.tsx
index f9c9300a8..267cb6b5d 100644
--- a/dashboards-observability/public/components/index.tsx
+++ b/dashboards-observability/public/components/index.tsx
@@ -10,9 +10,9 @@ import { AppPluginStartDependencies } from '../types';
 import { App } from './app';
 
 export const Observability = (
-  CoreStart: CoreStart,
+  CoreStartProp: CoreStart,
   DepsStart: AppPluginStartDependencies,
-  AppMountParameters: AppMountParameters,
+  AppMountParametersProp: AppMountParameters,
   pplService: any,
   dslService: any,
   savedObjects: any,
@@ -20,15 +20,15 @@ export const Observability = (
 ) => {
   ReactDOM.render(
     <App
-      CoreStart={CoreStart}
+      CoreStartProp={CoreStartProp}
       DepsStart={DepsStart}
       pplService={pplService}
       dslService={dslService}
       savedObjects={savedObjects}
       timestampUtils={timestampUtils}
     />,
-    AppMountParameters.element
+    AppMountParametersProp.element
   );
 
-  return () => ReactDOM.unmountComponentAtNode(AppMountParameters.element);
+  return () => ReactDOM.unmountComponentAtNode(AppMountParametersProp.element);
 };
diff --git a/dashboards-observability/public/components/notebooks/components/main.tsx b/dashboards-observability/public/components/notebooks/components/main.tsx
index 971bcc666..9ba18c8e7 100644
--- a/dashboards-observability/public/components/notebooks/components/main.tsx
+++ b/dashboards-observability/public/components/notebooks/components/main.tsx
@@ -2,13 +2,15 @@
  * 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';
-import PPLService from '../../../services/requests/ppl';
 import React, { ReactChild } from 'react';
+// eslint-disable-next-line @osd/eslint/module_migration
 import { Route, Switch } from 'react-router';
 import { HashRouter, RouteComponentProps } from 'react-router-dom';
+import PPLService from '../../../services/requests/ppl';
 import { ChromeBreadcrumb, CoreStart } from '../../../../../../src/core/public';
 import { DashboardStart } from '../../../../../../src/plugins/dashboard/public';
 import {
@@ -39,19 +41,19 @@ type MainProps = RouteComponentProps & {
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
 };
 
-type MainState = {
-  data: Array<NotebookType>;
+interface MainState {
+  data: NotebookType[];
   openedNotebook: NotebookType | undefined;
   toasts: Toast[];
   loading: boolean;
-};
+}
 
-export type NotebookType = {
+export interface NotebookType {
   path: string;
   id: string;
   dateCreated: string;
   dateModified: string;
-};
+}
 
 export class Main extends React.Component<MainProps, MainState> {
   constructor(props: Readonly<MainProps>) {
@@ -272,7 +274,7 @@ export class Main extends React.Component<MainProps, MainState> {
           body: JSON.stringify({ visIds }),
         })
         .then((res) => {
-          const newData = res.body.map((notebook) => ({
+          const newData = res.body.map((notebook: any) => ({
             path: notebook.name,
             id: notebook.id,
             dateCreated: notebook.dateCreated,
@@ -283,7 +285,7 @@ export class Main extends React.Component<MainProps, MainState> {
           }));
         });
       this.setToast(`Sample notebooks successfully added.`);
-    } catch (err) {
+    } catch (err: any) {
       this.setToast('Error adding sample notebooks.', 'danger');
       console.error(err.body.message);
     } finally {
diff --git a/dashboards-observability/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap b/dashboards-observability/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
index 962c11fa0..b28ee37d9 100644
--- a/dashboards-observability/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
+++ b/dashboards-observability/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
@@ -3,6 +3,18 @@
 exports[`Dashboard component renders dashboard 1`] = `
 <Dashboard
   appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Dashboards",
+      },
+    ]
+  }
   chrome={
     Object {
       "getIsNavDrawerLocked$": [MockFunction],
@@ -39,11 +51,13 @@ exports[`Dashboard component renders dashboard 1`] = `
   http={[MockFunction]}
   indicesExist={true}
   page="dashboard"
-  parentBreadcrumb={
-    Object {
-      "href": "test#/",
-      "text": "test",
-    }
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
   }
   query=""
   setEndTime={[MockFunction]}
@@ -80,13 +94,65 @@ exports[`Dashboard component renders dashboard 1`] = `
       Dashboard
     </h2>
   </EuiTitle>
-  <SearchBar
+  <DashboardContent
     appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Dashboards",
+        },
+      ]
+    }
+    chrome={
+      Object {
+        "getIsNavDrawerLocked$": [MockFunction],
+        "setBreadcrumbs": [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [
+                Object {
+                  "href": "test#/",
+                  "text": "test",
+                },
+                Object {
+                  "href": "#/trace_analytics/home",
+                  "text": "Trace analytics",
+                },
+                Object {
+                  "href": "#/trace_analytics/home",
+                  "text": "Dashboards",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
     endTime="now"
     filters={Array []}
+    http={[MockFunction]}
+    indicesExist={true}
     page="dashboard"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
     query=""
-    refresh={[Function]}
     setEndTime={[MockFunction]}
     setFilters={
       [MockFunction] {
@@ -107,439 +173,435 @@ exports[`Dashboard component renders dashboard 1`] = `
     setStartTime={[MockFunction]}
     startTime="now-5m"
   >
-    <EuiFlexGroup
-      gutterSize="s"
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      page="dashboard"
+      query=""
+      refresh={[Function]}
+      setEndTime={[MockFunction]}
+      setFilters={
+        [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        }
+      }
+      setQuery={[MockFunction]}
+      setStartTime={[MockFunction]}
+      startTime="now-5m"
     >
-      <div
-        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+      <EuiFlexGroup
+        gutterSize="s"
       >
-        <EuiFlexItem>
-          <div
-            className="euiFlexItem"
-          >
-            <EuiFieldSearch
-              compressed={false}
-              data-test-subj="search-bar-input-box"
-              fullWidth={true}
-              incremental={false}
-              isClearable={false}
-              isLoading={false}
-              onChange={[Function]}
-              onSearch={[Function]}
-              placeholder="Trace ID, trace group name, service name"
-              value=""
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
             >
-              <EuiFormControlLayout
+              <EuiFieldSearch
                 compressed={false}
+                data-test-subj="search-bar-input-box"
                 fullWidth={true}
-                icon="search"
+                incremental={false}
+                isClearable={false}
                 isLoading={false}
+                onChange={[Function]}
+                onSearch={[Function]}
+                placeholder="Trace ID, trace group name, service name"
+                value=""
               >
-                <div
-                  className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
                 >
                   <div
-                    className="euiFormControlLayout__childrenWrapper"
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
                   >
-                    <EuiValidatableControl>
-                      <input
-                        className="euiFieldSearch euiFieldSearch--fullWidth"
-                        data-test-subj="search-bar-input-box"
-                        onChange={[Function]}
-                        onKeyUp={[Function]}
-                        placeholder="Trace ID, trace group name, service name"
-                        type="search"
-                        value=""
-                      />
-                    </EuiValidatableControl>
-                    <EuiFormControlLayoutIcons
-                      icon="search"
-                      isLoading={false}
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
                     >
-                      <div
-                        className="euiFormControlLayoutIcons"
-                      >
-                        <EuiFormControlLayoutCustomIcon
+                      <EuiValidatableControl>
+                        <input
+                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          data-test-subj="search-bar-input-box"
+                          onChange={[Function]}
+                          onKeyUp={[Function]}
+                          placeholder="Trace ID, trace group name, service name"
                           type="search"
+                          value=""
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
                         >
-                          <span
-                            className="euiFormControlLayoutCustomIcon"
+                          <EuiFormControlLayoutCustomIcon
+                            type="search"
                           >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiFormControlLayoutCustomIcon__icon"
-                              type="search"
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
                             >
-                              <EuiIconSearch
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                type="search"
                               >
-                                <svg
+                                <EuiIconSearch
                                   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>
+                                  <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>
-                </div>
-              </EuiFormControlLayout>
-            </EuiFieldSearch>
-          </div>
-        </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
-          style={
-            Object {
-              "maxWidth": "40vw",
-            }
-          }
-        >
-          <div
-            className="euiFlexItem euiFlexItem--flexGrowZero"
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
             style={
               Object {
                 "maxWidth": "40vw",
               }
             }
           >
-            <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",
-                  },
-                ]
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              style={
+                Object {
+                  "maxWidth": "40vw",
+                }
               }
-              dateFormat=""
-              end="now"
-              isAutoRefreshOnly={false}
-              isDisabled={false}
-              isPaused={true}
-              onTimeChange={[Function]}
-              recentlyUsedRanges={Array []}
-              refreshInterval={0}
-              showUpdateButton={false}
-              start="now-5m"
-              timeFormat="HH:mm"
             >
-              <EuiFlexGroup
-                className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
-                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={false}
+                start="now-5m"
+                timeFormat="HH:mm"
               >
-                <div
-                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                <EuiFlexGroup
+                  className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  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-5m"
-                          />
-                        }
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <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-5m"
+                            />
+                          }
                         >
-                          <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-5m"
+                          <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}
-                              id="QuickSelectPopover"
-                              isOpen={false}
-                              ownFocus={true}
-                              panelPaddingSize="m"
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
                             >
-                              <EuiOutsideClickDetector
-                                isDisabled={true}
-                                onOutsideClick={[Function]}
+                              <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}
+                                id="QuickSelectPopover"
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
                               >
-                                <div
-                                  className="euiPopover euiPopover--anchorDownLeft"
-                                  id="QuickSelectPopover"
-                                  onKeyDown={[Function]}
-                                  onMouseDown={[Function]}
-                                  onMouseUp={[Function]}
-                                  onTouchEnd={[Function]}
-                                  onTouchStart={[Function]}
+                                <EuiOutsideClickDetector
+                                  isDisabled={true}
+                                  onOutsideClick={[Function]}
                                 >
                                   <div
-                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                    className="euiPopover euiPopover--anchorDownLeft"
+                                    id="QuickSelectPopover"
+                                    onKeyDown={[Function]}
+                                    onMouseDown={[Function]}
+                                    onMouseUp={[Function]}
+                                    onTouchEnd={[Function]}
+                                    onTouchStart={[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",
-                                        }
-                                      }
+                                    <div
+                                      className="euiPopover__anchor euiQuickSelectPopover__anchor"
                                     >
-                                      <button
+                                      <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"
-                                          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"
+                                            iconType="arrowDown"
+                                            textProps={
+                                              Object {
+                                                "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                              }
+                                            }
                                           >
-                                            <EuiIcon
-                                              className="euiButtonContent__icon"
-                                              size="m"
-                                              type="arrowDown"
-                                            >
-                                              <EuiIconArrowDown
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiButtonContent__icon"
-                                                focusable="false"
-                                                role="img"
-                                                style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium 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"
+                                                size="m"
+                                                type="arrowDown"
                                               >
-                                                <EuiIconCalendar
+                                                <EuiIconArrowDown
                                                   aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium"
+                                                  className="euiIcon euiIcon--medium euiButtonContent__icon"
                                                   focusable="false"
                                                   role="img"
                                                   style={null}
                                                 >
                                                   <svg
                                                     aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium"
+                                                    className="euiIcon euiIcon--medium euiButtonContent__icon"
                                                     focusable="false"
                                                     height={16}
                                                     role="img"
@@ -549,578 +611,690 @@ exports[`Dashboard component renders dashboard 1`] = `
                                                     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>
-                              </EuiOutsideClickDetector>
-                            </EuiPopover>
-                          </EuiQuickSelectPopover>
-                          <div
-                            className="euiFormControlLayout__childrenWrapper"
-                          >
-                            <EuiDatePickerRange
-                              className="euiDatePickerRange--inGroup"
-                              endDateControl={<div />}
-                              iconType={false}
-                              isCustom={true}
-                              startDateControl={<div />}
+                                </EuiOutsideClickDetector>
+                              </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 5 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 5 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>
-                </div>
-              </EuiFlexGroup>
-            </EuiSuperDatePicker>
-          </div>
-        </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
-        >
-          <div
-            className="euiFlexItem euiFlexItem--flexGrowZero"
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
           >
-            <EuiButton
-              data-test-subj="search-bar-refresh-button"
-              fill={true}
-              iconType="refresh"
-              onClick={[Function]}
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <EuiButtonDisplay
+              <EuiButton
                 data-test-subj="search-bar-refresh-button"
-                disabled={false}
-                element="button"
                 fill={true}
                 iconType="refresh"
-                isDisabled={false}
                 onClick={[Function]}
-                type="button"
               >
-                <button
-                  className="euiButton euiButton--primary euiButton--fill"
+                <EuiButtonDisplay
                   data-test-subj="search-bar-refresh-button"
                   disabled={false}
+                  element="button"
+                  fill={true}
+                  iconType="refresh"
+                  isDisabled={false}
                   onClick={[Function]}
                   type="button"
                 >
-                  <EuiButtonContent
-                    className="euiButton__content"
-                    iconSide="left"
-                    iconType="refresh"
-                    textProps={
-                      Object {
-                        "className": "euiButton__text",
-                      }
-                    }
+                  <button
+                    className="euiButton euiButton--primary euiButton--fill"
+                    data-test-subj="search-bar-refresh-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    type="button"
                   >
-                    <span
-                      className="euiButtonContent euiButton__content"
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
                     >
-                      <EuiIcon
-                        className="euiButtonContent__icon"
-                        size="m"
-                        type="refresh"
+                      <span
+                        className="euiButtonContent euiButton__content"
                       >
-                        <EuiIconRefresh
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiButtonContent__icon"
-                          focusable="false"
-                          role="img"
-                          style={null}
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          size="m"
+                          type="refresh"
                         >
-                          <svg
+                          <EuiIconRefresh
                             aria-hidden={true}
                             className="euiIcon euiIcon--medium 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"
-                      >
-                        Refresh
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium 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"
+                        >
+                          Refresh
+                        </span>
                       </span>
-                    </span>
-                  </EuiButtonContent>
-                </button>
-              </EuiButtonDisplay>
-            </EuiButton>
-          </div>
-        </EuiFlexItem>
-      </div>
-    </EuiFlexGroup>
-    <EuiSpacer
-      size="s"
-    >
-      <div
-        className="euiSpacer euiSpacer--s"
-      />
-    </EuiSpacer>
-    <Filters
-      appConfigs={Array []}
-      filters={Array []}
-      page="dashboard"
-      setFilters={
-        [MockFunction] {
-          "calls": Array [
-            Array [
-              Array [],
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        page="dashboard"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": undefined,
+              },
             ],
-          ],
-          "results": Array [
-            Object {
-              "type": "return",
-              "value": undefined,
-            },
-          ],
-        }
-      }
-    >
-      <EuiFlexGroup
-        alignItems="center"
-        gutterSize="xs"
-        responsive={false}
-        style={
-          Object {
-            "minHeight": 32,
           }
         }
       >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="xs"
+          responsive={false}
           style={
             Object {
               "minHeight": 32,
             }
           }
         >
-          <EuiFlexItem
-            grow={false}
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
           >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+            <EuiFlexItem
+              grow={false}
             >
-              <GlobalFilterButton>
-                <EuiPopover
-                  anchorPosition="rightUp"
-                  button={
-                    <EuiButtonIcon
-                      aria-label="Change all filters"
-                      iconType="filter"
-                      onClick={[Function]}
-                      title="Change all filters"
-                    />
-                  }
-                  closePopover={[Function]}
-                  display="inlineBlock"
-                  hasArrow={true}
-                  isOpen={false}
-                  ownFocus={false}
-                  panelPaddingSize="none"
-                  withTitle={true}
-                >
-                  <EuiOutsideClickDetector
-                    isDisabled={true}
-                    onOutsideClick={[Function]}
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <GlobalFilterButton>
+                  <EuiPopover
+                    anchorPosition="rightUp"
+                    button={
+                      <EuiButtonIcon
+                        aria-label="Change all filters"
+                        iconType="filter"
+                        onClick={[Function]}
+                        title="Change all filters"
+                      />
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={false}
+                    panelPaddingSize="none"
+                    withTitle={true}
                   >
-                    <div
-                      className="euiPopover euiPopover--anchorRightUp euiPopover--withTitle"
-                      onKeyDown={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchStart={[Function]}
+                    <EuiOutsideClickDetector
+                      isDisabled={true}
+                      onOutsideClick={[Function]}
                     >
                       <div
-                        className="euiPopover__anchor"
+                        className="euiPopover euiPopover--anchorRightUp euiPopover--withTitle"
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseUp={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
                       >
-                        <EuiButtonIcon
-                          aria-label="Change all filters"
-                          iconType="filter"
-                          onClick={[Function]}
-                          title="Change all filters"
+                        <div
+                          className="euiPopover__anchor"
                         >
-                          <button
+                          <EuiButtonIcon
                             aria-label="Change all filters"
-                            className="euiButtonIcon euiButtonIcon--primary"
-                            disabled={false}
+                            iconType="filter"
                             onClick={[Function]}
                             title="Change all filters"
-                            type="button"
                           >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              size="m"
-                              type="filter"
+                            <button
+                              aria-label="Change all filters"
+                              className="euiButtonIcon euiButtonIcon--primary"
+                              disabled={false}
+                              onClick={[Function]}
+                              title="Change all filters"
+                              type="button"
                             >
-                              <EuiIconFilter
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiButtonIcon__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiButtonIcon__icon"
+                                size="m"
+                                type="filter"
                               >
-                                <svg
+                                <EuiIconFilter
                                   aria-hidden={true}
                                   className="euiIcon euiIcon--medium euiButtonIcon__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="M7.999 15.999a8 8 0 110-16 8 8 0 010 16zM8 15A7 7 0 108 1a7 7 0 000 14zM3.5 5h9a.5.5 0 110 1h-9a.5.5 0 010-1zm2 3h5a.5.5 0 110 1h-5a.5.5 0 010-1zm2 3h1a.5.5 0 110 1h-1a.5.5 0 110-1z"
-                                    fillRule="evenodd"
-                                  />
-                                </svg>
-                              </EuiIconFilter>
-                            </EuiIcon>
-                          </button>
-                        </EuiButtonIcon>
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiButtonIcon__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="M7.999 15.999a8 8 0 110-16 8 8 0 010 16zM8 15A7 7 0 108 1a7 7 0 000 14zM3.5 5h9a.5.5 0 110 1h-9a.5.5 0 010-1zm2 3h5a.5.5 0 110 1h-5a.5.5 0 010-1zm2 3h1a.5.5 0 110 1h-1a.5.5 0 110-1z"
+                                      fillRule="evenodd"
+                                    />
+                                  </svg>
+                                </EuiIconFilter>
+                              </EuiIcon>
+                            </button>
+                          </EuiButtonIcon>
+                        </div>
                       </div>
-                    </div>
-                  </EuiOutsideClickDetector>
-                </EuiPopover>
-              </GlobalFilterButton>
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-          >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+                    </EuiOutsideClickDetector>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
             >
-              <AddFilterButton>
-                <EuiPopover
-                  anchorPosition="downLeft"
-                  button={
-                    <EuiButtonEmpty
-                      onClick={[Function]}
-                      size="xs"
-                    >
-                      + Add filter
-                    </EuiButtonEmpty>
-                  }
-                  closePopover={[Function]}
-                  display="inlineBlock"
-                  hasArrow={true}
-                  isOpen={false}
-                  ownFocus={false}
-                  panelPaddingSize="m"
-                  withTitle={true}
-                >
-                  <EuiOutsideClickDetector
-                    isDisabled={true}
-                    onOutsideClick={[Function]}
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={false}
+                    panelPaddingSize="m"
+                    withTitle={true}
                   >
-                    <div
-                      className="euiPopover euiPopover--anchorDownLeft euiPopover--withTitle"
-                      onKeyDown={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchStart={[Function]}
+                    <EuiOutsideClickDetector
+                      isDisabled={true}
+                      onOutsideClick={[Function]}
                     >
                       <div
-                        className="euiPopover__anchor"
+                        className="euiPopover euiPopover--anchorDownLeft euiPopover--withTitle"
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseUp={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
                       >
-                        <EuiButtonEmpty
-                          onClick={[Function]}
-                          size="xs"
+                        <div
+                          className="euiPopover__anchor"
                         >
-                          <button
-                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
-                            disabled={false}
+                          <EuiButtonEmpty
                             onClick={[Function]}
-                            type="button"
+                            size="xs"
                           >
-                            <EuiButtonContent
-                              className="euiButtonEmpty__content"
-                              iconSide="left"
-                              textProps={
-                                Object {
-                                  "className": "euiButtonEmpty__text",
-                                }
-                              }
+                            <button
+                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                              disabled={false}
+                              onClick={[Function]}
+                              type="button"
                             >
-                              <span
-                                className="euiButtonContent euiButtonEmpty__content"
+                              <EuiButtonContent
+                                className="euiButtonEmpty__content"
+                                iconSide="left"
+                                textProps={
+                                  Object {
+                                    "className": "euiButtonEmpty__text",
+                                  }
+                                }
                               >
                                 <span
-                                  className="euiButtonEmpty__text"
+                                  className="euiButtonContent euiButtonEmpty__content"
                                 >
-                                  + Add filter
+                                  <span
+                                    className="euiButtonEmpty__text"
+                                  >
+                                    + Add filter
+                                  </span>
                                 </span>
-                              </span>
-                            </EuiButtonContent>
-                          </button>
-                        </EuiButtonEmpty>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonEmpty>
+                        </div>
                       </div>
-                    </div>
-                  </EuiOutsideClickDetector>
-                </EuiPopover>
-              </AddFilterButton>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-    </Filters>
-  </SearchBar>
-  <EuiSpacer
-    size="m"
-  >
-    <div
-      className="euiSpacer euiSpacer--m"
-    />
-  </EuiSpacer>
-  <DashboardTable
-    addFilter={[Function]}
-    addPercentileFilter={[Function]}
-    filters={Array []}
-    items={Array []}
-    loading={false}
-    page="dashboard"
-    setRedirect={[Function]}
-  >
-    <EuiPanel>
+                    </EuiOutsideClickDetector>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
       <div
-        className="euiPanel euiPanel--paddingMedium"
-      >
-        <EuiFlexGroup
-          alignItems="center"
-          gutterSize="s"
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <DashboardTable
+      addFilter={[Function]}
+      addPercentileFilter={[Function]}
+      filters={Array []}
+      items={Array []}
+      loading={false}
+      page="dashboard"
+      setRedirect={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium"
         >
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
           >
-            <EuiFlexItem
-              grow={10}
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrow10"
+              <EuiFlexItem
+                grow={10}
               >
-                <PanelTitle
-                  title="Latency by trace group"
-                  totalItems={0}
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow10"
                 >
-                  <EuiText
-                    size="m"
+                  <PanelTitle
+                    title="Latency by trace group"
+                    totalItems={0}
                   >
-                    <div
-                      className="euiText euiText--medium"
+                    <EuiText
+                      size="m"
                     >
-                      <span
-                        className="panel-title"
-                      >
-                        Latency by trace group
-                      </span>
-                      <span
-                        className="panel-title-count"
+                      <div
+                        className="euiText euiText--medium"
                       >
-                         (0)
-                      </span>
-                    </div>
-                  </EuiText>
-                </PanelTitle>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
+                        <span
+                          className="panel-title"
+                        >
+                          Latency by trace group
+                        </span>
+                        <span
+                          className="panel-title-count"
+                        >
+                           (0)
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
               >
-                <EuiLink
-                  data-test-subj="dashboard-table-percentile-button-1"
-                  onClick={[Function]}
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <button
-                    className="euiLink euiLink--primary"
+                  <EuiLink
                     data-test-subj="dashboard-table-percentile-button-1"
-                    disabled={false}
                     onClick={[Function]}
-                    type="button"
                   >
-                    <EuiText
-                      size="xs"
+                    <button
+                      className="euiLink euiLink--primary"
+                      data-test-subj="dashboard-table-percentile-button-1"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
                     >
-                      <div
-                        className="euiText euiText--extraSmall"
+                      <EuiText
+                        size="xs"
                       >
-                        <span
-                          style={
-                            Object {
-                              "color": "#957ac9",
+                        <div
+                          className="euiText euiText--extraSmall"
+                        >
+                          <span
+                            style={
+                              Object {
+                                "color": "#957ac9",
+                              }
                             }
-                          }
+                          >
+                            □
+                          </span>
+                           &lt; 95 percentile
+                        </div>
+                      </EuiText>
+                    </button>
+                  </EuiLink>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={1}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow1"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <EuiLink
+                    data-test-subj="dashboard-table-percentile-button-2"
+                    onClick={[Function]}
+                  >
+                    <button
+                      className="euiLink euiLink--primary"
+                      data-test-subj="dashboard-table-percentile-button-2"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiText
+                        size="xs"
+                      >
+                        <div
+                          className="euiText euiText--extraSmall"
                         >
-                          □
-                        </span>
-                         &lt; 95 percentile
-                      </div>
-                    </EuiText>
-                  </button>
-                </EuiLink>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={1}
+                          <span
+                            style={
+                              Object {
+                                "color": "#957ac9",
+                              }
+                            }
+                          >
+                            ■
+                          </span>
+                           &gt;= 95 percentile
+                        </div>
+                      </EuiText>
+                    </button>
+                  </EuiLink>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={1}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow1"
+                />
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
+          <EuiHorizontalRule
+            margin="none"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full"
+            />
+          </EuiHorizontalRule>
+          <NoMatchMessage
+            size="xl"
+          >
+            <EuiSpacer
+              size="xl"
             >
               <div
-                className="euiFlexItem euiFlexItem--flexGrow1"
+                className="euiSpacer euiSpacer--xl"
               />
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
+            </EuiSpacer>
+            <EuiEmptyPrompt
+              body={
+                <EuiText>
+                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                </EuiText>
+              }
+              title={
+                <h2>
+                  No matches
+                </h2>
+              }
             >
               <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
+                className="euiEmptyPrompt"
               >
-                <EuiLink
-                  data-test-subj="dashboard-table-percentile-button-2"
-                  onClick={[Function]}
+                <EuiTextColor
+                  color="subdued"
                 >
-                  <button
-                    className="euiLink euiLink--primary"
-                    data-test-subj="dashboard-table-percentile-button-2"
-                    disabled={false}
-                    onClick={[Function]}
-                    type="button"
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
                   >
-                    <EuiText
-                      size="xs"
+                    <EuiTitle
+                      size="m"
+                    >
+                      <h2
+                        className="euiTitle euiTitle--medium"
+                      >
+                        No matches
+                      </h2>
+                    </EuiTitle>
+                    <EuiSpacer
+                      size="m"
                     >
                       <div
-                        className="euiText euiText--extraSmall"
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
                       >
-                        <span
-                          style={
-                            Object {
-                              "color": "#957ac9",
-                            }
-                          }
-                        >
-                          ■
-                        </span>
-                         &gt;= 95 percentile
+                        <EuiText>
+                          <div
+                            className="euiText euiText--medium"
+                          >
+                            No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                          </div>
+                        </EuiText>
                       </div>
                     </EuiText>
-                  </button>
-                </EuiLink>
+                  </span>
+                </EuiTextColor>
               </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={1}
+            </EuiEmptyPrompt>
+            <EuiSpacer
+              size="xl"
             >
               <div
-                className="euiFlexItem euiFlexItem--flexGrow1"
+                className="euiSpacer euiSpacer--xl"
               />
-            </EuiFlexItem>
-          </div>
-        </EuiFlexGroup>
-        <EuiSpacer
-          size="m"
+            </EuiSpacer>
+          </NoMatchMessage>
+        </div>
+      </EuiPanel>
+    </DashboardTable>
+    <EuiSpacer>
+      <div
+        className="euiSpacer euiSpacer--l"
+      />
+    </EuiSpacer>
+    <EuiFlexGroup
+      alignItems="baseline"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <EuiFlexItem
+          grow={4}
         >
           <div
-            className="euiSpacer euiSpacer--m"
-          />
-        </EuiSpacer>
-        <EuiHorizontalRule
-          margin="none"
-        >
-          <hr
-            className="euiHorizontalRule euiHorizontalRule--full"
-          />
-        </EuiHorizontalRule>
-        <NoMatchMessage
-          size="xl"
-        >
-          <EuiSpacer
-            size="xl"
-          >
-            <div
-              className="euiSpacer euiSpacer--xl"
-            />
-          </EuiSpacer>
-          <EuiEmptyPrompt
-            body={
-              <EuiText>
-                No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-              </EuiText>
-            }
-            title={
-              <h2>
-                No matches
-              </h2>
-            }
+            className="euiFlexItem euiFlexItem--flexGrow4"
           >
-            <div
-              className="euiEmptyPrompt"
+            <ServiceMap
+              addFilter={[Function]}
+              currService=""
+              idSelected="latency"
+              page="dashboard"
+              serviceMap={Object {}}
+              setIdSelected={[Function]}
             >
-              <EuiTextColor
-                color="subdued"
-              >
-                <span
-                  className="euiTextColor euiTextColor--subdued"
+              <EuiPanel>
+                <div
+                  className="euiPanel euiPanel--paddingMedium"
                 >
-                  <EuiTitle
-                    size="m"
+                  <PanelTitle
+                    title="Service map"
                   >
-                    <h2
-                      className="euiTitle euiTitle--medium"
+                    <EuiText
+                      size="m"
                     >
-                      No matches
-                    </h2>
-                  </EuiTitle>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <span
+                          className="panel-title"
+                        >
+                          Service map
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
                   <EuiSpacer
                     size="m"
                   >
@@ -1128,620 +1302,530 @@ exports[`Dashboard component renders dashboard 1`] = `
                       className="euiSpacer euiSpacer--m"
                     />
                   </EuiSpacer>
-                  <EuiText>
-                    <div
-                      className="euiText euiText--medium"
-                    >
-                      <EuiText>
-                        <div
-                          className="euiText euiText--medium"
-                        >
-                          No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                        </div>
-                      </EuiText>
-                    </div>
-                  </EuiText>
-                </span>
-              </EuiTextColor>
-            </div>
-          </EuiEmptyPrompt>
-          <EuiSpacer
-            size="xl"
-          >
-            <div
-              className="euiSpacer euiSpacer--xl"
-            />
-          </EuiSpacer>
-        </NoMatchMessage>
-      </div>
-    </EuiPanel>
-  </DashboardTable>
-  <EuiSpacer>
-    <div
-      className="euiSpacer euiSpacer--l"
-    />
-  </EuiSpacer>
-  <EuiFlexGroup
-    alignItems="baseline"
-  >
-    <div
-      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--directionRow euiFlexGroup--responsive"
-    >
-      <EuiFlexItem
-        grow={4}
-      >
-        <div
-          className="euiFlexItem euiFlexItem--flexGrow4"
-        >
-          <ServiceMap
-            addFilter={[Function]}
-            currService=""
-            idSelected="latency"
-            page="dashboard"
-            serviceMap={Object {}}
-            setIdSelected={[Function]}
-          >
-            <EuiPanel>
-              <div
-                className="euiPanel euiPanel--paddingMedium"
-              >
-                <PanelTitle
-                  title="Service map"
-                >
-                  <EuiText
-                    size="m"
-                  >
-                    <div
-                      className="euiText euiText--medium"
-                    >
-                      <span
-                        className="panel-title"
-                      >
-                        Service map
-                      </span>
-                    </div>
-                  </EuiText>
-                </PanelTitle>
-                <EuiSpacer
-                  size="m"
-                >
-                  <div
-                    className="euiSpacer euiSpacer--m"
-                  />
-                </EuiSpacer>
-                <EuiButtonGroup
-                  buttonSize="s"
-                  color="text"
-                  idSelected="latency"
-                  onChange={[Function]}
-                  options={
-                    Array [
-                      Object {
-                        "id": "latency",
-                        "label": "Latency",
-                      },
-                      Object {
-                        "id": "error_rate",
-                        "label": "Error rate",
-                      },
-                      Object {
-                        "id": "throughput",
-                        "label": "Throughput",
-                      },
-                    ]
-                  }
-                >
-                  <fieldset
-                    className="euiButtonGroup__fieldset"
+                  <EuiButtonGroup
+                    buttonSize="s"
+                    color="text"
+                    idSelected="latency"
+                    onChange={[Function]}
+                    options={
+                      Array [
+                        Object {
+                          "id": "latency",
+                          "label": "Latency",
+                        },
+                        Object {
+                          "id": "error_rate",
+                          "label": "Error rate",
+                        },
+                        Object {
+                          "id": "throughput",
+                          "label": "Throughput",
+                        },
+                      ]
+                    }
                   >
-                    <div
-                      className="euiButtonGroup euiButtonGroup--s"
+                    <fieldset
+                      className="euiButtonGroup__fieldset"
                     >
-                      <EuiButtonToggle
-                        className="euiButtonGroup__button euiButtonGroup__button--selected"
-                        color="text"
-                        fill={true}
-                        id="latency"
-                        isSelected={true}
-                        key="0"
-                        label="Latency"
-                        onChange={[Function]}
-                        size="s"
-                        toggleClassName="euiButtonGroup__toggle"
-                        type="single"
+                      <div
+                        className="euiButtonGroup euiButtonGroup--s"
                       >
-                        <EuiToggle
-                          checked={true}
-                          className="euiButtonToggle__wrapper euiButtonGroup__toggle"
-                          inputClassName="euiButtonToggle__input"
+                        <EuiButtonToggle
+                          className="euiButtonGroup__button euiButtonGroup__button--selected"
+                          color="text"
+                          fill={true}
+                          id="latency"
+                          isSelected={true}
+                          key="0"
                           label="Latency"
                           onChange={[Function]}
-                          title="Latency"
+                          size="s"
+                          toggleClassName="euiButtonGroup__toggle"
                           type="single"
                         >
-                          <div
-                            className="euiToggle euiToggle--checked euiButtonToggle__wrapper euiButtonGroup__toggle"
+                          <EuiToggle
+                            checked={true}
+                            className="euiButtonToggle__wrapper euiButtonGroup__toggle"
+                            inputClassName="euiButtonToggle__input"
+                            label="Latency"
+                            onChange={[Function]}
+                            title="Latency"
+                            type="single"
                           >
-                            <input
-                              aria-label="Latency"
-                              checked={true}
-                              className="euiToggle__input euiButtonToggle__input"
-                              onChange={[Function]}
-                              title="Latency"
-                              type="radio"
-                            />
-                            <EuiButton
-                              className="euiButtonToggle euiButtonGroup__button euiButtonGroup__button--selected"
-                              color="text"
-                              fill={true}
-                              id="latency"
-                              size="s"
-                              tabIndex={-1}
+                            <div
+                              className="euiToggle euiToggle--checked euiButtonToggle__wrapper euiButtonGroup__toggle"
                             >
-                              <EuiButtonDisplay
+                              <input
+                                aria-label="Latency"
+                                checked={true}
+                                className="euiToggle__input euiButtonToggle__input"
+                                onChange={[Function]}
+                                title="Latency"
+                                type="radio"
+                              />
+                              <EuiButton
                                 className="euiButtonToggle euiButtonGroup__button euiButtonGroup__button--selected"
                                 color="text"
-                                disabled={false}
-                                element="button"
                                 fill={true}
                                 id="latency"
-                                isDisabled={false}
                                 size="s"
                                 tabIndex={-1}
-                                type="button"
                               >
-                                <button
-                                  className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button euiButtonGroup__button--selected euiButton--fill"
+                                <EuiButtonDisplay
+                                  className="euiButtonToggle euiButtonGroup__button euiButtonGroup__button--selected"
+                                  color="text"
                                   disabled={false}
+                                  element="button"
+                                  fill={true}
                                   id="latency"
+                                  isDisabled={false}
+                                  size="s"
                                   tabIndex={-1}
                                   type="button"
                                 >
-                                  <EuiButtonContent
-                                    className="euiButton__content"
-                                    iconSide="left"
-                                    textProps={
-                                      Object {
-                                        "className": "euiButton__text",
-                                      }
-                                    }
+                                  <button
+                                    className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button euiButtonGroup__button--selected euiButton--fill"
+                                    disabled={false}
+                                    id="latency"
+                                    tabIndex={-1}
+                                    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"
                                       >
-                                        Latency
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          Latency
+                                        </span>
                                       </span>
-                                    </span>
-                                  </EuiButtonContent>
-                                </button>
-                              </EuiButtonDisplay>
-                            </EuiButton>
-                          </div>
-                        </EuiToggle>
-                      </EuiButtonToggle>
-                      <EuiButtonToggle
-                        className="euiButtonGroup__button"
-                        color="text"
-                        fill={false}
-                        id="error_rate"
-                        isSelected={false}
-                        key="1"
-                        label="Error rate"
-                        onChange={[Function]}
-                        size="s"
-                        toggleClassName="euiButtonGroup__toggle"
-                        type="single"
-                      >
-                        <EuiToggle
-                          checked={false}
-                          className="euiButtonToggle__wrapper euiButtonGroup__toggle"
-                          inputClassName="euiButtonToggle__input"
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonDisplay>
+                              </EuiButton>
+                            </div>
+                          </EuiToggle>
+                        </EuiButtonToggle>
+                        <EuiButtonToggle
+                          className="euiButtonGroup__button"
+                          color="text"
+                          fill={false}
+                          id="error_rate"
+                          isSelected={false}
+                          key="1"
                           label="Error rate"
                           onChange={[Function]}
-                          title="Error rate"
+                          size="s"
+                          toggleClassName="euiButtonGroup__toggle"
                           type="single"
                         >
-                          <div
-                            className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+                          <EuiToggle
+                            checked={false}
+                            className="euiButtonToggle__wrapper euiButtonGroup__toggle"
+                            inputClassName="euiButtonToggle__input"
+                            label="Error rate"
+                            onChange={[Function]}
+                            title="Error rate"
+                            type="single"
                           >
-                            <input
-                              aria-label="Error rate"
-                              checked={false}
-                              className="euiToggle__input euiButtonToggle__input"
-                              onChange={[Function]}
-                              title="Error rate"
-                              type="radio"
-                            />
-                            <EuiButton
-                              className="euiButtonToggle euiButtonGroup__button"
-                              color="text"
-                              fill={false}
-                              id="error_rate"
-                              size="s"
-                              tabIndex={-1}
+                            <div
+                              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
                             >
-                              <EuiButtonDisplay
+                              <input
+                                aria-label="Error rate"
+                                checked={false}
+                                className="euiToggle__input euiButtonToggle__input"
+                                onChange={[Function]}
+                                title="Error rate"
+                                type="radio"
+                              />
+                              <EuiButton
                                 className="euiButtonToggle euiButtonGroup__button"
                                 color="text"
-                                disabled={false}
-                                element="button"
                                 fill={false}
                                 id="error_rate"
-                                isDisabled={false}
                                 size="s"
                                 tabIndex={-1}
-                                type="button"
                               >
-                                <button
-                                  className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
+                                <EuiButtonDisplay
+                                  className="euiButtonToggle euiButtonGroup__button"
+                                  color="text"
                                   disabled={false}
+                                  element="button"
+                                  fill={false}
                                   id="error_rate"
+                                  isDisabled={false}
+                                  size="s"
                                   tabIndex={-1}
                                   type="button"
                                 >
-                                  <EuiButtonContent
-                                    className="euiButton__content"
-                                    iconSide="left"
-                                    textProps={
-                                      Object {
-                                        "className": "euiButton__text",
-                                      }
-                                    }
+                                  <button
+                                    className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
+                                    disabled={false}
+                                    id="error_rate"
+                                    tabIndex={-1}
+                                    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"
                                       >
-                                        Error rate
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          Error rate
+                                        </span>
                                       </span>
-                                    </span>
-                                  </EuiButtonContent>
-                                </button>
-                              </EuiButtonDisplay>
-                            </EuiButton>
-                          </div>
-                        </EuiToggle>
-                      </EuiButtonToggle>
-                      <EuiButtonToggle
-                        className="euiButtonGroup__button"
-                        color="text"
-                        fill={false}
-                        id="throughput"
-                        isSelected={false}
-                        key="2"
-                        label="Throughput"
-                        onChange={[Function]}
-                        size="s"
-                        toggleClassName="euiButtonGroup__toggle"
-                        type="single"
-                      >
-                        <EuiToggle
-                          checked={false}
-                          className="euiButtonToggle__wrapper euiButtonGroup__toggle"
-                          inputClassName="euiButtonToggle__input"
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonDisplay>
+                              </EuiButton>
+                            </div>
+                          </EuiToggle>
+                        </EuiButtonToggle>
+                        <EuiButtonToggle
+                          className="euiButtonGroup__button"
+                          color="text"
+                          fill={false}
+                          id="throughput"
+                          isSelected={false}
+                          key="2"
                           label="Throughput"
                           onChange={[Function]}
-                          title="Throughput"
+                          size="s"
+                          toggleClassName="euiButtonGroup__toggle"
                           type="single"
                         >
-                          <div
-                            className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+                          <EuiToggle
+                            checked={false}
+                            className="euiButtonToggle__wrapper euiButtonGroup__toggle"
+                            inputClassName="euiButtonToggle__input"
+                            label="Throughput"
+                            onChange={[Function]}
+                            title="Throughput"
+                            type="single"
                           >
-                            <input
-                              aria-label="Throughput"
-                              checked={false}
-                              className="euiToggle__input euiButtonToggle__input"
-                              onChange={[Function]}
-                              title="Throughput"
-                              type="radio"
-                            />
-                            <EuiButton
-                              className="euiButtonToggle euiButtonGroup__button"
-                              color="text"
-                              fill={false}
-                              id="throughput"
-                              size="s"
-                              tabIndex={-1}
+                            <div
+                              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
                             >
-                              <EuiButtonDisplay
+                              <input
+                                aria-label="Throughput"
+                                checked={false}
+                                className="euiToggle__input euiButtonToggle__input"
+                                onChange={[Function]}
+                                title="Throughput"
+                                type="radio"
+                              />
+                              <EuiButton
                                 className="euiButtonToggle euiButtonGroup__button"
                                 color="text"
-                                disabled={false}
-                                element="button"
                                 fill={false}
                                 id="throughput"
-                                isDisabled={false}
                                 size="s"
                                 tabIndex={-1}
-                                type="button"
                               >
-                                <button
-                                  className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
+                                <EuiButtonDisplay
+                                  className="euiButtonToggle euiButtonGroup__button"
+                                  color="text"
                                   disabled={false}
+                                  element="button"
+                                  fill={false}
                                   id="throughput"
+                                  isDisabled={false}
+                                  size="s"
                                   tabIndex={-1}
                                   type="button"
                                 >
-                                  <EuiButtonContent
-                                    className="euiButton__content"
-                                    iconSide="left"
-                                    textProps={
-                                      Object {
-                                        "className": "euiButton__text",
-                                      }
-                                    }
+                                  <button
+                                    className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
+                                    disabled={false}
+                                    id="throughput"
+                                    tabIndex={-1}
+                                    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"
                                       >
-                                        Throughput
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          Throughput
+                                        </span>
                                       </span>
-                                    </span>
-                                  </EuiButtonContent>
-                                </button>
-                              </EuiButtonDisplay>
-                            </EuiButton>
-                          </div>
-                        </EuiToggle>
-                      </EuiButtonToggle>
-                    </div>
-                  </fieldset>
-                </EuiButtonGroup>
-                <EuiHorizontalRule
-                  margin="m"
-                >
-                  <hr
-                    className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
-                  />
-                </EuiHorizontalRule>
-                <EuiFlexGroup
-                  alignItems="center"
-                  gutterSize="s"
-                >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonDisplay>
+                              </EuiButton>
+                            </div>
+                          </EuiToggle>
+                        </EuiButtonToggle>
+                      </div>
+                    </fieldset>
+                  </EuiButtonGroup>
+                  <EuiHorizontalRule
+                    margin="m"
                   >
-                    <EuiFlexItem
-                      grow={false}
+                    <hr
+                      className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                    />
+                  </EuiHorizontalRule>
+                  <EuiFlexGroup
+                    alignItems="center"
+                    gutterSize="s"
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
                     >
-                      <div
-                        className="euiFlexItem euiFlexItem--flexGrowZero"
-                      >
-                        <EuiText>
-                          <div
-                            className="euiText euiText--medium"
-                          >
-                            Focus on
-                          </div>
-                        </EuiText>
-                      </div>
-                    </EuiFlexItem>
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
+                      <EuiFlexItem
+                        grow={false}
                       >
-                        <EuiFieldSearch
-                          compressed={false}
-                          fullWidth={false}
-                          incremental={false}
-                          isClearable={true}
-                          isInvalid={false}
-                          isLoading={false}
-                          onChange={[Function]}
-                          onSearch={[Function]}
-                          placeholder="Service name"
-                          value=""
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiText>
+                            <div
+                              className="euiText euiText--medium"
+                            >
+                              Focus on
+                            </div>
+                          </EuiText>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
                         >
-                          <EuiFormControlLayout
+                          <EuiFieldSearch
                             compressed={false}
                             fullWidth={false}
-                            icon="search"
+                            incremental={false}
+                            isClearable={true}
+                            isInvalid={false}
                             isLoading={false}
+                            onChange={[Function]}
+                            onSearch={[Function]}
+                            placeholder="Service name"
+                            value=""
                           >
-                            <div
-                              className="euiFormControlLayout"
+                            <EuiFormControlLayout
+                              compressed={false}
+                              fullWidth={false}
+                              icon="search"
+                              isLoading={false}
                             >
                               <div
-                                className="euiFormControlLayout__childrenWrapper"
+                                className="euiFormControlLayout"
                               >
-                                <EuiValidatableControl
-                                  isInvalid={false}
-                                >
-                                  <input
-                                    className="euiFieldSearch euiFieldSearch-isClearable"
-                                    onChange={[Function]}
-                                    onKeyUp={[Function]}
-                                    placeholder="Service name"
-                                    type="search"
-                                    value=""
-                                  />
-                                </EuiValidatableControl>
-                                <EuiFormControlLayoutIcons
-                                  icon="search"
-                                  isLoading={false}
+                                <div
+                                  className="euiFormControlLayout__childrenWrapper"
                                 >
-                                  <div
-                                    className="euiFormControlLayoutIcons"
+                                  <EuiValidatableControl
+                                    isInvalid={false}
                                   >
-                                    <EuiFormControlLayoutCustomIcon
+                                    <input
+                                      className="euiFieldSearch euiFieldSearch-isClearable"
+                                      onChange={[Function]}
+                                      onKeyUp={[Function]}
+                                      placeholder="Service name"
                                       type="search"
+                                      value=""
+                                    />
+                                  </EuiValidatableControl>
+                                  <EuiFormControlLayoutIcons
+                                    icon="search"
+                                    isLoading={false}
+                                  >
+                                    <div
+                                      className="euiFormControlLayoutIcons"
                                     >
-                                      <span
-                                        className="euiFormControlLayoutCustomIcon"
+                                      <EuiFormControlLayoutCustomIcon
+                                        type="search"
                                       >
-                                        <EuiIcon
-                                          aria-hidden="true"
-                                          className="euiFormControlLayoutCustomIcon__icon"
-                                          type="search"
+                                        <span
+                                          className="euiFormControlLayoutCustomIcon"
                                         >
-                                          <EuiIconSearch
-                                            aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                            focusable="false"
-                                            role="img"
-                                            style={null}
+                                          <EuiIcon
+                                            aria-hidden="true"
+                                            className="euiFormControlLayoutCustomIcon__icon"
+                                            type="search"
                                           >
-                                            <svg
+                                            <EuiIconSearch
                                               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>
+                                              <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>
-                            </div>
-                          </EuiFormControlLayout>
-                        </EuiFieldSearch>
-                      </div>
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
-                <EuiSpacer>
+                            </EuiFormControlLayout>
+                          </EuiFieldSearch>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                  <EuiSpacer>
+                    <div
+                      className="euiSpacer euiSpacer--l"
+                    />
+                  </EuiSpacer>
                   <div
-                    className="euiSpacer euiSpacer--l"
-                  />
-                </EuiSpacer>
-                <div
-                  style={
-                    Object {
-                      "minHeight": 434,
+                    style={
+                      Object {
+                        "minHeight": 434,
+                      }
                     }
-                  }
-                >
-                  <NoMatchMessage
-                    size="s"
                   >
-                    <EuiSpacer
+                    <NoMatchMessage
                       size="s"
                     >
-                      <div
-                        className="euiSpacer euiSpacer--s"
-                      />
-                    </EuiSpacer>
-                    <EuiEmptyPrompt
-                      body={
-                        <EuiText>
-                          No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                        </EuiText>
-                      }
-                      title={
-                        <h2>
-                          No matches
-                        </h2>
-                      }
-                    >
-                      <div
-                        className="euiEmptyPrompt"
+                      <EuiSpacer
+                        size="s"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--s"
+                        />
+                      </EuiSpacer>
+                      <EuiEmptyPrompt
+                        body={
+                          <EuiText>
+                            No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                          </EuiText>
+                        }
+                        title={
+                          <h2>
+                            No matches
+                          </h2>
+                        }
                       >
-                        <EuiTextColor
-                          color="subdued"
+                        <div
+                          className="euiEmptyPrompt"
                         >
-                          <span
-                            className="euiTextColor euiTextColor--subdued"
+                          <EuiTextColor
+                            color="subdued"
                           >
-                            <EuiTitle
-                              size="m"
+                            <span
+                              className="euiTextColor euiTextColor--subdued"
                             >
-                              <h2
-                                className="euiTitle euiTitle--medium"
+                              <EuiTitle
+                                size="m"
                               >
-                                No matches
-                              </h2>
-                            </EuiTitle>
-                            <EuiSpacer
-                              size="m"
-                            >
-                              <div
-                                className="euiSpacer euiSpacer--m"
-                              />
-                            </EuiSpacer>
-                            <EuiText>
-                              <div
-                                className="euiText euiText--medium"
+                                <h2
+                                  className="euiTitle euiTitle--medium"
+                                >
+                                  No matches
+                                </h2>
+                              </EuiTitle>
+                              <EuiSpacer
+                                size="m"
                               >
-                                <EuiText>
-                                  <div
-                                    className="euiText euiText--medium"
-                                  >
-                                    No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                                  </div>
-                                </EuiText>
-                              </div>
-                            </EuiText>
-                          </span>
-                        </EuiTextColor>
-                      </div>
-                    </EuiEmptyPrompt>
-                    <EuiSpacer
-                      size="s"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--s"
-                      />
-                    </EuiSpacer>
-                  </NoMatchMessage>
+                                <div
+                                  className="euiSpacer euiSpacer--m"
+                                />
+                              </EuiSpacer>
+                              <EuiText>
+                                <div
+                                  className="euiText euiText--medium"
+                                >
+                                  <EuiText>
+                                    <div
+                                      className="euiText euiText--medium"
+                                    >
+                                      No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                    </div>
+                                  </EuiText>
+                                </div>
+                              </EuiText>
+                            </span>
+                          </EuiTextColor>
+                        </div>
+                      </EuiEmptyPrompt>
+                      <EuiSpacer
+                        size="s"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--s"
+                        />
+                      </EuiSpacer>
+                    </NoMatchMessage>
+                  </div>
                 </div>
-              </div>
-            </EuiPanel>
-          </ServiceMap>
-        </div>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <div
-          className="euiFlexItem"
-        >
-          <EuiFlexGroup
-            direction="column"
+              </EuiPanel>
+            </ServiceMap>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
           >
-            <div
-              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+            <EuiFlexGroup
+              direction="column"
             >
-              <EuiFlexItem>
-                <div
-                  className="euiFlexItem"
-                >
-                  <ErrorRatePlt
-                    items={
-                      Object {
-                        "fixedInterval": "1h",
-                        "items": Array [],
-                      }
-                    }
-                    setEndTime={[MockFunction]}
-                    setStartTime={[MockFunction]}
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+              >
+                <EuiFlexItem>
+                  <div
+                    className="euiFlexItem"
                   >
-                    <EuiPanel
-                      style={
+                    <ErrorRatePlt
+                      items={
                         Object {
-                          "minHeight": 308,
-                          "minWidth": 433,
+                          "fixedInterval": "1h",
+                          "items": Array [],
                         }
                       }
+                      setEndTime={[MockFunction]}
+                      setStartTime={[MockFunction]}
                     >
-                      <div
-                        className="euiPanel euiPanel--paddingMedium"
+                      <EuiPanel
                         style={
                           Object {
                             "minHeight": 308,
@@ -1749,131 +1833,131 @@ exports[`Dashboard component renders dashboard 1`] = `
                           }
                         }
                       >
-                        <PanelTitle
-                          title="Trace error rate over time"
+                        <div
+                          className="euiPanel euiPanel--paddingMedium"
+                          style={
+                            Object {
+                              "minHeight": 308,
+                              "minWidth": 433,
+                            }
+                          }
                         >
-                          <EuiText
-                            size="m"
+                          <PanelTitle
+                            title="Trace error rate over time"
                           >
-                            <div
-                              className="euiText euiText--medium"
+                            <EuiText
+                              size="m"
                             >
-                              <span
-                                className="panel-title"
+                              <div
+                                className="euiText euiText--medium"
                               >
-                                Trace error rate over time
-                              </span>
-                            </div>
-                          </EuiText>
-                        </PanelTitle>
-                        <EuiHorizontalRule
-                          margin="m"
-                        >
-                          <hr
-                            className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
-                          />
-                        </EuiHorizontalRule>
-                        <NoMatchMessage
-                          size="s"
-                        >
-                          <EuiSpacer
-                            size="s"
+                                <span
+                                  className="panel-title"
+                                >
+                                  Trace error rate over time
+                                </span>
+                              </div>
+                            </EuiText>
+                          </PanelTitle>
+                          <EuiHorizontalRule
+                            margin="m"
                           >
-                            <div
-                              className="euiSpacer euiSpacer--s"
+                            <hr
+                              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
                             />
-                          </EuiSpacer>
-                          <EuiEmptyPrompt
-                            body={
-                              <EuiText>
-                                No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                              </EuiText>
-                            }
-                            title={
-                              <h2>
-                                No matches
-                              </h2>
-                            }
+                          </EuiHorizontalRule>
+                          <NoMatchMessage
+                            size="s"
                           >
-                            <div
-                              className="euiEmptyPrompt"
+                            <EuiSpacer
+                              size="s"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--s"
+                              />
+                            </EuiSpacer>
+                            <EuiEmptyPrompt
+                              body={
+                                <EuiText>
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </EuiText>
+                              }
+                              title={
+                                <h2>
+                                  No matches
+                                </h2>
+                              }
                             >
-                              <EuiTextColor
-                                color="subdued"
+                              <div
+                                className="euiEmptyPrompt"
                               >
-                                <span
-                                  className="euiTextColor euiTextColor--subdued"
+                                <EuiTextColor
+                                  color="subdued"
                                 >
-                                  <EuiTitle
-                                    size="m"
+                                  <span
+                                    className="euiTextColor euiTextColor--subdued"
                                   >
-                                    <h2
-                                      className="euiTitle euiTitle--medium"
+                                    <EuiTitle
+                                      size="m"
                                     >
-                                      No matches
-                                    </h2>
-                                  </EuiTitle>
-                                  <EuiSpacer
-                                    size="m"
-                                  >
-                                    <div
-                                      className="euiSpacer euiSpacer--m"
-                                    />
-                                  </EuiSpacer>
-                                  <EuiText>
-                                    <div
-                                      className="euiText euiText--medium"
+                                      <h2
+                                        className="euiTitle euiTitle--medium"
+                                      >
+                                        No matches
+                                      </h2>
+                                    </EuiTitle>
+                                    <EuiSpacer
+                                      size="m"
                                     >
-                                      <EuiText>
-                                        <div
-                                          className="euiText euiText--medium"
-                                        >
-                                          No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                                        </div>
-                                      </EuiText>
-                                    </div>
-                                  </EuiText>
-                                </span>
-                              </EuiTextColor>
-                            </div>
-                          </EuiEmptyPrompt>
-                          <EuiSpacer
-                            size="s"
-                          >
-                            <div
-                              className="euiSpacer euiSpacer--s"
-                            />
-                          </EuiSpacer>
-                        </NoMatchMessage>
-                      </div>
-                    </EuiPanel>
-                  </ErrorRatePlt>
-                </div>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <div
-                  className="euiFlexItem"
-                >
-                  <ThroughputPlt
-                    items={
-                      Object {
-                        "fixedInterval": "1h",
-                        "items": Array [],
-                      }
-                    }
-                    setEndTime={[MockFunction]}
-                    setStartTime={[MockFunction]}
+                                      <div
+                                        className="euiSpacer euiSpacer--m"
+                                      />
+                                    </EuiSpacer>
+                                    <EuiText>
+                                      <div
+                                        className="euiText euiText--medium"
+                                      >
+                                        <EuiText>
+                                          <div
+                                            className="euiText euiText--medium"
+                                          >
+                                            No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                          </div>
+                                        </EuiText>
+                                      </div>
+                                    </EuiText>
+                                  </span>
+                                </EuiTextColor>
+                              </div>
+                            </EuiEmptyPrompt>
+                            <EuiSpacer
+                              size="s"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--s"
+                              />
+                            </EuiSpacer>
+                          </NoMatchMessage>
+                        </div>
+                      </EuiPanel>
+                    </ErrorRatePlt>
+                  </div>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <div
+                    className="euiFlexItem"
                   >
-                    <EuiPanel
-                      style={
+                    <ThroughputPlt
+                      items={
                         Object {
-                          "minHeight": 308,
-                          "minWidth": 433,
+                          "fixedInterval": "1h",
+                          "items": Array [],
                         }
                       }
+                      setEndTime={[MockFunction]}
+                      setStartTime={[MockFunction]}
                     >
-                      <div
-                        className="euiPanel euiPanel--paddingMedium"
+                      <EuiPanel
                         style={
                           Object {
                             "minHeight": 308,
@@ -1881,119 +1965,141 @@ exports[`Dashboard component renders dashboard 1`] = `
                           }
                         }
                       >
-                        <PanelTitle
-                          title="Traces over time"
+                        <div
+                          className="euiPanel euiPanel--paddingMedium"
+                          style={
+                            Object {
+                              "minHeight": 308,
+                              "minWidth": 433,
+                            }
+                          }
                         >
-                          <EuiText
-                            size="m"
+                          <PanelTitle
+                            title="Traces over time"
                           >
-                            <div
-                              className="euiText euiText--medium"
+                            <EuiText
+                              size="m"
                             >
-                              <span
-                                className="panel-title"
+                              <div
+                                className="euiText euiText--medium"
                               >
-                                Traces over time
-                              </span>
-                            </div>
-                          </EuiText>
-                        </PanelTitle>
-                        <EuiHorizontalRule
-                          margin="m"
-                        >
-                          <hr
-                            className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
-                          />
-                        </EuiHorizontalRule>
-                        <NoMatchMessage
-                          size="s"
-                        >
-                          <EuiSpacer
-                            size="s"
+                                <span
+                                  className="panel-title"
+                                >
+                                  Traces over time
+                                </span>
+                              </div>
+                            </EuiText>
+                          </PanelTitle>
+                          <EuiHorizontalRule
+                            margin="m"
                           >
-                            <div
-                              className="euiSpacer euiSpacer--s"
+                            <hr
+                              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
                             />
-                          </EuiSpacer>
-                          <EuiEmptyPrompt
-                            body={
-                              <EuiText>
-                                No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                              </EuiText>
-                            }
-                            title={
-                              <h2>
-                                No matches
-                              </h2>
-                            }
+                          </EuiHorizontalRule>
+                          <NoMatchMessage
+                            size="s"
                           >
-                            <div
-                              className="euiEmptyPrompt"
+                            <EuiSpacer
+                              size="s"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--s"
+                              />
+                            </EuiSpacer>
+                            <EuiEmptyPrompt
+                              body={
+                                <EuiText>
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </EuiText>
+                              }
+                              title={
+                                <h2>
+                                  No matches
+                                </h2>
+                              }
                             >
-                              <EuiTextColor
-                                color="subdued"
+                              <div
+                                className="euiEmptyPrompt"
                               >
-                                <span
-                                  className="euiTextColor euiTextColor--subdued"
+                                <EuiTextColor
+                                  color="subdued"
                                 >
-                                  <EuiTitle
-                                    size="m"
+                                  <span
+                                    className="euiTextColor euiTextColor--subdued"
                                   >
-                                    <h2
-                                      className="euiTitle euiTitle--medium"
+                                    <EuiTitle
+                                      size="m"
                                     >
-                                      No matches
-                                    </h2>
-                                  </EuiTitle>
-                                  <EuiSpacer
-                                    size="m"
-                                  >
-                                    <div
-                                      className="euiSpacer euiSpacer--m"
-                                    />
-                                  </EuiSpacer>
-                                  <EuiText>
-                                    <div
-                                      className="euiText euiText--medium"
+                                      <h2
+                                        className="euiTitle euiTitle--medium"
+                                      >
+                                        No matches
+                                      </h2>
+                                    </EuiTitle>
+                                    <EuiSpacer
+                                      size="m"
                                     >
-                                      <EuiText>
-                                        <div
-                                          className="euiText euiText--medium"
-                                        >
-                                          No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                                        </div>
-                                      </EuiText>
-                                    </div>
-                                  </EuiText>
-                                </span>
-                              </EuiTextColor>
-                            </div>
-                          </EuiEmptyPrompt>
-                          <EuiSpacer
-                            size="s"
-                          >
-                            <div
-                              className="euiSpacer euiSpacer--s"
-                            />
-                          </EuiSpacer>
-                        </NoMatchMessage>
-                      </div>
-                    </EuiPanel>
-                  </ThroughputPlt>
-                </div>
-              </EuiFlexItem>
-            </div>
-          </EuiFlexGroup>
-        </div>
-      </EuiFlexItem>
-    </div>
-  </EuiFlexGroup>
+                                      <div
+                                        className="euiSpacer euiSpacer--m"
+                                      />
+                                    </EuiSpacer>
+                                    <EuiText>
+                                      <div
+                                        className="euiText euiText--medium"
+                                      >
+                                        <EuiText>
+                                          <div
+                                            className="euiText euiText--medium"
+                                          >
+                                            No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                          </div>
+                                        </EuiText>
+                                      </div>
+                                    </EuiText>
+                                  </span>
+                                </EuiTextColor>
+                              </div>
+                            </EuiEmptyPrompt>
+                            <EuiSpacer
+                              size="s"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--s"
+                              />
+                            </EuiSpacer>
+                          </NoMatchMessage>
+                        </div>
+                      </EuiPanel>
+                    </ThroughputPlt>
+                  </div>
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </DashboardContent>
 </Dashboard>
 `;
 
 exports[`Dashboard component renders empty dashboard 1`] = `
 <Dashboard
   appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Dashboards",
+      },
+    ]
+  }
   chrome={
     Object {
       "getIsNavDrawerLocked$": [MockFunction],
@@ -2030,11 +2136,13 @@ exports[`Dashboard component renders empty dashboard 1`] = `
   http={[MockFunction]}
   indicesExist={false}
   page="dashboard"
-  parentBreadcrumb={
-    Object {
-      "href": "test#/",
-      "text": "test",
-    }
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
   }
   query=""
   setEndTime={[MockFunction]}
@@ -2071,13 +2179,65 @@ exports[`Dashboard component renders empty dashboard 1`] = `
       Dashboard
     </h2>
   </EuiTitle>
-  <SearchBar
+  <DashboardContent
     appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Dashboards",
+        },
+      ]
+    }
+    chrome={
+      Object {
+        "getIsNavDrawerLocked$": [MockFunction],
+        "setBreadcrumbs": [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [
+                Object {
+                  "href": "test#/",
+                  "text": "test",
+                },
+                Object {
+                  "href": "#/trace_analytics/home",
+                  "text": "Trace analytics",
+                },
+                Object {
+                  "href": "#/trace_analytics/home",
+                  "text": "Dashboards",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
     endTime="now"
     filters={Array []}
+    http={[MockFunction]}
+    indicesExist={false}
     page="dashboard"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
     query=""
-    refresh={[Function]}
     setEndTime={[MockFunction]}
     setFilters={
       [MockFunction] {
@@ -2098,430 +2258,431 @@ exports[`Dashboard component renders empty dashboard 1`] = `
     setStartTime={[MockFunction]}
     startTime="now-5m"
   >
-    <EuiFlexGroup
-      gutterSize="s"
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      page="dashboard"
+      query=""
+      refresh={[Function]}
+      setEndTime={[MockFunction]}
+      setFilters={
+        [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        }
+      }
+      setQuery={[MockFunction]}
+      setStartTime={[MockFunction]}
+      startTime="now-5m"
     >
-      <div
-        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+      <EuiFlexGroup
+        gutterSize="s"
       >
-        <EuiFlexItem>
-          <div
-            className="euiFlexItem"
-          >
-            <EuiFieldSearch
-              compressed={false}
-              data-test-subj="search-bar-input-box"
-              fullWidth={true}
-              incremental={false}
-              isClearable={false}
-              isLoading={false}
-              onChange={[Function]}
-              onSearch={[Function]}
-              placeholder="Trace ID, trace group name, service name"
-              value=""
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
             >
-              <EuiFormControlLayout
+              <EuiFieldSearch
                 compressed={false}
+                data-test-subj="search-bar-input-box"
                 fullWidth={true}
-                icon="search"
+                incremental={false}
+                isClearable={false}
                 isLoading={false}
+                onChange={[Function]}
+                onSearch={[Function]}
+                placeholder="Trace ID, trace group name, service name"
+                value=""
               >
-                <div
-                  className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
                 >
                   <div
-                    className="euiFormControlLayout__childrenWrapper"
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
                   >
-                    <EuiValidatableControl>
-                      <input
-                        className="euiFieldSearch euiFieldSearch--fullWidth"
-                        data-test-subj="search-bar-input-box"
-                        onChange={[Function]}
-                        onKeyUp={[Function]}
-                        placeholder="Trace ID, trace group name, service name"
-                        type="search"
-                        value=""
-                      />
-                    </EuiValidatableControl>
-                    <EuiFormControlLayoutIcons
-                      icon="search"
-                      isLoading={false}
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
                     >
-                      <div
-                        className="euiFormControlLayoutIcons"
-                      >
-                        <EuiFormControlLayoutCustomIcon
+                      <EuiValidatableControl>
+                        <input
+                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          data-test-subj="search-bar-input-box"
+                          onChange={[Function]}
+                          onKeyUp={[Function]}
+                          placeholder="Trace ID, trace group name, service name"
                           type="search"
+                          value=""
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
                         >
-                          <span
-                            className="euiFormControlLayoutCustomIcon"
+                          <EuiFormControlLayoutCustomIcon
+                            type="search"
                           >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiFormControlLayoutCustomIcon__icon"
-                              type="search"
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
                             >
-                              <EuiIconEmpty
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                type="search"
                               >
-                                <svg
+                                <EuiIconEmpty
                                   aria-hidden={true}
                                   className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                   focusable="false"
-                                  height={16}
                                   role="img"
                                   style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                />
-                              </EuiIconEmpty>
-                            </EuiIcon>
-                          </span>
-                        </EuiFormControlLayoutCustomIcon>
-                      </div>
-                    </EuiFormControlLayoutIcons>
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
                   </div>
-                </div>
-              </EuiFormControlLayout>
-            </EuiFieldSearch>
-          </div>
-        </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
-          style={
-            Object {
-              "maxWidth": "40vw",
-            }
-          }
-        >
-          <div
-            className="euiFlexItem euiFlexItem--flexGrowZero"
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
             style={
               Object {
                 "maxWidth": "40vw",
               }
             }
           >
-            <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",
-                  },
-                ]
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              style={
+                Object {
+                  "maxWidth": "40vw",
+                }
               }
-              dateFormat=""
-              end="now"
-              isAutoRefreshOnly={false}
-              isDisabled={false}
-              isPaused={true}
-              onTimeChange={[Function]}
-              recentlyUsedRanges={Array []}
-              refreshInterval={0}
-              showUpdateButton={false}
-              start="now-5m"
-              timeFormat="HH:mm"
             >
-              <EuiFlexGroup
-                className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
-                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={false}
+                start="now-5m"
+                timeFormat="HH:mm"
               >
-                <div
-                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                <EuiFlexGroup
+                  className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  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-5m"
-                          />
-                        }
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <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-5m"
+                            />
+                          }
                         >
-                          <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-5m"
+                          <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}
-                              id="QuickSelectPopover"
-                              isOpen={false}
-                              ownFocus={true}
-                              panelPaddingSize="m"
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
                             >
-                              <EuiOutsideClickDetector
-                                isDisabled={true}
-                                onOutsideClick={[Function]}
+                              <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}
+                                id="QuickSelectPopover"
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
                               >
-                                <div
-                                  className="euiPopover euiPopover--anchorDownLeft"
-                                  id="QuickSelectPopover"
-                                  onKeyDown={[Function]}
-                                  onMouseDown={[Function]}
-                                  onMouseUp={[Function]}
-                                  onTouchEnd={[Function]}
-                                  onTouchStart={[Function]}
+                                <EuiOutsideClickDetector
+                                  isDisabled={true}
+                                  onOutsideClick={[Function]}
                                 >
                                   <div
-                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                    className="euiPopover euiPopover--anchorDownLeft"
+                                    id="QuickSelectPopover"
+                                    onKeyDown={[Function]}
+                                    onMouseDown={[Function]}
+                                    onMouseUp={[Function]}
+                                    onTouchEnd={[Function]}
+                                    onTouchStart={[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",
-                                        }
-                                      }
+                                    <div
+                                      className="euiPopover__anchor euiQuickSelectPopover__anchor"
                                     >
-                                      <button
+                                      <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"
-                                          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"
+                                            iconType="arrowDown"
+                                            textProps={
+                                              Object {
+                                                "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                              }
+                                            }
                                           >
-                                            <EuiIcon
-                                              className="euiButtonContent__icon"
-                                              size="m"
-                                              type="arrowDown"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
-                                                focusable="false"
-                                                role="img"
-                                                style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium 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"
+                                                size="m"
+                                                type="arrowDown"
                                               >
                                                 <EuiIconEmpty
                                                   aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
                                                   focusable="false"
                                                   role="img"
                                                   style={null}
                                                 >
                                                   <svg
                                                     aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
                                                     focusable="false"
                                                     height={16}
                                                     role="img"
@@ -2532,513 +2693,540 @@ exports[`Dashboard component renders empty dashboard 1`] = `
                                                   />
                                                 </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>
-                              </EuiOutsideClickDetector>
-                            </EuiPopover>
-                          </EuiQuickSelectPopover>
-                          <div
-                            className="euiFormControlLayout__childrenWrapper"
-                          >
-                            <EuiDatePickerRange
-                              className="euiDatePickerRange--inGroup"
-                              endDateControl={<div />}
-                              iconType={false}
-                              isCustom={true}
-                              startDateControl={<div />}
+                                </EuiOutsideClickDetector>
+                              </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 5 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 5 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>
-                </div>
-              </EuiFlexGroup>
-            </EuiSuperDatePicker>
-          </div>
-        </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
-        >
-          <div
-            className="euiFlexItem euiFlexItem--flexGrowZero"
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
           >
-            <EuiButton
-              data-test-subj="search-bar-refresh-button"
-              fill={true}
-              iconType="refresh"
-              onClick={[Function]}
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <EuiButtonDisplay
+              <EuiButton
                 data-test-subj="search-bar-refresh-button"
-                disabled={false}
-                element="button"
                 fill={true}
                 iconType="refresh"
-                isDisabled={false}
                 onClick={[Function]}
-                type="button"
               >
-                <button
-                  className="euiButton euiButton--primary euiButton--fill"
+                <EuiButtonDisplay
                   data-test-subj="search-bar-refresh-button"
                   disabled={false}
+                  element="button"
+                  fill={true}
+                  iconType="refresh"
+                  isDisabled={false}
                   onClick={[Function]}
                   type="button"
                 >
-                  <EuiButtonContent
-                    className="euiButton__content"
-                    iconSide="left"
-                    iconType="refresh"
-                    textProps={
-                      Object {
-                        "className": "euiButton__text",
-                      }
-                    }
+                  <button
+                    className="euiButton euiButton--primary euiButton--fill"
+                    data-test-subj="search-bar-refresh-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    type="button"
                   >
-                    <span
-                      className="euiButtonContent euiButton__content"
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
                     >
-                      <EuiIcon
-                        className="euiButtonContent__icon"
-                        size="m"
-                        type="refresh"
+                      <span
+                        className="euiButtonContent euiButton__content"
                       >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
-                          focusable="false"
-                          role="img"
-                          style={null}
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          size="m"
+                          type="refresh"
                         >
-                          <svg
+                          <EuiIconEmpty
                             aria-hidden={true}
                             className="euiIcon euiIcon--medium 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"
-                      >
-                        Refresh
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium 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"
+                        >
+                          Refresh
+                        </span>
                       </span>
-                    </span>
-                  </EuiButtonContent>
-                </button>
-              </EuiButtonDisplay>
-            </EuiButton>
-          </div>
-        </EuiFlexItem>
-      </div>
-    </EuiFlexGroup>
-    <EuiSpacer
-      size="s"
-    >
-      <div
-        className="euiSpacer euiSpacer--s"
-      />
-    </EuiSpacer>
-    <Filters
-      appConfigs={Array []}
-      filters={Array []}
-      page="dashboard"
-      setFilters={
-        [MockFunction] {
-          "calls": Array [
-            Array [
-              Array [],
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        page="dashboard"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": undefined,
+              },
             ],
-          ],
-          "results": Array [
-            Object {
-              "type": "return",
-              "value": undefined,
-            },
-          ],
-        }
-      }
-    >
-      <EuiFlexGroup
-        alignItems="center"
-        gutterSize="xs"
-        responsive={false}
-        style={
-          Object {
-            "minHeight": 32,
           }
         }
       >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="xs"
+          responsive={false}
           style={
             Object {
               "minHeight": 32,
             }
           }
         >
-          <EuiFlexItem
-            grow={false}
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
           >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+            <EuiFlexItem
+              grow={false}
             >
-              <GlobalFilterButton>
-                <EuiPopover
-                  anchorPosition="rightUp"
-                  button={
-                    <EuiButtonIcon
-                      aria-label="Change all filters"
-                      iconType="filter"
-                      onClick={[Function]}
-                      title="Change all filters"
-                    />
-                  }
-                  closePopover={[Function]}
-                  display="inlineBlock"
-                  hasArrow={true}
-                  isOpen={false}
-                  ownFocus={false}
-                  panelPaddingSize="none"
-                  withTitle={true}
-                >
-                  <EuiOutsideClickDetector
-                    isDisabled={true}
-                    onOutsideClick={[Function]}
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <GlobalFilterButton>
+                  <EuiPopover
+                    anchorPosition="rightUp"
+                    button={
+                      <EuiButtonIcon
+                        aria-label="Change all filters"
+                        iconType="filter"
+                        onClick={[Function]}
+                        title="Change all filters"
+                      />
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={false}
+                    panelPaddingSize="none"
+                    withTitle={true}
                   >
-                    <div
-                      className="euiPopover euiPopover--anchorRightUp euiPopover--withTitle"
-                      onKeyDown={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchStart={[Function]}
+                    <EuiOutsideClickDetector
+                      isDisabled={true}
+                      onOutsideClick={[Function]}
                     >
                       <div
-                        className="euiPopover__anchor"
+                        className="euiPopover euiPopover--anchorRightUp euiPopover--withTitle"
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseUp={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
                       >
-                        <EuiButtonIcon
-                          aria-label="Change all filters"
-                          iconType="filter"
-                          onClick={[Function]}
-                          title="Change all filters"
+                        <div
+                          className="euiPopover__anchor"
                         >
-                          <button
+                          <EuiButtonIcon
                             aria-label="Change all filters"
-                            className="euiButtonIcon euiButtonIcon--primary"
-                            disabled={false}
+                            iconType="filter"
                             onClick={[Function]}
                             title="Change all filters"
-                            type="button"
                           >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              size="m"
-                              type="filter"
+                            <button
+                              aria-label="Change all filters"
+                              className="euiButtonIcon euiButtonIcon--primary"
+                              disabled={false}
+                              onClick={[Function]}
+                              title="Change all filters"
+                              type="button"
                             >
-                              <EuiIconEmpty
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiButtonIcon__icon"
+                                size="m"
+                                type="filter"
                               >
-                                <svg
+                                <EuiIconEmpty
                                   aria-hidden={true}
                                   className="euiIcon euiIcon--medium 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>
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                            </button>
+                          </EuiButtonIcon>
+                        </div>
                       </div>
-                    </div>
-                  </EuiOutsideClickDetector>
-                </EuiPopover>
-              </GlobalFilterButton>
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-          >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+                    </EuiOutsideClickDetector>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
             >
-              <AddFilterButton>
-                <EuiPopover
-                  anchorPosition="downLeft"
-                  button={
-                    <EuiButtonEmpty
-                      onClick={[Function]}
-                      size="xs"
-                    >
-                      + Add filter
-                    </EuiButtonEmpty>
-                  }
-                  closePopover={[Function]}
-                  display="inlineBlock"
-                  hasArrow={true}
-                  isOpen={false}
-                  ownFocus={false}
-                  panelPaddingSize="m"
-                  withTitle={true}
-                >
-                  <EuiOutsideClickDetector
-                    isDisabled={true}
-                    onOutsideClick={[Function]}
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={false}
+                    panelPaddingSize="m"
+                    withTitle={true}
                   >
-                    <div
-                      className="euiPopover euiPopover--anchorDownLeft euiPopover--withTitle"
-                      onKeyDown={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchStart={[Function]}
+                    <EuiOutsideClickDetector
+                      isDisabled={true}
+                      onOutsideClick={[Function]}
                     >
                       <div
-                        className="euiPopover__anchor"
+                        className="euiPopover euiPopover--anchorDownLeft euiPopover--withTitle"
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseUp={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
                       >
-                        <EuiButtonEmpty
-                          onClick={[Function]}
-                          size="xs"
+                        <div
+                          className="euiPopover__anchor"
                         >
-                          <button
-                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
-                            disabled={false}
+                          <EuiButtonEmpty
                             onClick={[Function]}
-                            type="button"
+                            size="xs"
                           >
-                            <EuiButtonContent
-                              className="euiButtonEmpty__content"
-                              iconSide="left"
-                              textProps={
-                                Object {
-                                  "className": "euiButtonEmpty__text",
-                                }
-                              }
+                            <button
+                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                              disabled={false}
+                              onClick={[Function]}
+                              type="button"
                             >
-                              <span
-                                className="euiButtonContent euiButtonEmpty__content"
+                              <EuiButtonContent
+                                className="euiButtonEmpty__content"
+                                iconSide="left"
+                                textProps={
+                                  Object {
+                                    "className": "euiButtonEmpty__text",
+                                  }
+                                }
                               >
                                 <span
-                                  className="euiButtonEmpty__text"
+                                  className="euiButtonContent euiButtonEmpty__content"
                                 >
-                                  + Add filter
+                                  <span
+                                    className="euiButtonEmpty__text"
+                                  >
+                                    + Add filter
+                                  </span>
                                 </span>
-                              </span>
-                            </EuiButtonContent>
-                          </button>
-                        </EuiButtonEmpty>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonEmpty>
+                        </div>
                       </div>
-                    </div>
-                  </EuiOutsideClickDetector>
-                </EuiPopover>
-              </AddFilterButton>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-    </Filters>
-  </SearchBar>
-  <EuiSpacer
-    size="m"
-  >
-    <div
-      className="euiSpacer euiSpacer--m"
-    />
-  </EuiSpacer>
-  <MissingConfigurationMessage>
-    <EuiEmptyPrompt
-      actions={
-        <EuiButton
-          color="primary"
-          iconSide="right"
-          iconType="popout"
-          onClick={[Function]}
-        >
-          Learn more
-        </EuiButton>
-      }
-      body={
-        <EuiText>
-          The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
-        </EuiText>
-      }
-      title={
-        <h2>
-          Trace Analytics not set up
-        </h2>
-      }
+                    </EuiOutsideClickDetector>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
     >
       <div
-        className="euiEmptyPrompt"
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <MissingConfigurationMessage>
+      <EuiEmptyPrompt
+        actions={
+          <EuiButton
+            color="primary"
+            iconSide="right"
+            iconType="popout"
+            onClick={[Function]}
+          >
+            Learn more
+          </EuiButton>
+        }
+        body={
+          <EuiText>
+            The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+          </EuiText>
+        }
+        title={
+          <h2>
+            Trace Analytics not set up
+          </h2>
+        }
       >
-        <EuiTextColor
-          color="subdued"
+        <div
+          className="euiEmptyPrompt"
         >
-          <span
-            className="euiTextColor euiTextColor--subdued"
+          <EuiTextColor
+            color="subdued"
           >
-            <EuiTitle
-              size="m"
+            <span
+              className="euiTextColor euiTextColor--subdued"
             >
-              <h2
-                className="euiTitle euiTitle--medium"
+              <EuiTitle
+                size="m"
               >
-                Trace Analytics not set up
-              </h2>
-            </EuiTitle>
-            <EuiSpacer
-              size="m"
-            >
-              <div
-                className="euiSpacer euiSpacer--m"
-              />
-            </EuiSpacer>
-            <EuiText>
-              <div
-                className="euiText euiText--medium"
+                <h2
+                  className="euiTitle euiTitle--medium"
+                >
+                  Trace Analytics not set up
+                </h2>
+              </EuiTitle>
+              <EuiSpacer
+                size="m"
               >
-                <EuiText>
-                  <div
-                    className="euiText euiText--medium"
-                  >
-                    The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
-                  </div>
-                </EuiText>
-              </div>
-            </EuiText>
-          </span>
-        </EuiTextColor>
-        <EuiSpacer
-          size="l"
-        >
-          <div
-            className="euiSpacer euiSpacer--l"
-          />
-        </EuiSpacer>
-        <EuiSpacer
-          size="s"
-        >
-          <div
-            className="euiSpacer euiSpacer--s"
-          />
-        </EuiSpacer>
-        <EuiButton
-          color="primary"
-          iconSide="right"
-          iconType="popout"
-          onClick={[Function]}
-        >
-          <EuiButtonDisplay
+                <div
+                  className="euiSpacer euiSpacer--m"
+                />
+              </EuiSpacer>
+              <EuiText>
+                <div
+                  className="euiText euiText--medium"
+                >
+                  <EuiText>
+                    <div
+                      className="euiText euiText--medium"
+                    >
+                      The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+                    </div>
+                  </EuiText>
+                </div>
+              </EuiText>
+            </span>
+          </EuiTextColor>
+          <EuiSpacer
+            size="l"
+          >
+            <div
+              className="euiSpacer euiSpacer--l"
+            />
+          </EuiSpacer>
+          <EuiSpacer
+            size="s"
+          >
+            <div
+              className="euiSpacer euiSpacer--s"
+            />
+          </EuiSpacer>
+          <EuiButton
             color="primary"
-            disabled={false}
-            element="button"
             iconSide="right"
             iconType="popout"
-            isDisabled={false}
             onClick={[Function]}
-            type="button"
           >
-            <button
-              className="euiButton euiButton--primary"
+            <EuiButtonDisplay
+              color="primary"
               disabled={false}
+              element="button"
+              iconSide="right"
+              iconType="popout"
+              isDisabled={false}
               onClick={[Function]}
               type="button"
             >
-              <EuiButtonContent
-                className="euiButton__content"
-                iconSide="right"
-                iconType="popout"
-                textProps={
-                  Object {
-                    "className": "euiButton__text",
-                  }
-                }
+              <button
+                className="euiButton euiButton--primary"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
               >
-                <span
-                  className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                <EuiButtonContent
+                  className="euiButton__content"
+                  iconSide="right"
+                  iconType="popout"
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
                 >
-                  <EuiIcon
-                    className="euiButtonContent__icon"
-                    size="m"
-                    type="popout"
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                   >
-                    <EuiIconEmpty
-                      aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
-                      focusable="false"
-                      role="img"
-                      style={null}
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      size="m"
+                      type="popout"
                     >
-                      <svg
+                      <EuiIconEmpty
                         aria-hidden={true}
                         className="euiIcon euiIcon--medium 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"
-                  >
-                    Learn more
+                      >
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium 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"
+                    >
+                      Learn more
+                    </span>
                   </span>
-                </span>
-              </EuiButtonContent>
-            </button>
-          </EuiButtonDisplay>
-        </EuiButton>
-      </div>
-    </EuiEmptyPrompt>
-  </MissingConfigurationMessage>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonDisplay>
+          </EuiButton>
+        </div>
+      </EuiEmptyPrompt>
+    </MissingConfigurationMessage>
+  </DashboardContent>
 </Dashboard>
 `;
diff --git a/dashboards-observability/public/components/trace_analytics/components/dashboard/__tests__/dashboard.test.tsx b/dashboards-observability/public/components/trace_analytics/components/dashboard/__tests__/dashboard.test.tsx
index 982af9f2b..14b67f290 100644
--- a/dashboards-observability/public/components/trace_analytics/components/dashboard/__tests__/dashboard.test.tsx
+++ b/dashboards-observability/public/components/trace_analytics/components/dashboard/__tests__/dashboard.test.tsx
@@ -23,10 +23,22 @@ describe('Dashboard component', () => {
       <Dashboard
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{
-          text: 'test',
-          href: 'test#/',
-        }}
+        parentBreadcrumbs={[
+          {
+            text: 'test',
+            href: 'test#/',
+          },
+        ]}
+        childBreadcrumbs={[
+          {
+            text: 'Trace analytics',
+            href: '#/trace_analytics/home',
+          },
+          {
+            text: 'Dashboards',
+            href: '#/trace_analytics/home',
+          },
+        ]}
         query=""
         setQuery={setQuery}
         filters={[]}
@@ -54,7 +66,22 @@ describe('Dashboard component', () => {
       <Dashboard
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[
+          {
+            text: 'test',
+            href: 'test#/',
+          },
+        ]}
+        childBreadcrumbs={[
+          {
+            text: 'Trace analytics',
+            href: '#/trace_analytics/home',
+          },
+          {
+            text: 'Dashboards',
+            href: '#/trace_analytics/home',
+          },
+        ]}
         query=""
         setQuery={setQuery}
         filters={[]}
diff --git a/dashboards-observability/public/components/trace_analytics/components/dashboard/dashboard.tsx b/dashboards-observability/public/components/trace_analytics/components/dashboard/dashboard.tsx
index 4ed04903d..0b3d4ba61 100644
--- a/dashboards-observability/public/components/trace_analytics/components/dashboard/dashboard.tsx
+++ b/dashboards-observability/public/components/trace_analytics/components/dashboard/dashboard.tsx
@@ -3,286 +3,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import dateMath from '@elastic/datemath';
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
-import _ from 'lodash';
-import React, { useEffect, useState } from 'react';
+import { EuiBreadcrumb, EuiTitle } from '@elastic/eui';
+import React from 'react';
 import { TraceAnalyticsComponentDeps } from '../../home';
-import {
-  handleDashboardErrorRatePltRequest,
-  handleDashboardRequest,
-  handleDashboardThroughputPltRequest,
-} from '../../requests/dashboard_request_handler';
-import { handleServiceMapRequest } from '../../requests/services_request_handler';
-import { FilterType } from '../common/filters/filters';
-import { getValidFilterFields } from '../common/filters/filter_helpers';
-import {
-  filtersToDsl,
-  getPercentileFilter,
-  milliToNanoSec,
-  minFixedInterval,
-  MissingConfigurationMessage,
-} from '../common/helper_functions';
-import { ErrorRatePlt } from '../common/plots/error_rate_plt';
-import { ServiceMap, ServiceObject } from '../common/plots/service_map';
-import { ThroughputPlt } from '../common/plots/throughput_plt';
-import { SearchBar } from '../common/search_bar';
-import { DashboardTable } from './dashboard_table';
+import { DashboardContent } from './dashboard_content';
 
-interface DashboardProps extends TraceAnalyticsComponentDeps {
-  appId?: string;
-  appName?: string;
-  switchToEditViz?: any;
+export interface DashboardProps extends TraceAnalyticsComponentDeps {
+  childBreadcrumbs: EuiBreadcrumb[];
   page: 'dashboard' | 'traces' | 'services' | 'app';
 }
 
 export function Dashboard(props: DashboardProps) {
-  const { appId, appName, page, parentBreadcrumb, switchToEditViz } = props;
-  const [tableItems, setTableItems] = useState([]);
-  const [throughputPltItems, setThroughputPltItems] = useState({ items: [], fixedInterval: '1h' });
-  const [errorRatePltItems, setErrorRatePltItems] = useState({ items: [], fixedInterval: '1h' });
-  const [serviceMap, setServiceMap] = useState<ServiceObject>({});
-  const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
-    'latency' | 'error_rate' | 'throughput'
-  >('latency');
-  const [percentileMap, setPercentileMap] = useState<{ [traceGroup: string]: number[] }>({});
-  const [filteredService, setFilteredService] = useState('');
-  const [redirect, setRedirect] = useState(true);
-  const [loading, setLoading] = useState(false);
-  const appOverview = page === 'app';
-
-  const breadCrumbs = appOverview
-    ? [
-        {
-          text: 'Application analytics',
-          href: '#/application_analytics',
-        },
-        {
-          text: `${appName}`,
-          href: `#/application_analytics/${appId}`,
-        },
-      ]
-    : [
-        {
-          text: 'Trace analytics',
-          href: '#/trace_analytics/home',
-        },
-        {
-          text: 'Dashboards',
-          href: '#/trace_analytics/home',
-        },
-      ];
-
-  useEffect(() => {
-    props.chrome.setBreadcrumbs([parentBreadcrumb, ...breadCrumbs]);
-    const validFilters = getValidFilterFields(page);
-    props.setFilters([
-      ...props.filters.map((filter) => ({
-        ...filter,
-        locked: validFilters.indexOf(filter.field) === -1,
-      })),
-    ]);
-    setRedirect(false);
-    if (appOverview) {
-      switchToEditViz('');
-    }
-  }, []);
-
-  useEffect(() => {
-    let newFilteredService = '';
-    for (const filter of props.filters) {
-      if (filter.field === 'serviceName') {
-        newFilteredService = filter.value;
-        break;
-      }
-    }
-    setFilteredService(newFilteredService);
-    if (!redirect && props.indicesExist) refresh(newFilteredService);
-  }, [props.filters, props.startTime, props.endTime, props.appConfigs]);
-
-  const refresh = async (currService?: string) => {
-    setLoading(true);
-    const DSL = filtersToDsl(
-      props.filters,
-      props.query,
-      props.startTime,
-      props.endTime,
-      page,
-      appOverview ? props.appConfigs : []
-    );
-    const timeFilterDSL = filtersToDsl([], '', props.startTime, props.endTime, page);
-    const latencyTrendStartTime = dateMath
-      .parse(props.endTime)
-      ?.subtract(24, 'hours')
-      .toISOString()!;
-    const latencyTrendDSL = filtersToDsl(
-      appOverview ? props.appConfigs : props.filters,
-      props.query,
-      latencyTrendStartTime,
-      props.endTime,
-      page
-    );
-    const fixedInterval = minFixedInterval(props.startTime, props.endTime);
-
-    handleDashboardRequest(
-      props.http,
-      DSL,
-      timeFilterDSL,
-      latencyTrendDSL,
-      tableItems,
-      setTableItems,
-      setPercentileMap
-    ).then(() => setLoading(false));
-    handleDashboardThroughputPltRequest(
-      props.http,
-      DSL,
-      fixedInterval,
-      throughputPltItems,
-      setThroughputPltItems
-    );
-    handleDashboardErrorRatePltRequest(
-      props.http,
-      DSL,
-      fixedInterval,
-      errorRatePltItems,
-      setErrorRatePltItems
-    );
-    // service map should not be filtered by service name (https://github.com/opensearch-project/observability/issues/442)
-    const serviceMapDSL = _.cloneDeep(DSL);
-    serviceMapDSL.query.bool.must = serviceMapDSL.query.bool.must.filter(
-      (must: any) => must?.term?.serviceName == null
-    );
-    handleServiceMapRequest(
-      props.http,
-      serviceMapDSL,
-      serviceMap,
-      setServiceMap,
-      currService || filteredService
-    );
-  };
-
-  const addFilter = (filter: FilterType) => {
-    for (let i = 0; i < props.filters.length; i++) {
-      const addedFilter = props.filters[i];
-      if (addedFilter.field === filter.field) {
-        if (addedFilter.operator === filter.operator && addedFilter.value === filter.value) return;
-        const newFilters = [...props.filters];
-        newFilters.splice(i, 1, filter);
-        props.setFilters(newFilters);
-        return;
-      }
-    }
-    const newFilters = [...props.filters, filter];
-    props.setFilters(newFilters);
-  };
-
-  const addPercentileFilter = (condition = 'gte', additionalFilters = [] as FilterType[]) => {
-    if (tableItems.length === 0 || Object.keys(percentileMap).length === 0) return;
-    for (let i = 0; i < props.filters.length; i++) {
-      if (props.filters[i].custom) {
-        const newFilter = JSON.parse(JSON.stringify(props.filters[i]));
-        newFilter.custom.query.bool.should.forEach((should: any) =>
-          should.bool.must.forEach((must: any) => {
-            const range = must?.range?.['traceGroupFields.durationInNanos'];
-            if (range) {
-              const duration = range.lt || range.lte || range.gt || range.gte;
-              if (duration || duration === 0) {
-                must.range['traceGroupFields.durationInNanos'] = {
-                  [condition]: duration,
-                };
-              }
-            }
-          })
-        );
-        newFilter.value = condition === 'gte' ? '>= 95th' : '< 95th';
-        const newFilters = [...props.filters, ...additionalFilters];
-        newFilters.splice(i, 1, newFilter);
-        props.setFilters(newFilters);
-        return;
-      }
-    }
-
-    const percentileMaps = Object.keys(percentileMap).map((traceGroup) => ({
-      traceGroupName: traceGroup,
-      durationFilter: { [condition]: milliToNanoSec(percentileMap[traceGroup][1]) },
-    }));
-    const percentileFilter = getPercentileFilter(
-      percentileMaps,
-      condition === 'gte' ? '>= 95th' : '< 95th'
-    );
-    const newFilters = [...props.filters, percentileFilter, ...additionalFilters];
-    props.setFilters(newFilters);
-  };
-
   return (
     <>
-      {appOverview ? (
-        <EuiSpacer size="m" />
-      ) : (
-        <EuiTitle size="l">
-          <h2 style={{ fontWeight: 430 }}>Dashboard</h2>
-        </EuiTitle>
-      )}
-      <SearchBar
-        query={appOverview ? '' : props.query}
-        filters={props.filters}
-        appConfigs={props.appConfigs}
-        setFilters={props.setFilters}
-        setQuery={props.setQuery}
-        startTime={props.startTime}
-        setStartTime={props.setStartTime}
-        endTime={props.endTime}
-        setEndTime={props.setEndTime}
-        refresh={refresh}
-        page={page}
-      />
-      <EuiSpacer size="m" />
-      {props.indicesExist ? (
-        <>
-          <DashboardTable
-            items={tableItems}
-            filters={props.filters}
-            addFilter={addFilter}
-            addPercentileFilter={addPercentileFilter}
-            setRedirect={setRedirect}
-            loading={loading}
-            page={page}
-          />
-          <EuiSpacer />
-          <EuiFlexGroup alignItems="baseline">
-            <EuiFlexItem grow={4}>
-              <ServiceMap
-                addFilter={addFilter}
-                serviceMap={serviceMap}
-                idSelected={serviceMapIdSelected}
-                setIdSelected={setServiceMapIdSelected}
-                currService={filteredService}
-                page={page}
-              />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiFlexGroup direction="column">
-                <EuiFlexItem>
-                  <ErrorRatePlt
-                    items={errorRatePltItems}
-                    setStartTime={props.setStartTime}
-                    setEndTime={props.setEndTime}
-                  />
-                </EuiFlexItem>
-                <EuiFlexItem>
-                  <ThroughputPlt
-                    items={throughputPltItems}
-                    setStartTime={props.setStartTime}
-                    setEndTime={props.setEndTime}
-                  />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </>
-      ) : (
-        <MissingConfigurationMessage />
-      )}
+      <EuiTitle size="l">
+        <h2 style={{ fontWeight: 430 }}>Dashboard</h2>
+      </EuiTitle>
+      <DashboardContent {...props} />
     </>
   );
 }
diff --git a/dashboards-observability/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/dashboards-observability/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
new file mode 100644
index 000000000..50f2aa042
--- /dev/null
+++ b/dashboards-observability/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
@@ -0,0 +1,256 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import dateMath from '@elastic/datemath';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import {
+  handleDashboardErrorRatePltRequest,
+  handleDashboardRequest,
+  handleDashboardThroughputPltRequest,
+} from '../../requests/dashboard_request_handler';
+import { handleServiceMapRequest } from '../../requests/services_request_handler';
+import { FilterType } from '../common/filters/filters';
+import { getValidFilterFields } from '../common/filters/filter_helpers';
+import {
+  filtersToDsl,
+  getPercentileFilter,
+  milliToNanoSec,
+  minFixedInterval,
+  MissingConfigurationMessage,
+} from '../common/helper_functions';
+import { ErrorRatePlt } from '../common/plots/error_rate_plt';
+import { ServiceMap, ServiceObject } from '../common/plots/service_map';
+import { ThroughputPlt } from '../common/plots/throughput_plt';
+import { SearchBar } from '../common/search_bar';
+import { DashboardProps } from './dashboard';
+import { DashboardTable } from './dashboard_table';
+
+export function DashboardContent(props: DashboardProps) {
+  const {
+    http,
+    chrome,
+    page,
+    query,
+    appConfigs,
+    startTime,
+    endTime,
+    childBreadcrumbs,
+    parentBreadcrumbs,
+    filters,
+    indicesExist,
+    setStartTime,
+    setEndTime,
+    setQuery,
+    setFilters,
+  } = props;
+  const [tableItems, setTableItems] = useState([]);
+  const [throughputPltItems, setThroughputPltItems] = useState({ items: [], fixedInterval: '1h' });
+  const [errorRatePltItems, setErrorRatePltItems] = useState({ items: [], fixedInterval: '1h' });
+  const [serviceMap, setServiceMap] = useState<ServiceObject>({});
+  const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
+    'latency' | 'error_rate' | 'throughput'
+  >('latency');
+  const [percentileMap, setPercentileMap] = useState<{ [traceGroup: string]: number[] }>({});
+  const [filteredService, setFilteredService] = useState('');
+  const [redirect, setRedirect] = useState(true);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
+    const validFilters = getValidFilterFields(page);
+    setFilters([
+      ...filters.map((filter) => ({
+        ...filter,
+        locked: validFilters.indexOf(filter.field) === -1,
+      })),
+    ]);
+    setRedirect(false);
+  }, []);
+
+  useEffect(() => {
+    let newFilteredService = '';
+    for (const filter of filters) {
+      if (filter.field === 'serviceName') {
+        newFilteredService = filter.value;
+        break;
+      }
+    }
+    setFilteredService(newFilteredService);
+    if (!redirect && indicesExist) refresh(newFilteredService);
+  }, [filters, startTime, endTime, appConfigs]);
+
+  const refresh = async (currService?: string) => {
+    setLoading(true);
+    const DSL = filtersToDsl(filters, query, startTime, endTime, page, appConfigs);
+    const timeFilterDSL = filtersToDsl([], '', startTime, endTime, page);
+    const latencyTrendStartTime = dateMath.parse(endTime)?.subtract(24, 'hours').toISOString()!;
+    const latencyTrendDSL = filtersToDsl(
+      filters,
+      query,
+      latencyTrendStartTime,
+      endTime,
+      page,
+      appConfigs
+    );
+    const fixedInterval = minFixedInterval(startTime, endTime);
+
+    handleDashboardRequest(
+      http,
+      DSL,
+      timeFilterDSL,
+      latencyTrendDSL,
+      tableItems,
+      setTableItems,
+      setPercentileMap
+    ).then(() => setLoading(false));
+    handleDashboardThroughputPltRequest(
+      http,
+      DSL,
+      fixedInterval,
+      throughputPltItems,
+      setThroughputPltItems
+    );
+    handleDashboardErrorRatePltRequest(
+      http,
+      DSL,
+      fixedInterval,
+      errorRatePltItems,
+      setErrorRatePltItems
+    );
+    // service map should not be filtered by service name (https://github.com/opensearch-project/observability/issues/442)
+    const serviceMapDSL = _.cloneDeep(DSL);
+    serviceMapDSL.query.bool.must = serviceMapDSL.query.bool.must.filter(
+      (must: any) => must?.term?.serviceName == null
+    );
+    handleServiceMapRequest(
+      http,
+      serviceMapDSL,
+      serviceMap,
+      setServiceMap,
+      currService || filteredService
+    );
+  };
+
+  const addFilter = (filter: FilterType) => {
+    for (let i = 0; i < filters.length; i++) {
+      const addedFilter = filters[i];
+      if (addedFilter.field === filter.field) {
+        if (addedFilter.operator === filter.operator && addedFilter.value === filter.value) return;
+        const newFilters = [...filters];
+        newFilters.splice(i, 1, filter);
+        setFilters(newFilters);
+        return;
+      }
+    }
+    const newFilters = [...filters, filter];
+    setFilters(newFilters);
+  };
+
+  const addPercentileFilter = (condition = 'gte', additionalFilters = [] as FilterType[]) => {
+    if (tableItems.length === 0 || Object.keys(percentileMap).length === 0) return;
+    for (let i = 0; i < filters.length; i++) {
+      if (filters[i].custom) {
+        const newFilter = JSON.parse(JSON.stringify(filters[i]));
+        newFilter.custom.query.bool.should.forEach((should: any) =>
+          should.bool.must.forEach((must: any) => {
+            const range = must?.range?.['traceGroupFields.durationInNanos'];
+            if (range) {
+              const duration = range.lt || range.lte || range.gt || range.gte;
+              if (duration || duration === 0) {
+                must.range['traceGroupFields.durationInNanos'] = {
+                  [condition]: duration,
+                };
+              }
+            }
+          })
+        );
+        newFilter.value = condition === 'gte' ? '>= 95th' : '< 95th';
+        const newFilters = [...filters, ...additionalFilters];
+        newFilters.splice(i, 1, newFilter);
+        setFilters(newFilters);
+        return;
+      }
+    }
+
+    const percentileMaps = Object.keys(percentileMap).map((traceGroup) => ({
+      traceGroupName: traceGroup,
+      durationFilter: { [condition]: milliToNanoSec(percentileMap[traceGroup][1]) },
+    }));
+    const percentileFilter = getPercentileFilter(
+      percentileMaps,
+      condition === 'gte' ? '>= 95th' : '< 95th'
+    );
+    const newFilters = [...filters, percentileFilter, ...additionalFilters];
+    setFilters(newFilters);
+  };
+
+  return (
+    <>
+      <SearchBar
+        query={query}
+        filters={filters}
+        appConfigs={appConfigs}
+        setFilters={setFilters}
+        setQuery={setQuery}
+        startTime={startTime}
+        setStartTime={setStartTime}
+        endTime={endTime}
+        setEndTime={setEndTime}
+        refresh={refresh}
+        page={page}
+      />
+      <EuiSpacer size="m" />
+      {indicesExist ? (
+        <>
+          <DashboardTable
+            items={tableItems}
+            filters={filters}
+            addFilter={addFilter}
+            addPercentileFilter={addPercentileFilter}
+            setRedirect={setRedirect}
+            loading={loading}
+            page={page}
+          />
+          <EuiSpacer />
+          <EuiFlexGroup alignItems="baseline">
+            <EuiFlexItem grow={4}>
+              <ServiceMap
+                addFilter={addFilter}
+                serviceMap={serviceMap}
+                idSelected={serviceMapIdSelected}
+                setIdSelected={setServiceMapIdSelected}
+                currService={filteredService}
+                page={page}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiFlexGroup direction="column">
+                <EuiFlexItem>
+                  <ErrorRatePlt
+                    items={errorRatePltItems}
+                    setStartTime={setStartTime}
+                    setEndTime={setEndTime}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <ThroughputPlt
+                    items={throughputPltItems}
+                    setStartTime={setStartTime}
+                    setEndTime={setEndTime}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      ) : (
+        <MissingConfigurationMessage />
+      )}
+    </>
+  );
+}
diff --git a/dashboards-observability/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap b/dashboards-observability/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
index 25445b00a..f18ff21d9 100644
--- a/dashboards-observability/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
+++ b/dashboards-observability/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
@@ -39,11 +39,13 @@ exports[`Services component renders empty services page 1`] = `
   http={[MockFunction]}
   indicesExist={false}
   page="services"
-  parentBreadcrumb={
-    Object {
-      "href": "test#/",
-      "text": "test",
-    }
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
   }
   query=""
   setEndTime={[MockFunction]}
@@ -1699,11 +1701,13 @@ exports[`Services component renders services page 1`] = `
   http={[MockFunction]}
   indicesExist={true}
   page="services"
-  parentBreadcrumb={
-    Object {
-      "href": "test#/",
-      "text": "test",
-    }
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
   }
   query=""
   setEndTime={[MockFunction]}
diff --git a/dashboards-observability/public/components/trace_analytics/components/services/__tests__/service_view.test.tsx b/dashboards-observability/public/components/trace_analytics/components/services/__tests__/service_view.test.tsx
index f98e6bb7b..b48055548 100644
--- a/dashboards-observability/public/components/trace_analytics/components/services/__tests__/service_view.test.tsx
+++ b/dashboards-observability/public/components/trace_analytics/components/services/__tests__/service_view.test.tsx
@@ -23,7 +23,8 @@ describe('Service view component', () => {
       <ServiceView
         serviceName="order"
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        appConfigs={[]}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
         http={core.http}
         query=""
         setQuery={setQuery}
diff --git a/dashboards-observability/public/components/trace_analytics/components/services/__tests__/services.test.tsx b/dashboards-observability/public/components/trace_analytics/components/services/__tests__/services.test.tsx
index 352b84f8e..807293129 100644
--- a/dashboards-observability/public/components/trace_analytics/components/services/__tests__/services.test.tsx
+++ b/dashboards-observability/public/components/trace_analytics/components/services/__tests__/services.test.tsx
@@ -22,7 +22,7 @@ describe('Services component', () => {
       <Services
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
         query=""
         setQuery={setQuery}
         filters={[]}
@@ -50,7 +50,7 @@ describe('Services component', () => {
       <Services
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
         query=""
         setQuery={setQuery}
         filters={[]}
diff --git a/dashboards-observability/public/components/trace_analytics/components/services/service_view.tsx b/dashboards-observability/public/components/trace_analytics/components/services/service_view.tsx
index 904af464f..0cf103048 100644
--- a/dashboards-observability/public/components/trace_analytics/components/services/service_view.tsx
+++ b/dashboards-observability/public/components/trace_analytics/components/services/service_view.tsx
@@ -53,7 +53,7 @@ export function ServiceView(props: ServiceViewProps) {
 
   useEffect(() => {
     props.chrome.setBreadcrumbs([
-      props.parentBreadcrumb,
+      ...props.parentBreadcrumbs,
       {
         text: 'Trace analytics',
         href: '#/trace_analytics/home',
diff --git a/dashboards-observability/public/components/trace_analytics/components/services/services.tsx b/dashboards-observability/public/components/trace_analytics/components/services/services.tsx
index 178c279b5..da22c7064 100644
--- a/dashboards-observability/public/components/trace_analytics/components/services/services.tsx
+++ b/dashboards-observability/public/components/trace_analytics/components/services/services.tsx
@@ -2,6 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+/* eslint-disable react-hooks/exhaustive-deps */
 
 import { EuiSpacer, EuiTitle } from '@elastic/eui';
 import _ from 'lodash';
@@ -28,7 +29,7 @@ interface ServicesProps extends TraceAnalyticsComponentDeps {
 }
 
 export function Services(props: ServicesProps) {
-  const { appId, appName, parentBreadcrumb, page, switchToEditViz } = props;
+  const { appId, appName, parentBreadcrumbs, page, switchToEditViz } = props;
   const [tableItems, setTableItems] = useState([]);
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
   const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
@@ -62,7 +63,7 @@ export function Services(props: ServicesProps) {
       ];
 
   useEffect(() => {
-    props.chrome.setBreadcrumbs([parentBreadcrumb, ...breadCrumbs]);
+    props.chrome.setBreadcrumbs([...parentBreadcrumbs, ...breadCrumbs]);
     const validFilters = getValidFilterFields('services');
     props.setFilters([
       ...props.filters.map((filter) => ({
@@ -119,9 +120,8 @@ export function Services(props: ServicesProps) {
   const addFilter = (filter: FilterType) => {
     for (let i = 0; i < props.filters.length; i++) {
       const addedFilter = props.filters[i];
-      if ( addedFilter.field === filter.field) {
-        if (addedFilter.operator === filter.operator && addedFilter.value === filter.value)
-          return;
+      if (addedFilter.field === filter.field) {
+        if (addedFilter.operator === filter.operator && addedFilter.value === filter.value) return;
         const newFilters = [...props.filters];
         newFilters.splice(i, 1, filter);
         props.setFilters(newFilters);
diff --git a/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap b/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
index 2d06eee82..cab39bbf2 100644
--- a/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
+++ b/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
@@ -39,11 +39,13 @@ exports[`Traces component renders empty traces page 1`] = `
   http={[MockFunction]}
   indicesExist={false}
   page="traces"
-  parentBreadcrumb={
-    Object {
-      "href": "test#/",
-      "text": "test",
-    }
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
   }
   query=""
   setEndTime={[MockFunction]}
@@ -1159,11 +1161,13 @@ exports[`Traces component renders traces page 1`] = `
   http={[MockFunction]}
   indicesExist={true}
   page="traces"
-  parentBreadcrumb={
-    Object {
-      "href": "test#/",
-      "text": "test",
-    }
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
   }
   query=""
   setEndTime={[MockFunction]}
diff --git a/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/trace_view.test.tsx b/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/trace_view.test.tsx
index d3e514ce8..3d334e25c 100644
--- a/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/trace_view.test.tsx
+++ b/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/trace_view.test.tsx
@@ -18,7 +18,7 @@ describe('Trace view component', () => {
       <TraceView
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
         traceId="test"
       />
     );
diff --git a/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx b/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx
index 6ada90e0d..363d7851e 100644
--- a/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx
+++ b/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx
@@ -22,7 +22,7 @@ describe('Traces component', () => {
       <Traces
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
         query=""
         setQuery={setQuery}
         filters={[]}
@@ -50,7 +50,7 @@ describe('Traces component', () => {
       <Traces
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
         query=""
         setQuery={setQuery}
         filters={[]}
@@ -68,4 +68,3 @@ describe('Traces component', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });
-
diff --git a/dashboards-observability/public/components/trace_analytics/components/traces/trace_view.tsx b/dashboards-observability/public/components/trace_analytics/components/traces/trace_view.tsx
index 68b0ef8ef..67cf5f4e1 100644
--- a/dashboards-observability/public/components/trace_analytics/components/traces/trace_view.tsx
+++ b/dashboards-observability/public/components/trace_analytics/components/traces/trace_view.tsx
@@ -186,7 +186,7 @@ export function TraceView(props: TraceViewProps) {
 
   useEffect(() => {
     props.chrome.setBreadcrumbs([
-      props.parentBreadcrumb,
+      ...props.parentBreadcrumbs,
       {
         text: 'Trace analytics',
         href: '#/trace_analytics/home',
diff --git a/dashboards-observability/public/components/trace_analytics/components/traces/traces.tsx b/dashboards-observability/public/components/trace_analytics/components/traces/traces.tsx
index 5b7a77692..6841d068e 100644
--- a/dashboards-observability/public/components/trace_analytics/components/traces/traces.tsx
+++ b/dashboards-observability/public/components/trace_analytics/components/traces/traces.tsx
@@ -22,7 +22,7 @@ interface TracesProps extends TraceAnalyticsComponentDeps {
 }
 
 export function Traces(props: TracesProps) {
-  const { appId, appName, parentBreadcrumb, page, openTraceFlyout, switchToEditViz } = props;
+  const { appId, appName, parentBreadcrumbs, page, openTraceFlyout, switchToEditViz } = props;
   const [tableItems, setTableItems] = useState([]);
   const [redirect, setRedirect] = useState(true);
   const [loading, setLoading] = useState(false);
@@ -51,7 +51,7 @@ export function Traces(props: TracesProps) {
       ];
 
   useEffect(() => {
-    props.chrome.setBreadcrumbs([parentBreadcrumb, ...breadCrumbs]);
+    props.chrome.setBreadcrumbs([...parentBreadcrumbs, ...breadCrumbs]);
     const validFilters = getValidFilterFields('traces');
     props.setFilters([
       ...props.filters.map((filter) => ({
diff --git a/dashboards-observability/public/components/trace_analytics/home.tsx b/dashboards-observability/public/components/trace_analytics/home.tsx
index b1399392d..af94f16a8 100644
--- a/dashboards-observability/public/components/trace_analytics/home.tsx
+++ b/dashboards-observability/public/components/trace_analytics/home.tsx
@@ -20,7 +20,7 @@ import { Traces, TraceView } from './components/traces';
 import { handleIndicesExistRequest } from './requests/request_handler';
 
 export interface TraceAnalyticsCoreDeps {
-  parentBreadcrumb: ChromeBreadcrumb;
+  parentBreadcrumbs: ChromeBreadcrumb[];
   http: HttpStart;
   chrome: ChromeStart;
 }
@@ -66,8 +66,19 @@ export const Home = (props: HomeProps) => {
     handleIndicesExistRequest(props.http, setIndicesExist);
   }, []);
 
+  const childBreadcrumbs = [
+    {
+      text: 'Trace analytics',
+      href: '#/trace_analytics/home',
+    },
+    {
+      text: 'Dashboards',
+      href: '#/trace_analytics/home',
+    },
+  ];
+
   const commonProps: TraceAnalyticsComponentDeps = {
-    parentBreadcrumb: props.parentBreadcrumb,
+    parentBreadcrumbs: props.parentBreadcrumbs,
     http: props.http,
     chrome: props.chrome,
     query,
@@ -89,7 +100,7 @@ export const Home = (props: HomeProps) => {
         path={['/trace_analytics', '/trace_analytics/home']}
         render={(routerProps) => (
           <ObservabilitySideBar>
-            <Dashboard page="dashboard" {...commonProps} />
+            <Dashboard page="dashboard" childBreadcrumbs={childBreadcrumbs} {...commonProps} />
           </ObservabilitySideBar>
         )}
       />
@@ -106,7 +117,7 @@ export const Home = (props: HomeProps) => {
         path="/trace_analytics/traces/:id+"
         render={(routerProps) => (
           <TraceView
-            parentBreadcrumb={props.parentBreadcrumb}
+            parentBreadcrumbs={props.parentBreadcrumbs}
             chrome={props.chrome}
             http={props.http}
             traceId={decodeURIComponent(routerProps.match.params.id)}
diff --git a/dashboards-observability/public/components/trace_analytics/requests/request_handler.ts b/dashboards-observability/public/components/trace_analytics/requests/request_handler.ts
index 1fb1a3f90..a115cc787 100644
--- a/dashboards-observability/public/components/trace_analytics/requests/request_handler.ts
+++ b/dashboards-observability/public/components/trace_analytics/requests/request_handler.ts
@@ -2,6 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+/* eslint-disable no-console */
 
 import { CoreStart } from '../../../../../../src/core/public';
 import {
@@ -9,18 +10,18 @@ import {
   TRACE_ANALYTICS_INDICES_ROUTE,
 } from '../../../../common/constants/trace_analytics';
 
-export function handleDslRequest(http: CoreStart['http'], DSL, query) {
+export function handleDslRequest(http: CoreStart['http'], DSL: any, bodyQuery: any) {
   if (DSL?.query) {
-    query.query.bool.must.push(...DSL.query.bool.must);
-    query.query.bool.filter.push(...DSL.query.bool.filter);
-    query.query.bool.should.push(...DSL.query.bool.should);
-    query.query.bool.must_not.push(...DSL.query.bool.must_not);
+    bodyQuery.query.bool.must.push(...DSL.query.bool.must);
+    bodyQuery.query.bool.filter.push(...DSL.query.bool.filter);
+    bodyQuery.query.bool.should.push(...DSL.query.bool.should);
+    bodyQuery.query.bool.must_not.push(...DSL.query.bool.must_not);
     if (DSL.query.bool.minimum_should_match)
-      query.query.bool.minimum_should_match = DSL.query.bool.minimum_should_match;
+      bodyQuery.query.bool.minimum_should_match = DSL.query.bool.minimum_should_match;
   }
   return http
     .post(TRACE_ANALYTICS_DSL_ROUTE, {
-      body: JSON.stringify(query),
+      body: JSON.stringify(bodyQuery),
     })
     .catch((error) => console.error(error));
 }